/* Voice notes stay in the composer row, next to Send. The recording state is
   deliberately compact on desktop and becomes a 44px tap-target cluster on
   touch surfaces. */
.voice-note-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.25rem;
}
.voice-note-actions[hidden] {
  display: none !important;
}

/* Capture temporarily owns the action rail. The textarea and every draft it
   represents stay mounted, while controls unrelated to this note step out of
   the cramped row until Send or Cancel restores them. */
.agent-composer.voice-note-active
  :is(.composer-attachment-actions, .actions.composer-actions > .model-cluster,
    .dock-composer-row > .model-cluster) {
  display: none;
}
.agent-composer.voice-note-active
  :is(.actions.composer-actions, .dock-composer-row) > .voice-note-actions {
  width: 100%;
  flex: 1 1 100%;
  margin-left: 0;
}
.voice-note-typed-submit-hidden {
  display: none !important;
}
.voice-note-actions :is(.voice-note-mic, .voice-note-stop,
  .voice-note-cancel, .voice-note-send) {
  height: var(--composer-control-height, 30px);
  min-height: var(--composer-control-height, 30px);
  padding-block: 0;
  padding-inline: 0.6rem;
  white-space: nowrap;
}
.voice-note-actions [hidden] {
  display: none !important;
}
.voice-note-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.voice-note-mic:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.voice-note-mic svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.voice-note-mic-label {
  margin-left: 0.25rem;
}
.voice-note-recording {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.25rem;
}
.voice-note-recording[hidden] {
  display: none;
}
.voice-note-capture-meta,
.voice-note-capture-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
}
.voice-note-capture-actions {
  margin-left: auto;
}
.voice-note-actions .voice-note-cancel {
  display: inline-grid;
  width: var(--composer-control-height, 30px);
  box-sizing: border-box;
  padding-inline: 0;
  place-items: center;
}
.voice-note-cancel svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}
.voice-note-live {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 0.45rem;
  border-radius: 50%;
  background: var(--ui-danger, #b43a3a);
  animation: voice-note-pulse 1.2s ease-in-out infinite;
}
.voice-note-timer,
.voice-note-status {
  color: var(--ui-muted);
  font: 0.68rem/1.2 var(--font-mono, ui-monospace, monospace);
}
.voice-note-local-preview {
  width: min(19rem, 52vw);
  min-width: 12rem;
  height: var(--composer-control-height, 30px);
  flex: 0 1 19rem;
}
.voice-note-actions[data-state="recording"] .voice-note-status,
.voice-note-actions[data-state="stopping"] .voice-note-status,
.voice-note-actions[data-state="ready"] .voice-note-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.voice-note-actions[data-state="sending"],
.voice-note-actions[data-state="ready-error"],
.voice-note-actions[data-state="error"] {
  flex-wrap: wrap;
}
.voice-note-actions[data-state="sending"] .voice-note-status,
.voice-note-actions[data-state="ready-error"] .voice-note-status,
.voice-note-actions[data-state="error"] .voice-note-status {
  flex: 1 0 100%;
}
@media (min-width: 821px) {
  /* Full-view desktop keeps the collapsed Agents strip on the right. Its
     ordinary Send control predates voice notes, but the temporary voice rail
     must not put Cancel/Send beneath that fixed strip. */
  body.standalone-agent:not(.agent-projection-dock)
    .agent-composer.voice-note-active .voice-note-actions {
    box-sizing: border-box;
    padding-right: 3.5rem;
  }
}
.voice-note-status:empty {
  display: none;
}
.agent-launch-column__model {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
}
.agent-launch-column__model .voice-note-actions {
  margin-left: 0;
}
.agent-launch-column__model .voice-note-mic-label,
.agent-launch-column__model .voice-note-send {
  display: none;
}
.agent-launch-column__model .voice-note-recording {
  flex-wrap: wrap;
}
.agent-launch-column__model .voice-note-actions:not([data-state="idle"]) {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: 0;
}
.agent-launch-column__model:has(.voice-note-actions:not([data-state="idle"]))
  > .agent-launch-model-pill {
  display: none;
}
.agent-launch-column__model .voice-note-local-preview {
  width: 100%;
  max-width: 100%;
}
.agent-launch-column__model .voice-note-actions:is(
  [data-state="ready"], [data-state="ready-error"]
) .voice-note-local-preview {
  min-width: 0;
  flex: 1 0 100%;
}
.voice-note-status[data-state="error"],
.voice-note-status[data-state="unsupported"] {
  color: var(--ui-danger, #b43a3a);
}
.voice-note-status[data-state="ready"] {
  color: var(--ui-success, #2f7d4a);
}
@keyframes voice-note-pulse {
  50% { opacity: 0.35; }
}
.voice-note-player {
  display: inline-flex;
  min-width: min(20rem, 80vw);
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ui-line);
  border-radius: 0.45rem;
  background: var(--ui-raised);
}
.voice-note-play {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  cursor: pointer;
}
.voice-note-player-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
  text-align: left;
}
.voice-note-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-note-player-state {
  color: var(--ui-muted);
  font-size: 0.68rem;
}
.voice-note-player audio {
  min-width: min(15rem, 55vw);
  max-width: 100%;
}
@media (max-width: 820px) {
  .agent-launch-phone-actions .agent-launch-column__model:has(
    .voice-note-actions:not([data-state="idle"])
  ) {
    width: 100%;
    flex: 1 0 100%;
  }
  .agent-launch-column__model .voice-note-actions :is(
    .voice-note-mic, .voice-note-stop, .voice-note-cancel) {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
  html[data-phone-surface="true"] .voice-note-actions :is(.voice-note-mic, .voice-note-stop,
    .voice-note-cancel, .voice-note-send) {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
  html[data-phone-surface="true"] .voice-note-cancel {
    width: 44px;
  }
  html[data-phone-surface="true"] .voice-note-mic-label {
    display: none;
  }
  html[data-phone-surface="true"] .voice-note-actions {
    gap: 0;
  }
  html[data-phone-surface="true"] .voice-note-actions[data-state="recording"],
  html[data-phone-surface="true"] .voice-note-actions[data-state="stopping"],
  html[data-phone-surface="true"] .voice-note-actions[data-state="ready"],
  html[data-phone-surface="true"] .voice-note-actions[data-state="ready-error"],
  html[data-phone-surface="true"] .voice-note-actions[data-state="sending"] {
    min-width: 0;
    flex: 1 1 100%;
  }
  html[data-phone-surface="true"] .voice-note-recording {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px;
  }
  html[data-phone-surface="true"] .voice-note-local-preview {
    width: 100%;
    min-width: 0;
    height: 44px;
  }
  html[data-phone-surface="true"] .voice-note-actions:is(
    [data-state="ready"], [data-state="ready-error"]
  ) .voice-note-local-preview {
    grid-column: 1 / -1;
  }
  html[data-phone-surface="true"] .voice-note-actions:is(
    [data-state="ready"], [data-state="ready-error"]
  ) .voice-note-capture-actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
  html[data-phone-surface="true"] .voice-note-capture-actions {
    margin-left: 0;
  }
  html[data-phone-surface="true"] .voice-note-status {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions [data-launch-controls] {
    width: auto;
    min-width: 0;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions .agent-launch-column__model {
    display: block;
    flex: 1 0 100%;
    width: 100%;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .agent-launch-column__model .voice-note-actions {
    width: 100%;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .voice-note-recording {
    width: 100%;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .voice-note-local-preview {
    flex: 1 1 100%;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .agent-launch-column__model:has(.voice-note-actions:is(
      [data-state="ready"], [data-state="ready-error"]
    )),
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .voice-note-actions:is([data-state="ready"], [data-state="ready-error"]),
  .agent-composer.voice-note-active .agent-launch-phone-actions
    .voice-note-actions:is([data-state="ready"], [data-state="ready-error"])
    .voice-note-recording {
    display: contents;
  }
  .agent-composer.voice-note-active .agent-launch-phone-actions [data-launch-controls] {
    margin-right: auto;
  }
}