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

.recipe-timer-dock {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  pointer-events: none;
}

.recipe-timer-dock[hidden],
body.voice-modal-open .recipe-timer-dock,
body.voice-overlay-open .recipe-timer-dock {
  display: none;
}

.recipe-timer-launcher,
.recipe-timer-drawer {
  pointer-events: auto;
}

.recipe-timer-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.65rem;
  border: 1px solid color-mix(in srgb, var(--builder-ink) 20%, transparent);
  border-radius: var(--builder-radius-status);
  background: color-mix(in srgb, var(--builder-surface) 96%, transparent);
  color: var(--builder-ink);
  padding: 0.42rem 0.72rem;
  box-shadow: var(--builder-shadow-overlay);
  backdrop-filter: blur(12px) saturate(1.08);
  cursor: pointer;
  font: inherit;
  font-size: var(--builder-font-compact);
  font-weight: 800;
}

.recipe-timer-launcher[data-status="done"] {
  border-color: color-mix(in srgb, var(--builder-danger) 44%, transparent);
  background: color-mix(in srgb, var(--builder-danger-wash) 94%, transparent);
}

.recipe-timer-launcher:focus-visible {
  outline: 2px solid var(--builder-ink);
  outline-offset: 2px;
}

.recipe-timer-launcher-icon {
  font-size: var(--builder-font-body);
  line-height: 1;
}

.recipe-timer-launcher-summary,
.recipe-timer-drawer-time {
  font-variant-numeric: tabular-nums;
}

.recipe-timer-drawer {
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(31rem, calc(100dvh - 6rem));
  border: 1px solid var(--builder-line);
  border-radius: var(--builder-radius-large);
  background: var(--builder-surface);
  box-shadow: var(--builder-shadow-overlay);
  overflow: hidden;
}

.recipe-timer-drawer[hidden] {
  display: none;
}

.recipe-timer-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.78rem;
  border-bottom: 1px solid var(--builder-line);
}

.recipe-timer-drawer-title {
  margin: 0;
  color: var(--builder-ink);
  font-size: var(--builder-font-body);
}

.recipe-timer-drawer-count {
  color: var(--gray-4);
  font-size: var(--builder-font-metadata);
}

.recipe-timer-drawer-list {
  display: grid;
  max-height: min(25rem, calc(100dvh - 11rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.recipe-timer-drawer-row {
  display: grid;
  grid-template-areas:
    "details time"
    "actions actions";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem 0.75rem;
  padding: 0.68rem 0.78rem;
  border-bottom: 1px solid var(--builder-line);
}

.recipe-timer-drawer-row:last-child {
  border-bottom: 0;
}

.recipe-timer-drawer-row[data-status="done"] {
  background: var(--builder-danger-wash);
}

.recipe-timer-drawer-details {
  grid-area: details;
  display: grid;
  min-width: 0;
  gap: 0.06rem;
}

.recipe-timer-drawer-label {
  overflow: hidden;
  color: var(--builder-ink);
  font-size: var(--builder-font-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-timer-drawer-status {
  color: var(--gray-4);
  font-size: var(--builder-font-metadata);
}

.recipe-timer-drawer-time {
  grid-area: time;
  color: var(--builder-ink);
  font-size: var(--builder-font-body);
  font-weight: 850;
}

.recipe-timer-drawer-actions {
  grid-area: actions;
  display: flex;
  gap: 0.36rem;
  flex-wrap: wrap;
}

.recipe-timer-drawer-action {
  min-height: 1.9rem;
  padding: 0.22rem 0.52rem;
  border-radius: var(--builder-radius-medium);
}

@media (max-width: 768px) {
  body.page-builder .recipe-timer-dock {
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(var(--floating-menu-height, 56px) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }

  .recipe-timer-launcher {
    min-height: 2.5rem;
    padding: 0.38rem 0.62rem;
  }

  .recipe-timer-drawer {
    width: min(23rem, calc(100vw - 1.5rem));
  }
}

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

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