/* Agent ("Ask") tab — shared verbatim between driveweather.com and
   driveweatherapp.com (see static/js/agent-tab.js's own header for the
   full rationale — this file only has the CSS half). Loaded via
   <link rel="stylesheet" href="/static/css/agent-tab.css">; each app
   keeps a byte-identical copy in its own /static so cross-origin static
   hosting never comes into it (same pattern as cookie-consent.js). Relies
   only on CSS custom properties every host page already defines in its
   own :root (--border, --text-dim, --brand-purple, --brand-purple2,
   --red, --surface2, --text, --green) — no host-specific values here. */

/* ── PANEL TABS (Search / Agent) ──────────────────────────────────── */
#panel-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.panel-tab {
  flex: 1 1 0; padding: 11px 8px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-dim); background: transparent; border: none; cursor: pointer;
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.panel-tab.active { color: var(--brand-purple); }
#agent-tab-badge {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 3px rgba(248,81,73,.18);
}
.panel-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--brand-purple);
}
/* flex:1;min-height:0 lets the active pane take exactly the space left
   over in #panel's own column (below the tabs, above trip-summary/
   footer) instead of sizing to its content — the fix that lets
   #agent-convo below scroll independently while #agent-dock stays put.
   #tab-search gets no overflow:hidden of its own, so on the rare
   viewport where its content is taller than that space it still falls
   back to #panel's own overflow-y:auto exactly as it always has —
   only #tab-agent's overflow is clipped at the pane boundary, forcing
   #agent-convo's own scroll to be the only way to reach more of it. */
.panel-tab-pane { display: none; min-width: 0; flex-direction: column; flex: 1; min-height: 0; }
.panel-tab-pane.active { display: flex; }

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

/* ── AGENT TAB (conversation-first: convo scrolls, dock stays docked) ── */
#tab-agent { overflow: hidden; }
#agent-convo {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 4px;
}
#agent-empty-state { font-size: 13px; color: var(--text-dim); line-height: 1.5; padding: 4px 2px; }

/* ---- message bubbles ---- */
.agent-msg { display: flex; gap: 9px; margin-bottom: 14px; animation: agent-rise .3s ease both; }
@keyframes agent-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.agent-avatar {
  width: 26px; height: 26px; border-radius: 9px; flex: none; margin-top: 1px;
  background: linear-gradient(145deg, var(--brand-purple), #7A64D8);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(92,72,189,.3);
}
.agent-avatar svg { width: 14px; height: 14px; }
.agent-bubble {
  background: var(--surface2); border-radius: 4px 13px 13px 13px; padding: 10px 13px;
  font-size: 13.6px; line-height: 1.52; color: var(--text); max-width: 260px;
  white-space: pre-wrap;
}
.agent-bubble .agent-bubble-note { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }
.agent-msg--user { justify-content: flex-end; }
.agent-msg--user .agent-bubble {
  background: var(--brand-purple); color: #fff; border-radius: 13px 13px 4px 13px;
  box-shadow: 0 2px 6px rgba(92,72,189,.3);
}
.agent-typing { display: flex; gap: 4px; padding: 3px 1px; }
.agent-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim);
  animation: agent-bob 1.1s infinite;
}
.agent-typing i:nth-child(2) { animation-delay: .16s; }
.agent-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes agent-bob { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .agent-msg, .agent-typing i { animation: none; }
}

