/* Voice assistant: the dock button and the assistant panel with the orb.
   The orb is the only continuous motion in AI OS; it exists to show the assistant's
   state (listening / thinking / speaking), so MOTION stays 1 everywhere else. */

main { padding-bottom: 112px; }

.ask-dock {
  position: fixed; right: var(--space-xl); bottom: var(--space-xl); z-index: 15;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 56px; padding: 0 var(--space-lg) 0 var(--space-sm);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-float);
  font: 600 18px/1 var(--font-strip); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ask-dock:hover { border-color: var(--ink-2); background: var(--paper); }
.ask-dock:active { transform: translateY(1px); }
.ask-dock[aria-expanded="true"] { border-color: var(--amber-ink); }
.ask-dock .mini {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orb-core), var(--amber) 70%);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--amber-ink);
}
.ask-dock kbd { font: 400 11px/1 var(--font-num); color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 3px 5px; }

.assistant {
  position: fixed; right: var(--space-xl); bottom: calc(var(--space-xl) + 68px); z-index: 16;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 150px); overflow: auto;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-float);
  animation: arrive var(--dur-mid) var(--ease-out);
}
.assistant[hidden] { display: none; }
.assistant__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--rule); background: var(--surface); }
.assistant__head h2 { font: 600 20px/1 var(--font-strip); }
.assistant__body { padding: var(--space-lg); display: grid; gap: var(--space-md); }

.va-orb {
  justify-self: center; width: 208px; height: 208px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.va-orb canvas { width: 208px; height: 208px; display: block; }
.va-orb:hover canvas { filter: brightness(1.04); }
.va-orb:active { transform: scale(0.98); }

.va-state { text-align: center; font-size: 14px; color: var(--ink-2); min-height: 21px; }
.assistant[data-state="error"] .va-state { color: var(--fault); }
.assistant[data-state="listening"] .va-state, .assistant[data-state="speaking"] .va-state { color: var(--amber-ink); font-weight: 600; }
.va-heard { font-size: 14px; color: var(--ink-2); min-height: 21px; }
.va-answer { font-size: 17px; line-height: 1.5; min-height: 26px; color: var(--ink-3); }
.va-answer span { transition: color var(--dur-fast) var(--ease-out); }
.va-answer span.said { color: var(--ink); }

.va-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.va-chips button {
  min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); font-size: 14px; cursor: pointer;
}
.va-chips button:hover { background: var(--sunk); border-color: var(--ink-3); }
.va-chips button:active { background: var(--rule); }
.va-form { display: flex; gap: var(--space-xs); }
.va-form input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface); }
.va-form input:hover { border-color: var(--ink-3); }
.va-foot { font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: var(--space-sm); }

@media (max-width: 760px) {
  .ask-dock { right: var(--space-lg); bottom: var(--space-lg); }
  .ask-dock kbd { display: none; }
  .assistant { right: var(--space-lg); left: var(--space-lg); width: auto; bottom: calc(var(--space-lg) + 68px); max-height: calc(100dvh - 120px); }
  .va-orb, .va-orb canvas { width: 176px; height: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-dock:active, .va-orb:active { transform: none; }
}

/* Voice picker, note and action list (added by web/js/voice/panel.js) */
.va-foot { display: grid; gap: var(--space-sm); }
.va-foot #va-voice-note { min-height: 0; }
.va-foot #va-voice-note:empty { display: none; }
.va-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: 14px; color: var(--ink-2); }
.va-actions:empty { display: none; }
.va-actions li::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-sm); background: var(--ink-3); }
.va-actions li.is-bad { color: var(--fault); }
.va-actions li.is-bad::before { background: var(--fault); }
.va-pick { display: flex; align-items: center; gap: var(--space-sm); }
.va-pick[hidden] { display: none; }
.va-pick label { font-size: 14px; color: var(--ink-2); }
.va-pick select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface); font: inherit; }
.va-pick .btn { min-height: 44px; }
.va-chips button { min-height: 44px; }
.va-form input { min-height: 44px; }
.va-orb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }