/* ═══════════════ e'thix AI — Hover & interaction system ═══════════════
   One consistent language for every pointer interaction (driven by js/hover.js):

   1. Glide    — lists, menus, tabs and toolbars share ONE highlight that glides
                 between items with a smooth expo-out curve.
   2. Spotlight — cards and buttons get a soft light that follows the cursor,
                 plus a matching glow on the border.
   3. Magnetic — icons lean a few pixels toward the cursor.
   4. Press    — a quick, subtle press-in and a slow, smooth release.

   No scaling up, no bouncing, no wobbling icons.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --hv-ease:cubic-bezier(.22,1,.36,1);          /* expo-out: fast start, silky settle */
  --hv-glide:cubic-bezier(.25,1,.3,1);
  --hv-in:.16s;
  --hv:.42s;
  --hv-slow:.7s;
  --hv-tint:color-mix(in srgb,var(--ink) 5.5%,transparent);
  --hv-glide-bg:
    linear-gradient(120deg,color-mix(in srgb,var(--accent-b) 30%,transparent),color-mix(in srgb,var(--accent-a) 34%,transparent) 65%),
    color-mix(in srgb,var(--ink) 6%,transparent);
  --hv-glide-ring:inset 0 0 0 1px color-mix(in srgb,var(--accent-b) 38%,transparent),0 6px 16px -10px color-mix(in srgb,var(--accent-c) 60%,transparent);
  --spot-light:color-mix(in srgb,var(--accent-a) 60%,transparent);
  --spot-edge:color-mix(in srgb,var(--accent-b) 95%,transparent);
}
html[data-theme="dark"]{
  --hv-tint:color-mix(in srgb,#fff 6%,transparent);
  --hv-glide-bg:
    linear-gradient(120deg,color-mix(in srgb,var(--accent-b) 26%,transparent),color-mix(in srgb,#8FA0B8 14%,transparent) 70%),
    color-mix(in srgb,#fff 7%,transparent);
  --hv-glide-ring:inset 0 0 0 1px color-mix(in srgb,var(--accent-b) 30%,transparent);
  --spot-light:color-mix(in srgb,var(--accent-b) 20%,transparent);
  --spot-edge:color-mix(in srgb,var(--accent-hi,var(--accent-a)) 70%,transparent);
}
.shell[data-mode="agent"]{
  --hv-glide-bg:
    linear-gradient(120deg,rgba(183,198,221,.42),color-mix(in srgb,var(--accent-b) 12%,transparent) 70%),
    color-mix(in srgb,var(--ink) 4%,transparent);
}
html[data-theme="dark"] .shell[data-mode="agent"]{
  --hv-glide-bg:linear-gradient(120deg,rgba(143,160,184,.2),color-mix(in srgb,var(--accent-b) 8%,transparent) 70%),color-mix(in srgb,#fff 5%,transparent);
}

/* ═══════════ 1 · Glide highlight ═══════════ */
:where(.has-glide){position:relative}
.has-glide{isolation:isolate}
/* a single isolated layer: position animates on the compositor, size stays confined to this element */
.glide{
  position:absolute;left:0;top:0;width:0;height:0;z-index:-1;pointer-events:none;border-radius:12px;contain:layout paint style;
  background:var(--hv-glide-bg);box-shadow:var(--hv-glide-ring);
  opacity:0;scale:.94;
  transition:
    transform .5s var(--hv-glide),width .42s var(--hv-glide),height .42s var(--hv-glide),
    border-radius .35s var(--hv-ease),opacity .28s var(--hv-ease),scale .45s var(--hv-ease),background .3s;
  will-change:transform;
}
.glide.on{opacity:1;scale:1}
.glide.snap{transition:opacity .28s var(--hv-ease),scale .45s var(--hv-ease)}
.glide.danger{background:color-mix(in srgb,var(--danger) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 24%,transparent)}
/* dark toolbars / on-accent surfaces */
.pr-bar .glide,.call-controls .glide{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* items react while the glide sits under them */
.s-item,.s-item .s-ic,.set-link,.sl-ic,.sl-chev,.pop-item,.pop-item > .i,.legal-link,.legal-link > .i,.page-nav a,.legal-toc button,
.ws-tab,.sheet-tab,.rv-row,.thumb,.model-chip,.usage-pill,.ib{
  transition:color .28s var(--hv-ease),opacity .28s var(--hv-ease),background-color .35s var(--hv-ease),box-shadow .45s var(--hv-ease),
    border-color .35s var(--hv-ease),transform var(--hv) var(--hv-ease),translate var(--hv) var(--hv-ease);
}
.s-item.is-hover{color:var(--ink)}
.s-item.is-hover .s-ic{opacity:1;color:var(--gold-deep)}
.pop-item.is-hover > .i{color:var(--gold-deep);translate:calc(2px * var(--dx,1)) 0}
.pop-item.danger.is-hover > .i{color:var(--danger)}
html[dir="rtl"] .pop-item,html[dir="rtl"] .set-link,html[dir="rtl"] .legal-link{--dx:-1}
.set-link.is-hover{color:var(--ink)}
.set-link.is-hover .sl-ic{background:var(--surface);color:var(--gold-deep);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent-c) 45%,transparent)}
.set-link.is-hover .sl-chev{opacity:1;translate:calc(3px * var(--dx,1)) 0}
.set-link.on.is-hover .sl-ic{background:var(--g-accent);color:var(--on-accent)}
.legal-link.is-hover > .i:last-child{translate:calc(3px * var(--dx,1)) 0;color:var(--gold-deep)}
.page-nav a.is-hover,.legal-toc button.is-hover,.ws-tab.is-hover,.sheet-tab.is-hover,.rv-row.is-hover,.model-chip.is-hover{color:var(--ink)}
.usage-pill.is-hover{border-color:color-mix(in srgb,var(--accent-b) 45%,var(--line))}
.thumb.is-hover .slide{box-shadow:0 0 0 1.5px color-mix(in srgb,#7488A8 55%,transparent)}
.ib.is-hover{color:var(--ink)}
.ws-tab.on .glide,.sheet-tab.on + .glide{opacity:0}

/* ═══════════ Icon buttons (magnetic icon + solo highlight) ═══════════ */
.ib::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:var(--hv-glide-bg);box-shadow:var(--hv-glide-ring);opacity:0;scale:.9;
  transition:opacity .28s var(--hv-ease),scale .45s var(--hv-ease);
}
.ib > .i{translate:var(--ix,0px) var(--iy,0px);transition:translate .55s var(--hv-ease),transform .5s var(--spring),color .28s var(--hv-ease)}
.ib.on::before{opacity:.8;scale:1}
.ib:active:not(:disabled){transform:scale(.92);transition-duration:var(--hv-in)}
@media (hover:hover){
  .ib.solo:hover::before{opacity:1;scale:1}
  .ib.solo:hover{color:var(--ink)}
}

/* Message toolbar: tint the icon itself — no filled square, no gliding block */
.msg-actions .ib::before{content:none}
.msg-actions .ib{color:var(--muted)}
.msg-actions .ib.on{color:var(--gold-deep)}
@media (hover:hover){
  .msg-actions .ib:hover{color:var(--gold-deep);background:none}
  .msg-actions .ib:hover > .i{transform:scale(1.16)}
}
.msg-actions .ib:focus-visible{color:var(--gold-deep)}

/* ═══════════ 2 · Spotlight surfaces ═══════════ */
:where(.spot-host){position:relative}
.spot-host{isolation:isolate}
.spot-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .55s var(--hv-ease)}
.spot-fx::before,.spot-fx::after{content:"";position:absolute;inset:0;border-radius:inherit}
.spot-fx::before{background:radial-gradient(var(--spot-size,260px) circle at var(--mx,50%) var(--my,50%),var(--spot-light),transparent 68%)}
.spot-fx::after{
  padding:1px;background:radial-gradient(var(--edge-size,180px) circle at var(--mx,50%) var(--my,50%),var(--spot-edge),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.spot-host.is-spot > .spot-fx{opacity:1}
/* filled gradient buttons get a white light instead of gold-on-gold */
.b-primary > .spot-fx::before,.b-dark > .spot-fx::before,.b-danger > .spot-fx::before,.new-btn .nb-ic + .spot-fx::before{
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.42),transparent 65%);
}
.b-dark > .spot-fx::before{background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 65%)}
.b-primary > .spot-fx::after,.b-dark > .spot-fx::after,.b-danger > .spot-fx::after{background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 70%)}
.b-danger-ghost > .spot-fx::before{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),var(--danger-soft),transparent 68%)}
.b-danger-ghost > .spot-fx::after{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--danger) 70%,transparent),transparent 72%)}
.s-card,.plan-card,.faq-item{--spot-size:340px;--edge-size:240px}
.chip,.file-chip,.usage-pill{--spot-size:140px;--edge-size:110px}

