/* The mic (shared/chat/dictation.js; docs/design-system.md §6.5, Appendix A's
   .cmp-mic): a quiet round button between the usage circle and Send, in the
   web Chat's composer. Red while it listens,
   with a halo that follows the voice (--level, 0–1, set through the CSSOM);
   a spinner while the words are on their way; mic-off when the microphone
   isn't allowed. Every class is lc-mic…; the v1 tokens have fallbacks until
   theme.css carries the §3.9 block. Rules sit under .lc-mic-wrap so the
   shells' `.lc-root button` / `.lw button { color: inherit }` don't win. */
.lc-mic-wrap { position: relative; display: inline-flex; flex: none; }
.lc-mic-wrap[hidden] { display: none !important; }
.lc-mic-wrap .lc-mic {
  display: grid; place-items: center; flex: none; padding: 0; margin: 0;
  width: var(--cmp-ctl, 32px); height: var(--cmp-ctl, 32px); border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--dim); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow 60ms linear;
}
.lc-mic-wrap .lc-mic:hover { background: var(--hover); color: var(--text); }
.lc-mic-wrap .lc-mic:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lc-mic-wrap .lc-mic svg { display: block; width: 17px; height: 17px; }
.lc-mic-wrap .lc-mic.is-starting { background: var(--hover); color: var(--text); }
.lc-mic-wrap .lc-mic.is-listening, .lc-mic-wrap .lc-mic.is-listening:hover {
  background: var(--rec-fill, #e5372f); color: var(--on-rec, #ffffff);
  box-shadow: 0 0 0 calc(var(--level, 0) * 6px) color-mix(in srgb, var(--rec-fill, #e5372f) 28%, transparent);
}
.lc-mic-wrap .lc-mic.is-busy, .lc-mic-wrap .lc-mic.is-busy:hover { background: transparent; color: var(--dim); cursor: default; }
.lc-mic-wrap .lc-mic.is-busy svg { width: 14px; height: 14px; }
.lc-mic-wrap .lc-mic.is-off { color: var(--label); }
.lc-mic-wrap .lc-mic.is-off:hover { color: var(--text); }
.lc-mic-wrap .lc-mic:disabled { opacity: .35; cursor: default; background: transparent; }

/* What went wrong, above the mic, with what to do: the toast's look (§6.14),
   anchored to the control it's about. role=alert (role=status for notes). */
.lc-mic-wrap .lc-mic-note {
  position: absolute; right: -6px; bottom: calc(100% + 10px); z-index: var(--z-toast, 50);
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(340px, calc(100vw - 32px));
  padding: 8px 8px 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-card, 12px);
  background: var(--popover); color: var(--text); box-shadow: var(--shadow-md);
  font: 400 13px/1.45 var(--font); text-align: left; white-space: normal;
  animation: lc-mic-note-in var(--dur-3) var(--ease-out);
}
.lc-mic-wrap .lc-mic-note-text { flex: 1; min-width: 0; }
.lc-mic-wrap .lc-mic-note-action {
  flex: none; height: var(--h-sm, 28px); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--overlay-2); color: var(--text); font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out);
}
.lc-mic-wrap .lc-mic-note-action:hover { background: var(--overlay-4); }
.lc-mic-wrap .lc-mic-note-close {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--r-tag, 6px); background: none; color: var(--label); cursor: pointer;
}
.lc-mic-wrap .lc-mic-note-close:hover { background: var(--hover); color: var(--text); }
.lc-mic-wrap .lc-mic-note-close svg { display: block; width: 12px; height: 12px; }
@keyframes lc-mic-note-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* Compact: a composer under 480 px (Appendix A). Unnamed, so it's the nearest
   size container whatever the shell calls it (lc-composer, composer); the row's
   --cmp-ctl (28 px there) sizes the button too. */
@container (max-width: 479px) {
  .lc-mic-wrap .lc-mic { width: var(--cmp-ctl, 28px); height: var(--cmp-ctl, 28px); }
  .lc-mic-wrap .lc-mic svg { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .lc-mic-wrap .lc-mic-note { right: -40px; }
}