/* Mochi Phase 2 UI system: final shared layout and component contract. */
:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-control-h: 40px;
  --ui-touch-h: 44px;
  --ui-radius-control: 12px;
  --ui-radius-card: 20px;
  --ui-radius-modal: 24px;
  --ui-shadow-card: 0 10px 30px rgba(22, 34, 56, .10), inset 0 1px rgba(255,255,255,.08);
  --ui-shadow-float: 0 18px 44px rgba(22, 34, 56, .16);
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: 14px; line-height: 1.5; }

/* One control language across navigation, forms, overlays, and actions. */
.btn, .icon-attach, .mic-button, #send-btn,
input, textarea, select, .task-pick, summary { border-radius: var(--ui-radius-control); }
.btn, .icon-attach, .mic-button, #send-btn { min-height: var(--ui-control-h); }
.btn { padding-inline: 14px; font-size: .84rem; font-weight: 750; }
.btn.tiny { min-height: 36px; padding-inline: 12px; }
input, textarea, select { min-height: var(--ui-control-h); }
textarea { line-height: 1.45; }

:where(button, a, input, textarea, select, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--ui-focus);
}
:where(button, a, summary):disabled { cursor: not-allowed; }

.topbar {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}
.header-actions { margin-left: auto; }
.top-actions { gap: var(--ui-space-2); }
.top-actions .btn { min-height: 38px; }

.stage-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  gap: var(--ui-space-4);
}
.companion { gap: var(--ui-space-4); }
.commands-panel, .chat { border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-card); }
.commands-panel { padding: var(--ui-space-4); }
.chat { padding: var(--ui-space-4); }

.messages { padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-4); }
.bubble { border-radius: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.11), inset 0 1px rgba(255,255,255,.08); }
.bubble .msg-body { line-height: 1.6; }
.composer { border-radius: 16px; padding: var(--ui-space-2); }
.composer-row { gap: var(--ui-space-2); }
.composer-row textarea { min-height: var(--ui-touch-h); }

.layer { padding: clamp(20px, 4vw, 48px) var(--safe-r) var(--safe-b) var(--safe-l); }
.layer > .home-card, .layer > .wait-shell {
  width: min(100%, 960px);
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-float);
}
.home-card, .wait-shell { padding: clamp(20px, 4vw, 36px); }
.settings-head, .profile-head, .history-header, .short-wait-head, .wait-head { gap: var(--ui-space-4); }
.settings-group, .docs-section, .profile-form { padding-top: var(--ui-space-6); margin-top: var(--ui-space-6); }
.task-pick, .docs-grid article, .docs-faq details, .history-list li, .profile-summary, .wait-progress, .wait-activity { box-shadow: var(--ui-shadow-card); }
.task-pick:hover, .docs-grid article:hover, .history-list li:hover { transform: translateY(-1px); }

.toast { border-radius: 12px; box-shadow: var(--ui-shadow-float); }
.attach-menu { border-radius: 12px; box-shadow: var(--ui-shadow-float); padding: 6px; }
.attach-menu button { min-height: 40px; border-radius: 8px; padding: 8px 12px; }

@media (min-width: 900px) {
  .stage-wrap { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .companion { min-height: 0; flex-direction: column; align-items: stretch; }
  .podium { min-height: 190px; }
  .commands-panel { min-height: 0; overflow: auto; }
  .chat { min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
  .messages { min-height: 0; }
}

@media (max-width: 899px) {
  .stage-wrap { display: flex; }
  .companion { flex-direction: row; }
}

@media (max-width: 767px) {
  .topbar { padding-inline: 12px; }
  .stage-wrap { padding-inline: 12px; gap: 10px; }
  .companion { gap: 10px; }
  .chat { border-radius: 18px; padding: 10px; }
  .bubble { max-width: 94%; }
  .home-card, .wait-shell { border-radius: 20px; }
  .layer > .home-card, .layer > .wait-shell { width: min(100%, calc(100vw - 24px)); }
}

@media (max-width: 560px) {
  .stage-wrap { padding-inline: 10px; }
  .composer-row { gap: 6px; }
  .composer-row textarea { min-width: 0; }
  .composer-row > .icon-attach, .composer-row > .mic-button, .composer-row > #send-btn { min-width: 44px; min-height: 44px; }
  .composer-row > #send-btn { padding-inline: 10px; }
  .home-card, .wait-shell { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}