/* ─── buttons ─── */
.b{transition:transform var(--hv-slow) var(--hv-ease),box-shadow .5s var(--hv-ease),background-position 1.2s var(--hv-ease),filter .3s,color .28s,border-color .35s,background-color .35s}
.b .flip-rtl,.b .i:last-child:not(:first-child){transition:translate .5s var(--hv-ease)}
.b:active:not(:disabled){transform:scale(.97);transition-duration:var(--hv-in)}
@media (hover:hover){
  .b-primary.is-spot:not(:disabled){background-position:70% 50%;box-shadow:0 12px 30px color-mix(in srgb,var(--accent-b) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}
  .b-dark.is-spot:not(:disabled){box-shadow:0 14px 32px rgba(28,34,43,.34),inset 0 1px 0 rgba(255,255,255,.12)}
  .b-ghost.is-spot:not(:disabled){box-shadow:var(--shadow-2)}
  .b-soft.is-spot:not(:disabled){background-color:color-mix(in srgb,var(--ink) 8%,transparent)}
  .b.is-spot:not(:disabled) .flip-rtl{translate:calc(3px * var(--dx,1)) 0}
  html[dir="rtl"] .b{--dx:-1}
}

/* ─── chips & pills ─── */
.chip{transition:transform var(--hv-slow) var(--hv-ease),border-color .35s var(--hv-ease),box-shadow .45s var(--hv-ease),color .28s,background-color .35s}
button.chip:active,a.chip:active{transform:scale(.96);transition-duration:var(--hv-in)}
@media (hover:hover){
  button.chip.is-spot:not(.on),a.chip.is-spot:not(.on){color:var(--ink);border-color:color-mix(in srgb,var(--accent-b) 40%,var(--line))}
}

/* ─── cards ─── */
.s-card,.plan-card,.persona-card,.ob-plan,.skill-card,.sp-card,.wse-btn,.kpi,.theme-card,.accent-pick,.lang-opt,.prov,.new-btn,.file-chip,.faq-item,.side-user{
  transition:transform var(--hv-slow) var(--hv-ease),box-shadow .55s var(--hv-ease),border-color .4s var(--hv-ease),background-color .4s var(--hv-ease),color .3s;
}
.s-card:active,.persona-card:active,.ob-plan:active,.wse-btn:active,.theme-card:active,.accent-pick:active,.lang-opt:active,.prov:active,.new-btn:active,button.file-chip:active,.side-user:active,a.sp-card:active{
  transform:scale(.985);transition-duration:var(--hv-in);
}
@media (hover:hover){
  .s-card.is-spot,.plan-card.is-spot,.persona-card.is-spot:not(.on),.ob-plan.is-spot:not(.on),.skill-card.is-spot,a.sp-card.is-spot,.wse-btn.is-spot,.kpi.is-spot,
  .theme-card.is-spot:not(.on),.accent-pick.is-spot:not(.on),.lang-opt.is-spot:not(.on),.prov.is-spot,button.file-chip.is-spot,.faq-item.is-spot{
    box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent-b) 32%,var(--line));
  }
  .new-btn.is-spot{box-shadow:var(--shadow-2)}
  .side-user.is-spot{background-color:var(--hv-tint)}
}

