/* 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. Tokens: sage = the existing listening colour (stt-tts-ui.css),
   amber only as the speaking accent. No new palette, no emoji. */

/* 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;
}

/* …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: 13px;
  font-weight: 500;
  color: var(--sage-dark, #4A7A68);
  white-space: nowrap;
}
.ss-talk-hint {
  font-size: 12px;
  color: var(--color-text-muted, #a3a19b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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-bars i {
  animation: ss-talk-wave 1.5s ease-in-out infinite;
}
.ss-talk-state.is-thinking .ss-talk-bars i {
  opacity: 0.4;
  transform: scaleY(0.5);
}
.ss-talk-state.is-speaking .ss-talk-bars i {
  background: #b08a4f;
  animation: ss-talk-wave 2.6s ease-in-out infinite;
}
.ss-talk-state.is-speaking .ss-talk-label { color: #96742f; }
[data-theme="dark"] .ss-talk-state.is-speaking .ss-talk-label { color: #d4b483; }
[data-theme="dark"] .ss-talk-state.is-speaking .ss-talk-bars i { background: #d4b483; }
[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); }

@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; }

  /* Mobile welcome composer (#3103): composer-quill REMOVES .chat-input-toolbar
     and lays the box out as a grid (blod-bolge :5972 — "files/editor/left right"),
     so the state line mounts directly on the box (chat-talk-mode.js mountState)
     and lands in the implicit row below. Span the full row — auto-placement
     would otherwise squeeze it into column 1 (Mortens mobil-fund 15/7: no wave).
     grid-column is inert on the desktop flex toolbar, so one rule covers both
     the native-composer grid and the display:contents toolbar grid (:5944).
     grid-row: -1 is load-bearing (Mortens mobil-fund 2, 15/7 12.51): the
     files-row item is display:none, so sparse auto-placement drops the line
     into the FIRST empty row — row 1, ABOVE the text. -1 = the last explicit
     line in EITHER grid variant → the implicit row after everything, i.e. the
     footer, matching the conversation composer and desktop. */
  html body .chat-input-box.ss-talk-active .ss-talk-state {
    grid-column: 1 / -1;
    grid-row: -1;
    min-width: 0;
    width: 100%;
  }
}