/* AxioraX New: the app in Indigo and Soft Teal, laid out like the approved screens */
@font-face{font-family:"PJS";font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"PJS";font-weight:500;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"PJS";font-weight:600;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"PJS";font-weight:700;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"PJS";font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PJS";font-weight:600;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"NU";font-weight:800;font-display:swap;src:url("../fonts/nunito-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"TJ";font-weight:500;font-display:swap;src:url("../fonts/tajawal-arabic-500-normal.woff2") format("woff2")}
@font-face{font-family:"TJ";font-weight:700;font-display:swap;src:url("../fonts/tajawal-arabic-700-normal.woff2") format("woff2")}

:root{
  color-scheme:only light;
  --ink:#0C0C0C; --sub:#5C5C5C; --ph:#8E8E8E; --line:#E6E6E6; --icon:#0C0C0C;
  --red:#B3261E; --red-soft:#FBEAEA; --amber:#8A5A00; --amber-soft:#FFF1D6;
  /* theme D: indigo leads, soft teal second */
  --green:#4338CA; --green-soft:#ECEBFC; --gold:#4FB7A9; --gold-ink:#1E7A6F; --gold-soft:#E3F4F1;
  --pill-bg:#E3F4F1; --pill-ink:#1E7A6F; --bub-a:#E4F4F1; --bub-ink:#16403B;
  --av-a:#5B53E6; --av-b:#4338CA; --av-ring:#7CCFC4; --link:#4338CA; --bg:#FFFFFF; --row:#F3F4F7;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --kb:0px; --ease:cubic-bezier(.2,.7,.2,1);
  --float:0 0 113.333px rgba(0,0,0,.228); --float-c:0 0 113.333px rgba(0,0,0,.207);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#fff;overscroll-behavior:none}
body{font-family:"PJS",system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink);word-spacing:.04em;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[dir=rtl] body{font-family:"TJ","PJS",system-ui,sans-serif;word-spacing:0}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
#app{position:fixed;inset:0;overflow:hidden;background:#fff}
.noselect,.view{user-select:none;-webkit-user-select:none}
.sel,.ans,.bubble,input,textarea{user-select:text;-webkit-user-select:text}

/* ---------- views and motion ---------- */
.view{position:absolute;inset:0;background:var(--bg);overflow:hidden;contain:strict}
.view.enter-fwd{animation:inF .26s var(--ease) both}
.view.leave-fwd{animation:outF .26s var(--ease) both}
.view.enter-back{animation:inB .26s var(--ease) both}
.view.leave-back{animation:outB .26s var(--ease) both}
.view.enter-fade{animation:fadeIn .22s ease both}
@keyframes inF{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes outF{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-28px,0,0)}}
@keyframes inB{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@keyframes outB{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(28px,0,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
html[dir=rtl] .view.enter-fwd{animation-name:inB} html[dir=rtl] .view.leave-fwd{animation-name:outB}
html[dir=rtl] .view.enter-back{animation-name:inF} html[dir=rtl] .view.leave-back{animation-name:outF}
@media (prefers-reduced-motion:reduce){.view,.view *{animation-duration:.01s!important;transition-duration:.01s!important}}

.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--sat) + 67px) 17.333px calc(var(--sab) + 40px)}
.scroll.has-dock{padding-bottom:calc(var(--sab) + 108px)}
.topfade{position:absolute;left:0;right:0;top:0;height:calc(var(--sat) + 78px);background:linear-gradient(rgba(255,255,255,1) 58%,rgba(255,255,255,0));pointer-events:none;opacity:0;transition:opacity .18s}
.view.scrolled .topfade{opacity:1}