/* icon tiles fill with the gradient on hover (crossfade, no rotation) */
.sc-ic,.pc-ic,.sk-ic,.kpi-ic,.sp-ic,.wse-btn > span,.nb-ic,.fc-i,.lo-flag,.mi-ic{position:relative;isolation:isolate}
.sc-ic::after,.pc-ic::after,.sk-ic::after,.wse-btn > span::after,.lo-flag::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--g-mode,var(--g-accent));opacity:0;transition:opacity .5s var(--hv-ease);
}
.wse-btn > span::after{background:var(--g-agent)}
.sc-ic > .i,.pc-ic > .i,.sk-ic > .i,.wse-btn > span > .i,.fc-i > .i,.nb-ic > .i{transition:translate .6s var(--hv-ease),color .35s var(--hv-ease)}
@media (hover:hover){
  .s-card.is-spot .sc-ic,.persona-card.is-spot .pc-ic,.skill-card.is-spot .sk-ic,.lang-opt.is-spot .lo-flag{color:var(--on-accent)}
  .wse-btn.is-spot > span{color:#141922}
  .s-card.is-spot .sc-ic::after,.persona-card.is-spot .pc-ic::after,.skill-card.is-spot .sk-ic::after,.wse-btn.is-spot > span::after,.lang-opt.is-spot .lo-flag::after{opacity:1}
  .s-card.is-spot .sc-ic > .i,.persona-card.is-spot .pc-ic > .i,.skill-card.is-spot .sk-ic > .i,.wse-btn.is-spot > span > .i,
  button.file-chip.is-spot .fc-i > .i,.new-btn.is-spot .nb-ic > .i{translate:var(--ix,0px) var(--iy,0px)}
  .s-card.is-spot .sc-go{opacity:1;transform:none}
  .new-btn.is-spot .nb-ic{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--accent-b) 60%,transparent)}
  a.sp-card.is-spot .sp-go{color:var(--gold-deep);translate:calc(3px * var(--dx,1)) 0}
  button.file-chip.is-spot .fc-open{color:var(--gold-deep)}
}
.sc-go,.sp-go,.fc-open{transition:opacity .45s var(--hv-ease),transform .6s var(--hv-ease),translate .6s var(--hv-ease),color .3s}
html[dir="rtl"] .sp-card{--dx:-1}

