/* Talk-mode — the wave button's in-chat voice conversation (staging-gated).
   Only active while .chat-input-box carries .ss-talk-active; zero footprint
   otherwise. The visible status vocabulary is intentionally limited to blue
   connecting and green listening. */

/* NO box inside the card while talking — Mortens dom (tredje runde, 5/7 aften):
   the sage border+glow we shipped as "the focus signal" IS the box he keeps
   seeing. The composer's own border disappears too; the card is the only
   frame. JS re-asserts this inline (mountState owns the box style) because
   the CSS specificity war is structurally lost in this composer. */
html body .chat-input-box.ss-talk-active,
html body [data-theme="dark"] .chat-input-box.ss-talk-active {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* While talking, the toolbar belongs to the state line: plus-menu, mic, send
   and the wave trigger step aside (the state line's own buttons take over).
   Specificity is load-bearing: chat-ny-blod-bolge re-shows the welcome mic
   with `html body .input-card .chat-input-action.ss-mic { inline-flex
   !important }` — staging live-QA fandt mic'en synlig i talk-mode. These
   selectors out-specify the class-based re-shows. */
html body .chat-input-box.ss-talk-active .chat-input-toolbar-left,
html body .chat-input-box.ss-talk-active .chat-plus-wrap,
html body .chat-input-box.ss-talk-active .chat-plus-btn,
html body .chat-input-box.ss-talk-active .chat-input-action,
html body .chat-input-box.ss-talk-active .chat-input-action.ss-mic,
html body .chat-input-box.ss-talk-active .chat-send-btn,
html body .chat-input-box.ss-talk-active .ss-voice-trigger {
  display: none !important;
}

/* The responsive welcome composer re-shows #chat-direct-send with an ID plus
   !important once Wave's live transcript makes the field non-empty. Keep the
   typed-chat button available everywhere else, but let the active Wave state
   own both composer toolbars completely. */
html body .input-card .chat-input-box.ss-talk-active #chat-direct-send,
html body .chat-ny-conversation .chat-input-box.ss-talk-active #chat-send-btn,
html body .input-card .chat-input-box.ss-talk-active #ss-voice-btn-welcome,
html body .chat-ny-conversation .chat-input-box.ss-talk-active #ss-voice-btn-active {
  display: none !important;
}

/* Wave transcription is provisional voice text, not typed input. Keep it
   visually distinct for the complete listening turn on desktop Quill, mobile
   native welcome input, and the conversation textarea. */
html body .chat-input-box.ss-talk-active #chat-direct-input,
html body .chat-input-box.ss-talk-active #chat-direct-input .ql-editor,
html body .chat-input-box.ss-talk-active #chat-input-field {
  font-style: italic !important;
}

/* …but blod-bolge's re-show list ALSO carries an ID selector
   (`html body .input-card #chat-direct-mic-btn`, specificity 1,1,2) which
   beats every class chain above — the mic stayed visible through two fix
   rounds until this was found. IDs must be fought with IDs. */
html body .chat-input-box.ss-talk-active #chat-direct-mic-btn,
html body .chat-input-box.ss-talk-active #chat-mic-btn {
  display: none !important;
}

/* No browser focus ring while talking — the sage glow IS the focus signal
   (Mortens 5/7-dom: den blå fokus-boks skal væk). Keyboard users keep a
   visible ring on the talk buttons below (WCAG 2.4.7, same posture as
   chat-ny-blod-bolge's button-ring section). */
html body .chat-input-box.ss-talk-active,
html body .chat-input-box.ss-talk-active:focus-within,
html body .input-card.ss-talk-active:focus-within,
html body .chat-input-box.ss-talk-active .chat-input-field,
html body .chat-input-box.ss-talk-active .chat-input-field:focus,
html body .chat-input-box.ss-talk-active .chat-input-field:focus-visible {
  outline: none !important;
}

/* …and NOTHING inside the talking composer may paint one (Mortens fund 3:
   the ring survived on page 1 — chat-ny focuses Quill's contenteditable
   .ql-editor, which Chrome always treats as :focus-visible, and the UA
   default ring landed there). Wildcard-killed while talking; the talk
   buttons keep their own WCAG ring via the :not carve-out. The outer
   .input-card is covered too — the ring hugged the whole card. */
html body .chat-input-box.ss-talk-active *:not(.ss-talk-btn):not(.ss-talk-status),
html body .input-card:has(.chat-input-box.ss-talk-active),
html body .input-card:has(.chat-input-box.ss-talk-active):focus-within {
  outline: none !important;
}

