/* Bee Happy WebSpeech TTS Reader — Compact (v1.3.0) */
.bhc-tts-widget{
  --bhc-bg: #fafafa;
  --bhc-fg: #111111;
  --bhc-border: #E5E7EB;
  --bhc-muted: #6B7280;
  --bhc-ctrl-bg: #ffffff;
  --bhc-ctrl-fg: #111111;

  background: var(--bhc-bg);
  color: var(--bhc-fg);
  border: 1px solid var(--bhc-border);
  border-radius: 12px;
  padding: 8px;
  margin: 0 0 14px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Helvetica Neue", Arial;
  max-width: 100%;
}
/* Auto theme follows system */
@media (prefers-color-scheme: dark){
  .bhc-tts-widget[data-theme="auto"]{
    --bhc-bg: #151515;
    --bhc-fg: #eaeaea;
    --bhc-border: #333333;
    --bhc-muted: #9CA3AF;
    --bhc-ctrl-bg: #1f1f1f;
    --bhc-ctrl-fg: #eaeaea;
  }
}
.bhc-tts-widget[data-theme="light"]{
  --bhc-bg:#fafafa; --bhc-fg:#111; --bhc-border:#E5E7EB; --bhc-muted:#6B7280; --bhc-ctrl-bg:#fff; --bhc-ctrl-fg:#111;
}
.bhc-tts-widget[data-theme="dark"]{
  --bhc-bg:#151515; --bhc-fg:#eaeaea; --bhc-border:#333; --bhc-muted:#9CA3AF; --bhc-ctrl-bg:#1f1f1f; --bhc-ctrl-fg:#eaeaea;
}

/* Compact layout */
.bhc-tts-controls{ display:grid; grid-template-columns:1fr; gap:6px; }
.bhc-tts-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:6px; align-items:center; }

/* Elements */
.bhc-tts-row select,
.bhc-tts-row input[type="range"],
.bhc-tts-buttons button,
.bhc-tts-gbtn{
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--bhc-border);
  background: var(--bhc-ctrl-bg);
  color: var(--bhc-ctrl-fg);
  height: 36px;
  box-sizing: border-box;
}
.bhc-tts-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
.bhc-tts-buttons button{ font-weight:600; cursor:pointer; }

.bhc-tts-gender{ display:flex; gap:6px; }
.bhc-tts-gbtn{ cursor:pointer; width:42px; text-align:center; }

#bhc-tts-rate{ accent-color: currentColor; }
.bhc-tts-chip{ display:inline-block; padding:4px 8px; border:1px solid var(--bhc-border); border-radius:999px; font-size:12px; opacity:.85; text-align:center; height:28px; line-height:20px; }

.bhc-tts-brand{ font-size:12px; color: var(--bhc-muted); justify-self:flex-end; }
.bhc-tts-error{ color:#ff8a80; font-weight:600; }

.bhc-sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* Extra compact modifier */
.bhc-tts-widget.bhc-tts-compact{ padding:8px; }