/* Observed source and explicit vehicle association stay beside the conversation. */
/* A short window can contain more context than its fixed conversation pane.
   Keep the whole composer reachable and preserve a readable message viewport. */
html[data-appearance] #messages .chat-main { overflow-y:auto; overscroll-behavior:contain; }
html[data-appearance] #messages .chat-msgs { min-height:160px; }
html[data-appearance] #messages .chat-head { position:sticky; top:0; z-index:2; background:var(--surface-0); }
#messages .chat-conversation-context { flex:0 0 auto; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-1); min-width:0; font-size:12px; }
#messages .chat-source-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px 14px; margin-bottom:6px; }
#messages .chat-source-label { color:var(--mp, var(--brand-500)); font-weight:650; }
#messages .chat-source-row a { color:var(--brand-500); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
#messages .chat-listing-line { display:flex; align-items:baseline; gap:8px; min-width:0; }
#messages .chat-listing-line > span { flex:none; color:var(--text-muted); font-size:11px; }
#messages .chat-listing-line strong { overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
#messages .chat-source-note { font-size:10.5px; color:var(--text-muted); margin:4px 0 0; line-height:1.4; }
#messages .chat-vehicle-association { display:flex; flex-wrap:wrap; gap:3px 8px; margin-top:8px; font-size:11px; line-height:1.45; }
#messages .chat-vehicle-association > span { overflow-wrap:anywhere; color:var(--text-muted); }
#messages .chat-vehicle-association[data-state="linked"] > strong, #messages .chat-row-vehicle[data-state="linked"] { color:var(--success, #168752); }
/* A title match is only a suggestion (2026-09-23): amber, never the linked green,
   in the header and on the rail row alike. Static — no motion to reduce.
   The amber is 10-11 px TEXT here, so it must reach 4.5:1. Classic light's
   --warning (#D97706) is ~3.2:1 on white and ~2.4:1 on the lavender active rail
   row; refined light's dips to ~4.4:1 on its active row. The light palettes
   darken it toward their own --text; the dark palettes' ambers already pass. */
#messages { --chat-suggested-ink:var(--warning); }
:root:not([data-theme="dark"]) #messages { --chat-suggested-ink:color-mix(in srgb, var(--warning) 85%, var(--text)); }
:root:not([data-appearance="refined"]):not([data-theme="dark"]) #messages { --chat-suggested-ink:color-mix(in srgb, var(--warning) 60%, var(--text)); }
#messages .chat-vehicle-association[data-state="suggested"] > strong, #messages .chat-row-vehicle[data-state="suggested"] { color:var(--chat-suggested-ink); }
#messages .chat-vehicle-association[data-state="suggested"] { padding:5px 8px; border-radius:8px; border:1px dashed color-mix(in srgb, var(--warning) 55%, transparent); }
#messages .chat-vehicle-picker-row { display:flex; align-items:center; gap:8px; margin-top:7px; min-width:0; }
#messages .chat-vehicle-picker-row > label { flex:none; font-size:11px; color:var(--text-muted); }
#messages .chat-vehicle-picker-row > select { flex:1; width:0; min-width:120px; max-width:100%; font-size:11px; padding:6px 8px; }
#messages .chat-vehicle-picker-row > button { flex:none; font-size:11px; }
#messages .chat-row-source { color:var(--text-muted); font-size:10px; margin-bottom:4px; }
#messages .chat-row-vehicle { color:var(--text-muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:4px 0; }
@media (max-width:800px) {
    #messages .chat-conversation-context { padding:8px 10px; }
    #messages .chat-vehicle-picker-row { flex-wrap:wrap; }
    #messages .chat-vehicle-picker-row > label { display:none; }
    #messages .chat-vehicle-association > span { max-height:3em; overflow:auto; }
}