/* ═══════════════════════════════════════════════════════════════════════════
   AI Data Navigator — chat widget for erddap2.gcoos.org

   Teal header, white body on faint graph paper, monospace for anything a
   machine produced, warm orange reserved for the one action that costs money.

   Typography is loaded from jsDelivr (the same CDN the widget already uses for
   the markdown parser) rather than Google Fonts, so no request reaches a
   third-party analytics domain. Delete the two @import lines to fall back to
   the system stacks — the layout is unaffected, only the letterforms change.

   Every rule is namespaced `eai-` so nothing here can collide with ERDDAP's
   own stylesheet, and every token is scoped to the widget roots so the host
   page's `:root` is never touched.
   ═════════════════════════════════════════════════════════════════════════ */

@import url("https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5/index.css");

.eai-button,
.eai-panel,
.eai-help-overlay {
  --eai-teal:        #0f8b7e;
  --eai-teal-lit:    #13a294;
  --eai-teal-deep:   #0a6d63;
  --eai-teal-ink:    #0c5f57;
  --eai-teal-wash:   #eef7f5;
  --eai-teal-line:   #cfe6e1;

  --eai-orange:      #d95d1e;
  --eai-orange-lit:  #ea6f2b;
  --eai-orange-deep: #b8480f;

  --eai-ink:         #15302c;
  --eai-ink-soft:    #5c7873;
  --eai-ink-faint:   #8ea6a1;

  --eai-paper:       #ffffff;
  --eai-line:        #e2eeeb;
  --eai-line-soft:   #eef4f3;
  --eai-grid:        rgba(15, 139, 126, .055);

  --eai-danger:      #b02a1a;
  --eai-danger-bg:   #fdeeeb;
  --eai-danger-line: #f2ccc4;

  --eai-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --eai-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --eai-r-xl: 20px;
  --eai-r-lg: 14px;
  --eai-r-md: 10px;
  --eai-r-sm: 6px;

  --eai-shadow-lift: 0 4px 16px rgba(15, 48, 44, .13);
  --eai-shadow-deep: 0 24px 60px rgba(10, 60, 55, .20), 0 3px 10px rgba(10, 60, 55, .08);
}

/* ── Launcher ─────────────────────────────────────────────────────────────
   The pill is filled with a slowly drifting gradient rather than left white.
   Legibility is the constraint, so it is handled three ways rather than hoped
   for: every stop is a DEEP tone that clears 4.5:1 against white on its own;
   a flat 14% black scrim sits over the gradient as a floor; and the label gets
   a soft shadow to hold its edges as the hues pass beneath it. Only
   background-position animates, so it stays cheap.                         */

.eai-button {
  position: fixed; right: 26px; bottom: 26px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 26px;
  border: none; border-radius: 26px; cursor: pointer;
  color: #fff;
  font-family: var(--eai-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .012em; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .34);
  background-image:
    linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)),
    linear-gradient(95deg,
      #0a6d63 0%, #0f5f92 17%, #3f4fae 34%,
      #5b3fa8 50%, #8e3a6b 67%, #a8420c 84%, #0a6d63 100%);
  background-size: auto, 320% 100%;
  background-position: 0 0, 0% 50%;
  box-shadow: 0 6px 20px rgba(15, 48, 44, .26);
  animation: eai-drift 16s linear infinite;
  transition: transform .16s ease, box-shadow .16s ease;
}
.eai-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 48, 44, .34);
}
.eai-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.eai-mark { flex: 0 0 auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.eai-button-label { white-space: nowrap; }

/* Two layers: the scrim stays put, the gradient travels. */
@keyframes eai-drift { to { background-position: 0 0, -320% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .eai-button { animation: none; }
}

/* ── Panel shell ───────────────────────────────────────────────────────── */

.eai-panel {
  position: fixed; right: 26px; bottom: 92px; z-index: 2147483000;
  width: 468px; height: 660px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 130px);
  display: none; flex-direction: column;
  background: var(--eai-paper); color: var(--eai-ink);
  border-radius: var(--eai-r-xl);
  box-shadow: var(--eai-shadow-deep);
  font-family: var(--eai-sans); font-size: 14px; line-height: 1.55;
  overflow: hidden;
}
.eai-panel.is-open    { display: flex; }
.eai-panel.is-dragged { right: auto; bottom: auto; }

/* ── Header ────────────────────────────────────────────────────────────── */

.eai-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 15px 20px;
  background: linear-gradient(160deg, var(--eai-teal-lit) 0%, var(--eai-teal) 45%, var(--eai-teal-deep) 100%);
  color: #fff;
  cursor: move; user-select: none; flex: 0 0 auto;
}
.eai-title { min-width: 0; }
.eai-title-row { display: flex; align-items: center; gap: 10px; }
.eai-title-name { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.eai-title-sub {
  display: block; margin-top: 5px;
  font-family: var(--eai-mono); font-size: 11.5px; letter-spacing: .01em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status pip: a light ring with a solid core. */
.eai-dot {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .34);
  display: inline-flex; align-items: center; justify-content: center;
}
.eai-dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
}

