/* ==========================================================================
   static/css/rcd-context-mic.css — #48207 (part C of #48201: Rabbi)
   1. Selection popup: 3 icon-only buttons in 1 row (文A, ✨, 🎤), >= 44x44 px, fits 320 px, LTR & RTL
   2. Word popup: Знаю | Учу + next row with contextual 🎤 (>= 44x44 px)
   3. Shared "Голосовой ввод" modal with live STT, history (clock icon), and long-press menu
   4. Admin-only floating 🎤 🧠 🛠️ dock at bottom-right (hidden for student & rav)
   5. "в работе по просьбе рава" anchor badge + "Мои просьбы" modal
   ========================================================================== */

:root {
  --cm-bg: #111736;
  --cm-bg-elev: #182048;
  --cm-border: rgba(245, 196, 81, 0.38);
  --cm-text: #f6efe0;
  --cm-muted: #b8c4de;
  --cm-accent: #f5c451;
  --cm-accent-ink: #0a0e27;
  --cm-btn-bg: #1e2959;
  --cm-btn-hover: #283673;
  --cm-danger: #ef4444;
  --cm-success: #16a34a;
  --cm-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

html[data-theme="dawn"] {
  --cm-bg: #ffffff;
  --cm-bg-elev: #f1f5fd;
  --cm-border: rgba(138, 90, 0, 0.35);
  --cm-text: #0f172a;
  --cm-muted: #475569;
  --cm-accent: #9a6700;
  --cm-accent-ink: #ffffff;
  --cm-btn-bg: #e8eefb;
  --cm-btn-hover: #d8e3f8;
  --cm-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

/* --------------------------------------------------------------------------
   1. Text Selection Popup ([data-vyber-bublina]) — 3 icons in 1 row
   -------------------------------------------------------------------------- */
.cm-vyber-bublina {
  position: fixed;
  z-index: 10050;
  width: max-content;
  min-width: 176px;
  max-width: min(304px, calc(100vw - 16px));
  background: var(--cm-bg);
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: var(--cm-shadow);
  box-sizing: border-box;
  user-select: none;
}

.cm-vyber-bublina__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.cm-vyber-bublina__preview {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--cm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 215px;
}

.cm-vyber-bublina__close {
  background: transparent;
  border: none;
  color: var(--cm-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}

.cm-vyber-bublina__rada {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cm-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 11px;
  border: 1px solid var(--cm-border);
  background: var(--cm-btn-bg);
  color: var(--cm-text);
  cursor: pointer;
  transition: background 0.14s ease, transform 0.1s ease;
  box-sizing: border-box;
}

.cm-icon-btn:hover,
.cm-icon-btn:focus-visible {
  background: var(--cm-btn-hover);
  outline: 2px solid var(--cm-accent);
  outline-offset: 1px;
}

.cm-icon-btn--mic {
  background: rgba(245, 196, 81, 0.18);
  border-color: var(--cm-accent);
  color: var(--cm-accent);
}

html[data-theme="dawn"] .cm-icon-btn--mic {
  background: rgba(154, 103, 0, 0.12);
}

.cm-icon-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cm-vyber-bublina__ai-out {
  margin-top: 8px;
  padding: 8px;
  border-radius: 9px;
  background: var(--cm-bg-elev);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--cm-text);
  max-height: 150px;
  overflow-y: auto;
  user-select: text;
}

/* --------------------------------------------------------------------------
   2. Word Popup ([data-slovo-bublina]) — Знаю | Учу + next row with 🎤
   -------------------------------------------------------------------------- */
.cm-slovo-bublina {
  position: fixed;
  z-index: 10045;
  width: min(296px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  background: var(--cm-bg);
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--cm-shadow);
  box-sizing: border-box;
}

.cm-slovo-bublina__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.cm-slovo-bublina__he {
  font-family: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cm-accent);
}

.cm-slovo-bublina__translit {
  font-size: 0.85rem;
  color: var(--cm-muted);
}

.cm-slovo-bublina__meaning {
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--cm-text);
}

.cm-slovo-bublina__row1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.cm-slovo-pill {
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--cm-border);
  background: var(--cm-btn-bg);
  color: var(--cm-text);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.cm-slovo-pill.is-active {
  background: var(--cm-accent);
  color: var(--cm-accent-ink);
}

.cm-slovo-bublina__row2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  border-top: 1px solid rgba(245, 196, 81, 0.2);
}

