/* ═══════════════ e'thix AI — Auth, app shell, chat, composer, call ═══════════════ */

html[dir="rtl"] .flip-rtl use,html[dir="rtl"] use.flip-rtl{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:10px}
.brand .wordmark{font-size:24px}
.brand-ai{height:18px;font-size:9px;padding:0 7px}

/* ═══════════ Auth ═══════════ */
.auth-view{overflow:hidden}
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);height:100%}
.auth-art{position:relative;overflow:hidden;background:var(--g-ink);color:#F1EBE1;isolation:isolate}
.auth-art .aurora{--aurora-1:rgba(233,196,160,.5);--aurora-2:rgba(201,174,126,.42);--aurora-3:rgba(116,136,168,.55);--aurora-4:rgba(217,164,143,.4)}
.auth-grain{position:absolute;inset:0;z-index:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("/ethixd/img/noise-160.svg")}
.auth-art-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:40px clamp(28px,5vw,64px)}
.auth-brand{display:inline-flex;align-items:center;gap:10px}
.auth-art .wordmark{color:#F1EBE1;font-size:30px}
.auth-copy{margin-top:auto;max-width:540px;animation:rise-in .9s var(--ios) both .1s}
.auth-copy .kicker{color:#E2CCA2}
.auth-hero{font-size:clamp(34px,4.2vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.025em;margin-top:14px;text-wrap:balance}
html[lang="ar"] .auth-hero{line-height:1.3;letter-spacing:0}
.auth-hero .grad-text{background:linear-gradient(120deg,#F3E2BD,#C9AE7E 45%,#B7C6DD);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-lead{margin-top:18px;font-size:16.5px;line-height:1.7;color:rgba(241,235,225,.72);max-width:460px}
.auth-floats{position:relative;height:230px;margin-top:38px}
.float-card{
  position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px rgba(0,0,0,.25);animation:float 7s ease-in-out infinite,rise-in .9s var(--ios) both;
}
html[dir="rtl"] .float-card{padding:12px 12px 12px 18px}
.float-card b{display:block;font-size:14px}
.float-card small{font-size:12px;color:rgba(241,235,225,.62)}
.fc-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#F3E2BD,#9A7E51);color:#1B2028}
.fc-1{top:0;inset-inline-start:0;animation-delay:0s,.2s}
.fc-2{top:78px;inset-inline-start:36%;animation-delay:-2.4s,.35s}
.fc-2 .fc-ic{background:linear-gradient(135deg,#D1DCEB,#56667F);color:#fff}
.fc-3{top:158px;inset-inline-start:10%;animation-delay:-4.6s,.5s}
.fc-3 .fc-ic{background:linear-gradient(135deg,#F4D3C4,#A8705C)}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}}

.auth-main{display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:20px 24px calc(20px + env(safe-area-inset-bottom));position:relative;outline:none}
.auth-main::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 40% at 80% 0%,color-mix(in srgb,var(--accent-a) 30%,transparent),transparent 70%)}
.auth-top{width:100%;max-width:470px;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px}
.auth-brand-sm{display:none;margin-inline-end:auto}
.auth-brand-sm .wordmark{font-size:24px}
.auth-card{width:100%;max-width:470px;margin:auto 0;border-radius:30px;padding:30px 30px 26px;--gb-fill:var(--surface);box-shadow:var(--shadow-3);animation:gb-spin 8s linear infinite,rise-in .7s var(--ios) both}
.auth-stage{position:relative;transition:height .5s var(--ios);overflow:hidden;margin:-6px;padding:6px}
.auth-step{--dx:1;display:grid;gap:18px}
html[dir="rtl"] .auth-step{--dx:-1}
.step-in-fwd{animation:step-in .55s var(--ios) both;--from:28px}
.step-in-back{animation:step-in .55s var(--ios) both;--from:-28px}
.step-out-fwd{animation:step-out .35s var(--ease) both;--to:-28px}
.step-out-back{animation:step-out .35s var(--ease) both;--to:28px}
@keyframes step-in{from{opacity:0;transform:translateX(calc(var(--from) * var(--dx)))}}
@keyframes step-out{to{opacity:0;transform:translateX(calc(var(--to) * var(--dx)))}}
.auth-head{text-align:center;display:grid;justify-items:center;gap:8px}
.auth-head h2{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
.auth-head p{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.auth-orb{
  width:64px;height:64px;border-radius:22px;display:grid;place-items:center;color:#1B2028;position:relative;margin-bottom:4px;
  background:var(--g-accent);box-shadow:0 14px 34px color-mix(in srgb,var(--accent-b) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.55);
}
.auth-orb::after{content:"";position:absolute;inset:-6px;border-radius:26px;border:1px solid color-mix(in srgb,var(--accent-b) 40%,transparent);animation:orb-breathe 3s ease-in-out infinite}
.auth-orb .i{width:28px;height:28px}
@keyframes orb-breathe{50%{transform:scale(1.08);opacity:.4}}
.providers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prov{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 12px;border-radius:15px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);isolation:isolate;overflow:hidden;
  transition:transform .5s var(--spring),box-shadow var(--t) var(--ease),border-color var(--t-fast);animation:rise-in .6s var(--ios) both;animation-delay:calc(var(--i) * 50ms + .1s);
}
.prov::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-accent-soft);opacity:0;transition:opacity var(--t) var(--ease)}
.prov .brand-i{transition:transform .5s var(--spring)}
html[data-theme="dark"] .prov [href="#b-apple"],html[data-theme="dark"] .prov [href="#b-github"]{color:#fff}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.auth-form{display:grid;gap:12px}
.input-lg{min-height:52px;font-size:15px;border-radius:15px}
.auth-consent{display:grid;gap:10px}
.auth-fine{font-size:12.5px;line-height:1.6;color:var(--muted);text-align:center}
.auth-fine a{color:var(--gold-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.field-shake{animation:shake .5s var(--ease)}
.up-x{position:absolute;top:6px;inset-inline-end:6px;z-index:2;color:var(--ink-soft);opacity:.65}
.up-x:hover{opacity:1}
.upsell-card{position:relative}
.auth-demo{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.55}
.auth-demo .i{width:14px;height:14px;margin-top:2px;color:var(--gold-deep)}
.auth-demo.small{justify-content:center}
.auth-back{position:absolute;top:0;inset-inline-start:0;z-index:2}
.auth-legal{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.auth-legal a{text-decoration:none;color:var(--ink-soft);transition:color var(--t-fast)}
.auth-legal a:hover{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}

.auth-connect{display:grid;justify-items:center;text-align:center;gap:12px;padding:10px 0}
.auth-connect h2{font-size:22px;font-weight:700}
.conn-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;position:relative;margin-bottom:8px}
.conn-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 20%,var(--accent-a),var(--accent-b),#8FA0B8,transparent 90%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:spin 1.1s linear infinite}
.conn-ring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 2px 8px rgba(0,0,0,.08)}
.conn-logo{position:relative;z-index:1;transition:transform .6s var(--spring)}
.conn-logo .brand-i{width:40px;height:40px}
.conn-ring.ok::before{animation:none;background:var(--g-accent);-webkit-mask:none;mask:none;transform:scale(1.04);transition:transform .5s var(--spring)}
.conn-ring.ok .conn-logo{transform:scale(1.1)}
.conn-steps{list-style:none;display:grid;gap:10px;margin:8px 0 6px;padding:0;text-align:start;width:100%;max-width:280px}
.conn-steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);transition:color var(--t)}
.cs-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative;transition:all var(--t) var(--spring)}
.conn-steps li.active{color:var(--ink)}
.conn-steps li.active .cs-dot{border-color:var(--accent-b);border-top-color:transparent;animation:spin .8s linear infinite}
.conn-steps li.done{color:var(--ink-soft)}
.conn-steps li.done .cs-dot{background:var(--g-accent);border-color:transparent;transform:scale(1.05)}
.conn-steps li.done .cs-dot::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

.otp-form{display:grid;gap:14px;justify-items:center}
.otp{display:flex;gap:9px;border:0;padding:0;margin:0;direction:ltr}
.otp-box{
  width:50px;height:60px;border-radius:15px;border:1.5px solid var(--line);background:var(--surface-2);text-align:center;font-size:24px;font-weight:700;
  font-family:'Montserrat',var(--lt);outline:none;transition:border-color var(--t-fast),box-shadow var(--t),transform .4s var(--spring);color:var(--ink);
}
.otp-box:focus{border-color:var(--accent-b);box-shadow:var(--ring);transform:translateY(-2px)}
.otp-box.filled{background:var(--g-accent-soft);border-color:color-mix(in srgb,var(--accent-b) 70%,transparent);animation:otp-pop .4s var(--spring)}
@keyframes otp-pop{40%{transform:scale(1.12)}}
.otp-status{display:flex;align-items:center;gap:8px;min-height:24px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.otp-status.ok{color:var(--ok)}
.otp-status .i{width:18px;height:18px}

.ob-dots{display:flex;justify-content:center;gap:6px}
.ob-dots span{width:8px;height:8px;border-radius:8px;background:var(--line);transition:width .5s var(--spring),background var(--t)}
.ob-dots span.on{background:var(--g-accent)}
.ob-dots span.on:last-of-type,.ob-dots span.on:has(+ span:not(.on)){width:26px}
.persona-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.persona-grid.wide{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.persona-card{
  position:relative;display:grid;gap:4px;text-align:start;padding:14px;border-radius:16px;background:var(--surface-2);border:1.5px solid var(--line);
  transition:transform .5s var(--spring),border-color var(--t-fast),box-shadow var(--t);animation:rise-in .5s var(--ios) both;animation-delay:calc(var(--i) * 40ms);
}
.persona-card b{font-size:14px}
.persona-card small{font-size:12px;color:var(--muted);line-height:1.45}
.pc-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--gold-deep);margin-bottom:4px;transition:background var(--t),color var(--t),transform .5s var(--spring)}
.persona-card.on{border-color:transparent;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--g-accent) border-box;box-shadow:0 10px 26px color-mix(in srgb,var(--accent-b) 25%,transparent)}
.persona-card.on .pc-ic{background:var(--g-accent);color:var(--on-accent);transform:scale(1.06)}
.ob-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-plan{display:grid;gap:8px;text-align:start;padding:16px;border-radius:18px;background:var(--surface-2);border:1.5px solid var(--line);transition:transform .5s var(--spring),border-color var(--t),box-shadow var(--t)}
.ob-plan.on{border-color:transparent;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--g-accent) border-box;box-shadow:0 12px 28px color-mix(in srgb,var(--accent-b) 25%,transparent)}
.ob-plan-top{display:flex;gap:6px;flex-wrap:wrap}
.ob-price{font-size:26px;font-weight:700;font-family:'Montserrat',var(--lt)}
.ob-price small{font-size:12px;font-weight:500;color:var(--muted);margin-inline-start:4px}
.ob-feat{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-soft)}
.ob-feat .i{width:14px;height:14px;color:var(--gold-deep)}
.ob-compare{justify-self:center}

/* ═══════════ Shell ═══════════ */
.shell{display:flex;height:100%;position:relative;--g-mode:var(--g-accent)}
.shell[data-mode="agent"]{--g-mode:var(--g-agent)}

/* sidebar */
.side{
  width:282px;flex:none;display:flex;flex-direction:column;background:var(--sunken);border-inline-end:1px solid var(--line);position:relative;z-index:40;
  transition:margin-inline-start .55s var(--ios),opacity .35s var(--ease),transform .55s var(--ios);
}
.side::before{content:"";position:absolute;inset:0 0 auto;height:220px;pointer-events:none;background:radial-gradient(80% 100% at 20% 0%,color-mix(in srgb,var(--accent-a) 22%,transparent),transparent 70%);transition:background .6s}
.shell[data-mode="agent"] .side::before{background:radial-gradient(80% 100% at 20% 0%,rgba(143,160,184,.22),transparent 70%)}
.shell.collapsed .side{margin-inline-start:-282px;opacity:0;pointer-events:none}
.side-head{display:flex;align-items:center;gap:6px;padding:14px 12px 8px 16px;min-height:60px;position:relative}
html[dir="rtl"] .side-head{padding:14px 16px 8px 12px}
.side-head .brand{margin-inline-end:auto}
.side-x{display:none}
.new-btn{
  position:relative;display:flex;align-items:center;gap:10px;margin:6px 12px 10px;min-height:46px;padding:0 12px;border-radius:15px;font-weight:600;font-size:14px;
  color:var(--ink);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--g-mode) border-box;border:1.5px solid transparent;
  box-shadow:var(--shadow-1);transition:transform .5s var(--spring),box-shadow var(--t);
}
.nb-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--g-mode);color:var(--on-accent);transition:transform .6s var(--spring)}
.shell[data-mode="agent"] .nb-ic{color:#141922}
.nb-ic .i{width:16px;height:16px;stroke-width:2.4}
.nb-kbd{margin-inline-start:auto;font-size:10px;height:20px;opacity:.75}
.side-search{margin:0 12px 6px}
.side-search .input{min-height:40px;border-radius:12px;font-size:13.5px;background:var(--surface)}
.side-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 12px}
.s-group{padding-top:12px}
.s-label{display:flex;align-items:center;gap:6px;padding:2px 10px 6px;font-size:11.5px;font-weight:600;color:var(--gold-text);letter-spacing:.03em}
html:not([lang="ar"]) .s-label{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-family:'Montserrat',var(--lt)}
.s-label .i{width:12px;height:12px}
.s-row{position:relative;animation:item-in .45s var(--ios) both;animation-delay:calc(var(--i) * 18ms)}
.s-item{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:0 40px 0 10px;border-radius:11px;text-decoration:none;color:var(--ink-soft);font-size:13.8px;position:relative;
}
html[dir="rtl"] .s-item{padding:0 10px 0 40px}
.s-item.on{color:var(--ink);font-weight:600;background-color:var(--surface);box-shadow:var(--shadow-1)}
.s-item.on::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--g-mode)}
.s-ic{width:15px;height:15px;opacity:.5;transition:opacity var(--t-fast),transform .5s var(--spring)}
.s-item.on .s-ic{opacity:1;color:var(--gold-deep)}
.s-spin{width:15px;height:15px}
.s-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-count{font-size:10.5px;font-weight:700;min-width:20px;height:18px;padding:0 6px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft)}
.s-more{position:absolute;top:4px;inset-inline-end:4px;opacity:0;transition:opacity var(--t-fast),transform .5s var(--spring)}
.s-row:hover .s-more,.s-row:focus-within .s-more,.s-row.on .s-more,.s-more[aria-expanded="true"]{opacity:1}
.side-empty{padding:40px 12px}
.side-upsell{padding:0 12px 10px}

