/* Daber! — front-end styles. Namespaced so themes can't bleed in. */

.daber-app{
  --d-bg:#0e1116; --d-bg2:#151a22; --d-bg3:#1c232d; --d-line:#2a3441;
  --d-ink:#e8edf4; --d-ink2:#9fb0c4; --d-ink3:#6c7d92;
  --d-accent:#4cc2ff; --d-accent2:#7ee0c4; --d-warm:#f2c14e; --d-good:#6fdc8c; --d-bad:#ff7a7a;
  --pc:#4cc2ff;
  position:relative; display:flex; flex-direction:column;
  height:var(--daber-h,660px); min-height:420px;
  background:var(--d-bg); color:var(--d-ink); border:1px solid var(--d-line); border-radius:16px;
  overflow:hidden; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.daber-app *{box-sizing:border-box}
/* Any class rule that declares `display` outranks the browser's own
   [hidden]{display:none}, which silently pinned the paywall overlay on screen.
   This restores `hidden` as the single source of truth inside the app. */
.daber-app [hidden]{display:none !important}
.daber-app button{font:inherit;color:inherit;cursor:pointer}
.daber-app input,.daber-app select{font:inherit;color:inherit}
.daber-heb{
  font-family:"Noto Sans Hebrew","Noto Serif Hebrew","David Libre","Arial Hebrew","Times New Roman",serif;
  direction:rtl; unicode-bidi:isolate;
}
.daber-bigword{font-size:44px;line-height:1.3;margin-bottom:2px;color:var(--d-ink)}
.daber-translit-big{color:var(--d-accent2);font-style:italic;margin-bottom:12px}

/* cast */
.daber-cast{display:flex;gap:9px;padding:12px;border-bottom:1px solid var(--d-line);background:#11161d;overflow-x:auto}
.daber-who{
  flex:1 1 0;min-width:150px;text-align:left;display:flex;gap:10px;align-items:center;
  background:var(--d-bg2);border:1px solid var(--d-line);border-radius:13px;padding:9px 11px;transition:.15s;
}
.daber-who:hover{border-color:#3d4b5d}
.daber-who.on{border-color:var(--wc,var(--d-accent));box-shadow:inset 0 0 0 1px var(--wc,var(--d-accent));background:#19212b}
.daber-who .face{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;color:#08121a;background:var(--wc,var(--d-accent))}
.daber-who b{display:block;font-size:13.5px}
.daber-who span{display:block;font-size:11.5px;color:var(--d-ink3);line-height:1.35}

/* layout */
.daber-main{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0}
.daber-convo-wrap{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--d-line)}
.daber-convo{flex:1;overflow-y:auto;padding:18px 16px 6px}
.daber-side{display:flex;flex-direction:column;min-height:0;background:var(--d-bg2)}
@media (max-width:820px){ .daber-main{grid-template-columns:1fr} .daber-side{display:none} .daber-who{min-width:128px} }

/* turns */
.daber-turn{max-width:min(680px,94%);margin:0 auto 13px;display:flex;gap:10px}
.daber-turn.me{flex-direction:row-reverse}
.daber-av{width:29px;height:29px;flex:0 0 29px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--d-bg3);border:1px solid var(--d-line);color:var(--d-ink2)}
.daber-turn.friend .daber-av{background:var(--pc);color:#08121a;border:none}
.daber-bub{background:var(--d-bg2);border:1px solid var(--d-line);border-radius:14px;padding:11px 14px;min-width:0}
.daber-turn.me .daber-bub{background:#1a2430;border-color:#26364a}
.daber-hebline{font-size:24px;line-height:1.75;margin:2px 0 4px}
.daber-translit{font-size:13px;color:var(--d-accent2);font-style:italic}
.daber-en{font-size:14px;color:var(--d-ink2);margin-top:5px}
.daber-plain{font-size:15px;white-space:pre-wrap;color:var(--d-ink2)}
.daber-note{font-size:12.5px;color:var(--d-ink3);margin-top:6px;border-top:1px dashed var(--d-line);padding-top:6px}
.daber-tag{font-size:11px;color:var(--d-ink3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}
.daber-acts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.daber-sbtn{background:none;border:none;color:var(--d-ink3);font-size:12px;padding:2px 6px;border-radius:6px}
.daber-sbtn:hover{color:var(--d-accent);background:var(--d-bg3)}
.daber-pron{border-left:3px solid var(--d-warm);background:#1d1c14;border-color:#3a3520}
.daber-pron .daber-tag{color:var(--d-warm)}
.daber-score{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#2a2718;color:var(--d-warm);margin-left:6px}
.daber-score.good{background:#16281c;color:var(--d-good)}
.daber-source{margin-top:8px;padding:8px 10px;border-left:3px solid var(--d-warm);background:#1b1a12;border-radius:0 9px 9px 0}
.daber-cite{font-size:12px;color:var(--d-warm);font-style:italic}
.daber-banner{background:#16232e;border:1px solid #264055;color:#bcdcf3;padding:10px 13px;font-size:13.5px;border-radius:11px;margin:10px auto;max-width:680px;line-height:1.6}
.daber-banner.bad{background:#2a1d1d;border-color:#4a2c2c;color:#ffb3b3}
.daber-banner ol{margin:6px 0 0 18px;padding:0}
.daber-banner code{background:#0b0f14;padding:1px 5px;border-radius:5px;color:var(--d-accent2)}

/* side */
.daber-tabs{display:flex;border-bottom:1px solid var(--d-line)}
.daber-tabs button{flex:1;background:none;border:none;padding:10px 4px;font-size:12.5px;color:var(--d-ink3);border-bottom:2px solid transparent}
.daber-tabs button.on{color:var(--d-ink);border-bottom-color:var(--d-accent)}
.daber-panel{flex:1;overflow-y:auto;padding:11px;display:none}
.daber-panel.on{display:block}
.daber-empty{color:var(--d-ink3);font-size:13px;text-align:center;padding:26px 10px;line-height:1.7}
.daber-vocab{position:relative;background:var(--d-bg3);border:1px solid var(--d-line);border-radius:11px;padding:9px 11px;margin-bottom:8px}
.daber-vocab .daber-sbtn{position:absolute;left:8px;top:8px}
.daber-vocab .h{font-size:20px}
.daber-vocab .t{font-size:12px;color:var(--d-accent2);font-style:italic}
.daber-vocab .e{font-size:13px;color:var(--d-ink2)}
.daber-phrase{width:100%;text-align:left;background:var(--d-bg3);border:1px solid var(--d-line);border-radius:10px;padding:9px 11px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.daber-phrase:hover{border-color:var(--d-accent)}
.daber-phrase .e{font-size:12.5px;color:var(--d-ink3)}

/* bar */
.daber-bar{border-top:1px solid var(--d-line);background:#10151c;padding:10px 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.daber-mic{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--d-accent),#2f7fd8);color:#04121e;font-size:20px;display:grid;place-items:center;transition:transform .12s}
.daber-mic:hover{transform:scale(1.05)}
.daber-mic.live{background:linear-gradient(135deg,#ff6b6b,#d43d3d);color:#fff}
.daber-mic.muted{background:var(--d-bg3);color:var(--d-ink3);border:1px solid var(--d-line)}
.daber-meterwrap{width:70px;height:6px;background:var(--d-bg3);border-radius:3px;overflow:hidden}
.daber-meter{height:100%;width:0;background:linear-gradient(90deg,var(--d-accent2),var(--d-accent));transition:width .07s}
.daber-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--d-bg3);border:1px solid var(--d-line);font-size:12px;color:var(--d-ink2);white-space:nowrap}
.daber-pill:empty{display:none}
.daber-dot{width:8px;height:8px;border-radius:50%;background:var(--d-ink3)}
.daber-dot.live{background:var(--d-good)}
.daber-dot.warn{background:var(--d-warm)}
.daber-dot.err{background:var(--d-bad)}
/* volume */
.daber-spk{padding:7px 9px;font-size:15px;line-height:1}
.daber-spk.off{opacity:.55}
#daber-volume{
  -webkit-appearance:none;appearance:none;width:82px;height:4px;border-radius:3px;
  background:var(--d-bg3);border:1px solid var(--d-line);outline:none;padding:0;
}
#daber-volume::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--d-accent);border:none;cursor:pointer;
}
#daber-volume::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--d-accent);border:none;cursor:pointer}
#daber-volume:disabled{opacity:.4}

.daber-exports{margin-top:10px;border-top:1px solid var(--d-line);padding-top:10px}
.daber-exrow{display:flex;gap:7px;margin-top:7px}
.daber-exrow .daber-ghost{flex:1}

#daber-say{flex:1;min-width:150px;background:var(--d-bg3);border:1px solid var(--d-line);border-radius:11px;padding:10px 12px;outline:none}
#daber-say:focus{border-color:var(--d-accent)}
#daber-level,#daber-devices{background:var(--d-bg3);border:1px solid var(--d-line);border-radius:10px;padding:8px 9px;font-size:12.5px;max-width:190px}
#daber-config{display:none}
.daber-ghost{background:var(--d-bg3);border:1px solid var(--d-line);border-radius:10px;padding:7px 11px;font-size:13px}
.daber-ghost:hover{border-color:#3a4757}
.daber-toggle .daber-heb{font-size:15px}
.daber-toggle.on{
  background:linear-gradient(135deg,var(--d-accent2),#3fb99b);
  border-color:transparent;color:#062018;font-weight:650;
}
.daber-toggle.on:hover{border-color:transparent;opacity:.93}
.daber-wide{width:100%;margin-top:8px}

/* paywall — driven by a class, never by the [hidden] attribute, because any
   theme rule that declares `display` would silently outrank [hidden] and weld
   this overlay to the screen. Default is hidden; .show is the only way in. */
.daber-lock{display:none}
.daber-lock.show{position:absolute;inset:0;background:rgba(9,12,16,.93);display:grid;place-items:center;z-index:5;padding:24px;text-align:center;backdrop-filter:blur(3px)}
.daber-lock-inner{max-width:420px}
.daber-lock p{color:var(--d-ink2);line-height:1.7}
.daber-buy{display:none}
.daber-buy.show{display:inline-block;margin-top:10px;background:linear-gradient(135deg,var(--d-accent),#2f7fd8);color:#04121e !important;text-decoration:none;font-weight:650;padding:12px 22px;border-radius:11px}
.daber-buy.show:hover{opacity:.92;color:#04121e}
.daber-diag{margin-top:16px;font-size:11.5px;color:var(--d-ink3);font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}