.eai-header-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

/* "help" pill with a stacked-lines glyph. */
.eai-help-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); background: transparent;
  color: #fff; font-family: var(--eai-mono); font-size: 12.5px; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.eai-help-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .8); }
.eai-help-glyph {
  width: 11px; height: 8px; flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  position: relative;
}
.eai-help-glyph::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; background: currentColor; transform: translateY(-50%);
}

.eai-new {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--eai-paper); color: var(--eai-teal-ink);
  font-family: var(--eai-sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  transition: transform .14s ease, box-shadow .14s ease;
}
.eai-new:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }

.eai-close {
  background: transparent; border: none; color: rgba(255, 255, 255, .88);
  font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer;
  padding: 0 2px; border-radius: var(--eai-r-sm);
}
.eai-close:hover { color: #fff; }

/* ── Message log ───────────────────────────────────────────────────────────
   Graph-paper grid, drawn as a background on the scroll container so it stays
   pinned while the transcript scrolls over it.                             */

.eai-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 26px 22px 20px;
  border-bottom: 1px solid var(--eai-line-soft);
  background-color: var(--eai-paper);
  background-image:
    linear-gradient(var(--eai-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--eai-grid) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
}

/* ── Scrollbars ────────────────────────────────────────────────────────────
   Both scroll areas get a slim rounded thumb on a transparent track, inset
   from the edge so it never collides with a rounded corner. Firefox takes the
   standard properties; WebKit/Blink needs the ::-webkit- pseudos.          */

.eai-messages,
.eai-help-body {
  scrollbar-width: thin;
  scrollbar-color: var(--eai-teal-line) transparent;
}
.eai-messages::-webkit-scrollbar,
.eai-help-body::-webkit-scrollbar { width: 10px; }
.eai-messages::-webkit-scrollbar-track,
.eai-help-body::-webkit-scrollbar-track { background: transparent; }
.eai-messages::-webkit-scrollbar-thumb,
.eai-help-body::-webkit-scrollbar-thumb {
  background-color: var(--eai-teal-line);
  border-radius: 999px;
  border: 3px solid transparent;   /* inset via a transparent border */
  background-clip: content-box;
}
.eai-messages::-webkit-scrollbar-thumb:hover,
.eai-help-body::-webkit-scrollbar-thumb:hover { background-color: var(--eai-teal); }

/* ── Empty state ───────────────────────────────────────────────────────── */

.eai-empty { padding: 0; }
.eai-empty-lead {
  margin: 0 0 26px; font-size: 22px; line-height: 1.35;
  font-weight: 500; letter-spacing: -.02em; color: var(--eai-ink);
}
.eai-grad {
  background: linear-gradient(95deg, var(--eai-teal) 0%, var(--eai-teal-lit) 30%, var(--eai-orange) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Label with a rule running off to the right. */
.eai-rule {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
}
.eai-rule span {
  flex: 0 0 auto;
  font-family: var(--eai-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--eai-ink-faint);
}
.eai-rule::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--eai-teal-line);
}

.eai-starters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.eai-starter {
  display: flex; align-items: baseline; gap: 14px; width: 100%;
  padding: 16px 18px; cursor: pointer; text-align: left;
  background: var(--eai-paper);
  border: 1px solid var(--eai-teal-line); border-radius: var(--eai-r-lg);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.eai-starter:hover {
  background: var(--eai-teal-wash); border-color: var(--eai-teal);
  transform: translateX(2px);
}
.eai-starter-n {
  flex: 0 0 auto;
  font-family: var(--eai-mono); font-size: 12.5px; font-weight: 500;
  color: var(--eai-teal); opacity: .65;
}
.eai-starter-t {
  font-family: var(--eai-mono); font-size: 13.5px; line-height: 1.45;
  color: var(--eai-ink);
}

/* ── Messages ──────────────────────────────────────────────────────────── */

.eai-msg {
  margin: 0 0 13px; padding: 12px 15px;
  max-width: 90%; word-wrap: break-word; overflow-wrap: anywhere;
}
.eai-msg.user {
  margin-left: auto; background: var(--eai-teal); color: #fff;
  border-radius: var(--eai-r-lg) var(--eai-r-lg) 3px var(--eai-r-lg);
  white-space: pre-wrap;
}
.eai-msg.assistant {
  background: var(--eai-paper);
  border: 1px solid var(--eai-line);
  border-radius: 3px var(--eai-r-lg) var(--eai-r-lg) var(--eai-r-lg);
  box-shadow: 0 1px 3px rgba(15, 48, 44, .05);
}
.eai-msg.error {
  max-width: 100%;
  background: var(--eai-danger-bg); border: 1px solid var(--eai-danger-line);
  color: var(--eai-danger); border-radius: var(--eai-r-md);
  font-size: 13px;
}

.eai-msg.assistant p:first-child { margin-top: 0; }
.eai-msg.assistant p:last-child  { margin-bottom: 0; }
.eai-msg.assistant h1, .eai-msg.assistant h2,
.eai-msg.assistant h3, .eai-msg.assistant h4 {
  font-size: 14px; font-weight: 700; margin: 15px 0 6px;
  letter-spacing: -.01em; color: var(--eai-teal-ink);
}
.eai-msg.assistant ul, .eai-msg.assistant ol { padding-left: 20px; margin: 8px 0; }
.eai-msg.assistant li { margin-bottom: 4px; }
.eai-msg.assistant pre {
  background: var(--eai-teal-wash); border: 1px solid var(--eai-teal-line);
  padding: 11px 12px; border-radius: var(--eai-r-md);
  overflow-x: auto; font-family: var(--eai-mono); font-size: 11.5px; line-height: 1.5;
}
.eai-msg.assistant code {
  font-family: var(--eai-mono); font-size: 12px; word-break: break-all;
}
.eai-msg.assistant :not(pre) > code {
  background: var(--eai-teal-wash); color: var(--eai-teal-ink);
  padding: 1px 5px; border-radius: var(--eai-r-sm);
}
.eai-msg.assistant table {
  border-collapse: collapse; width: 100%; font-size: 11.5px; margin: 10px 0;
  font-family: var(--eai-mono); font-variant-numeric: tabular-nums;
}
.eai-msg.assistant th, .eai-msg.assistant td {
  border-bottom: 1px solid var(--eai-line); padding: 6px 8px; text-align: left;
}
.eai-msg.assistant th {
  border-bottom: 1.5px solid var(--eai-teal-line);
  font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--eai-ink-faint);
}
.eai-msg.assistant tbody tr:hover { background: var(--eai-teal-wash); }
.eai-msg.assistant a { color: var(--eai-orange); word-break: break-all; text-underline-offset: 2px; }
.eai-msg.assistant a:hover { color: var(--eai-orange-deep); }

.eai-figure {
  margin: 12px 0 0; padding: 8px;
  background: var(--eai-teal-wash); border: 1px solid var(--eai-teal-line);
  border-radius: var(--eai-r-md);
}
.eai-figure img { max-width: 100%; border-radius: var(--eai-r-sm); display: block; }
.eai-figure figcaption {
  font-family: var(--eai-mono); font-size: 10.5px; margin-top: 6px;
}
.eai-figure figcaption a { color: var(--eai-orange); }
.eai-lost {
  color: var(--eai-danger); font-size: 11.5px; font-style: italic; margin-top: 7px;
}

/* Tool-activity strip. */
.eai-pill {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 13px; padding: 9px 14px;
  background: var(--eai-teal-wash);
  border: 1px solid var(--eai-teal-line);
  border-radius: 999px;
  font-family: var(--eai-mono); font-size: 11.5px; color: var(--eai-teal-ink);
}
.eai-pill::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%; background: var(--eai-teal);
  animation: eai-blink 1.2s ease-in-out infinite;
}
@keyframes eai-blink { 0%, 100% { opacity: 1; transform: scale(1); }
                       50%      { opacity: .28; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) { .eai-pill::before { animation: none; } }

/* ── Composer ──────────────────────────────────────────────────────────── */

/* One card holds the whole composer: text on top, controls on a bar beneath.
   The model picker sits down here rather than in the header because it is a
   setting you change rarely — it should not compete with the title. Keeping it
   inside the card, aligned with the send button, avoids a stray control
   floating next to a centred caption. */
.eai-composer {
  flex: 0 0 auto; margin: 0 18px 12px; padding: 12px 12px 11px;
  background: var(--eai-paper);
  border: 1px solid var(--eai-line); border-radius: var(--eai-r-lg);
  box-shadow: 0 1px 2px rgba(15, 48, 44, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.eai-composer:focus-within {
  border-color: var(--eai-teal);
  box-shadow: 0 0 0 3px rgba(15, 139, 126, .12);
}

.eai-input {
  display: block; width: 100%; box-sizing: border-box;
  resize: none; border: none; outline: none; padding: 2px 4px 0;
  font-family: var(--eai-mono); font-size: 13px; line-height: 1.5;
  color: var(--eai-ink); background: transparent;
  min-height: 22px; max-height: 132px;
}
.eai-input::placeholder { color: var(--eai-ink-faint); }

.eai-composer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
}

.eai-model-wrap { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; }
.eai-model {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  max-width: 190px; padding: 6px 26px 6px 11px;
  border-radius: 999px; border: 1px solid var(--eai-teal-line);
  background: var(--eai-teal-wash); color: var(--eai-teal-ink);
  font-family: var(--eai-mono); font-size: 11.5px; line-height: 1.2;
  cursor: pointer; text-overflow: ellipsis;
  transition: background .15s ease, border-color .15s ease;
}
.eai-model:hover { background: #e2f1ee; border-color: var(--eai-teal); }
.eai-model:focus-visible { outline: 2px solid var(--eai-teal); outline-offset: 1px; }
.eai-model option { color: var(--eai-ink); background: var(--eai-paper); }
.eai-model-wrap::after {
  content: ""; position: absolute; right: 11px; top: 50%; pointer-events: none;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid var(--eai-teal);
  border-bottom: 1.5px solid var(--eai-teal);
  transform: rotate(45deg);
}

.eai-send {
  flex: 0 0 auto; padding: 10px 22px; border: none;
  border-radius: var(--eai-r-md);
  background: linear-gradient(160deg, var(--eai-orange-lit) 0%, var(--eai-orange) 55%, var(--eai-orange-deep) 100%);
  color: #fff; cursor: pointer;
  font-family: var(--eai-sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  transition: filter .15s ease, transform .12s ease;
}
.eai-send:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.eai-send:active:not(:disabled) { transform: none; }
.eai-send:disabled { background: #cfdedb; cursor: default; }

.eai-disclaimer {
  flex: 0 0 auto; padding: 0 18px 14px; background: var(--eai-paper);
  font-family: var(--eai-sans); font-size: 11px; line-height: 1.4;
  color: var(--eai-ink-faint); text-align: center;
}

/* ── Drag / resize affordances ─────────────────────────────────────────── */

.eai-resize { position: absolute; z-index: 2; }
.eai-resize-n  { top: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.eai-resize-w  { top: 14px; bottom: 14px; left: 0; width: 6px; cursor: ew-resize; }
.eai-resize-nw { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }

/* ── Help dialog ───────────────────────────────────────────────────────── */

.eai-help-overlay {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(10, 60, 55, .45);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.eai-help-overlay.is-open { display: flex; }
/* The modal clips; the BODY scrolls. If the modal itself scrolled, the
   scrollbar would run the full height and square off the rounded corners. */
.eai-help-modal {
  display: flex; flex-direction: column;
  background: var(--eai-paper); color: var(--eai-ink);
  border-radius: var(--eai-r-xl); overflow: hidden;
  max-width: 940px; width: 100%; max-height: 88vh;
  font-family: var(--eai-sans);
  box-shadow: var(--eai-shadow-deep);
}
.eai-help-header {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: linear-gradient(160deg, var(--eai-teal-lit) 0%, var(--eai-teal) 45%, var(--eai-teal-deep) 100%);
  color: #fff;
}
.eai-help-header h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.eai-help-close {
  background: none; border: none; font-size: 26px; font-weight: 300; cursor: pointer;
  color: rgba(255, 255, 255, .88); padding: 0 2px;
}
.eai-help-close:hover { color: #fff; }
.eai-help-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px;
  padding: 24px 18px 24px 24px;   /* less on the right — the scrollbar sits there */
}
.eai-help-col h3 {
  margin: 0 0 6px; font-family: var(--eai-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--eai-teal);
}
.eai-help-col + .eai-help-col { border-left: 1px solid var(--eai-line); padding-left: 30px; }
.eai-help-hint { margin: 0 0 16px; color: var(--eai-ink-soft); font-size: 13px; }
.eai-help-section { margin-bottom: 18px; }
.eai-help-section h4 {
  margin: 0 0 8px; font-family: var(--eai-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; color: var(--eai-ink-faint);
  border-bottom: 1px solid var(--eai-line); padding-bottom: 5px;
}
.eai-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.eai-chip {
  display: block; width: 100%;
  background: var(--eai-paper); border: 1px solid var(--eai-teal-line);
  border-radius: var(--eai-r-md);
  padding: 10px 13px; font-family: var(--eai-mono); font-size: 12.5px;
  color: var(--eai-ink); text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.eai-chip:hover {
  background: var(--eai-teal-wash); border-color: var(--eai-teal);
  transform: translateX(2px);
}
.eai-help-avoid { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.eai-help-avoid li {
  margin-bottom: 13px; padding-left: 15px; position: relative; line-height: 1.5;
}
.eai-help-avoid li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--eai-orange); border-radius: 2px;
}
.eai-help-avoid strong { display: block; font-weight: 700; }
.eai-help-avoid em { color: var(--eai-ink-soft); font-style: normal; }

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .eai-button { right: 16px; bottom: 16px; width: 54px; height: 54px; padding: 0;
                border-radius: 50%; justify-content: center; }
  .eai-button-label { display: none; }
  .eai-panel {
    inset: 0; width: 100%; height: 100%;
    max-width: none; max-height: none; border-radius: 0;
  }
  .eai-panel.is-dragged { left: 0 !important; top: 0 !important; }
  .eai-header { cursor: default; padding: 14px; }
  .eai-title-name { font-size: 18px; }
  .eai-model { max-width: 130px; }
  .eai-messages { padding: 20px 16px; }
  .eai-empty-lead { font-size: 19px; }
  .eai-composer { margin: 0 14px 10px; }
  .eai-disclaimer { padding: 0 14px 12px; }
  .eai-resize { display: none; }
  .eai-help-body { grid-template-columns: 1fr; gap: 20px; padding: 20px 14px 20px 18px; }
  .eai-help-col + .eai-help-col { border-left: none; padding-left: 0;
                                  border-top: 1px solid var(--eai-line); padding-top: 20px; }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .eai-button,
  .eai-panel,
  .eai-help-overlay {
    --eai-teal:        #14a294;
    --eai-teal-lit:    #1cbcac;
    --eai-teal-deep:   #0b6f66;
    --eai-teal-ink:    #7fd8cd;
    --eai-teal-wash:   #123230;
    --eai-teal-line:   #1d4a46;

    --eai-orange:      #e97b3c;
    --eai-orange-lit:  #f28e52;
    --eai-orange-deep: #c85f22;

    --eai-ink:         #e4efec;
    --eai-ink-soft:    #9db6b1;
    --eai-ink-faint:   #7d968f;

    --eai-paper:       #0f1c1a;
    --eai-line:        #24403c;
    --eai-line-soft:   #1b302d;
    --eai-grid:        rgba(28, 188, 172, .06);

    --eai-danger:      #f3a396;
    --eai-danger-bg:   #2c1a16;
    --eai-danger-line: #4d2b24;
  }
  .eai-new { background: var(--eai-paper); color: var(--eai-teal-ink); }
  .eai-model:hover { background: #17403c; }
  .eai-send:disabled { background: #2a403d; color: #7d968f; }
  .eai-help-overlay { background: rgba(3, 12, 11, .68); }
}