/* ═══════════ 3 · Magnetic round controls ═══════════ */
.send-btn,.tb-avatar,.to-bottom,.cb-ic{translate:var(--tx,0px) var(--ty,0px)}
.send-btn{transition:translate .6s var(--hv-ease),transform .5s var(--hv-ease),box-shadow .45s var(--hv-ease),background .45s var(--hv-ease),color .3s}
.tb-avatar,.to-bottom{transition:translate .6s var(--hv-ease),transform .5s var(--hv-ease),box-shadow .45s var(--hv-ease),background-color .35s}
.cb-ic{transition:translate .6s var(--hv-ease),transform .45s var(--hv-ease),background .35s,box-shadow .45s}
.send-btn .sb-ic{translate:var(--ix,0px) var(--iy,0px);transition:translate .55s var(--hv-ease)}
.send-btn:active:not(:disabled),.tb-avatar:active,.to-bottom:active,.call-btn:active .cb-ic{transform:scale(.92);transition-duration:var(--hv-in)}
@media (hover:hover){
  .send-btn.is-mag:not(:disabled){box-shadow:0 12px 30px -6px color-mix(in srgb,var(--accent-b) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--accent-b) 14%,transparent)}
  .send-btn[data-state="call"].is-mag{box-shadow:0 12px 28px -8px rgba(28,34,43,.45),0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent)}
  .tb-avatar.is-mag{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-b) 20%,transparent)}
  .to-bottom.is-mag{box-shadow:var(--shadow-2),0 0 0 4px color-mix(in srgb,var(--accent-b) 16%,transparent)}
  .call-btn.is-mag:not(.end):not(.on) .cb-ic{background:rgba(255,255,255,.18)}
  .call-btn.end.is-mag .cb-ic{box-shadow:0 16px 40px rgba(208,69,58,.55),0 0 0 5px rgba(240,138,110,.18)}
}

