/* ai-assistant.css — Design 095 Phase 1: the persistent assistant (docked panel, not modal).
   Desktop ≥900px: a right-side DOCK (no backdrop — you can still use the grid behind it).
   Mobile ≤640px: a BOTTOM SHEET. One component, a media-query switch. Theme tokens only. */

/* ── the prominent command bar (Design 146 P1) — a full-width toolbar UNDER the header ─── */
/* AI is CENTRAL: a wide toolbar row directly under the header (not a corner pill), horizontally
   aligned with the header padding so it reads as chrome, not a floating misaligned box. */
.aia-barwrap { position: relative; z-index: 25; }
.aia-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.aia-bar-glyph { flex: none; font-size: 1.1rem; color: var(--color-accent); line-height: 1; }
.aia-bar-input { flex: 1; min-width: 0; border: none; background: none; color: var(--color-text); font: inherit; font-size: .98rem; padding: 7px 0; }
.aia-bar-input:focus { outline: none; }
.aia-bar-input::placeholder { color: var(--color-text-muted); }
.aia-bar-go { flex: none; cursor: pointer; border: none; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px;
  background: var(--color-accent); color: var(--color-text-on-accent, #fff); padding: 7px 16px; }
.aia-bar-go:hover { filter: brightness(1.05); }
/* Design 150 — the mic on the main Ask bar (push-to-talk; pulses while listening). */
.aia-bar-mic { flex: none; cursor: pointer; width: 34px; height: 34px; border-radius: 9px; font-size: 15px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.aia-bar-mic:hover { border-color: var(--color-accent); }
.aia-bar-mic.is-on { background: var(--color-danger, #dc2626); border-color: transparent; color: #fff; animation: aia-pulse 1.1s ease-in-out infinite; }
@media (max-width: 640px) { .aia-bar { padding: 8px 12px; } }

/* ── inline analytics result (compact table/scalar in the thread) ────────────────── */
.aia-result { margin-top: 4px; }
.aia-result-summary { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.aia-result-scalar { font-size: 1.6rem; font-weight: 700; color: var(--color-text); }
.aia-result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aia-result-table th, .aia-result-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--color-border-subtle, var(--color-border)); }
.aia-result-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.aia-result-row { cursor: pointer; }
.aia-result-row:hover td { background: var(--color-surface-hover, rgba(0,0,0,.03)); }
.aia-result-metric { text-align: right; font-variant-numeric: tabular-nums; }
.aia-result-more { font-size: 12px; color: var(--color-text-muted); padding: 6px 8px; }
.aia-bubble-ai { white-space: pre-wrap; }

/* Design 150 — lay a table/list answer out full-width on the page (the dock preview is capped). */
.aia-open-full {
  margin-top: 8px; margin-right: 6px; align-self: flex-start; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 8px; padding: 5px 11px;
  background: var(--color-surface, #fff); color: var(--color-accent, #6366f1);
}
.aia-open-full:hover { border-color: var(--color-accent, #6366f1); }

/* Design 150 P2 — an ANSWER is workable: save the analytics result as a re-runnable report. */
.aia-save-report {
  margin-top: 8px; align-self: flex-start; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 8px; padding: 5px 11px;
  background: var(--color-surface, #fff); color: var(--color-text, #111);
}
.aia-save-report:hover { border-color: var(--color-accent, #6366f1); color: var(--color-accent, #6366f1); }
.aia-save-report[disabled] { opacity: .7; cursor: default; }
.aia-save-report.is-saved { color: var(--color-success, #16a34a); border-color: color-mix(in srgb, var(--color-success, #16a34a) 45%, var(--color-border, #e3e6ee)); }

/* Design 150 P2 — the ONE shared dock: a peeked record renders as a card in the conversation thread. */
.aia-reccard { max-width: 100%; }
.aia-reccard-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.aia-reccard-title { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; color: var(--color-text, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aia-reccard-open { flex: none; border: none; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent, #6366f1); padding: 2px 4px; border-radius: 6px; }
.aia-reccard-open:hover { background: var(--color-surface-hover, #f1f3f9); }
.aia-reccard-x { flex: none; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--color-text-muted, #6b7280); padding: 2px 5px; border-radius: 6px; }
.aia-reccard-x:hover { background: var(--color-surface-hover, #f1f3f9); color: var(--color-text, #111); }

/* ── the assistant window: a right-side dock that PUSHES the page (doesn't overlay it) ── */
.aia-panel {
  position: fixed; z-index: 60; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 92vw;
  display: none; flex-direction: column;
  background: var(--color-surface, #fff);
  border-left: 1px solid var(--color-border, #e3e6ee);
  box-shadow: -8px 0 30px color-mix(in srgb, var(--color-text, #0b1020) 12%, transparent);
}
.aia-panel.is-open { display: flex; }
/* Desktop: push the app content left by the dock width so the window sits BESIDE it, not over it. */
@media (min-width: 641px) {
  body { transition: padding-right .18s ease; }
  body.aia-docked { padding-right: 360px; }
}

.aia-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--color-border-subtle, var(--color-border, #eee));
}
.aia-head-title { font-weight: 700; font-size: 14px; color: var(--color-text, #111); }
/* Design 150 — the scope indicator: "Across all apps" (hub) vs "In {AppName}" (runtime). */
.aia-scope {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted, #6b7280);
  background: var(--color-surface-alt, color-mix(in srgb, var(--color-accent, #6366f1) 9%, transparent));
  border: 1px solid var(--color-border-subtle, var(--color-border, #e3e6ee));
  padding: 2px 8px; border-radius: 999px; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aia-head-fresh {
  margin-left: auto; border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--color-accent); padding: 4px 8px; border-radius: 6px;
}
.aia-head-fresh:hover { background: var(--color-surface-hover, #f1f3f9); }
.aia-head-close {
  border: none; background: none; cursor: pointer; font-size: 15px;
  color: var(--color-text-muted, #6b7280); padding: 4px 6px; border-radius: 6px;
}
.aia-head-close:hover { background: var(--color-surface-hover, #f1f3f9); color: var(--color-text, #111); }

.aia-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.aia-hello { color: var(--color-text-muted, #6b7280); font-size: 13px; line-height: 1.5; }

.aia-turn { display: flex; }
.aia-turn-user { justify-content: flex-end; }
.aia-turn-assistant { justify-content: flex-start; }
.aia-bubble {
  max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px;
  background: var(--color-accent, #6366f1); color: var(--color-on-accent, #fff); font-size: 14px;
}

.aia-card {
  max-width: 92%; display: flex; flex-direction: column; gap: 8px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--color-surface-alt, #f6f8fc); border: 1px solid var(--color-border, #e3e6ee);
}
.aia-sec-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted, #6b7280); }
.aia-op { font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--color-border-subtle, var(--color-border, #eee)); background: var(--color-surface, #fff); }
.aia-op-ready { border-color: color-mix(in srgb, var(--color-accent, #6366f1) 45%, var(--color-border, #e3e6ee)); color: var(--color-text, #111); }
.aia-op-rejected { color: var(--color-text-muted, #6b7280); }
.aia-q { font-size: 14px; color: var(--color-text, #111); }
.aia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aia-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border, #e3e6ee); background: var(--color-surface, #fff); color: var(--color-text, #111); font: inherit; }
.aia-chip:hover { border-color: var(--color-accent, #6366f1); color: var(--color-accent, #6366f1); }
.aia-note { font-size: 12px; color: var(--color-text-muted, #6b7280); }
.aia-status { font-size: 13px; color: var(--color-text-muted, #6b7280); }
.aia-status.aia-error { color: var(--color-danger, #dc2626); }
.aia-status.aia-ok { color: var(--color-success, #16a34a); }
.aia-apply {
  margin-top: 2px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  border: none; border-radius: 8px; padding: 8px 14px;
  background: var(--color-accent, #6366f1); color: var(--color-on-accent, #fff);
}
.aia-apply[disabled] { opacity: .6; cursor: default; }
.aia-apply.aia-applied { background: var(--color-success, #16a34a); }

.aia-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-border-subtle, var(--color-border, #eee)); }
.aia-input {
  flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.4; max-height: 120px;
  color: var(--color-text, #111); background: var(--color-surface-alt, #f8f9fc);
  border: 1px solid var(--color-border, #e3e6ee); border-radius: 10px; padding: 9px 11px;
}
.aia-input::placeholder { color: var(--color-text-muted, #9aa1ad); }
.aia-controls { display: flex; align-items: center; gap: 6px; }
.aia-mic, .aia-send { cursor: pointer; font: inherit; border-radius: 9px; border: 1px solid var(--color-border, #e3e6ee); }
.aia-mic { width: 40px; height: 40px; font-size: 17px; background: var(--color-surface, #fff); }
.aia-mic.is-on { background: var(--color-danger, #dc2626); border-color: transparent; color: #fff; animation: aia-pulse 1.1s ease-in-out infinite; }
@keyframes aia-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger,#dc2626) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.aia-send { padding: 0 16px; height: 40px; font-size: 14px; font-weight: 600; background: var(--color-accent, #6366f1); color: var(--color-on-accent, #fff); border-color: transparent; }
.aia-send[disabled] { opacity: .6; cursor: default; }
.aia-privacy { padding: 0 12px 10px; font-size: 11px; color: var(--color-text-muted, #9aa1ad); }

@media (prefers-reduced-motion: reduce) { .aia-mic.is-on { animation: none; } }

/* ── mobile / PWA ≤640px: a BOTTOM SHEET (no side-push on a narrow screen) ─────────── */
@media (max-width: 640px) {
  .aia-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    height: 74vh; border-left: none; border-top: 1px solid var(--color-border, #e3e6ee);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px color-mix(in srgb, var(--color-text, #0b1020) 20%, transparent);
  }
  /* Sit the assistant sheet ABOVE the mobile suite bottom bar (54px) so the bar stays tappable
     and the composer isn't hidden behind it — same as the peek dock. */
  body.has-suite-rail .aia-panel { bottom: 54px; }
  .aia-input, .aia-bar-input { font-size: 16px; } /* ≥16px avoids iOS zoom-on-focus */
}

/* ── Design 164 — server-authored selectable options (record / screen / select) ── */
.aia-options { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.aia-options-inline { margin-top: 8px; }
.aia-option { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
  color: var(--color-text, #111); }
.aia-option:hover { border-color: var(--color-accent, #6366f1);
  background: color-mix(in srgb, var(--color-accent, #6366f1) 6%, var(--color-surface, #fff)); }
.aia-option:focus-visible { outline: 2px solid var(--color-accent, #6366f1); outline-offset: 1px; }
.aia-option-label { font-weight: 600; }
.aia-option-sub { color: var(--color-text-muted, #6b7280); font-size: 12px; }
.aia-option-badge { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border-subtle, #eee); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.aia-option-go { color: var(--color-text-muted, #6b7280); font-size: 12px; }