:root{
  --ground:#EEF0F3; --card:#FFFFFF; --ink:#1B2230; --muted:#667085; --line:#D9DDE4;
  --accent:#6B2D5C; --accent-ink:#FFFFFF; --accent-soft:#F1E6EE; --gold:#A8841B;
  --warn:#9A6200; --warn-soft:#FBF0DC; --bad:#B42318; --bad-soft:#FDE7E4; --track:#E3E6EC;
  --mine:#6B2D5C; --mine-ink:#FFFFFF; --theirs:#FFFFFF; --theirs-ink:#1B2230;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#11151C; --card:#1A202A; --ink:#E7EAF0; --muted:#98A2B3; --line:#2A3240;
    --accent:#D29BC4; --accent-ink:#1A1320; --accent-soft:#33243A; --gold:#E0C164;
    --warn:#F0B35A; --warn-soft:#3A2E17; --bad:#F97066; --bad-soft:#3D1E1C; --track:#262E3A;
    --mine:#5A2A4F; --mine-ink:#F6ECF3; --theirs:#1F2631; --theirs-ink:#E7EAF0;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans Arabic",Tahoma,system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.num{font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted);margin:0}
.small-text{font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2{margin:0;font-weight:600}
h2{font-size:17px}
.brand{font-family:"Alexandria",sans-serif;font-size:32px;font-weight:700;color:var(--accent)}

button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 16px}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.small{padding:6px 14px}
.link-btn{border:none;background:none;color:var(--accent);padding:4px 8px;font-size:14px}
.link-btn.danger{color:var(--bad)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
label{font-size:14px;color:var(--muted)}

.center-view{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.narrow{width:100%;max-width:380px}
.error{color:var(--bad);margin:0;font-size:14px}

/* ===== التطبيق ===== */
.app{height:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
.top{display:flex;align-items:center;gap:12px;padding:12px 16px 8px}
.meter{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.meter-text{display:flex;align-items:baseline;gap:10px}
.meter .label{font-size:13px;color:var(--muted)}
#remaining{font-size:26px;font-weight:700;line-height:1}
.bar{height:6px;background:var(--track);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .6s}
.meter.warn #remaining{color:var(--warn)} .meter.warn .bar-fill{background:var(--warn)}
.meter.bad #remaining{color:var(--bad)}   .meter.bad .bar-fill{background:var(--bad)}
.top-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.countdown{font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap}
.icon-btn{border:none;background:none;font-size:22px;line-height:1;padding:2px 8px;color:var(--muted)}

.alert{margin:0 16px 8px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500}
.alert.warn{background:var(--warn-soft);color:var(--warn)}
.alert.bad{background:var(--bad-soft);color:var(--bad)}

.tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:none;background:none;border-radius:0;padding:10px 12px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;position:relative}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.dot-badge{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);vertical-align:super}

.tab-panel{flex:1;min-height:0}
.tab-panel.scroll{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* ===== المحادثة ===== */
.chat{display:flex;flex-direction:column}
.messages{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.day-sep{align-self:center;font-size:12px;color:var(--muted);background:var(--track);padding:2px 10px;border-radius:99px;margin:8px 0}
.msg{max-width:80%;padding:8px 12px;border-radius:14px;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.mine{align-self:flex-start;background:var(--mine);color:var(--mine-ink);border-end-start-radius:4px}
.msg.theirs{align-self:flex-end;background:var(--theirs);color:var(--theirs-ink);border:1px solid var(--line);border-end-end-radius:4px}
.msg .time{font-size:11px;opacity:.7;align-self:flex-end}
.msg audio{width:220px;max-width:100%;height:36px}
.msg.pending{opacity:.6}
.empty-chat{margin:auto;text-align:center;color:var(--muted);font-size:14px;max-width:280px}
.typing{padding:0 16px 4px;font-size:13px;color:var(--muted)}

.locked{margin:8px 16px;padding:12px;border-radius:12px;background:var(--bad-soft);color:var(--bad);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}

.composer{border-top:1px solid var(--line);background:var(--card);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.counter-row,.recording{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.recording{color:var(--bad);font-size:15px}
.recording .link-btn{margin-inline-start:auto}
.counter-row .link-btn{margin-inline-start:auto}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}.bar-fill{transition:none}}
.compose-row{display:flex;align-items:flex-end;gap:8px}
.compose-row textarea{resize:none;max-height:140px;border-radius:20px;padding:9px 14px;line-height:1.4}
.round{width:42px;height:42px;flex:0 0 42px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--accent-soft);border:none;color:var(--accent)}
.round svg{width:22px;height:22px;fill:currentColor}
.round.send{background:var(--accent);color:var(--accent-ink)}

/* ===== المواضيع ===== */
.inline-form{display:flex;gap:8px}
.topic-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.topic-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.topic-list input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--accent)}
.topic-list .t{flex:1;min-width:0;overflow-wrap:anywhere}
.topic-list li.done .t{text-decoration:line-through;color:var(--muted)}

/* ===== الأيام ===== */
.days{display:flex;gap:4px;align-items:flex-end;height:160px}
.day{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.day .col{position:relative;flex:1;width:100%;background:var(--track);border-radius:4px;overflow:hidden;display:flex;align-items:flex-end}
.day .fill{width:100%;background:var(--accent)}
.day .fill.full{background:var(--bad)}
.day .cap{position:absolute;inset-inline:0;border-top:2px dashed var(--gold)}
.day .d{font-size:10px;color:var(--muted)}
.day.today .d{color:var(--ink);font-weight:700}
.day.future .col{opacity:.45}

/* ===== المراجعة ===== */
#reviewList{display:flex;flex-direction:column;gap:12px}
.review .answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.review .answers{grid-template-columns:1fr}}
.answer{background:var(--ground);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.answer h3{margin:0;font-size:14px}
.answer p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.answer .q{font-size:12px;color:var(--muted)}
.pill{display:inline-block;font-size:12px;padding:2px 10px;border-radius:99px;background:var(--track);color:var(--muted)}
.pill.now{background:var(--warn-soft);color:var(--warn)}
.review textarea{min-height:70px;resize:vertical}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:0;width:min(92vw,400px)}
dialog::backdrop{background:rgba(0,0,0,.4)}
.dialog-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.row-end{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.row-end .danger{margin-inline-end:auto}