/* Ask AI — staff assistant surface.
   Every colour, radius and space comes from tokens.css so the page re-skins with
   the rest of the app and stays correct in light mode. Motion is transform +
   opacity only, and every animation is disabled under prefers-reduced-motion. */

/* ── full-page surface ───────────────────────────────────────────────────── */
/* Fully opaque from the first frame. The entrance animates TRANSFORM only —
   never opacity — so a throttled or backgrounded tab that stalls the transition
   leaves the page readable and usable rather than half-faded. */
.ask-ai-page {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  transform: translateY(8px);
  transition: transform .22s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.ask-ai-page.is-open { transform: none; }

.ask-ai-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: calc(env(safe-area-inset-top) + var(--s5)) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
}
.ask-ai-back {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-top: 2px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  cursor: pointer;
}
.ask-ai-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-back-ic { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; }
.ask-ai-head-tx { min-width: 0; }
.ask-ai-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.03em;
}
.ask-ai-sub { margin: 4px 0 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }

/* ── thread ──────────────────────────────────────────────────────────────── */
.ask-ai-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ask-ai-msg { display: flex; max-width: 88%; }
.ask-ai-msg-you { align-self: flex-end; justify-content: flex-end; }
.ask-ai-msg-ai { align-self: flex-start; }
.ask-ai-bubble {
  padding: 11px 14px;
  border-radius: var(--r-lg);
  font-size: var(--fs-body);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-ai-msg-you .ask-ai-bubble {
  background: var(--gold);
  color: var(--on-accent);
  border-bottom-right-radius: var(--r-sm);
}
.ask-ai-msg-ai .ask-ai-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: var(--r-sm);
}

.ask-ai-typing .ask-ai-bubble { display: flex; gap: 5px; align-items: center; padding: 14px; }
.ask-ai-dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--muted);
  animation: askai-think 1.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
.ask-ai-dot:nth-child(2) { animation-delay: .14s; }
.ask-ai-dot:nth-child(3) { animation-delay: .28s; }
@keyframes askai-think { 0%, 65%, 100% { transform: translateY(0); opacity: .45; } 32% { transform: translateY(-2px); opacity: 1; } }

/* ── example prompt cards ────────────────────────────────────────────────── */
.ask-ai-examples { margin-top: var(--s2); }
.ask-ai-examples-label {
  margin: 0 0 var(--s2);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.ask-ai-example-cards { display: flex; flex-direction: column; gap: var(--s2); }
.ask-ai-example {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.ask-ai-example:hover { transform: translateY(-1px); border-color: var(--gold-line); color: var(--text); }
.ask-ai-example:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── confirmation card ───────────────────────────────────────────────────── */
.ask-ai-confirm {
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--elev-2);
  padding: var(--s4);
}
.ask-ai-confirm-eyebrow {
  margin: 0 0 6px;
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
}
.ask-ai-confirm-h {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
}
.ask-ai-confirm-list { margin: 0 0 var(--s3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ask-ai-confirm-list li {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.ask-ai-confirm-op { display: block; font-size: var(--fs-small); font-weight: 600; }
.ask-ai-confirm-when {
  display: block; margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  color: var(--gold);
}
.ask-ai-confirm-tz, .ask-ai-confirm-note {
  margin: 0 0 4px;
  font-size: var(--fs-tiny);
  color: var(--muted);
  line-height: 1.45;
}
.ask-ai-confirm-btns { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s3); }

.ask-ai-btn {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s4);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s var(--ease-out), opacity .16s var(--ease-out);
}
.ask-ai-btn:active { transform: scale(.985); }
.ask-ai-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.ask-ai-btn-gold { background: var(--gold-button-gradient); color: var(--gold-button-text); }
.ask-ai-btn-ghost { background: transparent; border-color: var(--gold-line); color: var(--gold); }
.ask-ai-btn-quiet { background: transparent; border-color: var(--line-2); color: var(--muted); }

/* ── result card ─────────────────────────────────────────────────────────── */
.ask-ai-result {
  border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: var(--r-xl);
  background: var(--gold-soft);
  padding: var(--s4);
  text-align: center;
}
.ask-ai-result-ic { width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.ask-ai-result-h { margin: var(--s2) 0 0; font-family: var(--display); font-size: var(--fs-h4); font-weight: 700; }
.ask-ai-result-notes { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--fs-tiny); color: var(--muted); }
.ask-ai-result-btns { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s3); }

/* ── photo understanding + routing ─────────────────────────────────────── */
.ask-ai-photo-msg { max-width: 72%; }
.ask-ai-photo-bubble {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
}
.ask-ai-photo-thumb {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.ask-ai-photo-name {
  display: block;
  padding: 8px 11px;
  color: var(--text-2);
  font-size: var(--fs-tiny);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-ai-photo-note {
  display: block;
  padding: 0 11px 9px;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.4;
  white-space: pre-wrap;
}
.ask-ai-understood,
.ask-ai-choice {
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: var(--s4);
}
.ask-ai-understood { border-color: var(--gold-line); }
.ask-ai-understood-kicker,
.ask-ai-choice-kicker {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.ask-ai-understood-title,
.ask-ai-choice-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h4);
  line-height: 1.3;
}
.ask-ai-understood-confidence {
  display: inline-flex;
  margin: 9px 0 0;
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
}
.ask-ai-understood-confidence.is-unsure { color: var(--muted); background: var(--surface-3); }
.ask-ai-understood-note,
.ask-ai-choice-note {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.ask-ai-understood-read {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s3);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-3);
}
.ask-ai-understood-read span { color: var(--faint); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tracking); }
.ask-ai-understood-read b { font-size: var(--fs-small); }
.ask-ai-understood-read p { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; }
.ask-ai-understood-warning {
  margin: var(--s2) 0 0;
  padding: 9px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  color: var(--text-2);
  font-size: var(--fs-tiny);
  line-height: 1.45;
}
.ask-ai-choice-actions { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s3); }

