/* The site assistant: a launcher and a messenger panel. Tokens only, no hex.

   Proportions are the ones every widget a visitor has already used settles on:
   a 392px panel that is a fixed height rather than growing with its content,
   bubbles that stop at 85% of the log so a long answer wraps as a column and
   not a paragraph, a composer that is one line until it needs two, and a
   round send button. The launcher is slate, not teal: the accent budget in any
   viewport belongs to the page's own calls, and the assistant is chrome. */

.assist-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 52px; padding: 0 var(--space-5) 0 var(--space-4);
  background: var(--fg-2); color: var(--bg);
  border: 1px solid var(--fg-2); border-radius: var(--radius-pill);
  font: 600 0.9375rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--fg-2) 28%, transparent);
  transition: background var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.assist-launch:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: translateY(-1px); }
.assist-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.assist-launch svg { width: 20px; height: 20px; flex: 0 0 auto; }
.assist-launch[aria-expanded="true"] .assist-launch-label { display: none; }
.assist-launch[aria-expanded="true"] { padding: 0 var(--space-4); }

/* ── the panel ─────────────────────────────────────────────────────── */
.assist-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 61;
  width: min(392px, calc(100vw - 40px));
  height: min(620px, calc(100vh - 108px));
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--fg-2) 24%, transparent);
  overflow: hidden;
}
.assist-panel[hidden] { display: none; }

.assist-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.assist-head img { height: 26px; width: auto; flex: 0 0 auto; }
.assist-head-text { flex: 1 1 auto; min-width: 0; }
.assist-title { margin: 0; font: 600 0.9375rem/1.25 var(--font-display); color: var(--fg-2); max-width: none; }
.assist-sub { margin: 0; font: var(--type-caption); font-weight: 400; color: var(--fg-3); max-width: none; }
.assist-close {
  flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%; color: var(--fg-3); cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
.assist-close:hover, .assist-close:focus-visible { background: var(--surface-warm); color: var(--fg-2); }
.assist-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.assist-close svg { width: 18px; height: 18px; }

/* ── the log ───────────────────────────────────────────────────────── */
.assist-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-4); background: var(--bg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.assist-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; margin: 0; }
.assist-msg.is-user { align-self: flex-end; align-items: flex-end; }
.assist-who { display: none; }
.assist-body {
  margin: 0; padding: var(--space-3) var(--space-4);
  font: 400 0.9375rem/1.5 var(--font-body); color: var(--fg-2); max-width: none;
  background: var(--surface-warm); border-radius: 16px 16px 16px 4px;
  overflow-wrap: anywhere; white-space: pre-line;
}
.assist-msg.is-user .assist-body { background: var(--fg-2); color: var(--bg); border-radius: 16px 16px 4px 16px; }
.assist-msg.is-note .assist-body { background: transparent; color: var(--fg-3); font: var(--type-caption); font-weight: 400; padding: 0 var(--space-1); }
.assist-msg.is-note { max-width: 100%; align-items: center; align-self: center; text-align: center; }

.assist-route { margin: var(--space-2) 0 0; max-width: none; }
.assist-route a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px;
  padding: 0 var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-pill);
  color: var(--accent); font: 600 0.875rem/1 var(--font-body); text-decoration: none;
  transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
.assist-route a:hover, .assist-route a:focus-visible { background: var(--accent); color: var(--accent-on); }
.assist-route a::after { content: "\2192"; }

/* The typing indicator: three dots, still under reduced motion. */
.assist-typing .assist-body { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; }
.assist-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--meta); animation: assist-dot 1.1s infinite ease-in-out; }
.assist-typing i:nth-child(2) { animation-delay: 0.16s; }
.assist-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes assist-dot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .assist-typing i { animation: none; opacity: 0.7; } }

/* ── the composer ──────────────────────────────────────────────────── */
.assist-form {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--bg);
}
.assist-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 120px; resize: none;
  padding: 11px var(--space-4); border: 1px solid var(--meta); border-radius: 22px;
  font: 400 0.9375rem/1.4 var(--font-body); color: var(--fg-2); background: var(--bg);
  overflow-y: auto;
}
.assist-input::placeholder { color: var(--fg-3); opacity: 0.8; }
.assist-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.assist-send {
  flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-on); border: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard);
}
.assist-send:hover { background: var(--accent-hover); }
.assist-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.assist-send:disabled { background: var(--meta); cursor: default; }
.assist-send svg { width: 18px; height: 18px; }

.assist-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); max-width: none;
  font: var(--type-caption); font-weight: 400; color: var(--fg-3); background: var(--bg);
}
.assist-foot span { min-width: 0; }
.assist-linkish {
  flex: 0 0 auto; background: none; border: 0; padding: var(--space-2) 0; min-height: 36px; cursor: pointer;
  font: var(--type-caption); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.assist-linkish:hover, .assist-linkish:focus-visible { color: var(--accent-hover); }

/* ── leaving details ───────────────────────────────────────────────── */
.assist-contact { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); }
.assist-contact[hidden] { display: none; }
.assist-contact-title { margin: 0 0 var(--space-3); font: 600 0.9375rem/1.3 var(--font-display); color: var(--fg-2); max-width: none; }
.assist-contact-form { display: grid; gap: var(--space-2); }
.assist-contact-form label { font: var(--type-caption); color: var(--fg-3); margin: 0; }
.assist-field {
  min-height: 42px; padding: var(--space-2) var(--space-4); border: 1px solid var(--meta); border-radius: var(--radius-md);
  font: var(--type-body); font-size: 0.9375rem; color: var(--fg-2); background: var(--bg); width: 100%;
}
.assist-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.assist-contact-form .call-secondary { margin-top: var(--space-2); justify-self: start; }

/* ── narrow screens: the panel is the screen ───────────────────────── */
@media (max-width: 480px) {
  .assist-launch { right: 12px; bottom: 12px; }
  /* Once it is a button it carries an icon, and on a phone the icon is the
     whole control: a round target in the corner covers far less of the page
     than a pill with words in it. The words stay as its accessible name. */
  button.assist-launch { width: 52px; padding: 0; justify-content: center; }
  button.assist-launch .assist-launch-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .assist-panel {
    right: 0; left: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0;
  }
  .assist-launch[aria-expanded="true"] { display: none; }
  .assist-msg { max-width: 88%; }
}
@media print { .assist-launch, .assist-panel { display: none; } }