/* Plain-English search (mic + "what I understood" bar), My car picker, why-line.
   Default sizes are the large/touch ones; html[data-density="compact"] shrinks them. */

/* Mic inside the search box */
.search-input-wrap .smart-mic { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 0.375rem; background: transparent; color: var(--text-secondary); cursor: pointer; }
.search-input-wrap .smart-mic[hidden] { display: none; }
.search-input-wrap .smart-mic svg { position: static; transform: none; width: 1.125rem; height: 1.125rem;
    color: currentColor; pointer-events: none; }
.search-input-wrap .smart-mic:hover { color: var(--text); background: var(--fp-hover); }
.search-input-wrap .smart-mic.listening { color: #fff; background: var(--red); }
.search-input-wrap.has-mic .search-input { padding-right: 2.75rem; }
html[data-density="compact"] .search-input-wrap .smart-mic { width: 1.875rem; height: 1.875rem; }
html[data-density="compact"] .search-input-wrap .smart-mic svg { width: 1rem; height: 1rem; }
html[data-density="compact"] .search-input-wrap.has-mic .search-input { padding-right: 2.25rem; }

/* "What I understood" bar under the header */
.smart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: var(--primary-soft); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 0.9375rem; }
.smart-bar[hidden] { display: none; }
.smart-bar .sb-lead { font-weight: 600; color: var(--text-secondary); }
.smart-bar .sb-where { color: var(--text); font-weight: 600; }
.smart-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.375rem 0 0.75rem;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
    font: 600 0.9375rem var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.smart-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; color: var(--text-secondary); font-size: 1.125rem; line-height: 1; }
.smart-chip:hover .x { background: var(--fp-hover); color: var(--text); }
.smart-undo { min-height: 2.5rem; padding: 0 0.875rem; border-radius: 999px; border: 1px solid var(--primary);
    background: transparent; color: var(--primary-text); font: 600 0.9375rem var(--font); cursor: pointer; margin-left: auto; }
.smart-undo:hover { background: var(--primary-soft); }
.smart-bar .sb-note { flex-basis: 100%; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.35; }
.smart-bar .sb-busy { color: var(--text-secondary); }
.smart-chip:focus-visible, .smart-undo:focus-visible, .car-select:focus-visible, .car-hint button:focus-visible {
    outline: 3px solid var(--primary); outline-offset: 2px; }
html[data-density="compact"] .smart-bar { padding: 0.375rem 0.75rem; gap: 0.375rem; font-size: 0.8125rem; }
html[data-density="compact"] .smart-chip { min-height: 1.75rem; font-size: 0.8125rem; font-weight: 500; padding: 0 0.25rem 0 0.5625rem; }
html[data-density="compact"] .smart-chip .x { width: 1.25rem; height: 1.25rem; font-size: 0.9375rem; }
html[data-density="compact"] .smart-undo { min-height: 1.75rem; font-size: 0.8125rem; padding: 0 0.625rem; }
html[data-density="compact"] .smart-bar .sb-note { font-size: 0.75rem; }
@media (max-width: 640px) {
    .smart-bar { padding: 0.5rem 0.75rem; }
}

/* My car (top of the filter panel) */
.car-select { width: 100%; min-height: 3rem; padding: 0 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text); font: 600 0.9375rem var(--font); cursor: pointer; }
.car-select.has-value { border-color: var(--primary); }
.car-note { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.35; }
.car-market { align-self: flex-start; background: none; border: 0; padding: 0.25rem 0; min-height: 2rem; font: inherit; font-size: 0.8125rem;
  color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.car-market:hover { color: var(--text); }
.car-market:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html[data-density="compact"] .car-select { min-height: 2rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.4375rem; padding: 0 0.5rem; }
html[data-density="compact"] .car-note { font-size: 0.75rem; }

/* Station list card: why-line and charge time */
.station-card-why { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.35; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.station-card-time { font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap; }
html[data-density="compact"] .station-card-why { font-size: 0.75rem; margin-top: 0.25rem; }

/* Station panel: why sentence + "For your car" box */
.detail-why { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text); }
.car-box { margin-top: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--bg-card); }
.car-box-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem; }
.car-box-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.car-box-time { font-size: 1.375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.car-box-sub { font-size: 0.875rem; color: var(--text-secondary); }
.car-box-cost { margin-top: 0.375rem; font-size: 0.875rem; color: var(--text); }
.car-box-cost b { font-weight: 700; }
.car-box.bad { border-color: var(--red); }
.car-box.bad .car-box-sub { color: var(--text); }
.car-box-note { margin-top: 0.375rem; font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.35; }
.car-hint { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); }
.car-hint button { border: none; background: none; padding: 0; color: var(--primary-text); font: inherit; cursor: pointer; text-decoration: underline; }
html[data-density="compact"] .detail-why { font-size: 0.8125rem; }
html[data-density="compact"] .car-box { padding: 0.5rem 0.75rem; }
html[data-density="compact"] .car-box-time { font-size: 1.125rem; }
html[data-density="compact"] .car-box-sub { font-size: 0.8125rem; }
#toggleAdapter[hidden], .car-market[hidden] { display: none !important; }