/* --------------------------------------------------------------------------
   3. Shared "Голосовой ввод" Component ([data-role-consumer="1"])
   -------------------------------------------------------------------------- */
.cm-voice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10080;
  background: rgba(5, 8, 22, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.cm-voice-modal {
  width: 100%;
  max-width: min(430px, calc(100vw - 16px));
  max-height: calc(100vh - 20px);
  overflow: auto;
  background: var(--cm-bg);
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--cm-shadow);
  box-sizing: border-box;
  position: relative;
}

.cm-voice-recbar[hidden],
.cm-voice-history[hidden],
.cm-voice-popup-menu[hidden],
.cm-voice-status[hidden],
.cm-voice-clarify[hidden] {
  display: none !important;
}

.cm-voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 196, 81, 0.22);
}

.cm-voice-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--cm-text);
}

.cm-voice-head__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-voice-ctx {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--cm-bg-elev);
  border: 1px solid rgba(245, 196, 81, 0.22);
  font-size: 0.78rem;
  line-height: 1.38;
  color: var(--cm-muted);
  max-height: 4.6em;
  overflow: auto;
}

.cm-voice-ctx strong {
  color: var(--cm-text);
}

.cm-voice-recbar {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
}

.cm-voice-recbar__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  display: inline-block;
  margin-inline-end: 6px;
}

.cm-voice-textarea {
  width: 100%;
  min-height: 92px;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--cm-border);
  background: var(--cm-bg-elev);
  color: var(--cm-text);
  font-size: 0.94rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.cm-voice-student-target {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cm-voice-target-btn {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid var(--cm-border);
  background: var(--cm-btn-bg);
  color: var(--cm-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.cm-voice-target-btn.is-active {
  background: var(--cm-accent);
  color: var(--cm-accent-ink);
}

.cm-voice-history {
  margin-top: 8px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--cm-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--cm-bg-elev);
}

.cm-voice-history__row {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(245, 196, 81, 0.15);
  font-size: 0.8rem;
}

.cm-voice-history__row:last-child {
  border-bottom: none;
}

.cm-voice-rada {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 196, 81, 0.22);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  direction: ltr;
}

.cm-voice-popup-menu {
  margin-top: 8px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--cm-border);
  background: var(--cm-bg-elev);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-voice-popup-menu button {
  min-height: 40px;
  text-align: start;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--cm-text);
  font-size: 0.84rem;
  cursor: pointer;
}

.cm-voice-popup-menu button:hover {
  background: var(--cm-btn-hover);
}

.cm-voice-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  background: rgba(22, 163, 74, 0.18);
  border: 1px solid rgba(22, 163, 74, 0.5);
  color: var(--cm-text);
}

.cm-voice-clarify {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.84rem;
  background: rgba(245, 196, 81, 0.14);
  border: 1px solid var(--cm-accent);
  color: var(--cm-text);
}

/* --------------------------------------------------------------------------
   4. Admin-Only Floating 🎤 🧠 🛠️ Dock ([data-role-dock="1"])
   -------------------------------------------------------------------------- */
.cm-role-dock {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10040;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow);
  direction: ltr;
}

body:not([data-cm-role="admin"]) .cm-role-dock {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. "в работе по просьбе рава" Anchor Badge & "Мои просьбы" Modal
   -------------------------------------------------------------------------- */
.cm-rav-work-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(245, 196, 81, 0.2);
  border: 1px solid var(--cm-accent);
  color: var(--cm-text);
}

.rcdh__u-link--prosby {
  width: 100%;
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rcdh__prosby-badge {
  margin-inline-start: auto;
  background: var(--cm-accent);
  color: var(--cm-accent-ink);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
}

.cm-prosby-modal {
  width: 100%;
  max-width: min(560px, calc(100vw - 16px));
  max-height: min(82vh, 680px);
  overflow-y: auto;
  background: var(--cm-bg);
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--cm-shadow);
  box-sizing: border-box;
}

.cm-prosby-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cm-border);
  background: var(--cm-bg-elev);
  margin-top: 10px;
}

.cm-prosby-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.cm-prosby-step {
  font-size: 0.66rem;
  text-align: center;
  padding: 3px 2px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--cm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-prosby-step.is-done {
  background: rgba(245, 196, 81, 0.26);
  color: var(--cm-text);
  font-weight: 700;
}