/* ── Review in the conversations column ──
   It takes the column over rather than squeezing in beside the list, and the
   list comes straight back when it closes. */
.side-review{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
.side.reviewing .side-review{display:flex;animation:side-rv-in .42s var(--ios) both}
.side.reviewing .side-list,.side.reviewing .side-upsell{display:none}
.side-review .rvw{flex:1;min-height:0;display:flex;flex-direction:column}
html[dir="rtl"] .side-review{--dx:-1}
@keyframes side-rv-in{
  from{opacity:0;transform:translateX(calc(16px * var(--dx,1)))}
  to{opacity:1;transform:none}
}
html.reduce-motion .side.reviewing .side-review{animation:none}
.upsell-card{
  position:relative;display:grid;gap:4px;padding:14px;border-radius:18px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-a) 55%,var(--surface)),var(--surface) 60%,color-mix(in srgb,#8FA0B8 30%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--accent-b) 35%,transparent);
}
.upsell-card::after{content:"";position:absolute;width:140px;height:140px;inset-inline-end:-50px;top:-60px;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent-b) 55%,transparent),transparent 70%);animation:drift-c 12s ease-in-out infinite alternate}
.upsell-card b{font-size:14px}
.upsell-card small{font-size:12px;color:var(--ink-soft);line-height:1.45;margin-bottom:8px}
.up-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--g-accent);color:var(--on-accent);margin-bottom:4px}
.up-ic .i{width:16px;height:16px}
.side-user{display:flex;align-items:center;gap:10px;margin:0 8px 10px;padding:8px;border-radius:14px;text-align:start;border-top:1px solid var(--line);border-radius:0 0 14px 14px;padding-top:12px;transition:background-color var(--t)}
.su-txt{flex:1;min-width:0;display:grid;gap:3px;justify-items:start}
.su-txt b{font-size:14px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-chev{color:var(--muted);transition:transform .5s var(--spring)}
.side-user[aria-expanded="true"] .su-chev{transform:rotate(180deg)}
.side-user .avatar{transition:transform .5s var(--spring)}
.scrim{display:none}

/* ── Desktop: one sidebar control, the one inside the sidebar ──
   Collapsed, the sidebar stays as a slim rail (expand · new · account) so there
   is always a way back without a second toggle in the top bar. */
@media (min-width:821px){
  .tb-start [data-act="toggle-side"]{display:none}
  .shell.collapsed .topbar .tb-new{display:none}
  .side{transition:width .5s var(--ios),margin-inline-start .55s var(--ios),opacity .35s var(--ease)}
  .shell.collapsed .side{width:68px;margin-inline-start:0;opacity:1;pointer-events:auto}
  .shell.collapsed .side-head{flex-direction:column;justify-content:flex-start;padding:14px 0 6px;min-height:0;gap:8px}
  .shell.collapsed .side-head .brand,.shell.collapsed .side-search,.shell.collapsed .side-list,.shell.collapsed .side-review,
  .shell.collapsed .side-upsell,.shell.collapsed .nb-label,.shell.collapsed .nb-kbd,.shell.collapsed .su-txt,.shell.collapsed .su-chev{display:none}
  .shell.collapsed .new-btn{margin:4px auto 10px;width:46px;padding:0;justify-content:center}
  .shell.collapsed .side-user{margin:auto 10px 12px;padding:6px;justify-content:center;border-top:0;border-radius:14px}
  .side-fold .i{transition:transform .5s var(--spring)}
  .shell.collapsed .side-fold .i{transform:scaleX(-1)}
}

/* ── Ask card: e'thix asks before it answers ── */
.ask-card{margin:12px 0 4px;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent-b) 35%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-a) 16%,var(--surface)),var(--surface));
  box-shadow:var(--shadow-1);padding:12px;display:grid;gap:10px;animation:fade-up .5s var(--ios) both}
.ask-q{display:flex;align-items:center;gap:10px;font-size:14.5px}
.ask-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--g-accent);color:var(--on-accent)}
.ask-ic .i{width:16px;height:16px}
.ask-opts{display:grid;gap:6px}
.ask-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:13px;text-align:start;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  transition:border-color var(--t),background-color var(--t),box-shadow var(--t);animation:item-in .4s var(--ios) both;animation-delay:calc(var(--i) * 45ms)}
.ask-n{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-soft);transition:background var(--t),color var(--t)}
.ask-n .i{width:14px;height:14px;stroke-width:2.6}
.ask-t{flex:1;min-width:0;display:grid;gap:1px}
.ask-t b{font-size:13.5px}
.ask-t small{font-size:12px;color:var(--muted);line-height:1.4}
.ask-go{width:16px;height:16px;color:var(--muted);opacity:0;transform:translateX(calc(-4px * var(--dx,1)));transition:opacity var(--t),transform .45s var(--spring)}
html[dir="rtl"] .ask-opt{--dx:-1}
@media (hover:hover){
  .ask-opt:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent-b) 55%,var(--line));box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent-c) 45%,transparent)}
  .ask-opt:not(:disabled):hover .ask-n{background:var(--g-accent);color:var(--on-accent)}
  .ask-opt:not(:disabled):hover .ask-go{opacity:1;transform:none}
}
.ask-opt:focus-visible .ask-n{background:var(--g-accent);color:var(--on-accent)}
.ask-opt.on{border-color:color-mix(in srgb,var(--accent-b) 60%,var(--line))}
.ask-opt.on .ask-n{background:var(--g-accent);color:var(--on-accent)}
.ask-opt:disabled{cursor:default}
.ask-other{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:10px;font-size:12.5px;color:var(--ink-soft);
  transition:color var(--t-fast),background var(--t-fast)}