/* Places attached inside an agent bubble (recommended_places) */
.agent-msg .agent-places { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.agent-place {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; background: var(--surface);
}
.agent-place .agent-place-name {
  font-weight: 600; color: var(--text); font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.agent-place .agent-place-meta { color: var(--text-dim); margin-top: 2px; }
.agent-place .agent-place-reasoning { margin-top: 4px; color: var(--text); }
/* Same triangle glyph as the map marker (buildAgentPlaceTriangleSvg), sized
   down for inline text — clickable/hoverable to open the same flyout as
   its map counterpart, so a visitor never has to hunt the map for it. */
.agent-place-icon {
  display: inline-flex; flex: none; width: 18px; height: 17px; cursor: pointer;
}
.agent-place-icon svg { width: 100%; height: 100%; }

/* ---- suggestions ("try asking") ---- */
#agent-examples { margin: 2px 0 12px; }
#agent-examples-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 0 0 8px 2px;
}
#agent-examples-list { display: flex; flex-direction: column; gap: 7px; }
.agent-example-chip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 1.4;
  color: var(--text); transition: border-color .12s, box-shadow .12s;
}
.agent-example-chip:hover { border-color: var(--brand-purple); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

/* ---- input dock (flex:none, always pinned at the bottom of the pane) ---- */
#agent-dock { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--border); }
#agent-field {
  display: flex; align-items: flex-end; gap: 6px; background: var(--surface2);
  border: 1.5px solid var(--green); border-radius: 14px; padding: 6px 6px 6px 12px;
  box-shadow: 0 0 8px 1px rgba(63,185,80,.45);
  transition: border-color .15s, box-shadow .15s;
}
#agent-field:focus-within { border-color: var(--brand-purple); box-shadow: 0 0 0 3px rgba(92,72,189,.15); }
#agent-message {
  flex: 1; border: none; outline: none; resize: none; background: none;
  font-family: 'Barlow', sans-serif; font-size: 13.6px; line-height: 1.45;
  padding: 6px 0; max-height: 96px; color: var(--text);
}
#agent-message::placeholder { color: var(--text-dim); }
.agent-ibtn {
  width: 34px; height: 34px; border-radius: 10px; flex: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
  background: none; transition: background .15s, color .15s;
}
.agent-ibtn[hidden] { display: none; }
.agent-ibtn svg { width: 17px; height: 17px; }
.agent-ibtn:hover { background: var(--border); color: var(--text); }
.agent-ibtn:disabled { opacity: .5; cursor: not-allowed; }
.agent-ibtn--go { background: var(--brand-purple); color: #fff; box-shadow: 0 2px 6px rgba(92,72,189,.35); }
.agent-ibtn--go.is-busy { background: var(--red); }
.agent-ibtn--go:hover { background: var(--brand-purple2); color: #fff; }
#agent-mic-btn.listening { background: var(--red); color: #fff; }
#agent-dock-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 7px; font-size: 11.5px; color: var(--text-dim);
}
#agent-new-btn {
  background: none; border: none; cursor: pointer; font-family: 'Barlow', sans-serif;
  color: var(--text-dim); font-size: 11.5px; text-decoration: underline; padding: 0;
}
#agent-new-btn:hover { color: var(--brand-purple); }
#agent-new-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── AGENT PLACE MARKERS (numbered, rounded-corner triangles for
   recommended_places with coordinates — distinct shape from the round
   weather/temp/wind station icons elsewhere, so the two never get visually
   confused; green rather than brand-purple so they also read apart from
   the start/end route pins). Built as an inline SVG (buildAgentPlaceTriangleSvg
   in agent-tab.js) rather than the old clip-path div — clip-path can't
   round a polygon's own corners, only the box it's clipped from. Both the
   map marker's divIcon and the inline copy next to the place name in the
   response share this exact markup/class so they look identical. ───────── */
.agent-place-triangle {
  display: flex; cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
  transition: transform .12s ease;
}
.agent-place-triangle:hover, .agent-place-triangle:focus-visible { transform: scale(1.12); }
.agent-place-triangle path { fill: var(--green); }
.agent-place-triangle text {
  fill: #fff; font: 700 10px/1 'Barlow Condensed', sans-serif; text-anchor: middle;
}

/* ── PLACE FLYOUT (photo/name/reviews/link) — shown on hover or click of
   either a map marker or its inline twin next to the place name in the
   response text. One floating card, positioned by JS next to whichever
   triangle triggered it (see showPlaceFlyout in agent-tab.js), appended to
   <body> so it's never clipped by #agent-convo's own overflow:auto. ───── */
.agent-place-flyout {
  position: fixed; z-index: 4000; width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3); overflow: hidden;
  font-family: 'Barlow', sans-serif;
}
.agent-flyout-photo { width: 100%; height: 96px; background: var(--surface2); }
.agent-flyout-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-flyout-body { padding: 9px 11px 10px; }
.agent-flyout-name { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.agent-flyout-rating { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.agent-flyout-link {
  display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 8px;
  background: var(--brand-purple); color: #fff; font-size: 12px; font-weight: 600;
  text-decoration: none; transition: background .12s;
}
.agent-flyout-link:hover { background: var(--brand-purple2); }