/* Crew League AI chat widget (2026-08-18). Shared by every page — same
   ship-as-static-files convention as the feedback widget (no base-template
   refactor mid-season). Violet was chosen to distinguish it from the old
   blue trade-only chat; since the same-day merge it is the app's ONE
   assistant (trade answers included). Mobile-first like league.css. */

.aichat-fab {
  /* env() safe-area keeps the FAB above the iPhone home indicator
     (viewport-fit=cover is set in every page head; fallback 0px). */
  position: fixed; left: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 49;
  /* width/margin overrides matter: the trade board styles bare <button>
     as width:100% (form-first page), which stretched this FAB past the
     right edge of the viewport (caught 2026-08-18 hunting Eli's iPhone
     side-scroll). Same for .aichat-send/.aichat-close below. */
  width: auto; margin: 0;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #7c3aed; color: #fff;
  border: none; border-radius: 999px;
  padding: 0.6rem 0.9rem; min-height: 44px;
  font-size: 0.8rem; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
  cursor: pointer;
}
.aichat-fab .ico { width: 1.25em; height: 1.25em; }
.aichat-fab:hover { background: #6d28d9; }
.aichat-fab.hidden { display: none; }

.aichat-dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: #1e1b31;
  border-top: 1px solid #5b21b6;
  box-shadow: 0 -8px 24px rgba(2, 6, 23, 0.55);
  padding: 0.6rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.aichat-dock.open { display: block; }
.aichat-inner { max-width: 760px; margin: 0 auto; }
.aichat-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--violet); margin-bottom: 0.35rem;
}
.aichat-close {
  /* 44pt hit box around an 18px glyph (design review part two); the
     negative margins keep the × exactly where it sat in the header. */
  width: auto; min-width: 44px; min-height: 44px; padding: 0;
  margin: -0.75rem -0.8rem -0.75rem 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
/* Read aloud, never drawn: the once-per-answer status line. */
.aichat-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.aichat-close:hover { color: var(--ink); background: none; }
.aichat-log { display: flex; flex-direction: column; gap: 0.5rem; max-height: 34vh; overflow-y: auto; margin-bottom: 0.6rem; }
.aichat-log:empty { display: none; }
.aichat-msg { max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; color: var(--ink); }
.aichat-msg.user { align-self: flex-end; background: #312e81; border: 1px solid #4338ca; }
.aichat-msg.assistant { align-self: flex-start; background: #16122b; border: 1px solid #4c1d95; }
.aichat-msg.assistant.thinking { color: var(--ink-muted); }
.aichat-row { display: flex; gap: 0.5rem; }
.aichat-input {
  flex: 1; min-width: 0; width: auto;
  background: #13101f; border: 1px solid #4c1d95; border-radius: 8px;
  color: var(--ink); padding: 0.55rem 0.75rem; min-height: 44px;
  /* 16px floor: anything smaller makes iOS Safari auto-zoom on focus and
     stay zoomed after — Eli's "UI zooms in when I chat" report. */
  font-size: 16px; font-family: inherit;
}
.aichat-input:focus { outline: none; border-color: var(--violet); }
.aichat-send {
  width: auto; margin: 0; min-height: 44px;
  background: #7c3aed; color: #fff;
  border: none; border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.aichat-send:hover { background: #6d28d9; }
.aichat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.aichat-note { color: var(--ink-muted); font-size: 0.75rem; margin-top: 0.5rem; }
.aichat-note:empty { display: none; }

@media (min-width: 640px) {
  .aichat-fab { left: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); padding: 0.7rem 1.05rem; font-size: 0.85rem; }
  .aichat-log { max-height: 40vh; }
}