/* Pista Live — design layer v2. Light, crisp product chrome (Linear / Attio density), a real time grid,
   device stages for Coach and Student, a light "inspector" chain, Ask Pista and the message peek. */
:root{
  --app-bg:#F7F8FA; --side-bg:#F3F5F7; --panel:#FFFFFF; --hair:rgba(13,20,36,.08); --hair-2:rgba(13,20,36,.14);
  --sh-1:0 1px 2px rgba(13,20,36,.06),0 1px 1px rgba(13,20,36,.04); --sh-2:0 8px 24px rgba(13,20,36,.08),0 2px 6px rgba(13,20,36,.05); --sh-3:0 24px 60px rgba(13,20,36,.16),0 6px 16px rgba(13,20,36,.08);
  --ch-bg:#FBFBFC; --ch-ink:#0D1424; --ch-mute:#5F697B; --ch-line:rgba(13,20,36,.08); --ch-accent:#2B3FD4; --ch-ok:#1E7A52; --ch-warn:#8F5B00; --ch-bad:#B3261E;
  --lv1:#EEF1FF; --lv1b:#A5B0F7; --lv2:#E1E6FF; --lv2b:#7F8DF0; --lv3:#CDD5FF; --lv3b:#4E60E5; --lv4:#2B3FD4;
  --fs:13.5px; --bar-h:56px; --side-w:220px; --chain-w:380px;
}
body{background:var(--app-bg)}
#main,.scroll{background:var(--panel)}
.scroll{scrollbar-width:thin}