/* ═══════════ Small controls ═══════════ */
.ti-x,.wt-x{transition:background-color .3s var(--hv-ease),color .3s var(--hv-ease),opacity .25s var(--hv-ease)}
.ti-x > .i,.wt-x > .i{transition:rotate .5s var(--hv-ease)}
@media (hover:hover){
  .ti-x:hover,.wt-x:hover{background:var(--danger-soft);color:var(--danger)}
  .ti-x:hover > .i,.wt-x:hover > .i{rotate:90deg}
  .code-copy:hover{background:rgba(255,255,255,.1);color:#fff}
  .theme-dot:hover:not(.on){box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,#7488A8 35%,transparent)}
  .swatch:hover:not(.on){box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent-c) 35%,transparent)}
  .uptime i:hover{filter:brightness(1.15) saturate(1.2)}
  .att-img:hover img{scale:1.05}
  .att-img:hover{box-shadow:var(--shadow-2)}
  .input:hover:not(:focus):not([aria-invalid="true"]),.textarea:hover:not(:focus),.select:hover:not(:focus){border-color:color-mix(in srgb,var(--accent-b) 38%,var(--line))}
  .seg button:not(.on):hover .i{color:var(--gold-deep)}
}
.theme-dot,.swatch{transition:box-shadow .4s var(--hv-ease),transform .4s var(--hv-ease)}
.att-img{transition:box-shadow .5s var(--hv-ease)}
.att-img img{transition:scale .9s var(--hv-ease)}
.att-img:active{transform:scale(.985)}
.seg button .i{transition:color .3s var(--hv-ease),transform .5s var(--spring)}

/* animated underline for footer / quiet links */
.pf-grid nav a,.auth-legal a{
  text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px;
  transition:background-size .5s var(--hv-ease),color .3s var(--hv-ease);padding-bottom:1px;
}
html[dir="rtl"] .pf-grid nav a,html[dir="rtl"] .auth-legal a{background-position:100% 100%}
@media (hover:hover){.pf-grid nav a:hover,.auth-legal a:hover{background-size:100% 1px;color:var(--ink);text-decoration:none}}

/* ═══════════ Tooltips (single floating element — never clipped by scroll containers) ═══════════ */
[data-tip]{position:relative}
.tip{
  position:fixed;z-index:950;top:0;left:0;pointer-events:none;
  padding:6px 10px;border-radius:9px;max-width:min(280px,70vw);white-space:nowrap;
  font-size:11.5px;font-weight:600;line-height:1.35;letter-spacing:.01em;
  color:#F3EDE3;background:linear-gradient(180deg,#39424F,#262D37);
  box-shadow:0 10px 24px -6px rgba(18,22,28,.35),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translate3d(var(--tip-x,0),calc(var(--tip-y,0) + var(--tip-slide,-3px)),0);
  transition:opacity .16s var(--hv-ease),transform .16s var(--hv-ease);
}
.tip.on{opacity:1;--tip-slide:0px}
.tip.wrap{white-space:normal;text-align:center}
html[data-theme="dark"] .tip{background:linear-gradient(180deg,#4A5361,#3A424E)}

/* ═══════════ Touch + reduced motion ═══════════ */
@media (hover:none){.glide,.spot-fx{display:none}}
html.reduce-motion .glide{transition:opacity .01ms}
html.reduce-motion .ib > .i,html.reduce-motion .send-btn,html.reduce-motion .tb-avatar,html.reduce-motion .to-bottom,html.reduce-motion .cb-ic{translate:none}