/* Recipe UI ownership: Voice Details. Responsive rules stay with this owner. */

.voice-copilot-session-state {
  --voice-state-color: var(--builder-success);
  --voice-state-bg: var(--builder-success-wash);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--builder-success) 28%, transparent);
  border-radius: var(--builder-radius-status);
  background: var(--voice-state-bg);
  color: var(--charcoal);
  font-size: var(--builder-font-metadata);
  font-weight: 800;
  text-transform: uppercase;
}

.voice-copilot-session-state::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  border-radius: var(--builder-radius-status);
  background: var(--voice-state-color);
  box-shadow: var(--builder-shadow-focus);
}

.voice-copilot-session-state[data-state="listening"] {
  --voice-state-color: var(--builder-danger);
  --voice-state-bg: var(--builder-danger-wash);
  border-color: color-mix(in srgb, var(--builder-danger) 32%, transparent);
}

.voice-copilot-session-state[data-state="live"] {
  --voice-state-color: var(--builder-success);
  --voice-state-bg: var(--builder-success-wash);
  border-color: color-mix(in srgb, var(--builder-success) 34%, transparent);
}

.voice-copilot-session-state[data-state="muted"],
.voice-copilot-session-state[data-state="reconnecting"],
.voice-copilot-session-state[data-state="tool"] {
  --voice-state-color: var(--builder-warning);
  --voice-state-bg: var(--builder-warning-wash);
  border-color: color-mix(in srgb, var(--builder-warning) 34%, transparent);
}

.voice-copilot-session-state[data-state="thinking"],
.voice-copilot-session-state[data-state="confirming"] {
  --voice-state-color: var(--builder-warning);
  --voice-state-bg: var(--builder-warning-wash);
  border-color: color-mix(in srgb, var(--builder-warning) 34%, transparent);
}

.voice-copilot-session-state[data-state="speaking"] {
  --voice-state-color: var(--builder-information);
  --voice-state-bg: var(--builder-information-wash);
  border-color: color-mix(in srgb, var(--builder-information) 30%, transparent);
}

.voice-copilot-session-state[data-state="error"] {
  --voice-state-color: var(--builder-danger);
  --voice-state-bg: var(--builder-danger-wash);
  border-color: color-mix(in srgb, var(--builder-danger) 38%, transparent);
}

.voice-copilot-reference {
  margin-top: -0.45rem;
  color: var(--gray-4);
  font-size: var(--builder-font-metadata);
  font-weight: 600;
}

.voice-copilot-reference.is-error {
  color: var(--builder-danger);
}

.voice-last-action-chip {
  justify-self: start;
  max-width: 100%;
  padding: 0.38rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--builder-ink) 12%, transparent);
  border-radius: var(--builder-radius-status);
  background: color-mix(in srgb, var(--builder-surface) 78%, transparent);
  color: color-mix(in srgb, var(--builder-ink) 76%, transparent);
  font-size: var(--builder-font-metadata);
  font-weight: 750;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: var(--builder-shadow-overlay);
  backdrop-filter: blur(12px) saturate(1.08);
}

.voice-last-action-chip[data-state="confirming"] {
  border-color: color-mix(in srgb, var(--builder-warning) 28%, transparent);
  color: var(--builder-warning);
}

.voice-last-action-chip[data-state="error"] {
  border-color: color-mix(in srgb, var(--builder-danger) 28%, transparent);
  color: var(--builder-danger);
}

.voice-timer-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--builder-success) 22%, transparent);
  border-radius: var(--builder-radius-status);
  background: color-mix(in srgb, var(--builder-surface) 72%, transparent);
  padding: 0.42rem 0.5rem 0.42rem 0.68rem;
  color: color-mix(in srgb, var(--builder-ink) 82%, transparent);
  box-shadow: var(--builder-shadow-overlay);
  backdrop-filter: blur(12px) saturate(1.08);
}

.voice-timer-chip[data-status="done"] {
  border-color: color-mix(in srgb, var(--builder-danger) 30%, transparent);
  background: color-mix(in srgb, var(--builder-danger-wash) 82%, transparent);
}

.voice-timer-chip-label {
  min-width: 0;
  overflow: hidden;
  font-size: var(--builder-font-compact);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-timer-chip-time {
  font-variant-numeric: tabular-nums;
  font-size: var(--builder-font-compact);
  font-weight: 850;
}

.voice-timer-chip-action {
  min-height: 1.95rem;
  min-width: 1.95rem;
  padding: 0 0.48rem;
  border-radius: var(--builder-radius-status);
  line-height: 1;
}

.voice-photo-prompt-text {
  min-width: 0;
  color: color-mix(in srgb, var(--builder-ink) 76%, transparent);
  font-size: var(--builder-font-compact);
  line-height: 1.25;
}

.voice-copilot-reference {
  grid-area: reference;
}

.voice-last-action-chip {
  grid-area: last-action;
}

@media (max-width: 900px) {
.voice-copilot-session-state {
    min-height: 1.85rem;
    font-size: var(--builder-font-metadata);
  }
}

.voice-copilot-panel--overlay .voice-copilot-session-state {
  background: color-mix(in srgb, var(--builder-surface) 45%, transparent);
  box-shadow: var(--builder-shadow-surface);
}

.voice-copilot-panel--overlay .voice-copilot-session-state::before {
  box-shadow: var(--builder-shadow-focus);
}

.voice-copilot-panel--overlay .voice-copilot-reference,
.voice-copilot-panel--overlay .voice-copilot-section,
.voice-copilot-panel--overlay .voice-copilot-confirmation {
  display: none;
}

.voice-copilot-panel--overlay .voice-last-action-chip {
  display: block;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  margin: 0 auto 0.42rem;
  background: color-mix(in srgb, var(--builder-surface) 58%, transparent);
  color: color-mix(in srgb, var(--builder-ink) 74%, transparent);
}

.voice-copilot-panel--overlay .voice-last-action-chip.hidden {
  display: none;
}

.voice-copilot-panel--overlay .voice-timer-chip {
  grid-template-columns: minmax(6rem, 1fr) auto auto;
  background: color-mix(in srgb, var(--builder-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--builder-ink) 14%, transparent);
}