.ask-other .i{width:14px;height:14px}
@media (hover:hover){.ask-other:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}}
.ask-card.done{background:var(--surface);gap:8px;padding:10px}
.ask-card.done .ask-q{font-size:13px;color:var(--ink-soft)}
.ask-card.done .ask-custom{cursor:default}
.ask-own{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;color:var(--muted)}
.ask-own .i{width:14px;height:14px}

/* ── Case file: what e'thix knows about the case, what is missing, what to answer next (built in chat.js) ── */
.case-file{margin:12px 0 4px;max-width:100%;min-width:0;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--accent-b) 28%,var(--line));
  background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.cf-sum{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;border-radius:var(--r-lg)}
.cf-sum::-webkit-details-marker{display:none}
.cf-sum:focus-visible{outline-offset:-2px}
.cf-ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--g-accent);color:var(--on-accent)}
.cf-ic .i{width:15px;height:15px}
.cf-title{font-size:13.5px}
.cf-count{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-chev{width:16px;height:16px;flex:none;color:var(--muted);transition:transform var(--t) var(--ios)}
.case-file[open] .cf-chev{transform:rotate(180deg)}
.cf-body{display:grid;gap:12px;padding:2px 12px 12px}
.cf-sec{display:grid;gap:8px;min-width:0}
.cf-h{margin:0;font-size:12px;font-weight:700;color:var(--ink-soft)}
.cf-facts{display:grid;gap:6px;margin:0}
.cf-fact{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:8px 10px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent-a) 10%,var(--surface));border:1px solid var(--line);min-width:0}
.cf-fact dt{font-size:12.5px;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere}
.cf-fact dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;min-width:0}
.cf-val{font-size:13.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.cf-src{font-size:11px;color:var(--gold-text);padding:1px 7px;border-radius:20px;white-space:nowrap;
  background:color-mix(in srgb,var(--accent-b) 14%,transparent)}
.cf-ask{margin:0}
.cf-ask .ask-q{font-size:13.5px}
.cf-ask .ask-go{opacity:1;transform:none}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cf-chip{max-width:100%;font-size:12px;color:var(--muted);padding:3px 10px;border-radius:20px;overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px dashed var(--line)}
/* what this turn changed: a short strip at the top of the case file, and a marker on the rows it touched */
.cf-changes{padding:9px 10px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent-a) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent-b) 30%,var(--line))}
.cf-chg{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.cf-chg li{position:relative;padding-inline-start:12px;font-size:12.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.cf-chg li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent-c)}
.cf-fact[data-change]{border-color:color-mix(in srgb,var(--accent-b) 55%,var(--line));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent-c) 70%,transparent)}
html[dir="rtl"] .cf-fact[data-change]{box-shadow:inset -3px 0 0 color-mix(in srgb,var(--accent-c) 70%,transparent)}
.cf-tag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;white-space:nowrap;color:var(--on-accent);background:var(--g-accent)}
.cf-fact[data-change="fixed"] .cf-tag{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)}
@media (prefers-reduced-motion:reduce){
  .case-file .cf-chev,.case-file .ask-card,.case-file .ask-opt,.case-file .ask-go{animation:none;transition:none}
}

/* ── Consultation activity: what the server is actually doing, then how the answer was prepared (chat.js) ── */
.cp-live{min-width:0;padding:4px 0}
.cp-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;min-width:0}
.cp-step{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;font-size:13.5px;line-height:1.55;color:var(--ink-soft);min-width:0}
.cp-mark{width:18px;height:18px;margin-top:2px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.cp-mark .i{width:11px;height:11px;stroke-width:2.8}
.cp-now .cp-mark,.cp-degraded .cp-mark{background:color-mix(in srgb,var(--accent-b) 24%,transparent)}
.cp-degraded .cp-t{color:var(--ink)}
.cp-now .cp-mark::after,.cp-degraded .cp-mark::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-c);animation:cp-pulse 1.4s var(--ease) infinite}
.cp-body{display:grid;gap:5px;min-width:0}
.cp-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.cp-t{min-width:0;overflow-wrap:anywhere}
.cp-now .cp-t{font-weight:600}
.cp-line .wait-time{font-size:12px;color:var(--muted);white-space:nowrap}
.cp-line .wait-time:empty{display:none}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cp-chip{max-width:100%;font-size:12px;line-height:1.5;padding:2px 9px;border-radius:20px;overflow-wrap:anywhere;color:var(--ink);
  background:color-mix(in srgb,var(--accent-a) 20%,transparent);border:1px solid color-mix(in srgb,var(--accent-b) 30%,var(--line))}
.cp-sum{margin-top:8px;min-width:0;max-width:100%}
.cp-sum>summary{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:4px 10px;border-radius:var(--r);cursor:pointer;list-style:none;
  font-size:12.5px;color:var(--muted);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.cp-sum>summary::-webkit-details-marker{display:none}
.cp-sum>summary .i{width:13px;height:13px;flex:none}
.cp-sum-t{min-width:0;overflow-wrap:anywhere}
.cp-chev{transition:transform var(--t) var(--ios)}
.cp-sum[open] .cp-chev{transform:rotate(180deg)}
.cp-sum .cp-list{margin-top:10px}
@keyframes cp-pulse{50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){
  .cp-now .cp-mark::after,.cp-degraded .cp-mark::after,.cp-now .shimmer-text{animation:none}
  .cp-chev{transition:none}
}

/* ── Source cards: «نص النظام», the law's words quoted under the answer, apart from the analysis (chat.js) ── */
.src-block{margin-top:14px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);display:grid;gap:7px;min-width:0}
.src-h{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.src-h .i{width:14px;height:14px;color:var(--muted)}
.src-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.src-card{min-width:0;border:1px solid var(--line);border-inline-start:3px solid color-mix(in srgb,var(--ink) 22%,var(--line));
  border-radius:var(--r-sm);background:var(--surface-2)}
.src-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;width:100%;padding:8px 10px;
  text-align:start;color:var(--ink);border-radius:var(--r-sm)}
.src-head:focus-visible{outline-offset:-2px}
.src-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;font-size:12.5px}
.src-law{font-weight:700;overflow-wrap:anywhere;min-width:0}
.src-art{color:var(--gold-text);font-weight:700;white-space:nowrap}
.src-ex{grid-column:1;min-width:0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-ex::before{content:"«"}
.src-card.open .src-ex{display:none}
.src-chev{grid-column:2;grid-row:1/span 2;width:15px;height:15px;color:var(--muted);transition:transform var(--t) var(--ios)}
.src-card.open .src-chev{transform:rotate(180deg)}
.src-body{padding:0 10px 10px;min-width:0}
.src-text{margin:0;padding:9px 11px;border-radius:var(--r-xs);background:var(--surface);font-size:13px;line-height:1.85;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.src-status{margin:0 0 6px;font-size:12px;color:var(--muted)}
.src-more{justify-self:start;padding:4px 8px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--gold-text)}
@media (hover:hover){.src-more:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}}
@media (prefers-reduced-motion:reduce){.src-chev{transition:none}}

/* ── A sectioned answer: the bottom line as a lead, section titles as headings, statuses as pills (chat.js) ── */
.content .ans-lead{margin:2px 0 14px;padding:10px 12px;border-radius:var(--r);font-weight:600;color:var(--ink);
  background:color-mix(in srgb,var(--accent-a) 24%,var(--surface));border:1px solid color-mix(in srgb,var(--accent-b) 40%,var(--line))}
.ans-lead-k{color:var(--gold-text);font-weight:800}
.content .ans-h{display:flex;align-items:center;gap:8px;margin:18px 0 6px;font-size:14.5px;font-weight:800;line-height:1.5;color:var(--ink)}
.content .ans-h::before{content:"";flex:none;width:4px;height:1.05em;border-radius:2px;background:var(--g-accent)}
.st-pill{display:inline-block;margin:0;padding:0 8px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.75;white-space:nowrap;
  color:var(--ink-soft);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.st-presumed,.st-established{color:color-mix(in srgb,var(--ok) 50%,var(--ink));background:color-mix(in srgb,var(--ok) 15%,transparent)}
.st-established{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent)}
.st-conditional{color:color-mix(in srgb,var(--warn) 40%,var(--ink));background:color-mix(in srgb,var(--warn) 18%,transparent)}
.st-disputed{color:color-mix(in srgb,var(--danger) 60%,var(--ink));background:var(--danger-soft)}
.ans-fold{margin:14px 0 4px}
.ans-fold>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;border-radius:var(--r-sm)}
.ans-fold>summary::-webkit-details-marker{display:none}
.ans-fold>summary .ans-h{flex:1;min-width:0;margin:4px 0}
.ans-fold-n{flex:none;font-size:12px;font-weight:700;color:var(--gold-text);padding:2px 9px;border-radius:20px;
  background:color-mix(in srgb,var(--accent-a) 22%,transparent)}
.ans-fold[open] .ans-fold-n{display:none}
.ans-chev{flex:none;width:16px;height:16px;color:var(--muted);transition:transform var(--t) var(--ios)}
.ans-fold[open] .ans-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ans-chev{transition:none}}

/* ── Custom right-click menu ── */
.pop.ctx-menu .pop-head{font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);padding:6px 12px 4px}

