/* 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; }
.agent-place .agent-place-meta { color: var(--text-dim); margin-top: 2px; }
.agent-place .agent-place-reasoning { margin-top: 4px; color: var(--text); }

/* ---- 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: 150px; 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 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 triangles for recommended_places with
   coordinates — distinct shape from the round weather/temp/wind station
   icons elsewhere, so the two never get visually confused) ───────────── */
.agent-place-triangle {
  width: 26px; height: 24px;
  background: var(--brand-purple);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  color: #fff;
  font: 700 11px/1 'Barlow Condensed', sans-serif;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}