/* ---------- top bar ---------- */
.bar{background:var(--panel);border-block-end:1px solid var(--hair);padding:8px 16px;gap:14px;flex-wrap:nowrap}
.bar .wm{flex:none}
.bar .wm svg{height:22px;width:auto}
.bar .wm small{font-size:10px;letter-spacing:.2em;color:var(--mute);border-inline-start:1px solid var(--hair-2);padding-inline-start:8px;margin-inline-start:2px}
.acad{display:flex;align-items:center;gap:10px;min-width:0;padding-inline-start:14px;border-inline-start:1px solid var(--hair)}
.acad-av{inline-size:30px;block-size:30px;border-radius:8px;background:var(--ultra);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;flex:none}
.acad-t{display:grid;line-height:1.2;min-width:0}
.acad-t b{font-size:13px;font-weight:600;white-space:nowrap}
.acad-s{display:flex;gap:2px;align-items:center}
.mini-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-size:12px;color:var(--mute);padding:1px 16px 1px 0;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 7px) 55%,calc(100% - 3px) 55%;background-size:4px 4px;background-repeat:no-repeat;max-inline-size:170px}
.mini-sel+.mini-sel::before{content:"·";color:var(--mute);margin-inline:4px}
.mini-sel{display:inline-flex;align-items:center}
.mini-sel select:hover{color:var(--ink)}
.ex-badge{font-size:11px}
.bar-r{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.seg.role{background:#EEF1F2;border-radius:9px;padding:3px;display:inline-flex;gap:2px;border:0}
.seg.role .btn{border:0;background:transparent;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--ink-2);box-shadow:none}
.seg.role .btn[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.ask-btn{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--sans);color:var(--ultra);background:var(--ultra-soft);border:1px solid rgba(43,63,212,.18);border-radius:9px;padding:6px 12px;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.ask-btn svg{inline-size:16px;block-size:16px}
.ask-btn:active{transform:scale(.97)}
.ask-btn[aria-expanded="true"]{background:var(--ultra);color:#fff}
.lang summary{border:1px solid var(--hair-2);border-radius:8px;padding:5px 9px;font-size:12px;background:#fff}
@media (max-width:1180px){.ex-badge{display:none}}
@media (max-width:900px){.bar{flex-wrap:wrap}.acad{order:3;inline-size:100%;border:0;padding:0}.bar-r{gap:6px}.ask-btn span,.ask-btn{font-size:0;padding:7px}.ask-btn svg{inline-size:18px;block-size:18px}}

/* ---------- sidebar ---------- */
.side{background:var(--side-bg);border-inline-end:1px solid var(--hair);padding:12px 10px;gap:2px}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nv{display:flex;align-items:center;gap:10px;inline-size:100%;border:0;background:transparent;border-radius:7px;padding:7px 10px;font-size:13.5px;color:var(--ink-2);cursor:pointer;text-align:start;position:relative;transition:background-color 120ms ease,color 120ms ease}
.nv svg{inline-size:18px;block-size:18px;flex:none;color:var(--mute)}
.nv-l{flex:1}
.nv[aria-current="page"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.nv[aria-current="page"] svg{color:var(--ultra)}
.nv[aria-current="page"]::before{display:none}
@media (hover:hover) and (pointer:fine){.nv:hover{background:rgba(13,20,36,.04);color:var(--ink)}}
.nv-c:empty{display:none}
.nv-c{min-inline-size:18px;block-size:18px;border-radius:9px;background:var(--ultra);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center;padding-inline:5px}
.side-foot{margin-block-start:auto;border-block-start:1px solid var(--hair);padding:12px 10px 4px;font-size:12px;color:var(--ink-2)}
.side-foot p{margin-block-start:4px}
body[data-role="coach"] .side,body[data-role="student"] .side{display:none}
body[data-role="coach"] .app,body[data-role="student"] .app{grid-template-columns:minmax(0,1fr) var(--chain-w)}

/* ---------- view header ---------- */
.vh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-block-end:16px}
.vh h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.vh-sub{color:var(--mute);font-size:13px;margin-block-start:2px}
.vh-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view{padding:22px 26px 60px}

/* ---------- calendar time grid ---------- */
.seg2{display:inline-flex;background:#EEF1F2;border-radius:8px;padding:3px;gap:2px}
.seg2 button{border:0;background:transparent;border-radius:6px;padding:5px 12px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.dnav{display:flex;align-items:center;gap:6px}
.ib{inline-size:30px;block-size:30px;border-radius:8px;border:1px solid var(--hair-2);background:#fff;cursor:pointer;font-size:16px;line-height:1;color:var(--ink-2);display:inline-grid;place-items:center;transition:transform 160ms var(--ease-out),background-color 120ms ease}
.ib:active{transform:scale(.95)}
.dn-today{border:1px solid var(--hair-2);background:#fff;border-radius:8px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.dn-l{font-size:13.5px;font-weight:600;margin-inline-start:6px;white-space:nowrap}
.cal-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-block-end:12px}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--mute)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.sw{inline-size:12px;block-size:12px;border-radius:3px;display:inline-block}
.cal-wrap{position:relative}
.cal-wrap .dp{position:absolute;inset-block-start:10px;inset-inline-end:10px;inline-size:min(340px,calc(100% - 20px));max-block-size:calc(100% - 20px);overflow:auto;z-index:20;animation:dpIn 200ms var(--ease-out)}
@keyframes dpIn{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.cal-wrap .dp{animation:none}}
.tg-scroll{border:1px solid var(--hair);border-radius:12px;overflow:auto;max-block-size:calc(100dvh - 250px);background:#fff;overscroll-behavior:contain}
.tg{display:grid;grid-template-columns:54px repeat(var(--cols),minmax(150px,1fr));min-inline-size:fit-content;position:relative}
.tg.wk{grid-template-columns:54px repeat(7,minmax(118px,1fr))}
.tg-hours{position:relative;grid-row:1;padding-block-start:46px;border-inline-end:1px solid var(--hair);background:#fff;position:sticky;inset-inline-start:0;z-index:3}
.tg-hours span{position:absolute;inset-inline-end:8px;font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums;transform:translateY(calc(46px - 50%))}
.tg-col{border-inline-end:1px solid var(--hair);min-width:0}
.tg-col:last-child{border-inline-end:0}
.tg-col.is-today .tg-body{background:rgba(43,63,212,.025)}
.tg-ch{position:sticky;inset-block-start:0;z-index:2;block-size:46px;display:flex;flex-direction:column;justify-content:center;padding-inline:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-block-end:1px solid var(--hair)}
.tg-ch b{font-size:12.5px;font-weight:600}
.tg-ch small{font-size:11px;color:var(--mute)}
.tg-col.is-today .tg-ch b{color:var(--ultra)}
.tg-body{position:relative}
.tg-lines i{position:absolute;inset-inline:0;border-block-start:1px solid var(--hair)}
.evt{position:absolute;inset-inline:4px;display:flex;flex-direction:column;gap:1px;text-align:start;border:0;border-radius:7px;padding:5px 8px 5px 10px;font:inherit;font-size:11.5px;line-height:1.3;overflow:hidden;cursor:pointer;color:var(--ink);transition:box-shadow 150ms ease,transform 160ms var(--ease-out)}
.evt::before{content:"";position:absolute;inset-block:5px;inset-inline-start:4px;inline-size:2.5px;border-radius:2px;background:currentColor;opacity:.55}
.evt .et{font-size:10.5px;font-variant-numeric:tabular-nums;opacity:.75;white-space:nowrap}
.evt .en{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt .em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}
.evt .fls{display:flex;gap:3px;flex-wrap:wrap;margin-block-start:2px}
.evt .fl{font-style:normal;font-size:9.5px;font-weight:600;border-radius:4px;padding:0 4px;background:#fff}
.fl.warn{color:var(--warn)}.fl.bad{color:var(--bad)}.fl.info{color:var(--ultra)}.fl.mute{color:var(--mute)}
@media (hover:hover) and (pointer:fine){.evt:hover{box-shadow:var(--sh-2);z-index:2}}
.evt:active{transform:scale(.985)}
.evt.sel{box-shadow:0 0 0 2px var(--ultra),var(--sh-2);z-index:3}
.lv-beginner{background:var(--lv1);color:#25307A}.lv-beginner::before{background:var(--lv1b)}
.lv-improver{background:var(--lv2);color:#1F2A75}
.lv-intermediate{background:var(--lv3);color:#17216A}
.lv-advanced{background:var(--lv4);color:#fff}
.evt.pv,.sw.pv{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ultra);color:var(--ultra)}
.evt.pv .en{color:var(--ink)}
.evt.tr,.sw.tr{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(43,63,212,.55);background-image:none;outline:1.5px dashed rgba(43,63,212,.6);outline-offset:-1.5px;color:var(--ultra)}
.evt.ext,.sw.ext{background:repeating-linear-gradient(-45deg,#F4F5F7 0 6px,#ECEEF1 6px 12px);color:#4A5466}
.evt.ext::before{opacity:.25}
.sw.lv-beginner{background:var(--lv1);box-shadow:inset 0 0 0 1px var(--lv1b)}.sw.lv-improver{background:var(--lv2)}.sw.lv-intermediate{background:var(--lv3)}.sw.lv-advanced{background:var(--lv4)}
.tg-now{position:absolute;inset-inline:0;border-block-start:1.5px solid #E5484D;z-index:4;pointer-events:none}
.tg-now b{position:absolute;inset-inline-start:2px;inset-block-start:-9px;font-size:9.5px;font-weight:600;color:#fff;background:#E5484D;border-radius:4px;padding:1px 4px}
.tg-now::before{content:"";position:absolute;inset-inline-start:-4px;inset-block-start:-4.5px;inline-size:7px;block-size:7px;border-radius:50%;background:#E5484D}

/* detail panel */
.dp{background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:var(--sh-2);padding:18px;display:grid;gap:12px;align-content:start}
.dp h2{font-size:18px;font-weight:600;letter-spacing:-.015em;padding-inline-end:28px}
.dp .k{color:var(--ultra)}
.dp-x{position:absolute;inset-inline-end:12px;inset-block-start:12px}
.dp-dl{display:grid;gap:8px;margin:0}
.dp-dl div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;font-size:13px}
.dp-dl dt{color:var(--mute)}
.dp-dl dd{margin:0}
.dp-h{font-size:12px;font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;border-block-start:1px solid var(--hair);padding-block-start:12px}
.dp-r{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dp-r li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dp-st{display:flex;align-items:center;gap:10px;border:0;background:none;padding:6px 4px;border-radius:7px;cursor:pointer;text-align:start;min-width:0;flex:1}
@media (hover:hover) and (pointer:fine){.dp-st:hover{background:var(--app-bg)}}
.dp-st .av{inline-size:28px;block-size:28px;border-radius:50%;background:var(--ultra-soft);color:var(--ultra);font-size:10.5px;font-weight:600;display:grid;place-items:center;flex:none}
.dp-n{display:grid;font-size:13px;min-width:0}
.dp-n small{color:var(--mute);font-size:11.5px}
.dp-p{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dp-a{display:flex;gap:8px;flex-wrap:wrap;border-block-start:1px solid var(--hair);padding-block-start:12px}
.dp-note{font-size:12.5px;color:var(--ink-2);background:var(--app-bg);border-radius:8px;padding:10px 12px}

/* ---------- KPIs and panels ---------- */
.kpis{border:1px solid var(--hair);border-radius:12px;background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.kpi{background:#fff}
.kv{font-size:24px;letter-spacing:-.02em;font-weight:600}
.panel{border:1px solid var(--hair);border-radius:12px;background:#fff;box-shadow:var(--sh-1)}

/* ---------- Coach / Student stages ---------- */
body[data-role="coach"] #view,body[data-role="student"] #view{padding:0;min-block-size:100%}
body[data-role="coach"] .scroll,body[data-role="student"] .scroll{background:radial-gradient(1200px 600px at 50% 30%,#FFFFFF 0%,#EEF1F2 70%)}
.stage-v{display:grid;grid-template-columns:minmax(220px,300px) auto minmax(0,280px);gap:40px;align-items:center;justify-content:center;min-block-size:calc(100dvh - var(--bar-h));padding:32px 28px}
.st-x{display:grid;gap:12px;align-content:center}
.st-x h1{font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.st-x .k{color:var(--ultra)}
.st-x ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.st-x li{padding-inline-start:18px;position:relative}
.st-x li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:8px;block-size:1.5px;background:var(--ultra)}
.st-try{display:grid;gap:8px;border-block-start:1px solid var(--hair-2);padding-block-start:14px;margin-block-start:4px}
.st-try .who{display:grid;gap:6px}
.st-try .chips{display:flex;flex-wrap:wrap;gap:6px}
.try{border:1px solid rgba(43,63,212,.25);background:#fff;color:var(--ultra);border-radius:9px;padding:9px 12px;text-align:start;font:500 13px var(--sans);cursor:pointer;transition:background-color 120ms ease,transform 160ms var(--ease-out)}
.try::after{content:"  →"}
.try:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.try:hover{background:var(--ultra-soft)}}
.st-dev{display:grid;place-items:center}
.phone{inline-size:330px;block-size:min(690px,calc(100dvh - var(--bar-h) - 64px));background:#fff;border-radius:44px;box-shadow:0 0 0 10px #10141C,0 0 0 11px #2A303B,var(--sh-3);overflow:hidden;display:flex;flex-direction:column;position:relative;color:var(--ink);max-width:calc(100vw - 48px)}
.ph-notch{position:absolute;inset-block-start:10px;inset-inline-start:50%;transform:translateX(-50%);inline-size:96px;block-size:26px;border-radius:14px;background:#10141C;z-index:3}
[dir="rtl"] .ph-notch{transform:translateX(50%)}
.ph-status{display:flex;justify-content:space-between;padding:14px 26px 6px;font-size:12px;font-weight:600;color:var(--ink);background:#fff}
.ph-status span{display:flex;justify-content:space-between;inline-size:100%}
.ph-body{overflow:auto;flex:1;padding:10px 16px 18px;display:grid;gap:12px;align-content:start;background:#F7F8FA}
.ph-hi{font-size:20px;font-weight:600;letter-spacing:-.02em}
.cls{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh-1);display:grid;gap:8px}
.cls-h{display:flex;gap:10px;align-items:baseline}
.cls-h b{font-variant-numeric:tabular-nums}
.roster{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.roster li{display:flex;align-items:center;gap:8px;font-size:13px}
.roster .av{inline-size:26px;block-size:26px;border-radius:50%;background:var(--ultra-soft);color:var(--ultra);font-size:10px;font-weight:600;display:grid;place-items:center;flex:none}
.roster .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-h{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;border-block-end:1px solid var(--hair);background:#fff}
.chat-h .av{inline-size:34px;block-size:34px;border-radius:50%;background:var(--ultra);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.chat-h b{font-size:14px}
.chat-h small{display:block;color:var(--mute);font-size:11.5px}
.thread{list-style:none;margin:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1;background:#EEF0F4}
.thread .sep{align-self:center;font-size:11px;color:var(--mute);background:rgba(255,255,255,.8);border-radius:999px;padding:2px 10px}
.thread .b{max-inline-size:82%;border-radius:16px;padding:9px 12px;display:grid;gap:4px;font-size:13.5px;line-height:1.4;box-shadow:0 1px 1px rgba(13,20,36,.06)}
.thread .b.out{align-self:flex-start;background:#fff;border-end-start-radius:4px}
.thread .b.in{align-self:flex-end;background:#D9DEFF;border-end-end-radius:4px}
.thread .b.draft{opacity:.65;outline:1.5px dashed var(--warn);outline-offset:2px}
.thread .bm{font-size:10.5px;color:var(--mute);justify-self:end}
.composer{padding:10px 14px 18px;background:#fff;border-block-start:1px solid var(--hair);font-size:12px;color:var(--mute);text-align:center}
.st-comp{align-self:center}
.sp{background:#fff;border-radius:18px;box-shadow:var(--sh-2);padding:18px;display:grid;gap:12px;border:1px solid var(--hair)}
.sp-h{display:flex;align-items:center;gap:10px}
.sp-h .av{inline-size:38px;block-size:38px;border-radius:50%;background:var(--ultra-soft);color:var(--ultra);display:grid;place-items:center;font-weight:600;font-size:12px}
.sp-h small{display:block;color:var(--mute);font-size:11.5px}
.sp dl{margin:0;display:grid;gap:8px}
.sp dl div{display:grid;gap:2px;border-block-start:1px solid var(--hair);padding-block-start:8px}
.sp dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sp dd{margin:0;font-size:13.5px;font-weight:500}
.sp-pay{background:var(--ultra);color:#fff;text-align:center;border-radius:10px;padding:10px;font-weight:600;font-size:13.5px}
@media (max-width:1280px){.stage-v{grid-template-columns:minmax(200px,280px) auto}.st-comp{grid-column:1/-1;justify-self:center;inline-size:min(360px,100%)}}
@media (max-width:820px){.stage-v{grid-template-columns:1fr;gap:24px;padding:20px 16px}.st-x{order:2}.st-dev{order:1}}

/* ---------- Live chain as a light inspector ---------- */
.chain{border-inline-start:1px solid var(--hair);box-shadow:none}
.chain .btn-p{color:#fff}
.chain .btn-s{border-color:var(--hair-2);background:#fff}
.sc{background:#fff}
.mo{display:grid;gap:10px;padding:8px 4px}
.mo .k{color:var(--ultra)}
.mo h3{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.mo-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-block-start:4px}
.mo-b{display:grid;gap:4px;text-align:start;border:1px solid var(--hair-2);background:#fff;border-radius:12px;padding:12px;cursor:pointer;box-shadow:var(--sh-1);transition:transform 160ms var(--ease-out),border-color 150ms ease,box-shadow 150ms ease}
.mo-b b{font-size:13px;line-height:1.3}
.mo-b small{font-size:11.5px;color:var(--mute);line-height:1.35}
@media (hover:hover) and (pointer:fine){.mo-b:hover{border-color:rgba(43,63,212,.45);box-shadow:var(--sh-2)}}
.mo-b:active{transform:scale(.98)}
.mo-story{justify-content:center;margin-block-start:4px}

/* ---------- Ask Pista ---------- */
#main{position:relative}
.ask{position:absolute;inset-block-end:18px;inset-inline-start:50%;transform:translateX(-50%);z-index:60;pointer-events:none}
[dir="rtl"] .ask{transform:translateX(50%)}
.ask.open{pointer-events:auto}
.ask-card{inline-size:min(380px,calc(100vw - 32px));max-block-size:min(560px,calc(100dvh - var(--bar-h) - 40px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair-2);border-radius:16px;box-shadow:var(--sh-3);overflow:hidden;animation:askIn 220ms var(--ease-out)}
@keyframes askIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.ask-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-block-end:1px solid var(--hair)}
.ask-h b{font-size:14px}
.ask-h .ib{margin-inline-start:auto;inline-size:26px;block-size:26px}
.ask-log{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1}
.am{font-size:13.5px;line-height:1.45;max-inline-size:92%}
.am.you{align-self:flex-end;background:var(--ultra);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px}
.am.bot{align-self:flex-start;display:grid;gap:8px}
.al{display:grid;gap:4px}
.ask-link{text-align:start;border:1px solid var(--hair);background:var(--app-bg);border-radius:8px;padding:6px 10px;font:13px var(--sans);cursor:pointer;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.ask-link:hover{border-color:rgba(43,63,212,.4);color:var(--ultra)}}
.ask-sug{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.ask-sug button{border:1px solid var(--hair-2);background:#fff;border-radius:999px;padding:5px 10px;font:12.5px var(--sans);cursor:pointer;color:var(--ink-2)}
.ask-f{display:flex;gap:8px;padding:10px 12px;border-block-start:1px solid var(--hair)}
.ask-f input{flex:1;min-width:0;border:1px solid var(--hair-2);border-radius:9px;padding:8px 10px;font:13.5px var(--sans);background:var(--app-bg)}
.ask-f input:focus{outline:2px solid var(--ultra);outline-offset:0;background:#fff}
.ask-note{font-size:11px;color:var(--mute);padding:0 14px 12px;line-height:1.4}

/* ---------- message peek: the student's phone, as the cause happens ---------- */
.peek{position:fixed;inset-block-end:24px;inset-inline-end:calc(var(--chain-w) + 24px);z-index:55;opacity:0;transform:translateY(20px) scale(.98);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);pointer-events:none}
.peek.show{opacity:1;transform:none;pointer-events:auto}
.pk-in{display:grid;gap:8px;inline-size:300px;text-align:start;border:0;cursor:pointer;background:#fff;border-radius:22px;padding:14px;box-shadow:0 0 0 6px #10141C,var(--sh-3);font:inherit;color:var(--ink)}
.pk-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.pk-ch{background:var(--ultra);color:#fff;border-radius:6px;padding:1px 6px;font-size:10.5px;font-weight:600}
.pk-b{background:#EEF0F4;border-radius:14px 14px 14px 4px;padding:9px 11px;font-size:13px;line-height:1.4}
.pk-f{font-size:11.5px;color:var(--ultra);font-weight:600}
@media (max-width:1099px){.peek{inset-inline-end:12px;inset-block-end:84px}.ask{inset-block-end:72px}}
@media (prefers-reduced-motion:reduce){.peek{transition:none}.ask-card{animation:none}}

.ct-l{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ch-body:has(.mo) .story-btn{display:none}
.st-x{min-width:0}
.st-x .sel,.st-x select{inline-size:100%;max-inline-size:100%}
.st-x .who label{display:grid;gap:4px}
.nd .nd-t{color:var(--ink)}
.t-ok>.nd-b>.nd-t,.t-warn>.nd-b>.nd-t,.t-bad>.nd-b>.nd-t{color:var(--ink)}
.t-bad>.nd-b>.nd-t{color:var(--bad)}
.sw{box-shadow:inset 0 0 0 1px rgba(13,20,36,.12)}
.chain .nd-money{color:var(--warn)}
.thread .b.in{margin-inline-end:4px}
.thread .b.out{margin-inline-start:2px}

/* Ask Pista bar: a chat box floating over the product, impossible to miss */
.ask-bar{position:absolute;inset-block-end:18px;inset-inline-start:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;inline-size:min(520px,calc(100% - 40px));padding:12px 14px 12px 16px;border-radius:14px;border:1px solid rgba(43,63,212,.22);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(43,63,212,.16),0 2px 6px rgba(13,20,36,.06);font:14px var(--sans);color:var(--mute);cursor:text;text-align:start;transition:box-shadow 200ms ease,transform 160ms var(--ease-out)}
[dir="rtl"] .ask-bar{transform:translateX(50%)}
.ask-bar svg{inline-size:18px;block-size:18px;color:var(--ultra);flex:none}
.ask-bar span{flex:1}
.ask-bar kbd{font:600 11px var(--mono);color:var(--mute);border:1px solid var(--hair-2);border-radius:5px;padding:1px 6px;background:#fff}
@media (hover:hover) and (pointer:fine){.ask-bar:hover{box-shadow:0 14px 36px rgba(43,63,212,.24),0 2px 6px rgba(13,20,36,.06);color:var(--ink-2)}}
.ask-bar:active{transform:translateX(-50%) scale(.99)}
body.ask-open .ask-bar,body[data-role="coach"] .ask-bar,body[data-role="student"] .ask-bar{display:none}
#view{padding-block-end:110px}
@media (max-width:1099px){.ask-bar{inset-block-end:72px}}

/* Collapsed Live chain becomes a thin rail and gives the space back */
@media (min-width:1100px){
  body[data-sheet="rail"] .app{grid-template-columns:var(--side-w) minmax(0,1fr) 46px}
  body[data-sheet="rail"][data-role="coach"] .app,body[data-sheet="rail"][data-role="student"] .app{grid-template-columns:minmax(0,1fr) 46px}
  .chain[data-sheet="rail"] .ch-head{border:0;block-size:100%}
  .chain[data-sheet="rail"] .ch-toggle{flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;block-size:100%;padding:14px 0}
  .chain[data-sheet="rail"] .ch-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;letter-spacing:.02em}
  .chain[data-sheet="rail"] .ch-title::before{margin-block-end:4px}
  .chain[data-sheet="rail"] .ch-clock{display:none}
  .chain[data-sheet="rail"] .ch-chev{order:-1;transform:rotate(135deg)}
}

/* Payment proof: the receipt the student sent, next to what the checker verified */
.proof{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:16px;margin-block:10px 4px;padding:14px;background:var(--app-bg);border-radius:12px}
@media (max-width:760px){.proof{grid-template-columns:1fr}}
.pf-l,.pf-r{display:grid;gap:8px;align-content:start;min-width:0}
.rcpt{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--sh-1);display:grid;gap:8px;border:1px solid var(--hair);font-size:12px}
.rc-h{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.rc-h small{grid-column:2;color:var(--mute);font-size:11px}
.rc-ok{inline-size:22px;block-size:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:12px;grid-row:span 2}
.rc-amt{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rcpt dl{margin:0;display:grid;gap:4px}
.rcpt dl div{display:flex;justify-content:space-between;gap:10px;border-block-start:1px dashed var(--hair-2);padding-block-start:4px}
.rcpt dt{color:var(--mute)}
.rcpt dd{margin:0;text-align:end;font-weight:500}
.pf-c{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
.pf-c li{display:flex;gap:8px;align-items:flex-start}
.ck{inline-size:18px;block-size:18px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-block-start:1px}
.pf-n{font-size:12px;color:var(--ink-2);border-block-start:1px solid var(--hair);padding-block-start:8px}
.b-att{display:block;margin-block-end:6px}
.b-att .rcpt{box-shadow:none;font-size:11px;padding:10px 12px}
.b-att .rc-amt{font-size:18px}

/* peek sits above the Ask bar and follows the chain's width */
.peek{inset-block-end:92px}
body[data-sheet="rail"] .peek{inset-inline-end:70px}
/* short calendar blocks: flags float top-right so time, title and meta always fit */
.evt{line-height:1.25;padding-block:4px}
.evt .fls{position:absolute;inset-block-start:4px;inset-inline-end:5px;margin:0}
.evt .et{padding-inline-end:46px}