:root { --bg:#fff; --fg:#111; --muted:#666; --accent:#0a7d4f; --err:#b00020; --card:#f3f4f6; }
@media (prefers-color-scheme: dark) { :root { --bg:#000; --fg:#f5f5f5; --muted:#aaa; --accent:#34c38f; --err:#ff6b6b; --card:#1c1c1e; } }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); }
body { font-family:-apple-system,"SF Arabic","Geeza Pro",system-ui,sans-serif; font-size:22px; line-height:1.6;
  padding:max(16px,env(safe-area-inset-top)) 16px 16px; max-width:640px; margin:auto; }
h1 { font-size:2em; margin:.3em 0; }
input,button { font:inherit; width:100%; padding:16px; border-radius:14px; border:2px solid var(--muted); background:var(--card); color:var(--fg); }
button { background:var(--accent); color:#fff; border:none; font-weight:700; margin-top:12px; }
button.secondary { background:var(--card); color:var(--fg); border:2px solid var(--muted); }
button:disabled { opacity:.5; }
.msg { min-height:1.6em; margin-top:12px; }
.err { color:var(--err); } .ok { color:var(--accent); }
.card { background:var(--card); border-radius:14px; padding:16px; margin-top:16px; }

/* ---------- وضع الاستماع ---------- */
body.app { padding:0; max-width:none; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:max(8px,env(safe-area-inset-top)) 12px 8px; border-bottom:1px solid var(--card); }
.status { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; min-width:0; }
.status span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dot { width:14px; height:14px; border-radius:50%; background:var(--muted); flex:none; }
.dot.live { background:var(--accent); } .dot.wait { background:#e0a800; } .dot.bad { background:var(--err); }
.tools { display:flex; gap:6px; flex:none; }
.tool { width:auto; margin:0; padding:8px 10px; font-size:16px; background:var(--card); color:var(--fg); border:1px solid var(--muted); border-radius:10px; font-weight:600; }
.level { height:4px; background:var(--card); }
.level div { height:100%; width:0; background:var(--accent); transition:width .1s linear; }
.log { flex:1; overflow-y:auto; padding:12px 16px 24px; font-size:var(--fs,36px); line-height:1.45; font-weight:600; -webkit-overflow-scrolling:touch; }
.log p { margin:0 0 .5em; overflow-wrap:anywhere; }
.log .interim { color:var(--muted); }
.log .empty { color:var(--muted); font-size:22px; font-weight:400; }
.jump { position:fixed; inset-inline:0; margin:auto; bottom:calc(110px + env(safe-area-inset-bottom)); width:auto; padding:10px 18px; border-radius:30px; font-size:18px; box-shadow:0 2px 10px #0004; }
.foot { padding:10px 16px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--card); }
.big { margin:0; padding:22px; font-size:28px; border-radius:18px; }
.big.stop { background:var(--err); }

/* ---------- التبويبات ---------- */
.view { flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }
.view[hidden] { display:none; }
.jump { position:absolute; bottom:110px; }
.tabs { display:flex; border-top:1px solid var(--card); padding-bottom:env(safe-area-inset-bottom); background:var(--bg); }
.tabs button { flex:1; margin:0; border-radius:0; background:transparent; color:var(--muted); font-size:19px; padding:12px 4px; }
.tabs button.on { color:var(--accent); box-shadow:inset 0 3px 0 var(--accent); }
.foot { padding-bottom:10px; }

/* ---------- تكلّم عني ---------- */
.speak { overflow-y:auto; padding:12px 16px 24px; display:block; }
.speak textarea { font:inherit; font-size:26px; width:100%; padding:14px; border-radius:14px; border:2px solid var(--muted); background:var(--card); color:var(--fg); resize:vertical; }
.row { display:flex; gap:10px; }
.row button { flex:1; }
button.small { font-size:18px; padding:12px; }
.phrases-head { display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.phrases-head h2 { font-size:22px; margin:0; }
.phrases { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.phrase { display:flex; gap:8px; }
.phrase .say { flex:1; margin:0; text-align:start; background:var(--card); color:var(--fg); border:2px solid var(--muted); font-size:22px; font-weight:600; }
.phrase .del { width:auto; margin:0; padding:0 18px; background:var(--err); }
.add { margin-top:12px; }
.add input { font-size:22px; }
.settings { margin-top:24px; background:var(--card); border-radius:14px; padding:12px 16px; font-size:19px; }
.settings summary { font-weight:700; cursor:pointer; }
.settings label { display:block; margin-top:12px; }
.settings select { font:inherit; width:100%; padding:10px; border-radius:10px; margin-top:4px; background:var(--bg); color:var(--fg); border:1px solid var(--muted); }
.note { font-size:17px; color:var(--muted); }

/* ---------- العرض بخط كبير ---------- */
.show { position:fixed; inset:0; z-index:10; background:#000; color:#fff; display:flex; flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
.show[hidden] { display:none; }
.show-text { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; line-height:1.3; overflow:hidden; overflow-wrap:anywhere; }
.show-bar { display:flex; gap:10px; }
.show-bar button { margin:0; flex:1; }
.show-bar .secondary { flex:0 0 90px; background:#222; color:#fff; border-color:#555; }

/* أزرار الاستماع (الخط والمسح والتنقية) تختفي في تبويب تكلّم عني */
body.speaking-tab #smaller, body.speaking-tab #bigger, body.speaking-tab #clear, body.speaking-tab #clean { display:none; }

/* ---------- المرحلة 4 ---------- */
.log .me { color:var(--accent); border-inline-start:4px solid var(--accent); padding-inline-start:10px; }
.log .me::before { content:"أنا: "; opacity:.7; }
.foot { display:flex; gap:10px; }
.foot .big.live { flex:0 0 80px; padding:0; font-size:30px; }
.show-text.flipped { transform:rotate(180deg); }
.danger { color:var(--err) !important; border-color:var(--err) !important; }
#view-history h2 { margin:0 0 4px; font-size:24px; }
.conv { background:var(--card); border-radius:14px; padding:12px 14px; margin-top:12px; font-size:20px; }
.conv summary { font-weight:700; cursor:pointer; font-size:18px; }
.conv-preview { font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
.conv p { margin:10px 0 0; }
.conv p.me { color:var(--accent); }
.conv p.me::before { content:"أنا: "; opacity:.7; }
.conv[open] .conv-preview { display:none; }
#clearHistory { margin-top:24px; }
.log .help { font-size:19px; font-weight:400; line-height:1.5; background:var(--card); border:2px solid var(--err); border-radius:14px; padding:12px 14px; margin-top:8px; }
.log .help strong { color:var(--err); font-size:21px; }
.log .help ol { margin:8px 0; padding-inline-start:22px; }
.log .help small { color:var(--muted); font-size:14px; direction:ltr; display:block; text-align:start; }