/* ============================================================
   GRATIRAD — Speech-to-Text editor popup
   Page-specific styles (loaded only on /speech-to-text)
   Built on the shared site.css design system.
   ============================================================ */

/* ---- Bootstrap Icons (editor footer buttons) ---- */
@font-face{
  font-family:'BootstrapIcons';
  src:url('/newAssets/plugins/global/fonts/bootstrap-icons/bootstrap-icons.woff2') format('woff2'),
      url('/newAssets/plugins/global/fonts/bootstrap-icons/bootstrap-icons.woff') format('woff');
  font-weight:normal;font-style:normal;
}
.bi{
  font-family:'BootstrapIcons';font-weight:normal;font-style:normal;display:inline-block;line-height:1;
  text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.bi-mic::before{content:"\f490"}
.bi-mic-mute::before{content:"\f48f"}
.bi-plus::before{content:"\f4fe"}
.bi-question::before{content:"\f50c"}

/* ---- Modal shell ---- */
.stt-modal{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,5,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.stt-modal.open{display:flex}
.stt-modal-card{
  width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#16142a,#0e0c1a);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 40px 120px -40px rgba(168,85,247,.6);
}
.stt-modal-xl{max-width:1140px}
.stt-modal-lg{max-width:760px}
.stt-modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.stt-modal-header h5{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:#fff;margin:0}
.stt-modal-body{padding:18px 22px;overflow:auto;flex:1 1 auto}
.stt-modal-body.is-editor{padding:14px;background:#0d0c18}
.stt-modal-body.is-flush{padding:0}
.stt-modal-footer{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--line);flex:0 0 auto;
}
.stt-modal-footer.end{justify-content:flex-end}
.stt-close{background:none;border:0;color:var(--ink-dim);font-size:1.7rem;line-height:1;cursor:pointer;transition:color .2s}
.stt-close:hover{color:#fff}

/* RichEdit sits on a light surface inside the dark card */
#richEdit{background:#fff;border-radius:12px;overflow:hidden}

/* ---- Editor footer controls ---- */
#aiWriter{margin-right:auto;color:var(--ink-soft);font-size:.92rem;min-height:1em}
.mic-loader{height:24px;display:none}
.stt-modal-footer .mic-btn,
.stt-modal-footer .command-help,
#stopListeningWithScript{
  width:46px;height:46px;display:inline-grid;place-items:center;cursor:pointer;font-size:1.2rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;color:var(--ink);transition:.2s;
}
.stt-modal-footer .mic-btn:hover,
.stt-modal-footer .command-help:hover,
#stopListeningWithScript:hover{border-color:var(--violet);color:#fff;background:rgba(168,85,247,.12)}
#listenWithScript{color:var(--emerald)}
#stopListeningWithScript{color:var(--orange)}

/* ---- Command-list popup ---- */
.stt-cmd{display:grid;grid-template-columns:220px 1fr}
.stt-cmd-cats{border-right:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:2px}
.stt-cmd-cats a{display:block;padding:.6em .85em;border-radius:9px;color:var(--ink-soft);font-size:.9rem;transition:.2s}
.stt-cmd-cats a:hover{color:#fff;background:rgba(255,255,255,.04)}
.stt-cmd-cats a.active{color:#fff;background:rgba(168,85,247,.16)}
.stt-cmd-content{padding:6px 14px;max-height:58vh;overflow:auto}
.stt-table{width:100%;border-collapse:collapse;font-size:.88rem}
.stt-table th,.stt-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.stt-table th{color:#fff;position:sticky;top:0;background:#16142a}
@media(max-width:640px){
  .stt-cmd{grid-template-columns:1fr}
  .stt-cmd-cats{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap}
}

/* ============================================================
   Page content (hero + waveform mock + stat band)
   ============================================================ */
.stt-orb-a{width:380px;height:380px;background:radial-gradient(circle,#12b981,transparent 70%);top:-60px;right:-40px}
.stt-orb-b{width:320px;height:320px;background:radial-gradient(circle,#a855f7,transparent 70%);bottom:-80px;left:-60px;animation-delay:-5s}

/* waveform mock */
.stt-frame{padding:26px;border-radius:22px;box-shadow:0 40px 120px -55px rgba(18,185,129,.5)}
.stt-status{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.stt-dot{width:11px;height:11px;border-radius:50%;background:var(--emerald);box-shadow:0 0 14px var(--emerald);flex:0 0 auto}
.stt-statuscap{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;color:var(--emerald)}
.stt-wave{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:30px}
.stt-transcript{font-size:1.15rem;line-height:1.7;color:var(--ink)}
.stt-transcript .hl{color:var(--cyan)}
.stt-transcript .dim{color:var(--ink-dim)}
.stt-transcript .cursor{display:inline-block;width:2px;height:1.1em;background:var(--cyan);vertical-align:-2px;margin-left:2px;animation:stt-caret 1.1s ease-in-out infinite}
@keyframes stt-caret{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(6px);opacity:.4}}

/* stat band */
.stat-band{padding:clamp(34px,5vw,56px);border-radius:var(--radius-lg)}
.stat-note{text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-dim)}