.ss-talk-status:focus,
.ss-talk-btn:focus {
  outline: none;
}
.ss-talk-status:focus-visible,
.ss-talk-btn:focus-visible {
  outline: 2px solid var(--sage-dark, #4A7A68);
  outline-offset: 2px;
}

.ss-talk-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.ss-talk-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  min-width: 0;
}
.ss-talk-status:hover { background: var(--color-bg, #FAFAF8); }

.ss-talk-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sage-dark, #4A7A68);
  white-space: nowrap;
}
.ss-talk-hint {
  display: none;
}

.ss-talk-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.ss-talk-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 50%);
  color: var(--color-text-secondary, #646e78);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ss-talk-btn:hover {
  background: var(--color-bg, #FAFAF8);
  color: var(--color-text-primary, #384551);
}

/* The six wave bars — same geometry family as the trigger icon. */
.ss-talk-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 20px;
  flex: none;
}
.ss-talk-bars i {
  width: 2.5px;
  border-radius: 1.25px;
  background: var(--sage-dark, #4A7A68);
  display: block;
}
.ss-talk-bars i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.ss-talk-bars i:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.ss-talk-bars i:nth-child(3) { height: 18px; animation-delay: 0.3s; }
.ss-talk-bars i:nth-child(4) { height: 12px; animation-delay: 0.45s; }
.ss-talk-bars i:nth-child(5) { height: 18px; animation-delay: 0.6s; }
.ss-talk-bars i:nth-child(6) { height: 6px;  animation-delay: 0.75s; }

.ss-talk-state.is-listening .ss-talk-label {
  color: var(--sage-dark, #4A7A68);
}
.ss-talk-state.is-listening .ss-talk-bars i {
  background: var(--sage-dark, #4A7A68);
}
.ss-talk-state.is-connecting .ss-talk-label {
  color: var(--color-blue, #3b82f6);
}
.ss-talk-state.is-connecting .ss-talk-bars i {
  background: var(--color-blue, #3b82f6);
}
.ss-talk-state.is-listening .ss-talk-bars i {
  animation: ss-talk-wave 1.5s ease-in-out infinite;
}
.ss-talk-state.is-connecting .ss-talk-bars i {
  opacity: 1;
  transform: scaleY(0.5);
}
[data-theme="dark"] .ss-talk-label { color: var(--chat-focus-ring-dark, #6baa8e); }
[data-theme="dark"] .ss-talk-bars i { background: var(--chat-focus-ring-dark, #6baa8e); }
[data-theme="dark"] .ss-talk-state.is-listening .ss-talk-label {
  color: var(--chat-focus-ring-dark, #6baa8e);
}
[data-theme="dark"] .ss-talk-state.is-listening .ss-talk-bars i {
  background: var(--chat-focus-ring-dark, #6baa8e);
}
[data-theme="dark"] .ss-talk-state.is-connecting .ss-talk-label {
  color: var(--color-blue, #3b82f6);
}
[data-theme="dark"] .ss-talk-state.is-connecting .ss-talk-bars i {
  background: var(--color-blue, #3b82f6);
}

@keyframes ss-talk-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.55; }
  50%      { transform: scaleY(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-talk-bars i { animation: none !important; }
}

@media (max-width: 767px) {
  .ss-talk-hint { display: none; }
  .ss-talk-status { min-height: 40px; }
  .ss-talk-btn { width: 40px; height: 40px; min-width: 40px; }

  /* The native mobile welcome composer has a later, highly specific rule that
     forces both toolbar groups (and therefore the original dark Wave button)
     back to inline-flex. Wave owns this row while active, so remove the empty
     toolbar groups and put its state line in their existing third grid row.
     This keeps the mobile controls in the same position as desktop instead of
     creating an extra row beneath the composer. */
  html body .input-card[data-mobile-native-card="1"]
    .chat-input-box.ss-talk-active[data-mobile-native-composer="1"]
    > .chat-input-toolbar-left,
  html body .input-card[data-mobile-native-card="1"]
    .chat-input-box.ss-talk-active[data-mobile-native-composer="1"]
    > .chat-input-toolbar-right {
    display: none !important;
  }

  html body .input-card[data-mobile-native-card="1"]
    .chat-input-box.ss-talk-active[data-mobile-native-composer="1"]
    > .ss-talk-state {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    width: 100%;
  }

  /* Fallback for mobile composer variants where the state mounts directly on
     a grid instead of inside .chat-input-toolbar. Span the full width and keep
     it after the explicit rows. The native welcome composer is intentionally
     overridden above so it reuses row 3 rather than creating an extra row. */
  html body .chat-input-box.ss-talk-active .ss-talk-state {
    grid-column: 1 / -1;
    grid-row: -1;
    min-width: 0;
    width: 100%;
  }
}