/* Ask Beam: the launcher and the chat panel of the marketing site and the app (assistant/, web/shared/js/beam-panel.js).
   Built from the tokens of base.css and the rules of DESIGN.md: a night header with the mark, a working surface of white and fog,
   8 px controls and 12 / 16 px cards, the closed type and spacing scales, durations only from the motion tokens (so Calm, Off and
   prefers-reduced-motion reach every move), transform and opacity only. No inline style anywhere (CSP style-src 'self').
   The one loop is the typing indicator: a small spinner, only when motion is Full, like the busy button. */

.beam-launcher {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 55;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--night-3); border-radius: var(--radius-card);
  background: var(--night); color: var(--on-night);
  font: inherit; font-size: var(--text-sm); font-weight: 650; font-stretch: 105%; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-press) var(--ease-standard);
}
.beam-launcher:hover { background: var(--night-2); box-shadow: var(--shadow-lift); }
.beam-launcher:active { transform: scale(var(--press-scale)); }
.beam-launcher:focus-visible { outline-color: var(--lamp); }
.beam-launcher svg { flex: none; }
.beam-launcher[hidden] { display: none; }
.beam-launcher.is-inline { position: static; box-shadow: none; min-height: var(--control-h-sm); padding: var(--space-1) var(--space-3); z-index: auto; }
.beam-launcher[aria-expanded="true"] { background: var(--night-2); }

.beam-panel {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 56;
  display: flex; flex-direction: column;
  width: min(25rem, calc(100vw - 2 * var(--space-4))); height: min(44rem, calc(100vh - 2 * var(--space-4)));   /* tall enough for the message-to-a-person form (about 28rem) beside the question row */
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden;
}
.beam-panel[hidden] { display: none; }
.beam-panel.is-open { animation: mi-rise-md var(--dur-enter) var(--ease-enter) both; }
.beam-panel.is-drawer { top: 0; right: 0; bottom: 0; height: 100%; width: min(26rem, 100vw); border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-right: 0; }

.beam-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.beam-avatar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-control); background: var(--night-2); color: var(--on-night);
}
.beam-titles { min-width: 0; flex: 1; }
.beam-title { font-size: var(--text-lg); line-height: 1.15; font-weight: 750; }
.beam-sub { margin-top: 2px; font-size: var(--text-xs); color: var(--on-night-2); }
.beam-close {
  flex: none; display: grid; place-items: center; width: var(--control-h); height: var(--control-h);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--on-night); cursor: pointer;
}
.beam-close:hover { background: var(--night-2); }

.beam-log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); display: grid; align-content: start; gap: var(--space-3); background: var(--fog); }
.beam-msg { display: grid; gap: var(--space-2); max-width: 100%; animation: mi-rise var(--dur-state) var(--ease-standard) both; }
.beam-msg.is-user { justify-items: end; }
.beam-bubble {
  max-width: 92%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card);
  font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere;   /* the answer is the body of this panel: 16 px */
}
.beam-bubble p + p, .beam-bubble p + ul, .beam-bubble ul + p { margin-top: var(--space-2); }
.beam-bubble ul { margin: 0; padding-left: var(--space-5); }
.is-user .beam-bubble { background: var(--ink); color: var(--surface); }
.is-bot .beam-bubble { background: var(--surface); border: 1px solid var(--rule); }
.is-bot.is-unknown .beam-bubble { border-style: dashed; border-color: var(--rule-strong); }
.beam-kind { font-size: var(--text-xs); font-weight: 650; color: var(--ink-2); }

.beam-sources { display: grid; gap: var(--space-1); padding: 0; margin: 0; list-style: none; max-width: 92%; }
.beam-sources-h { font-size: var(--text-xs); font-weight: 650; color: var(--ink-2); }
.beam-source { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.beam-source-kind { flex: none; font-size: var(--text-xs); color: var(--ink-2); min-width: 5.5em; }
.beam-source a { color: var(--link); overflow-wrap: anywhere; }

.beam-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.beam-note { font-size: var(--text-xs); color: var(--ink-2); max-width: 92%; }

.beam-typing { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.beam-typing::before {
  content: ""; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0.6;
}
:root[data-motion="full"] .beam-typing::before { animation: mi-spin var(--busy-turn) linear infinite; }

.beam-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; background: var(--surface); }
.beam-suggest[hidden] { display: none; }
.beam-chip {
  min-height: var(--control-h); padding: var(--space-1) var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left;
}
.beam-chip:hover { background: var(--fog); }

.beam-form { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--rule); }
.beam-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.beam-panel .beam-row .btn { min-height: var(--control-h); }   /* three classes: it must beat `.landing .btn.small` of the site */
.beam-input {
  flex: 1; min-height: var(--control-h); max-height: 8rem; resize: none; padding: 9px 12px;
  border: 2px solid var(--control-edge); border-radius: var(--radius-control); background: var(--surface); font: inherit; font-size: var(--text-md); line-height: 1.4;
}
.beam-input:focus-visible { border-color: var(--focus); }
.beam-count { font-size: var(--text-xs); color: var(--ink-2); min-height: 1.2em; }
.beam-count.is-over { color: var(--down); font-weight: 650; }
.beam-foot { padding: 0 var(--space-4) var(--space-3); background: var(--surface); font-size: var(--text-xs); color: var(--ink-2); }
.beam-foot a { color: var(--link); }

.beam-human { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); max-width: 100%; }
.beam-human label { font-weight: 600; font-size: var(--text-sm); }
.beam-human input[type="email"], .beam-human input[type="text"], .beam-human textarea { font-size: var(--text-md); }   /* 16 px: a smaller field makes iOS zoom the page */
.beam-human textarea { min-height: 6rem; }
.beam-consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.beam-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.beam-error { color: var(--down); font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 40rem) {
  .beam-panel, .beam-panel.is-drawer {
    inset: auto 0 0 0; width: 100%; height: min(85vh, 40rem); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-width: 1px 0 0;
  }
  .beam-launcher { right: var(--space-3); bottom: var(--space-3); }
}

/* Phone width (design reviews FINAL-D finding 003 and FINAL-A): the floating launcher of the marketing site covered the text being read and the
   footer links. At 480 px and below it is an icon in a 44 px square (the hit area of every control), and the page keeps room for it at its
   very end: `.beam-reserve` (an empty spacer that beam-boot.js adds inside the footer, so the night background goes on to the bottom edge)
   is as tall as the launcher plus 16 px, which leaves the last line and the footer links clear of it. The words stay in the page for
   assistive technology (clipped, never display:none), so the button is still called "Ask Beam". The launcher in the app's top bar
   (`.is-inline`) and every width above 480 px are unchanged. */
.beam-reserve { display: none; }
@media (max-width: 480px) {
  .beam-launcher:not(.is-inline) { justify-content: center; width: var(--control-h); height: var(--control-h); min-height: 0; padding: 0; }
  .beam-launcher:not(.is-inline) .beam-launcher-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .beam-reserve { display: block; height: calc(var(--control-h) + var(--space-4)); }
}