/* ---------- top bar ---------- */
.tb{position:absolute;left:15.333px;right:15.333px;top:calc(var(--sat) + 14px);height:47.667px;display:flex;align-items:center;gap:8.667px;pointer-events:none;z-index:5}
.tb > *{pointer-events:auto}
.tb .sp{flex:1;pointer-events:none}
.rb{width:47.667px;height:47.667px;border-radius:50%;background:#fff;box-shadow:var(--float);display:grid;place-items:center;flex:none;position:relative;transition:transform .12s}
.rb:active,.pillb:active{transform:scale(.94)}
.rb .dot{position:absolute;right:6px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #fff}
.pillb{height:47.667px;border-radius:24px;background:#fff;box-shadow:var(--float);display:flex;align-items:center;padding:0 18.667px;font-size:17px;font-weight:500;white-space:nowrap;transition:transform .12s}
.pillb.dash{background:var(--pill-bg);color:var(--pill-ink)}
.pillb.duo{padding:0;gap:0}
.pillb.duo button{width:47.667px;height:47.667px;display:grid;place-items:center}
.tb-title{position:absolute;left:64px;right:64px;top:0;height:47.667px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tb .meta{font-size:15px;color:var(--sub);font-weight:500;padding:0 6px}
.menu-ic{width:47.667px;height:47.667px}

/* ---------- page type ---------- */
.h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.01em;margin:6px 0 0 .667px}
.sub{font-size:15.5px;line-height:22px;color:var(--sub);margin:4px 0 0 .667px}
.lab{font-size:17px;line-height:24px;color:var(--ph);margin:26px 0 8px;margin-inline-start:18.667px}
.note{font-size:14px;line-height:20px;color:var(--ph);margin:12px 0 0;margin-inline-start:18.667px;max-width:330px}
.center{text-align:center}
.lnk{color:var(--link);font-weight:600}
.gap{height:22px}

/* ---------- grouped rows ---------- */
.grp{display:flex;flex-direction:column;gap:2.333px}
.row{position:relative;min-height:60.333px;background:var(--row);border-radius:4px;display:flex;align-items:center;padding-block:8px;padding-inline:61px 18px;text-align:start;width:100%;transition:background .15s}
button.row:active,a.row:active,.row.tap:active{background:#E9EAEF}
.row.two{min-height:77.667px}
.grp .row:first-child{border-top-left-radius:26px;border-top-right-radius:26px}
.grp .row:last-child{border-bottom-left-radius:26px;border-bottom-right-radius:26px}
.row .ri{position:absolute;inset-inline-start:18.2px;top:50%;margin-top:-12px;width:24px;height:24px}
.row .ri.av{inset-inline-start:12.5px;margin-top:-18px;width:36px;height:36px}
.row .tx{flex:1;min-width:0}
.row .t{font-size:17px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t.wrap{white-space:normal;line-height:22px}
.row .s{font-size:15px;line-height:21px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row .s.wrap{white-space:normal}
.row .rt{margin-inline-start:12px;flex:none;display:flex;align-items:center;gap:8px;color:var(--sub);font-size:15.5px}
.row.plain{padding-inline:18px}
.row.red .t{color:var(--red)}
.row.teal .t{color:var(--gold-ink)}
html[dir=rtl] .chev{transform:scaleX(-1)}
html[dir=rtl] [dir=ltr] .chev{transform:none}
/* a line of English inside the Arabic app keeps its own reading order and lines up with the Arabic around it; longer English paragraphs read from the left */
html[dir=rtl] .ltr-auto{text-align:right}
html[dir=rtl] .tile.ltr-auto,html[dir=rtl] .tile .ltr-auto,html[dir=rtl] .note.ltr-auto,html[dir=rtl] .expl.ltr-auto,html[dir=rtl] .passage .ltr-auto{text-align:left}
html[dir=rtl] [dir=ltr] .ltr-auto{text-align:left}

/* fields as rows */
.fld .lb{font-size:14px;line-height:20px;color:var(--sub);font-weight:500}
.fld input,.fld select{display:block;width:100%;border:0;background:transparent;outline:none;font-size:17px;line-height:24px;padding:0;margin-top:2px;color:var(--ink);-webkit-appearance:none;appearance:none;min-width:0}
.fld input::placeholder{color:#A5A5A5}
.fld.err{box-shadow:inset 0 0 0 1.5px var(--red)}
.fld .eye{width:40px;height:40px;display:grid;place-items:center;margin-inline-end:-10px}

/* ---------- controls ---------- */
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;font-size:13.5px;font-weight:600;white-space:nowrap;gap:5px}
.c-green{background:var(--green-soft);color:var(--green)}
.c-gold{background:var(--gold-soft);color:var(--gold-ink)}
.c-grey{background:#E7E7E7;color:var(--sub)}
.c-red{background:var(--red-soft);color:var(--red)}
.c-amber{background:var(--amber-soft);color:var(--amber)}
.chipsrow{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chipsrow::-webkit-scrollbar{display:none}
.chipsrow .chip{height:36px;padding:0 16px;border-radius:18px;font-size:15px;flex:none}
.chipsrow.fill .chip{flex:1 1 auto;justify-content:center;padding:0 clamp(7px,2.4vw,12px);font-size:clamp(13.5px,3.9vw,15px)}
.bp{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:26px;background:var(--green);color:#fff;font-size:17px;font-weight:600;width:100%;transition:transform .12s,opacity .15s}
.bp:active,.bs:active{transform:scale(.98)}
.bp[disabled]{opacity:.5}
.bp.teal{background:var(--gold)}
.bs{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:24px;background:var(--row);color:var(--ink);font-size:16px;font-weight:600;width:100%;transition:transform .12s}
.tile{background:var(--row);border-radius:24px}
.search{display:flex;align-items:center;gap:12px;height:47.667px;border-radius:24px;background:var(--row);padding:0 16px;color:var(--ph);font-size:17px}
.search input{flex:1;border:0;background:transparent;outline:none;font-size:17px;min-width:0;color:var(--ink)}
.search input::placeholder{color:var(--ph)}
.seg{display:flex;padding:4px;border-radius:24px;background:var(--row);gap:4px}
.seg button{flex:1;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--sub);transition:background .18s,color .18s,box-shadow .18s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sw{width:46px;height:28px;border-radius:14px;background:#D6D6D6;position:relative;flex:none;transition:background .18s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:left .18s var(--ease)}
.sw.on{background:var(--green)}
.sw.on::after{left:21px}
html[dir=rtl] .sw::after{left:auto;right:3px;transition:right .18s var(--ease)} html[dir=rtl] .sw.on::after{right:21px}
.bar{height:6px;border-radius:3px;background:#E2E2E2;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--green);transition:width .3s var(--ease)}
.av{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;flex:none}
.me-av{background:linear-gradient(145deg,var(--av-a),var(--av-b));box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--av-ring)}
.opt{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:18px;font-size:15px;font-weight:600;white-space:nowrap;background:var(--row);color:var(--ink)}
.opt.on{background:var(--green-soft);color:var(--green)}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid #B5B5B5;display:grid;place-items:center;flex:none}
.radio.on{border-color:var(--green)}
.radio.on::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--green)}
.check{width:22px;height:22px;border-radius:7px;border:2px solid #B5B5B5;display:grid;place-items:center;flex:none}
.check.on{border-color:var(--green);background:var(--green)}
.row.pick.on{background:var(--green-soft)}
.row.pick.on .t{color:var(--green);font-weight:600}
.row.pick.right{background:var(--gold-soft)} .row.pick.right .t{color:var(--gold-ink);font-weight:600}
.row.pick.wrong{background:var(--red-soft)} .row.pick.wrong .t{color:var(--red);font-weight:600}
.stat{background:var(--row);border-radius:20px;padding:14px 8px 12px;text-align:center}
.stat b{display:block;font-size:24px;line-height:30px;font-weight:700}
.stat span{display:block;font-size:13.5px;line-height:18px;color:var(--sub);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dock{position:absolute;left:17.333px;right:17.333px;bottom:calc(var(--sab) + 20px + var(--kb));display:grid;gap:10px;z-index:4}
.dock.two{grid-template-columns:1fr 1.45fr}
.dock::before{content:"";position:absolute;left:-17.333px;right:-17.333px;top:-24px;bottom:calc(-20px - var(--sab));background:linear-gradient(rgba(255,255,255,0),#fff 38%);z-index:-1;pointer-events:none}
.ta{display:block;width:100%;border:0;border-radius:22px;background:var(--row);padding:14px 18px;font-size:16.5px;line-height:24px;outline:none;resize:none;min-height:120px}
.input{display:block;width:100%;border:0;border-radius:18px;background:var(--row);padding:0 18px;height:52px;font-size:17px;outline:none}

/* ---------- ring gauge ---------- */
.ring{position:relative;margin:0 auto}
.ring svg{transform:rotate(-90deg)}
html[dir=rtl] .ring svg{transform:rotate(-90deg) scaleY(-1)}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring circle.v{transition:stroke-dasharray .9s var(--ease)}

/* ---------- sheets, drawer, toast ---------- */
.dim{position:absolute;inset:0;background:rgba(10,12,20,.32);opacity:0;transition:opacity .24s;z-index:50}
.dim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:28px 28px 0 0;padding:10px 17.333px calc(var(--sab) + 22px);z-index:51;transform:translate3d(0,105%,0);transition:transform .3s var(--ease);max-height:88%;overflow-y:auto;overscroll-behavior:contain}
.sheet.on{transform:none}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:#D9D9D9;margin:0 auto 14px}
.sheet h3{font-size:20px;line-height:26px;margin:4px 0 4px .667px;font-weight:700}
.sheet p.sh-sub{font-size:15px;line-height:21px;color:var(--sub);margin:0 0 16px .667px}
.drawer{position:absolute;top:0;bottom:0;left:0;width:min(86%,360px);background:#fff;z-index:51;transform:translate3d(-104%,0,0);transition:transform .3s var(--ease);box-shadow:8px 0 40px rgba(0,0,0,.10);display:flex;flex-direction:column}
html[dir=rtl] .drawer{left:auto;right:0;transform:translate3d(104%,0,0);box-shadow:-8px 0 40px rgba(0,0,0,.10)}
html[dir=rtl] .drawer.on{transform:none}
.drawer.on{transform:none}
.drawer .dsearch{margin:calc(var(--sat) + 14px) 15.333px 0;height:47.667px;border-radius:24px;background:#F3F4F3;display:flex;align-items:center;gap:12px;padding:0 14px;color:var(--ph);font-size:17px}
.drawer .dsearch input{flex:1;border:0;background:transparent;outline:none;font-size:17px;min-width:0}
.drawer .dlist{flex:1;overflow-y:auto;padding:12px 0 8px;overscroll-behavior:contain}
.drow{display:flex;align-items:center;gap:14.9px;width:100%;height:48px;padding-block:0;padding-inline:28px 20px;font-size:16.5px;font-weight:500;text-align:start}
.drow:active{background:#F4F4F6}
.drow .chv{margin-inline-start:auto;transition:transform .2s}
.drow.open .chv{transform:rotate(180deg)}
.dsub{overflow:hidden;max-height:0;transition:max-height .28s var(--ease)}
.dsub.open{max-height:400px}
.dsub .drow{padding-inline-start:64.9px;font-weight:400;font-size:16px;height:44px}
.dsec{font-size:14px;line-height:20px;font-weight:600;color:var(--ph);padding:14px 20px 8px}
.dchat{display:block;width:100%;text-align:start;padding:9px 20px;font-size:16px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dchat:active{background:#F4F4F6}
.dchat.on{background:#F1F1F4;border-radius:14px}
.hair{height:1px;background:#ECEDEC;margin:8px 20px}
.dme{display:flex;align-items:center;gap:12px;padding:10px 20px calc(var(--sab) + 12px);border-top:1px solid #ECEDEC;width:100%;text-align:start}
.dme .n{font-size:16px;line-height:20px;font-weight:600}
.dme .p{font-size:13.5px;line-height:18px;color:var(--ph)}
.toast{position:absolute;left:50%;bottom:calc(var(--sab) + 96px);transform:translate3d(-50%,20px,0);background:#1F1F22;color:#fff;font-size:15px;line-height:21px;padding:11px 18px;border-radius:22px;width:max-content;max-width:calc(100% - 48px);opacity:0;transition:opacity .2s,transform .25s var(--ease);z-index:90;pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- splash ---------- */
.splash{position:absolute;inset:0;background:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .35s ease}
.splash.out{opacity:0;pointer-events:none}
.splash .ringwrap{position:relative;width:168px;height:168px}
.splash .ringwrap svg.r{position:absolute;inset:0}
.splash .ringwrap .m{position:absolute}
.splash .wm{margin-top:26px;font-size:40px;line-height:48px}
.splash .tag{margin-top:6px;font-size:15px;line-height:22px;font-weight:500;color:var(--sub);letter-spacing:.06em}
.splash .ln{margin-top:18px;width:132px;height:2px;border-radius:1px;background:linear-gradient(90deg,rgba(79,183,169,0),var(--gold) 30%,var(--gold) 70%,rgba(79,183,169,0));transform:scaleX(0)}
.splash .foot{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 30px);text-align:center;font-size:13px;color:var(--ph);opacity:0}
.wm{font-family:"NU",sans-serif;font-weight:800;letter-spacing:-.005em;color:var(--green)}
.wm i{font-style:normal;color:var(--gold)}
.splash.go .ringwrap .ring-c{animation:drawRing .7s var(--ease) forwards}
.splash.go .m .a-line{animation:drawA .75s var(--ease) .25s forwards}
.splash.go .m .a-fill{animation:fillIn .45s ease .8s forwards}
.splash.go .m .x-in{animation:slideX .5s var(--ease) 1.05s forwards}
.splash.go .wm{animation:rise .5s var(--ease) 1.45s both}
.splash.go .tag{animation:rise .5s var(--ease) 1.65s both}
.splash.go .ln{animation:grow .55s var(--ease) 1.85s forwards}
.splash.go .foot{animation:fadeIn .6s ease 1.9s forwards}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes drawA{to{stroke-dashoffset:0}}
@keyframes fillIn{from{opacity:0}to{opacity:1}}
@keyframes slideX{from{opacity:0;transform:translate3d(40%,-20%,0)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}

/* ---------- welcome ---------- */
.door-mid{position:absolute;left:0;right:0;top:calc(var(--sat) + 72px);bottom:calc(var(--sab) + 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.door-mid .wm{font-size:34px;line-height:42px;margin-top:15px}
.door-mid .tg{font-size:15.5px;line-height:22px;color:var(--sub);margin-top:6px;padding:0 20px}
.door-mid .seg{width:236px;margin-top:36px}
.door-mid .seg button{height:38px}
.door-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:236px;margin-top:16px}
.door-pair .bs,.door-pair .bp{height:42px;border-radius:21px;font-size:15.5px}
.credit{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 6px);text-align:center;font-size:min(10.5px,2.62vw);line-height:14px;color:var(--ph);padding:0 10px}
.credit span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-pill{font-family:"TJ",sans-serif;font-weight:500;font-size:18px;padding-top:3px}
html[dir=rtl] .lang-pill{font-family:"PJS",sans-serif;font-size:16px;padding-top:0}

/* ---------- composer (AxChat) ---------- */
.comp{position:absolute;left:13px;right:13px;bottom:calc(var(--sab) + 12px + var(--kb));min-height:52px;border-radius:26px;background:#fff;box-shadow:var(--float-c);z-index:6;display:flex;align-items:flex-end;padding:0 8.667px 0 8px;transition:border-radius .15s}
.comp .cplus,.comp .cmic{width:40px;height:52px;display:grid;place-items:center;flex:none}
.comp textarea{flex:1;border:0;outline:none;background:transparent;resize:none;font-size:17px;line-height:24px;padding:14px 4px 14px 6px;max-height:168px;min-height:52px;color:var(--ink)}
.comp textarea::placeholder{color:var(--ph)}
.comp .csend{width:34.667px;height:34.667px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:8.667px 0;margin-inline-start:4px;flex:none;transition:transform .12s,background .15s}
.comp .csend:active{transform:scale(.92)}
.comp.tall{flex-wrap:wrap;border-radius:26px;padding:6px 8.667px 0 8px}
.comp.tall textarea{flex-basis:100%;order:0;padding:10px 10px 4px}
.comp.tall .cplus{order:1}
.comp.tall .grow{order:2;flex:1}
.comp.tall .cmic{order:3}
.comp.tall .csend{order:4}
.comp .grow{display:none}
.comp.tall .grow{display:block}
.comp.rec{box-shadow:0 0 0 2px var(--gold),var(--float-c)}
.sugs{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 80px + var(--kb));z-index:3;transition:opacity .18s}
.sug{display:flex;align-items:center;gap:13.9px;height:54.333px;padding:0 27px;font-size:17px;color:var(--sub);width:100%;text-align:start}
.sug:active{background:#F6F6F8}
.home-hero{position:absolute;left:0;right:0;top:calc(var(--sat) + 90px);bottom:calc(var(--sab) + 260px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px;pointer-events:none}
.home-hero .hi{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.home-hero .hs{font-size:15.5px;line-height:22px;color:var(--sub);margin-top:6px}

/* conversation */
.conv{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--sat) + 74px) 0 calc(var(--sab) + 110px + var(--kb))}
.msg-me{display:flex;justify-content:flex-end;padding:0 17.333px;margin:0 0 26px}
.bubble{max-width:78%;background:linear-gradient(180deg,var(--bub-a),#EAF6F4);color:var(--bub-ink);border-radius:22px;padding:11.5px 18px 14.3px;font-size:17px;line-height:26px;white-space:pre-wrap;word-wrap:break-word}
.msg-ax{padding:0 17.9px;margin:0 0 30px}
.ans{font-size:17px;line-height:26px;color:#0C0C0C;word-wrap:break-word}
.ans p{margin:0 0 16px}
.ans ul,.ans ol{margin:0 0 16px;padding-inline-start:22.333px}
.ans li{margin:0 0 10px;padding-inline-start:2px}
.ans li::marker{color:#0C0C0C}
.ans a,.ans .al{color:var(--link);font-weight:500}
.ans h2,.ans h3,.ans h4{font-size:19px;line-height:27px;margin:20px 0 10px;font-weight:700}
.ans h3{font-size:18px} .ans h4{font-size:17px}
.ans code{background:#F3F4F7;border-radius:6px;padding:1px 6px;font-size:15px}
.ans pre{background:#F3F4F7;border-radius:14px;padding:12px 14px;overflow-x:auto;font-size:14px;line-height:20px;margin:0 0 16px}
.ans table{border-collapse:collapse;margin:0 0 16px;font-size:15px;display:block;overflow-x:auto}
.ans td,.ans th{border:1px solid #E3E3E3;padding:6px 10px;text-align:start}
.ans blockquote{margin:0 0 16px;padding:2px 0;padding-inline-start:14px;border-inline-start:3px solid var(--gold);color:#333}
.ans .caret{display:inline-block;width:10px;height:10px;border-radius:50%;background:#0C0C0C;margin-inline-start:4px;vertical-align:middle;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.acts{display:flex;align-items:center;gap:18.5px;margin-top:6px;color:#858585}
.acts button{display:inline-flex;align-items:center;gap:3.5px;height:32px;font-size:14.5px;font-weight:600;color:#858585}
.acts button:active{opacity:.6}
.thinking{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:16px}
.thinking i{width:9px;height:9px;border-radius:50%;background:#0C0C0C;animation:pulse 1s infinite}
.down{position:absolute;left:50%;margin-left:-19px;bottom:calc(var(--sab) + 80px + var(--kb));width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04);display:grid;place-items:center;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s}
.down.on{opacity:1;pointer-events:auto}
.wall{background:var(--row);border-radius:22px;padding:16px 18px;font-size:15.5px;line-height:22px}
.wall b{display:block;font-size:17px;margin-bottom:4px}
.wall .bp,.wall .bs{margin-top:12px;height:46px}
.private-tag{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--gold-ink);background:var(--gold-soft);border-radius:14px;height:28px;padding:0 12px}

/* ---------- misc ---------- */
.empty{text-align:center;color:var(--sub);font-size:15.5px;line-height:22px;padding:40px 24px}
.empty .ei{width:56px;height:56px;border-radius:50%;background:var(--row);display:grid;place-items:center;margin:0 auto 12px}
.video{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(140deg,var(--av-a) 0%,var(--av-b) 70%);aspect-ratio:16/9}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(0,0,0,.22);display:grid;place-items:center}
.video .vlab{position:absolute;inset-inline-start:18px;bottom:14px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.9)}
.thumb{width:72px;height:44px;border-radius:10px;overflow:hidden;background:linear-gradient(140deg,var(--av-a),var(--av-b));flex:none;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qr{width:176px;height:176px;margin:0 auto;background:#fff;border-radius:18px;padding:14px}
.qr svg,.qr img{width:148px;height:148px}
.passage{background:var(--row);border-radius:22px;padding:15px 18px 16px;font-size:15.5px;line-height:23px;color:#2A2A2A}
.passage p{margin:0 0 10px} .passage p:last-child{margin:0}
.passage.clip{max-height:220px;overflow:hidden;position:relative}
.passage.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(rgba(243,244,247,0),var(--row))}
.qtext{font-size:21px;line-height:29px;font-weight:700;margin:22px 0 0 .667px}
.qtext p{margin:0 0 8px}
.expl{margin-top:16px;background:var(--gold-soft);color:#16403B;border-radius:20px;padding:14px 16px;font-size:15px;line-height:22px}
.flag.on{color:var(--amber)}
.kanban-chip{cursor:pointer}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.spin.dark{border-color:rgba(0,0,0,.12);border-top-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,#F1F2F5 25%,#E7E8EC 37%,#F1F2F5 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:12px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.hidden{display:none!important}
.frame-view iframe{position:absolute;left:0;right:0;bottom:0;top:calc(var(--sat) + 76px);width:100%;height:calc(100% - var(--sat) - 76px);border:0;background:#fff}