/* main + topbar */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;outline:none}
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:60px;flex:none;padding:0 12px;position:relative;z-index:30;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
}
.tb-start{display:flex;align-items:center;gap:2px;justify-self:start}
.tb-end{display:flex;align-items:center;gap:6px;justify-self:end}
.tb-new{display:none}
.shell.collapsed .tb-new{display:grid}
.i-menu{display:none}
.mode-switch{padding:4px;border-radius:15px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
html .mode-switch .seg-thumb{top:4px;bottom:4px;border-radius:11px;background:var(--g-mode);box-shadow:0 6px 18px color-mix(in srgb,var(--accent-b) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .6s var(--spring),width .6s var(--spring),background .6s}
.shell[data-mode="agent"] .mode-switch .seg-thumb{box-shadow:0 6px 18px rgba(116,136,168,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.mode-switch button{min-height:36px;padding:0 18px;font-size:13.5px;border-radius:11px}
.mode-switch button.on{color:var(--on-accent)}
.shell[data-mode="agent"] .mode-switch button.on{color:#141922}
.usage-pill{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;border-radius:20px;font-size:12px;font-weight:600;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);transition:transform .5s var(--spring),border-color var(--t);
}
html[dir="rtl"] .usage-pill{padding:0 8px 0 12px}
.usage-pill i{font-style:normal;opacity:.45;margin:0 2px}
.usage-pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.usage-pill.over{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);animation:pill-pulse 2s ease-in-out infinite}
@keyframes pill-pulse{50%{box-shadow:0 0 0 5px var(--danger-soft)}}
.dot-badge{position:absolute;top:8px;inset-inline-end:9px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#F08A6E,#D0453A);box-shadow:0 0 0 2px var(--bg);animation:dot-in .5s var(--spring)}
@keyframes dot-in{from{transform:scale(0)}}
.tb-avatar{border-radius:50%;transition:transform .5s var(--spring);padding:2px;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--g-mode) border-box;border:1.5px solid transparent}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--g-accent);flex:none}
.notif-pop{width:360px}
.notif-pop .pop-label small{white-space:normal}
.user-pop{width:290px}
.user-pop .pop-item .avatar{margin-inline-end:0}

/* stage: chat + workspace split */
.stage{flex:1;min-height:0;display:flex;position:relative;--split:.42;overflow:hidden;overflow:clip}
.shell,.main{overflow:hidden;overflow:clip}
.chat-pane{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;position:relative;transition:flex-basis .65s var(--ios)}
.split-handle{flex:0 0 0;width:0;position:relative;cursor:col-resize;opacity:0;visibility:hidden;transition:flex-basis .65s var(--ios),opacity .3s,visibility 0s .3s;outline:none;z-index:7;touch-action:none}
/* keep the grab zone tight — a wide one sits on top of the thread's scrollbar */
.split-handle::before{content:"";position:absolute;inset:0 -2px;cursor:col-resize}
.split-handle::after{content:"";position:absolute;inset:0;margin-inline:auto;width:1px;background:var(--line);transition:background .3s var(--hv-ease),width .3s var(--hv-ease)}
.split-handle span{
  position:absolute;top:50%;left:50%;width:5px;height:38px;margin:-19px 0 0 -2.5px;border-radius:5px;z-index:1;
  background:color-mix(in srgb,var(--ink) 22%,transparent);
  transition:background .3s var(--hv-ease),height .45s var(--hv-ease),box-shadow .35s var(--hv-ease);
}
.split-handle:hover span,.split-handle:focus-visible span,.stage.resizing .split-handle span{
  background:var(--g-mode);height:84px;margin-top:-42px;box-shadow:0 6px 18px -4px color-mix(in srgb,var(--accent-b) 65%,transparent);
}
.split-handle:hover::after,.stage.resizing .split-handle::after{background:color-mix(in srgb,var(--accent-b) 35%,var(--line))}
.stage.resizing{cursor:col-resize}
.stage.resizing *{pointer-events:none}
.work-pane{flex:1 1 0;min-width:0;width:0;overflow:hidden;opacity:0;transform:translateX(calc(24px * var(--dx,1)));transition:opacity .45s var(--ease),transform .65s var(--ios);border-inline-start:1px solid var(--line);background:var(--sunken)}
html[dir="rtl"] .work-pane{--dx:-1}
.stage[data-mode="agent"] .chat-pane{flex-basis:calc(var(--split) * 100%)}
.stage[data-mode="agent"] .split-handle{flex-basis:10px;opacity:1;visibility:visible;transition-delay:0s}
.stage[data-mode="agent"] .work-pane{opacity:1;transform:none}
/* b-uifix: in Chat the workspace is not just faded — it leaves the tab order and the accessibility tree too (visibility flips after the fade out, at once on the way in) */
.stage[data-mode="chat"] .work-pane{pointer-events:none;border:0;visibility:hidden;transition:opacity .45s var(--ease),transform .65s var(--ios),visibility 0s .65s}
.stage.resizing .chat-pane,.stage.resizing .split-handle{transition:none}
.stage.resizing{user-select:none;cursor:col-resize}
/* focus mode: the workspace fills the stage and chat slides over it on demand. b-uifix: scoped to Agent mode like the rest of the
   stage — the class stays on the stage while Chat is active (agent.js keeps its toggle), and unscoped it slid the chat pane off screen
   and floated «إظهار المحادثة» over Chat. */
.stage[data-mode="agent"].ws-full .chat-pane{
  position:absolute;inset-block:0;inset-inline-start:0;z-index:9;width:min(430px,88%);flex-basis:0 !important;
  background:var(--bg);border-inline-end:1px solid var(--line);box-shadow:var(--shadow-3);
  transform:translateX(calc(-102% * var(--dx,1)));transition:transform .5s var(--ios);
}
html[dir="rtl"] .stage[data-mode="agent"].ws-full .chat-pane{--dx:-1}
.stage[data-mode="agent"].ws-full.chat-open .chat-pane{transform:none}
.stage[data-mode="agent"].ws-full .split-handle{flex-basis:0 !important;opacity:0;visibility:hidden;pointer-events:none}
.ws-chat-btn{
  position:absolute;bottom:18px;inset-inline-start:18px;z-index:10;display:none;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:24px;
  font-size:13.5px;font-weight:600;color:var(--ink);background:var(--glass-strong);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--accent-b) 30%,var(--line));box-shadow:var(--shadow-2);
  transition:transform .5s var(--hv-ease),box-shadow .4s var(--hv-ease),opacity .3s;
}
.stage[data-mode="agent"].ws-full .ws-chat-btn{display:inline-flex;animation:rise-in .45s var(--ios) both}
.stage[data-mode="agent"].ws-full.chat-open .ws-chat-btn{inset-inline-start:calc(min(430px,88%) + 18px)}
.ws-chat-btn .i{width:17px;height:17px;color:var(--gold-deep)}
.ws-chat-btn:active{transform:scale(.95)}
.pane-switch{display:none}

/* ═══════════ Thread ═══════════ */
.thread{flex:1;overflow-y:auto;overscroll-behavior:contain;outline:none;overflow-anchor:none}
.thread.is-empty{display:flex;flex-direction:column}
.thread-inner{max-width:780px;width:100%;margin:0 auto;padding:30px 22px 44px;display:flex;flex-direction:column;gap:calc(26px * var(--dens,1))}
.stage[data-mode="agent"] .thread-inner{max-width:760px;padding-inline:20px}
/* while the buddy stands on the message box, the end of the thread stops above him */
.thread-inner{padding-bottom:calc(44px + var(--buddy-space, 0px))}
.thread-inner.swap{animation:fade-up .45s var(--ios) both}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}}
.row.enter{animation:msg-in .6s var(--ios) both}
.row.user.enter{animation-name:msg-in-user}
@keyframes msg-in{from{opacity:0;transform:translateY(16px)}}
@keyframes msg-in-user{from{opacity:0;transform:translateY(14px) scale(.96);transform-origin:bottom right}}