/* ── composer ────────────────────────────────────────────────────────────── */
.ask-ai-composer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
}
.ask-ai-suggest {
  margin-bottom: var(--s2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-tiny);
  cursor: pointer;
}
.ask-ai-suggest:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-photo-pending {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s2);
  padding: 8px 10px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: var(--gold-soft);
}
.ask-ai-photo-pending-media { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ask-ai-photo-pending-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-3);
}
.ask-ai-photo-pending-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ask-ai-photo-pending-title { color: var(--text); font-size: var(--fs-small); }
.ask-ai-photo-pending-name { overflow: hidden; color: var(--muted); font-size: var(--fs-tiny); text-overflow: ellipsis; white-space: nowrap; }
.ask-ai-photo-pending-status { color: var(--gold); font-size: var(--fs-tiny); line-height: 1.3; }
.ask-ai-photo-pending-remove {
  flex: none;
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-tiny);
  cursor: pointer;
}
.ask-ai-photo-pending-remove:hover { color: var(--text); border-color: var(--gold-line); }
.ask-ai-photo-pending-remove:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-input-row { display: flex; align-items: flex-end; gap: var(--s2); }
.ask-ai-attach {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--gold);
  cursor: pointer;
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), opacity .16s var(--ease-out);
}
.ask-ai-attach:hover { border-color: var(--gold-line); }
.ask-ai-attach:active { transform: scale(.94); }
.ask-ai-attach:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-attach[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.ask-ai-attach-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ask-ai-input {
  flex: 1;
  min-height: 46px;
  max-height: 160px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.45;
  resize: none;
}
.ask-ai-input:focus { outline: none; border-color: var(--gold-line); }
.ask-ai-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ask-ai-send {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  border: none;
  background: var(--gold-button-gradient);
  cursor: pointer;
  transition: transform .16s var(--ease-out), opacity .16s var(--ease-out);
}
.ask-ai-send:active { transform: scale(.94); }
.ask-ai-send:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask-ai-send[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.ask-ai-send-ic { width: 19px; height: 19px; fill: var(--gold-button-text); stroke: none; }

.ask-ai-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ask-ai-page,
  .staff-askai-hero,
  .ask-ai-example,
  .ask-ai-btn,
  .ask-ai-attach,
  .ask-ai-send { transition: none; }
  .staff-askai-hero::after,
  .ask-ai-dot { animation: none; }
  .staff-askai-hero::after { display: none; }
  .ask-ai-page { transform: none; }
}