.row.user{display:flex;justify-content:flex-end}
.u-body{max-width:min(82%,640px);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bubble{
  padding:11px 17px;border-radius:22px;border-end-end-radius:7px;font-size:15px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--g-ink);color:#F3EDE3;box-shadow:0 10px 24px rgba(28,34,43,.16),inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .bubble{background:linear-gradient(145deg,#3B4452,#2D3440);color:var(--ink)}
.shell[data-mode="agent"] .bubble{background:linear-gradient(145deg,#3A4A63,#28303B)}
.att-grid{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,160px))}
.att-grid.n1{grid-template-columns:minmax(0,280px)}
.att-img{border-radius:16px;overflow:hidden;aspect-ratio:1;background:var(--sunken);box-shadow:var(--shadow-1);transition:transform .5s var(--spring)}
.att-grid.n1 .att-img{aspect-ratio:auto;max-height:320px}
.att-img img{width:100%;height:100%;object-fit:cover;display:block}
.att-files{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.file-chip{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  max-width:280px;text-align:start;transition:transform .5s var(--spring),border-color var(--t),box-shadow var(--t);
}
html[dir="rtl"] .file-chip{padding:8px 8px 8px 12px}
.fc-i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#8FA0B8,#56667F)}
.k-pdf .fc-i{background:linear-gradient(135deg,#F08A6E,#C2473A)}
.k-doc .fc-i,.k-text .fc-i{background:linear-gradient(135deg,#8DB4F0,#3F6FC2)}
.k-sheet .fc-i{background:linear-gradient(135deg,#8CD3A0,#2F8A55)}
.k-slides .fc-i{background:linear-gradient(135deg,#F7C38A,#D9772E)}
.k-code .fc-i{background:linear-gradient(135deg,#C4B1F0,#6F52C2)}
.k-image .fc-i{background:linear-gradient(135deg,#F4D3C4,#A8705C)}
.fc-i .i{width:17px;height:17px}
.fc-t{display:grid;min-width:0;line-height:1.35}
.fc-t b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-t small{font-size:11px;color:var(--muted)}
.fc-open{width:14px;height:14px;color:var(--muted)}

.row.bot{display:flex;gap:12px}
.bot-av{flex:none;padding-top:2px}
.bot-av .avatar{--av:34px;box-shadow:0 6px 16px rgba(28,34,43,.2)}
.row.bot.live .bot-av .avatar .i{animation:spark-spin 2.6s var(--ios) infinite}
@keyframes spark-spin{50%{transform:scale(.86);opacity:.72}}
.b-body{flex:1;min-width:0}
.meta{display:flex;align-items:center;gap:8px;min-height:34px;font-size:13px;margin-bottom:2px}
.meta b{font-family:'Montserrat',var(--lt);font-weight:700;font-size:13.5px;direction:ltr;unicode-bidi:isolate}
.model-tag{font-size:10.5px;font-weight:600;padding:1px 9px;border-radius:20px;background:color-mix(in srgb,var(--accent-b) 14%,transparent);color:var(--gold-text);direction:ltr;unicode-bidi:isolate;font-family:'Montserrat',var(--lt)}
.shell[data-mode="agent"] .model-tag{background:rgba(116,136,168,.16);color:#56667F}
html[data-theme="dark"] .shell[data-mode="agent"] .model-tag{color:#B7C6DD}
.meta time{font-size:11.5px;color:var(--muted)}
.row.error .content{color:var(--danger)}
.stopped{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--muted);padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.stopped .i{width:12px;height:12px}
/* a reply the page stopped waiting for; the server still owes it, and «Keep waiting» picks the wait back up */
.wait-detached{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;min-width:0}
.wait-detached p{display:flex;align-items:flex-start;gap:7px;margin:0;flex:1 1 220px;min-width:0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.wait-detached p .i{width:14px;height:14px;flex:none;margin-top:3px;color:var(--muted)}
.msg-actions{display:flex;align-items:center;gap:2px;margin-top:6px;opacity:0;transform:translateY(-4px);transition:opacity var(--t) var(--ease),transform .5s var(--ios)}
.row:hover .msg-actions,.row.last .msg-actions,.msg-actions:focus-within{opacity:1;transform:none}
.row.user .msg-actions{justify-content:flex-end}
.msg-actions .ib.on{color:var(--gold-deep)}
.msg-actions .ib.on .i{fill:color-mix(in srgb,var(--accent-b) 35%,transparent)}
.ib.pulse > .i{animation:like-pop .7s var(--spring)}
@keyframes like-pop{30%{transform:scale(1.45) rotate(-12deg)}60%{transform:scale(.9)}}
.tok-chip{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;font-size:11px;font-weight:600;color:var(--muted)}
.tok-chip .i{width:11px;height:11px}
.via{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-inline-end:4px}
.via .i{width:12px;height:12px}

/* The disclaimer carried by an answer (chat.js renders p.msg-disclaimer > small > b + text + .tnum).
   A legal notice, not part of the reply: it sits below the body behind a hairline, stays plain text
   (never .md), and is sized to be read after the answer instead of competing with it. The label is
   given its own line above the text; pre-line keeps the server's own breaks in a multi-part notice. */
.msg-disclaimer{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-soft);overflow-wrap:anywhere}
.msg-disclaimer small{display:block;font-size:12px;line-height:1.7;white-space:pre-line}
.msg-disclaimer b{display:block;margin-bottom:3px;font-size:11.5px;font-weight:600;color:var(--gold-text)}
html:not([lang="ar"]) .msg-disclaimer b{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-family:'Montserrat',var(--lt)}
html[lang="ar"] .msg-disclaimer small{line-height:1.85}
.msg-disclaimer .tnum{color:var(--muted);white-space:nowrap}
/* The disclaimer sheet (chat.js disclaimerSheet). This is a legal notice being put to someone for
   acceptance, so it is set to be READ: full-size body text, generous line height, the server's own
   line breaks preserved, and the version directly under it so the thing being accepted identifies
   itself. Deliberately NOT the muted, shrunken register of the composer caveat — a different kind
   of statement should not share its visual language. */
.disclaimer-sheet .disc-text{margin:0;font-size:14px;line-height:1.85;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.disclaimer-sheet .disc-ver{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.disclaimer-sheet .disc-ver small{font-size:12px;color:var(--muted)}
html[lang="ar"] .disclaimer-sheet .disc-text{line-height:2}

/* markdown */
.md{font-size:15.5px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
html[lang="ar"] .md{line-height:1.95}
.md > * + *{margin-top:.8em}
.md h3,.md h4,.md h5,.md h6{font-weight:700;line-height:1.4;text-wrap:balance}
.md > h3:not(:first-child),.md > h4:not(:first-child){margin-top:1.25em}
.md h3{font-size:18px}.md h4{font-size:16.5px}.md h5,.md h6{font-size:15.5px}
.md h3::before{content:"";display:inline-block;width:14px;height:3px;border-radius:3px;background:var(--g-mode);vertical-align:middle;margin-inline-end:10px}
.md ul,.md ol{padding-inline-start:1.35em;display:grid;gap:.3em}
.md li::marker{color:var(--gold-deep);font-weight:700}
.md ul.tasks{list-style:none;padding-inline-start:.2em}
.md ul.tasks li::before{content:"";display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line);margin-inline-end:8px;vertical-align:-2px}
.md ul.tasks li.done::before{background:var(--g-accent);border-color:transparent}
.md strong{font-weight:700}
.md a{color:var(--gold-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-b) 60%,transparent);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.md a:hover{text-decoration-color:var(--accent-c)}
.md blockquote{padding:10px 16px;border-inline-start:3px solid transparent;border-image:var(--g-mode) 1;background:color-mix(in srgb,var(--accent-b) 8%,transparent);color:var(--ink-soft);font-size:14.5px;border-radius:0}
.md hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:1.3em 0}
.md :not(pre) > code{font-family:var(--mono);font-size:.86em;padding:.12em .45em;border-radius:6px;background:color-mix(in srgb,var(--accent-b) 15%,transparent);color:var(--gold-text);direction:ltr;unicode-bidi:isolate}
.md-table{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}
.md table{border-collapse:collapse;width:100%;font-size:13.5px}
.md th,.md td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--line)}
.md th{background:color-mix(in srgb,var(--accent-b) 10%,transparent);font-weight:700}
.md tr:last-child td{border-bottom:0}
.codeblock{border-radius:14px;overflow:hidden;background:#1E242D;border:1px solid rgba(201,174,126,.22);direction:ltr;box-shadow:var(--shadow-1)}
.code-head{
  display:flex;align-items:center;gap:9px;padding:7px 7px 7px 12px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.07);font-family:'Montserrat',var(--lt);font-size:12px;font-weight:600;color:#D9D4CA;
}
.ch-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,#8FA0B8,#56667F)}
.ch-ic .i{width:14px;height:14px}
/* a real language logo carries its own colours — drop the generic gradient chip */
.ch-ic.brand{background:none;border-radius:6px}
.ch-ic.brand .brand-i{width:24px;height:24px}
.code-dl{padding-inline:8px}
.code-dl .i{width:15px;height:15px}
.lang-js .ch-ic{background:linear-gradient(140deg,#F2D98A,#C9A227);color:#2A2206}
.lang-ts .ch-ic{background:linear-gradient(140deg,#8DB4F0,#2F5FA8)}
.lang-html .ch-ic{background:linear-gradient(140deg,#F2A07B,#D0532A)}
.lang-css .ch-ic{background:linear-gradient(140deg,#9CC4F5,#3F6FC2)}
.lang-py .ch-ic{background:linear-gradient(140deg,#8CD3A0,#2F7D8A)}
.lang-json .ch-ic,.lang-sql .ch-ic{background:linear-gradient(140deg,#C4B1F0,#6F52C2)}
.lang-sh .ch-ic{background:linear-gradient(140deg,#B9C2CC,#4B5560)}
.lang-md .ch-ic{background:linear-gradient(140deg,#E9D3A8,#9A7E51);color:#241C0A}
.ch-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.ch-meta{font-size:11px;color:rgba(241,235,225,.45);font-weight:500;white-space:nowrap}
.code-copy{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:11.5px;color:rgba(241,235,225,.7);letter-spacing:0;text-transform:none;transition:background var(--t-fast),color var(--t-fast),transform .4s var(--spring)}
.code-copy .i{width:13px;height:13px}
.codeblock pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:#E6E1D8;text-align:left;tab-size:2}
.tok-k{color:#E2B878}.tok-s{color:#A6D49F}.tok-c{color:#7D8590;font-style:italic}.tok-n{color:#E9A36B}.tok-f{color:#9CC4F5}.tok-t{color:#F08A6E}.tok-a{color:#E2B878}.tok-p{color:#8C939D}
.caret{display:inline-block;width:2px;height:1.05em;vertical-align:-3px;margin-inline-start:2px;background:var(--g-mode);border-radius:2px;animation:blink 1s steps(1) infinite}
.typing{display:inline-flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.typing .dots{display:inline-flex;gap:5px}
.typing .dots i{width:7px;height:7px;border-radius:50%;background:var(--g-mode);animation:dot 1.2s infinite ease-in-out}
.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
/* COLD START (see typingHTML in chat.js): after a few seconds the wait is explained and timed.
   The bar is INDETERMINATE by design  a wake has no known duration, so there is no honest
   percentage to draw. The elapsed figure beside it is the real number. */
.typing .wait-time{display:none;flex:none;white-space:nowrap;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.typing.cold{position:relative;flex-wrap:wrap;padding-bottom:11px}
.typing.cold .wait-time{display:inline}
.typing.cold::after{content:"";position:absolute;inset:auto 0 2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-b),var(--gold),transparent);background-size:200% 100%;
  animation:shimmer 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){.typing.cold::after{animation:none;opacity:.5}}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0) scale(.85)}40%{opacity:1;transform:translateY(-5px) scale(1)}}
::highlight(ethix-flash){background:color-mix(in srgb,#F2C511 45%,transparent)}
.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-b) 40%,transparent);background-color:color-mix(in srgb,var(--accent-a) 30%,transparent)}}

/* ═══════════ Empty hero ═══════════ */
.c-hero{margin:auto;width:100%;max-width:820px;padding:36px 22px 20px;display:grid;justify-items:center;text-align:center}
/* N20 final: a desktop window about 800px tall cut the home's last card («المكالمة الصوتية — قريباً») under the balance
   strip; a shorter hero keeps the whole home above the composer. */
@media (min-width:821px) and (max-height:900px){
  .c-hero{padding-top:20px;padding-bottom:12px}
  .c-hero .hero-orb{width:80px;height:80px;margin-bottom:10px}
  .c-hero .hero-cards{margin-top:22px}
}
.c-hero > *{animation:rise-in .7s var(--ios) both}
.c-hero > :nth-child(2){animation-delay:.06s}.c-hero > :nth-child(3){animation-delay:.12s}.c-hero > :nth-child(4){animation-delay:.18s}.c-hero > :nth-child(5){animation-delay:.24s}
.hero-orb{position:relative;width:96px;height:96px;margin-bottom:18px}
.hero-orb span{position:absolute;border-radius:50%}
.ho-1{inset:-26px;background:conic-gradient(from 0deg,var(--accent-a),var(--accent-b),#8FA0B8,#D9A48F,var(--accent-a));filter:blur(26px);opacity:.55;animation:spin 12s linear infinite}
.agent .ho-1{background:conic-gradient(from 0deg,#B7C6DD,#7488A8,var(--accent-b),#B7C6DD)}
.ho-2{inset:0;background:conic-gradient(from 180deg,var(--accent-a),var(--accent-c),var(--accent-b),var(--accent-a));animation:spin 8s linear infinite reverse;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
.ho-core{inset:10px;display:grid;place-items:center;background:var(--g-mode);color:var(--on-accent);box-shadow:0 18px 40px color-mix(in srgb,var(--accent-b) 45%,transparent),inset 0 2px 0 rgba(255,255,255,.5);animation:orb-bob 5s ease-in-out infinite}
.agent .ho-core{color:#141922}
.ho-core .i{width:34px;height:34px}
@keyframes orb-bob{50%{transform:translateY(-6px) scale(1.03)}}
.hero-title{font-size:clamp(28px,4.4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
html[lang="ar"] .hero-title{letter-spacing:0;line-height:1.45}
.hero-sub{margin-top:10px;font-size:16px;color:var(--ink-soft);max-width:520px;text-wrap:pretty}
.hero-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;width:100%}
.agent .hero-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.stage[data-mode="agent"] .agent .hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-card{
  position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;text-align:start;isolation:isolate;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .55s var(--spring),box-shadow var(--t) var(--ease),border-color var(--t);animation:rise-in .6s var(--ios) both;animation-delay:calc(var(--i) * 45ms + .25s);
}
.s-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-accent-soft);opacity:0;transition:opacity .45s var(--ease)}
.agent .s-card::before{background:linear-gradient(135deg,rgba(183,198,221,.45),rgba(201,174,126,.18))}
.sc-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--gold-deep);transition:transform .55s var(--spring),background .4s,color .4s}
.sc-txt{flex:1;min-width:0;display:grid;gap:2px;line-height:1.4}
.sc-txt b{font-size:14px}
.sc-txt small{font-size:12.5px;color:var(--muted)}
.sc-go{color:var(--gold-deep);opacity:0;transform:translateX(calc(-8px * var(--dx,1)));transition:opacity var(--t),transform .5s var(--spring)}
html[dir="rtl"] .sc-go{--dx:-1}
.hero-caps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
/* investor beta: what Chat and Agent are, one line each, under the Chat starters */
.hero-modes{list-style:none;margin:20px auto 0;padding:0;display:grid;gap:8px;width:100%;max-width:560px;text-align:start}
.hero-modes li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.hero-modes svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--gold-text,#8A6D3F)}
.hero-modes .b-link{margin-inline-start:6px;font-weight:600;white-space:nowrap}

/* ═══════════ Composer ═══════════ */
.composer-wrap{position:relative;width:100%;max-width:820px;margin:0 auto;padding:6px 20px calc(10px + env(safe-area-inset-bottom))}
.stage[data-mode="agent"] .composer-wrap{max-width:none;padding-inline:16px}
.composer{
  position:relative;border-radius:26px;padding:10px 10px 8px;padding-inline-start:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-2);transition:box-shadow .45s var(--ease),transform .5s var(--ios);
}
.composer::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--gb),var(--accent-a),var(--accent-c),#8FA0B8,#D9A48F,var(--accent-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .45s var(--ease);animation:gb-spin 5s linear infinite;
}
.composer::after{content:"";position:absolute;inset:10px 20px -14px;z-index:-1;border-radius:inherit;background:var(--g-mode);filter:blur(24px);opacity:0;transition:opacity .5s var(--ease)}
.composer:focus-within::before{opacity:1}
.composer:focus-within::after{opacity:.28}
.composer textarea{display:block;width:100%;border:0;outline:none;background:none;resize:none;font-size:15.5px;line-height:1.65;padding:6px 2px;max-height:260px;min-height:36px;overflow-y:hidden;color:var(--ink)}
.composer textarea.scroll{overflow-y:auto}
.composer textarea::placeholder{color:var(--muted);transition:opacity var(--t)}
.composer textarea:focus::placeholder{opacity:1} /* Stage 5: no dimming on focus: 0.55 fell to about 2.8:1 */
.c-bar{display:flex;align-items:center;gap:8px;margin-top:4px}
.c-left,.c-right{display:flex;align-items:center;gap:4px}
.c-right{margin-inline-start:auto}
.c-attach .i{stroke-width:2.2;transition:transform .5s var(--spring)}
.c-attach[aria-expanded="true"] .i{transform:rotate(45deg)}
.model-chip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  font-family:'Montserrat',var(--lt);transition:transform .5s var(--spring),color var(--t-fast),background-color var(--t);
}
.model-chip .i{width:15px;height:15px;color:var(--gold-deep)}
.model-chip .mc-chev{width:13px;height:13px;color:var(--muted);transition:transform .5s var(--spring)}
.model-chip[aria-expanded="true"] .mc-chev{transform:rotate(180deg)}
/* Owner decision 2026-09-26: the chip IS the model picker (chat.js modelMenu) — «Ethix Core» / «Ethix Kid». With nothing
   to pick it keeps the product name and opens nothing (disabled), so it must not look or point like a dead control. */
.model-chip:disabled{cursor:default}
.model-pop .mdl-mark{margin-inline-start:6px;color:var(--gold-deep);font-size:12px}
/* Ethix Deep [Beta]'s badge and its effort bar (a bar that exists only while Deep is chosen): css/model-picker.css, js/model-picker.js. */
/* Review of 2026-09-26 (887ae62), kept for the model picker: on a phone the composer's one row — attach, the chip with
   its model name, the token count, the mic and the send button — pushed the send button off the screen (measured at
   320, 360 and 375px, in Arabic and in English, when the picker sat beside the chip). With models offered
   (.c-bar.with-models, set by chat.js), a narrow composer drops the token count, and at 340px and below tightens the
   chip — which now carries the picked model's name and cannot go. Measured again with «Ethix Core» in the chip: the
   send button sits inside the composer at 320px (Arabic and English), 375 and 414px, with no horizontal page scroll. */
@media (max-width:640px){
  .c-bar.with-models .c-tokens{display:none}
}
@media (max-width:340px){
  .c-bar.with-models .model-chip{padding:0 6px;gap:4px}
}
/* No silent routing (owner decision 2026-09-26): under each answer, the model that actually wrote it (chat.js
   servedNode), and — when the backup model answered in place of the one asked for — a notice that is meant to be
   seen: the warning tone, full-size text and an icon, not a grey footnote. */
/* Contract C9.6: the row under each answer (chat.js msgHTML) — the model label, and W2's case chip beside it. Empty,
   it takes no room. A fallback's label and notice take the whole row, so a chip beside them wraps below. */
.answer-meta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:10px}
.answer-meta:empty{display:none}
.served-by{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.served-by.served-fallback{flex-basis:100%}
.served-label{display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-soft);background:color-mix(in srgb,var(--accent-b) 12%,transparent)}
.served-label .i{width:14px;height:14px;color:var(--gold-deep)}
.served-name{unicode-bidi:isolate}
.served-notice{display:flex;align-items:flex-start;gap:8px;margin:0;max-width:100%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.55;font-weight:600;color:#7A4A06;background:#FDF1D8;border:1px solid #E9B85C}
.served-notice .i{flex:none;width:17px;height:17px;margin-top:2px;color:#B56A00}
html[data-theme="dark"] .served-notice{color:#F6D9A4;background:rgba(233,168,60,.14);border-color:rgba(233,168,60,.5)}
html[data-theme="dark"] .served-notice .i{color:#F0B45A}
/* The live panel's first line: which model is answering, and the fallback in the same warning tone. */
.cp-served{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.cp-served .i{flex:none;width:14px;height:14px;color:var(--gold-deep)}
.cp-served-fallback{align-items:flex-start;padding:7px 10px;border-radius:10px;color:#7A4A06;background:#FDF1D8;border:1px solid #E9B85C}
.cp-served-fallback .i{margin-top:2px;color:#B56A00}
html[data-theme="dark"] .cp-served-fallback{color:#F6D9A4;background:rgba(233,168,60,.14);border-color:rgba(233,168,60,.5)}
.legal-route select{border:0;background:transparent;color:var(--ink);font:inherit;outline:none;cursor:pointer}
.legal-route{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin-top:10px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent-a) 28%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent-a) 7%,transparent);font-size:12px;color:var(--ink-soft)}
.legal-route>span{color:var(--muted)}
.legal-route small{color:var(--gold-deep);font-weight:700}
.model-pop .pop-item .badge{margin-inline-start:6px}
.c-tokens{font-size:11px;color:var(--muted);font-weight:600;padding-inline-end:4px;animation:fade-in .3s}
.c-mic.listening{color:#fff}
.c-mic.listening::before{opacity:1;transform:scale(1);background:linear-gradient(135deg,#F08A6E,#D0453A)}
.c-mic.listening::after{content:"";position:absolute;inset:-4px;border-radius:14px;border:2px solid rgba(208,69,58,.45);animation:ring-out 1.4s var(--ease) infinite}
@keyframes ring-out{to{transform:scale(1.35);opacity:0}}
.send-btn{
  position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  transition:transform .55s var(--spring),box-shadow var(--t),background .45s var(--ease),color .3s;
  background:var(--g-ink);color:#F3EDE3;box-shadow:0 8px 20px rgba(28,34,43,.25);
}
html[data-theme="dark"] .send-btn{background:linear-gradient(145deg,#4A5465,#343C49)}
.send-btn[data-state="send"]{background:var(--g-mode);color:var(--on-accent);box-shadow:0 10px 24px color-mix(in srgb,var(--accent-b) 45%,transparent)}
.shell[data-mode="agent"] .send-btn[data-state="send"]{color:#141922}
.send-btn[data-state="stop"]{animation:stop-ring 1.8s var(--ease) infinite}
@keyframes stop-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-b) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.sb-ic{display:grid;place-items:center;animation:sb-swap .45s var(--spring)}
.sb-ic .i{width:19px;height:19px;stroke-width:2.3}
@keyframes sb-swap{from{transform:scale(.3) rotate(-90deg);opacity:0}}
.send-btn:disabled{opacity:.5}
.drop-zone{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border-radius:inherit;pointer-events:none;opacity:0;transform:scale(.98);transition:opacity var(--t),transform .5s var(--spring);
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px dashed color-mix(in srgb,var(--accent-b) 70%,transparent)}
.drop-zone span{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--gold-text)}
.composer.dragging .drop-zone{opacity:1;transform:none}
/* dictation recording bar */
.rec-bar{
  display:flex;align-items:center;gap:12px;margin:2px 0 10px;padding:8px 8px 8px 14px;border-radius:16px;
  background:linear-gradient(120deg,color-mix(in srgb,#E0725F 16%,var(--surface)),var(--surface) 70%);
  border:1px solid color-mix(in srgb,#E0725F 35%,transparent);animation:rise-in .4s var(--ios) both;
}
html[dir="rtl"] .rec-bar{padding:8px 14px 8px 8px}
.rec-pulse{width:10px;height:10px;border-radius:50%;flex:none;background:#E0725F;box-shadow:0 0 0 0 rgba(224,114,95,.55);animation:rec-ping 1.6s var(--ease) infinite}
@keyframes rec-ping{0%{box-shadow:0 0 0 0 rgba(224,114,95,.5)}70%{box-shadow:0 0 0 9px rgba(224,114,95,0)}100%{box-shadow:0 0 0 0 rgba(224,114,95,0)}}
.rec-wave{display:flex;align-items:center;gap:3px;height:26px;flex:none}
.rec-wave i{width:3px;height:6px;border-radius:3px;background:linear-gradient(180deg,#E0725F,#C2473A);transform-origin:center;animation:rec-bar 1.1s ease-in-out infinite}
.rec-wave i:nth-child(2n){animation-duration:.85s}
.rec-wave i:nth-child(3n){animation-duration:1.35s;opacity:.75}
.rec-wave i:nth-child(4n){animation-duration:.65s}
.rec-bar.hot .rec-wave i{animation-duration:.45s}
/* once real mic levels arrive the bars follow the voice instead of looping a fake wave */
.rec-bar.live .rec-wave i{animation:none;transform:scaleY(var(--s,1));transition:transform .07s linear}
@keyframes rec-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(3.4)}}
.rec-txt{flex:1;min-width:0;display:grid;line-height:1.35}
.rec-txt b{font-size:13.5px}
.rec-txt small{font-size:12px;color:var(--muted)}
.rec-time{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.composer.recording{border-color:color-mix(in srgb,#E0725F 45%,transparent)}
.composer.recording::before{opacity:0 !important}
.attach-tray{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin-inline-start:-6px}
.tray-item{
  position:relative;flex:none;display:flex;align-items:center;gap:9px;max-width:230px;padding:6px 32px 6px 6px;border-radius:14px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);animation:tray-in .5s var(--spring) both;
}
html[dir="rtl"] .tray-item{padding:6px 6px 6px 32px}
@keyframes tray-in{from{opacity:0;transform:scale(.7)}}
.ti-thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.ti-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#8FA0B8,#56667F)}
.tray-item.k-pdf .ti-ic{background:linear-gradient(135deg,#F08A6E,#C2473A)}
.tray-item.k-doc .ti-ic,.tray-item.k-text .ti-ic{background:linear-gradient(135deg,#8DB4F0,#3F6FC2)}
.tray-item.k-sheet .ti-ic{background:linear-gradient(135deg,#8CD3A0,#2F8A55)}
.tray-item.k-slides .ti-ic{background:linear-gradient(135deg,#F7C38A,#D9772E)}
.tray-item.k-code .ti-ic{background:linear-gradient(135deg,#C4B1F0,#6F52C2)}
.ti-txt{display:grid;min-width:0;line-height:1.3}
.ti-txt b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-txt small{font-size:11px;color:var(--muted)}
.ti-bar{position:absolute;inset:auto 0 0 0;height:3px;background:var(--g-mode);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .3s var(--ease),opacity .4s .3s}
html[dir="rtl"] .ti-bar{transform-origin:right}
.tray-item.ready .ti-bar{opacity:0}
.tray-item.processing .ti-thumb,.tray-item.processing .ti-ic{animation:pulse-soft 1.2s ease-in-out infinite}
@keyframes pulse-soft{50%{opacity:.55}}
.ti-x{position:absolute;top:50%;inset-inline-end:6px;width:22px;height:22px;margin-top:-11px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink-soft);transition:transform .45s var(--spring),background var(--t-fast)}
.ti-x .i{width:12px;height:12px;stroke-width:2.4}
.disclaimer{margin-top:8px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.5;text-wrap:balance}
.disclaimer a{color:var(--ink-soft);text-underline-offset:2px}
.to-bottom{
  position:absolute;top:6px;left:50%;margin-left:-20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;z-index:4;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink);
  animation:tray-in .5s var(--spring);transition:transform .5s var(--spring);
}
/* N20 final: the ↓ button has a gutter of its own. It floated 52px above the composer, over the thread, and sat on the
   question card's number input at 320 and on answer text at 375. While it shows, the composer's wrap opens a band above
   the box for it, so the thread ends above the button and nothing reads under it. While the keyboard is open or an
   answer field in the thread has focus, the button steps away and the band closes: the customer is typing, not reading. */
html:not(.kb-open) .chat-pane:not(:has(#thread :is(input,textarea,select):focus)) > .composer-wrap:has(> .to-bottom:not([hidden])){padding-top:52px}
html.kb-open .to-bottom,.chat-pane:has(#thread :is(input,textarea,select):focus) .to-bottom{display:none}
.limit-banner{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:10px 10px 10px 12px;border-radius:18px;animation:rise-in .5s var(--ios) both;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-a) 45%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent-b) 40%,transparent);
}
.limit-banner.over{background:linear-gradient(135deg,color-mix(in srgb,#F08A6E 22%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.limit-banner.shake{animation:shake .45s var(--ease)}
.lb-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--g-accent);color:var(--on-accent)}
.limit-banner.over .lb-ic{background:linear-gradient(135deg,#F08A6E,#C2473A);color:#fff}
.lb-txt{flex:1;min-width:0;display:grid;line-height:1.35}
.lb-txt b{font-size:13.5px}
.lb-txt small{font-size:12px;color:var(--ink-soft)}

/* lightbox */
.lightbox .sheet-body{padding:0 16px 16px}
.lb-fig{margin:0;display:grid;gap:10px}
.lb-fig img{width:100%;max-height:70dvh;object-fit:contain;border-radius:16px;background:var(--sunken)}
.lb-fig figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.lb-pal{display:flex;gap:4px}
.lb-pal i{width:20px;height:20px;border-radius:6px;background:var(--dot,currentColor);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* shortcuts */
.sc-list{list-style:none;margin:0;padding:0;display:grid}
.sc-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.sc-list li:last-child{border-bottom:0}
.sc-keys{display:flex;gap:4px}

/* ═══════════ Voice call ═══════════ */
.call{
  position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom));color:#F3EDE3;background:#11141A;
  opacity:0;transform:scale(1.06);transition:opacity .55s var(--ios),transform .7s var(--ios);--lvl:0;
}
.call.open{opacity:1;transform:none}
.call.closing{opacity:0;transform:scale(.94);transition-duration:.4s}
.call-bg{position:absolute;inset:0;z-index:0}
.call-bg .aurora{--aurora-1:rgba(233,196,160,.42);--aurora-2:rgba(201,174,126,.36);--aurora-3:rgba(116,136,168,.5);--aurora-4:rgba(217,164,143,.36)}
.call[data-state="listening"] .call-bg .aurora{--aurora-1:rgba(143,160,184,.5);--aurora-2:rgba(116,136,168,.4)}
.call-top,.call-center,.call-controls,.call-type{position:relative;z-index:1}
.call-top{display:flex;justify-content:space-between;width:100%;max-width:560px}
.call-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:20px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12)}
.call-chip .i{width:14px;height:14px}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#F0543C;animation:pulse-soft 1.4s infinite}
.call-center{display:grid;justify-items:center;gap:16px;text-align:center;width:100%;max-width:560px}
.call-orb{position:relative;width:min(270px,62vw);aspect-ratio:1;margin-bottom:10px}
.call-orb span{position:absolute;border-radius:50%}
/* the buddy replaces the old core + bars; halo and rings still breathe with --lvl */
.call-orb .co-buddy{inset:4% 14% 0;border-radius:0;transform:scale(calc(.97 + var(--lvl) * .06));transition:transform .14s linear}
.co-buddy .bd-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 22px 34px rgba(0,0,0,.45))}
.call-orb{--bar-a:rgba(233,214,178,.95);--bar-b:rgba(183,198,221,.35);--rim:rgba(233,214,178,.75)}
.co-halo{inset:-28%;background:radial-gradient(circle,rgba(120,140,175,.3),transparent 62%);transform:scale(calc(.92 + var(--lvl) * .35));transition:transform .14s linear}
.co-ring{inset:2%;border:1px solid rgba(233,226,212,.16);transform:scale(calc(1 + var(--lvl) * .16));transition:transform .14s linear}
.co-ring.r2{inset:-8%;border-color:rgba(183,198,221,.12);transform:scale(calc(1 + var(--lvl) * .3))}
/* a ring of slim bars that breathes with the voice — no filled disc */
.co-bars{inset:0;transform:scale(calc(.94 + var(--lvl) * .12));transition:transform .14s linear}
.co-bars i{
  position:absolute;left:calc(50% - 1px);top:calc(50% - 1px);width:2px;border-radius:2px;transform-origin:50% 50%;
  height:calc(9px + 26px * var(--lvl));background:linear-gradient(180deg,var(--bar-a),var(--bar-b));
  transform:rotate(calc(var(--i) * 8.18deg)) translateY(calc(-46% * 1)) translateY(-38%);
  animation:co-bar 1.5s ease-in-out infinite;animation-delay:calc(var(--i) * -41ms);opacity:.9;
}
@keyframes co-bar{0%,100%{scale:1 .5}50%{scale:1 1}}
.co-core{
  inset:24%;overflow:hidden;
  background:radial-gradient(120% 120% at 32% 24%,rgba(255,255,255,.16),transparent 48%),linear-gradient(160deg,#2C3541,#141922 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 60px rgba(0,0,0,.55);
  transform:scale(calc(.96 + var(--lvl) * .1));transition:transform .12s linear;
}
.co-sheen{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--rim) 18%,rgba(143,160,184,.6) 38%,transparent 62%,transparent);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));animation:spin 7s linear infinite}
.co-gloss{position:absolute;inset:8% 12% auto;height:38%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);filter:blur(4px)}
.call[data-state="listening"] .call-orb{--bar-a:rgba(199,214,238,.95);--bar-b:rgba(143,160,184,.3);--rim:rgba(199,214,238,.7)}
.call[data-state="speaking"] .call-orb{--bar-a:rgba(240,224,190,1);--bar-b:rgba(201,174,126,.35);--rim:rgba(240,224,190,.85)}
.call[data-state="thinking"] .co-bars i{animation-duration:2.4s}
.call[data-state="connecting"] .co-bars i,.call[data-state="muted"] .co-bars i{animation-duration:3s;opacity:.45}
.call[data-state="muted"] .call-orb{--bar-a:rgba(200,200,200,.5);--bar-b:rgba(150,150,150,.2);--rim:rgba(200,200,200,.35)}
.call-status{font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(243,237,227,.8)}
.call-caption{min-height:3.4em;max-width:520px;font-size:clamp(18px,2.6vw,24px);font-weight:500;line-height:1.5;text-wrap:balance}
.call-caption.off{visibility:hidden}
.call-note{font-size:13px;color:#F4D3C4;background:rgba(240,84,60,.12);padding:6px 14px;border-radius:12px}
.call-type{display:flex;gap:8px;width:100%;max-width:520px;animation:rise-in .5s var(--ios)}
.call-type .input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff;min-height:48px;border-radius:16px}
.call-type .input::placeholder{color:rgba(255,255,255,.5)}
.call-type .b{width:48px;padding:0;min-height:48px;border-radius:16px}
.call-controls{display:flex;gap:clamp(10px,3vw,22px);justify-content:center;flex-wrap:wrap}
.call-btn{display:grid;justify-items:center;gap:8px;font-size:11.5px;font-weight:600;color:rgba(243,237,227,.78)}
.cb-ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);transition:transform .5s var(--spring),background var(--t)}
.cb-ic .i{width:24px;height:24px}
.call-btn.on .cb-ic{background:rgba(243,237,227,.92);color:#1B2028}
.call-btn[data-act="mute"].on .cb-ic{background:#F3EDE3;color:#C2473A}
.call-btn.end .cb-ic{background:linear-gradient(135deg,#F08A6E,#D0453A);border:0;box-shadow:0 14px 34px rgba(208,69,58,.45);color:#fff}

/* ═══════════ Responsive ═══════════ */
@media (max-width:1100px){
  .auth{grid-template-columns:1fr 1fr}
  .auth-floats{display:none}
}
@media (max-width:1000px){
  .stage[data-mode="agent"] .chat-pane{flex-basis:100% !important}
  .stage[data-mode="agent"] .split-handle{display:none}
  .stage[data-mode="agent"] .work-pane{position:absolute;inset:0;width:auto;z-index:6;transform:translateX(calc(100% * var(--dx,1)));opacity:1;border:0;transition:transform .6s var(--ios)}
  .stage[data-mode="agent"][data-pane="ws"] .work-pane{transform:none}
  /* The chat under the workspace is neither moved nor faded: the workspace covers it whole (absolute, inset 0, opaque),
     and a transform or an opacity below 1 would make the chat pane its own stacking context — the pane switch inside it
     (z-index 8), the way back, was then painted UNDER the workspace (z-index 6). Unscoped, the same rule also beat focus
     mode's slide-over chat (.ws-full), drawing it at 40% over the workspace. What the covered chat must not be is
     reachable: chat.js syncChatInert makes it inert. */
  html[dir="rtl"] .stage{--dx:-1}
  /* The pane switch («المحادثة / مساحة العمل») has its OWN row at the top of the stage, on both panes: the workspace
     starts under it (top: --pane-row = 8 + 40 + 8), so the switch never covers the workspace's tab strip — the job tabs
     scroll in their own row below it. (Centred over that strip, it hid the tabs and the way back to the chat.) */
  .stage{--pane-row:56px}
  .stage[data-mode="agent"] .pane-switch{display:inline-flex;position:relative;flex:none;align-self:center;height:40px;margin:8px auto;z-index:8}
  .stage[data-mode="agent"]:not(.ws-full) .work-pane{top:var(--pane-row)}
  .ws-dot{width:7px;height:7px;border-radius:50%;background:var(--g-accent);margin-inline-start:2px;animation:dot-in .5s var(--spring)}
}
@media (max-width:820px){
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .auth-brand-sm{display:inline-flex}
  .auth-card{padding:24px 18px 20px;border-radius:26px}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:min(86vw,320px);margin:0 !important;opacity:1 !important;pointer-events:auto !important;box-shadow:var(--shadow-3);padding-top:env(safe-area-inset-top);transform:translateX(calc(-105% * var(--dx,1)));visibility:hidden;transition:transform .55s var(--ios),visibility 0s .55s}
  html[dir="rtl"] .side{--dx:-1}
  .shell.drawer .side{transform:none;visibility:visible;transition:transform .55s var(--ios),visibility 0s}
  .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(18,22,28,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  .shell.drawer .scrim{opacity:1;pointer-events:auto}
  .side-x{display:grid}
  .side-fold,.nb-kbd{display:none}
  .s-more{opacity:1}
  .tb-new{display:grid}
  .i-side{display:none}
  .i-menu{display:block}
  .topbar{padding:0 6px;height:56px;padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
  .usage-pill span{display:none}
  .usage-pill{padding:0 8px}
  .tb-end .ib[data-act="notifs"]{display:none}
  .mode-switch button{padding:0 12px}
}
@media (max-width:640px){
  .thread-inner{padding:18px 14px 30px;gap:22px}
  .thread-inner{padding-bottom:calc(30px + var(--buddy-space, 0px))}
  .bot-av{display:none}
  .row.bot .meta::before{content:"";width:22px;height:22px;border-radius:7px;background:var(--g-ink);flex:none;mask:none}
  .u-body{max-width:90%}
  .md{font-size:15px}
  .composer-wrap{padding:4px 10px calc(8px + env(safe-area-inset-bottom))}
  .composer{border-radius:24px;padding:8px 8px 6px;padding-inline-start:12px}
  .composer textarea{font-size:16px}
  .model-chip span{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .disclaimer{font-size:10.5px}
  .msg-disclaimer{margin-top:12px}
  .msg-disclaimer small{font-size:11.5px}
  .c-hero{padding:22px 14px 12px}
  .hero-orb{width:78px;height:78px;margin-bottom:12px}
  .hero-sub{font-size:14.5px}
  .hero-cards,.agent .hero-cards,.stage[data-mode="agent"] .agent .hero-cards{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .s-card{padding:11px 12px;border-radius:16px}
  .sc-ic{width:36px;height:36px}
  .sc-txt small{display:none}
  .sc-go{opacity:.6;transform:none}
  .hero-caps .chip span{display:none}
  .hero-caps .chip{width:44px;height:44px;padding:0;justify-content:center}
  .msg-actions{opacity:1;transform:none}
  .providers{grid-template-columns:1fr}
  .otp-box{width:44px;height:54px}
  .persona-grid{grid-template-columns:1fr 1fr}
  .ob-plans{grid-template-columns:1fr}
  .notif-pop,.user-pop{width:auto}
  .cb-ic{width:56px;height:56px}
}
@media (max-width:380px){
  .mode-switch button .i{display:none}
  .otp{gap:6px}
  .otp-box{width:40px}
}
/* Sprint shell (2026-09-27): the real plan name under the visitor's name, and the balance pill (the lowest of the three
   windows GET /api/usage reports). On a phone the percent stays: it is the one number the pill exists to show. */
.su-plan{font-size:11.5px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usage-pill.balance-pill{gap:5px}
.usage-pill.balance-pill svg{width:16px;height:16px}
@media (max-width:820px){.usage-pill.balance-pill span{display:inline}}
.pop-item .notif-count{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:var(--on-accent);background:var(--g-accent)}
/* N20 (P1): the phone top bar keeps every control on screen from 320 px — menu, new chat, the mode switch, the case
   button, the balance ring and the account. The two ends never shrink; the mode switch in the middle is the one part
   that gives way: its words become its icons when a case adds its button (≤390 px) and on the narrowest phones (≤340 px).
   The words stay in the buttons for screen readers (visually hidden, never display:none). */
@media (max-width:820px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:4px}
  .topbar .mode-switch{justify-self:center;min-width:0;max-width:100%}
  .topbar .tb-start,.topbar .tb-end{flex:none;min-width:0}
  .topbar .tb-end{gap:4px}
  .topbar .tb-end > *{flex:none}
  .topbar .usage-pill{white-space:nowrap}
}
@media (max-width:414px){
  .topbar{padding-inline:4px}
  .topbar .tb-start{gap:0}
  .topbar .tb-start .ib,.topbar .tb-end .ib,.topbar .tb-case{width:38px;min-width:38px}
  .topbar .mode-switch button{padding:0 10px}
  .topbar .usage-pill.balance-pill{padding:0 6px;gap:4px;height:32px}
}
@media (max-width:390px){
  .topbar.has-case .mode-switch button{width:40px;padding:0;justify-content:center}
  .topbar.has-case .mode-switch button .i{display:block}
  .topbar.has-case .mode-switch button > span[data-t]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (max-width:340px){
  .topbar .mode-switch button{width:40px;padding:0;justify-content:center}
  .topbar .mode-switch button .i{display:block}
  .topbar .mode-switch button > span[data-t]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}