/* client/css/trip-planner.css */
/* Trip Planner — Wanderlog-inspired split-pane layout */

/* ─── Layout ─────────────────────────────────────────────────── */
.tp-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.tp-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.tp-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: 1.5rem;
}

.tp-nav-link {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s;
    white-space: nowrap;
}
.tp-nav-link:hover,
.tp-nav-link.active { color: var(--accent); }

.tp-header-right { margin-left: auto; }

.tp-points-badge {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ok);
}

/* Main layout: sidebar | right (map + results) */
.tp-main {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 53px);
    overflow: hidden;
}

/* When embedded in the dashboard accordion, fall back to a tall flexible
   panel instead of pinning to viewport height (which would clip the page
   above and below the planner). */
.tp-main.tp-inline {
    height: auto;
    min-height: 78vh;
    max-height: 88vh;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radiusSm, 8px);
}

/* ─── Sidebar ──────────────────────────────────────────────────── */
.tp-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tp-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-link-sm {
    font-size: 0.78rem;
    color: var(--accent);
    text-decoration: none;
    margin-left: auto;
    font-weight: 500;
}
.tp-link-sm:hover { text-decoration: underline; }

/* ─── Portfolio ──────────────────────────────────────────────── */
.tp-portfolio {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tp-portfolio-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.tp-portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-portfolio-skeleton {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.tp-program-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 0.83rem;
}

.tp-program-name {
    font-weight: 600;
    color: var(--text);
}

.tp-program-pts {
    font-weight: 700;
    color: var(--ok);
    font-size: 0.88rem;
}

.tp-program-val {
    color: var(--muted);
    font-size: 0.78rem;
}

.tp-portfolio-total {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: right;
}
.tp-portfolio-total strong { color: var(--ok); }

.tp-no-cards {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.5;
    padding: 0.25rem 0;
}

/* ─── Search box ─────────────────────────────────────────────── */
.tp-search-box {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tp-search-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tp-input-wrap {
    position: relative;
    flex: 1;
}

.tp-input-narrow { flex: 0 0 80px; }

.tp-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--muted);
    pointer-events: none;
}

.tp-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.88rem;
    padding: 0.55rem 0.75rem 0.55rem 2rem;
    outline: none;
    transition: border-color 0.15s;
}
.tp-input-narrow .tp-input { padding-left: 0.6rem; }
.tp-input:focus { border-color: var(--accent); }
.tp-input::placeholder { color: var(--muted); }

.tp-select {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.55rem 0.6rem;
    outline: none;
    cursor: pointer;
}
.tp-select:focus { border-color: var(--accent); }

.tp-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.15s, transform 0.1s;
}
.tp-btn-primary svg { width: 16px; height: 16px; }
.tp-btn-primary:hover { background: var(--accent-2); }
.tp-btn-primary:active { transform: scale(0.98); }

/* ─── AI Suggestions ─────────────────────────────────────────── */
.tp-ai-suggestions {
    padding: 1.25rem;
    flex: 1;
}

.tp-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tp-suggestion-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    width: 100%;
}
.tp-suggestion-card:hover {
    border-color: var(--accent);
    background: var(--surface-3);
}

.tp-suggestion-dest {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-suggestion-text {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.tp-suggestion-pts {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ok);
    margin-top: 0.3rem;
}

.tp-muted { color: var(--muted); font-size: 0.85rem; }

/* ─── Right column: map + content ───────────────────────────── */
.tp-content {
    overflow-y: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* ─── Map container (Wanderlog-style top half) ───────────────── */
.tp-map-container {
    position: relative;
    flex-shrink: 0;
    height: 320px;
    border-bottom: 2px solid var(--border);
    background: var(--surface-2);
}

.tp-map {
    width: 100%;
    height: 100%;
}

/* Empty overlay before a destination is chosen */
.tp-map-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--surface-2);
    z-index: 10;
    pointer-events: none;
}

.tp-map-globe { font-size: 2.5rem; }

.tp-map-empty-overlay p {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Leaflet custom pin styles */
.tp-map-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.15s;
}
.tp-map-pin:hover { transform: scale(1.15); }

/* Popup styles injected into Leaflet popup */
.tp-map-popup {
    padding: 4px 2px;
    min-width: 140px;
}
.tp-map-popup-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.tp-map-popup-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}
.tp-map-popup-link {
    font-size: 11px;
    color: #1D6B4A;
    text-decoration: none;
    font-weight: 600;
}
.tp-map-popup-link:hover { text-decoration: underline; }

/* ─── Empty state ────────────────────────────────────────────── */
.tp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
}

.tp-empty-inner { max-width: 480px; }

.tp-globe {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.tp-empty h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.tp-empty p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.tp-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tp-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.tp-chip:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

/* ─── Results pane ───────────────────────────────────────────── */
.tp-results {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tp-trip-header { padding-bottom: 0; }

.tp-trip-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tp-trip-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

.tp-trip-emoji { font-size: 1.8rem; }

.tp-trip-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0.25rem 0 0;
}

/* Value summary */
.tp-value-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.tp-value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    text-align: center;
}

.tp-value-highlight {
    border-color: var(--accent);
    background: var(--surface-2);
}

.tp-value-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.tp-value-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}
.tp-value-num.ok { color: var(--ok); }

/* Affordability banner */
.tp-afford-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.tp-afford-banner.can-afford {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}

.tp-afford-banner.cant-afford {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.tp-afford-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tp-afford-text {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}

/* Tabs */
.tp-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border);
}

.tp-tab {
    background: none;
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.tp-tab:hover { color: var(--text); }
.tp-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tp-tab-panel { padding-top: 0.75rem; }

/* Options list (flights & hotels) */
.tp-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-option-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    transition: border-color 0.15s;
}
.tp-option-card:hover { border-color: var(--accent); }

.tp-option-card.best-value { border-color: var(--ok); }

.tp-option-card.best-value::before {
    content: "Best value";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ok);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    grid-column: 1 / -1;
    margin-bottom: -0.25rem;
}

.tp-option-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.tp-option-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.tp-option-pts {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    text-align: right;
}

.tp-option-cash {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: right;
    text-decoration: line-through;
}

.tp-option-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--muted);
    margin-top: 0.3rem;
}

/* Transfer strategy */
.tp-transfer-strategy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tp-transfer-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.tp-transfer-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.tp-transfer-from { color: var(--text); }
.tp-transfer-arrow { color: var(--accent); font-size: 1.1rem; }
.tp-transfer-to { color: var(--ok); }

.tp-transfer-ratio {
    margin-left: auto;
    font-size: 0.78rem;
    background: var(--surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: var(--muted);
}

.tp-transfer-detail {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
}

.tp-transfer-action { margin-top: 0.6rem; }

.tp-transfer-link {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.tp-transfer-link:hover { text-decoration: underline; }

/* Save row */
.tp-save-row {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.tp-btn-secondary {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tp-btn-secondary:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

/* ─── AI Trip Assistant panel ────────────────────────────────── */
.tp-ai-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 500;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tp-ai-fab:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
.tp-ai-fab.open { background: var(--accent-2); }

.tp-ai-panel {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    width: 360px;
    max-height: 520px;
    z-index: 499;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tp-ai-appear 0.2s ease;
}

@keyframes tp-ai-appear {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tp-ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.tp-ai-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.tp-ai-panel-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.25rem;
    line-height: 1;
}
.tp-ai-panel-close:hover { color: var(--text); }

.tp-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    scroll-behavior: smooth;
}

.tp-ai-msg { display: flex; }
.tp-ai-msg-user { justify-content: flex-end; }
.tp-ai-msg-assistant { justify-content: flex-start; }

/* Bubble metrics mirror the Ask Finstracker chat (.chat-msg in
   styles.css): 85% width, 12px radius, 0.92rem, 1.4 line-height. */
.tp-ai-bubble {
    max-width: 85%;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.4;
}

.tp-ai-msg-user .tp-ai-bubble {
    background: var(--accent);
    color: var(--accent-text);
    border-bottom-right-radius: 4px;
}

.tp-ai-msg-assistant .tp-ai-bubble {
    background: var(--surface-2);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

/* Live Amadeus flight/hotel deal card rendered under a chat reply */
.tp-travel-card {
    max-width: 85%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-travel-head {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.tp-travel-row {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.tp-travel-ico {
    font-size: 1rem;
    line-height: 1.3;
}

.tp-travel-body { min-width: 0; }

.tp-travel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.tp-travel-sub {
    font-size: 0.74rem;
    color: var(--muted);
}

.tp-travel-price {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 1px;
}

.tp-travel-foot {
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.4;
    border-top: 1px solid var(--border);
    padding-top: 0.45rem;
}

.tp-ai-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.tp-ai-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
}
.tp-ai-input:focus { border-color: var(--accent); }
.tp-ai-input::placeholder { color: var(--muted); }

.tp-ai-send {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    padding: 0 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.tp-ai-send:hover { background: var(--accent-2); }

/* Toast */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
    pointer-events: none;
}

.tp-toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    pointer-events: auto;
    box-shadow: var(--shadow);
    animation: tp-slide-in 0.2s ease;
}
.tp-toast.ok { border-color: var(--ok); }
.tp-toast.err { border-color: var(--danger); }

@keyframes tp-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Itinerary (same as before) ─────────────────────────────── */
.tp-itinerary { display: flex; flex-direction: column; gap: 0; }

.tp-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.tp-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: 1.5rem;
}

.tp-nav-link {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s;
    white-space: nowrap;
}
.tp-nav-link:hover,
.tp-nav-link.active { color: var(--accent); }

.tp-header-right { margin-left: auto; }

.tp-points-badge {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ok);
}

.tp-main {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: calc(100vh - 53px);
    overflow: hidden;
}

/* ─── Sidebar ──────────────────────────────────────────────────── */
.tp-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tp-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-link-sm {
    font-size: 0.78rem;
    color: var(--accent);
    text-decoration: none;
    margin-left: auto;
    font-weight: 500;
}
.tp-link-sm:hover { text-decoration: underline; }

/* ─── Portfolio ──────────────────────────────────────────────── */
.tp-portfolio {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tp-portfolio-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.tp-portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-portfolio-skeleton {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.tp-program-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 0.83rem;
}

.tp-program-name {
    font-weight: 600;
    color: var(--text);
}

.tp-program-pts {
    font-weight: 700;
    color: var(--ok);
    font-size: 0.88rem;
}

.tp-program-val {
    color: var(--muted);
    font-size: 0.78rem;
}

.tp-portfolio-total {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: right;
}
.tp-portfolio-total strong { color: var(--ok); }

.tp-no-cards {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.5;
    padding: 0.25rem 0;
}

/* ─── Search box ─────────────────────────────────────────────── */
.tp-search-box {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tp-search-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tp-input-wrap {
    position: relative;
    flex: 1;
}

.tp-input-narrow { flex: 0 0 80px; }

.tp-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--muted);
    pointer-events: none;
}

.tp-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.88rem;
    padding: 0.55rem 0.75rem 0.55rem 2rem;
    outline: none;
    transition: border-color 0.15s;
}
.tp-input-narrow .tp-input { padding-left: 0.6rem; }
.tp-input:focus { border-color: var(--accent); }
.tp-input::placeholder { color: var(--muted); }

.tp-select {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.55rem 0.6rem;
    outline: none;
    cursor: pointer;
}
.tp-select:focus { border-color: var(--accent); }

.tp-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.15s, transform 0.1s;
}
.tp-btn-primary svg { width: 16px; height: 16px; }
.tp-btn-primary:hover { background: var(--accent-2); }
.tp-btn-primary:active { transform: scale(0.98); }

/* ─── AI Suggestions ─────────────────────────────────────────── */
.tp-ai-suggestions {
    padding: 1.25rem;
    flex: 1;
}

.tp-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tp-suggestion-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    width: 100%;
}
.tp-suggestion-card:hover {
    border-color: var(--accent);
    background: var(--surface-3);
}

.tp-suggestion-dest {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-suggestion-text {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.tp-suggestion-pts {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ok);
    margin-top: 0.3rem;
}

.tp-muted { color: var(--muted); font-size: 0.85rem; }

/* ─── Right pane / content ───────────────────────────────────── */
.tp-content {
    /* Containing block for the build overlay so it blankets the itinerary
       panel only (not the chat column). */
    position: relative;
    overflow-y: auto;
    background: var(--bg);
}
/* While the AI fills a fresh trip, lock the panel's own scroll so the
   inset:0 overlay covers the ENTIRE itinerary instead of scrolling off
   the bottom. The chat column stays interactive (overlay is scoped here). */
.tp-content.tp-building { overflow: hidden; }

/* Empty state */
.tp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.tp-empty-inner { max-width: 480px; }

.tp-globe {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.tp-empty h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.tp-empty p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.tp-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tp-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.tp-chip:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

/* Results pane */
.tp-results {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tp-trip-header {
    padding-bottom: 0.5rem;
}

.tp-trip-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tp-trip-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

.tp-trip-emoji { font-size: 2rem; }

.tp-trip-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0.25rem 0 0;
}

/* Value summary */
.tp-value-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.tp-value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    text-align: center;
}

.tp-value-highlight {
    border-color: var(--accent);
    background: var(--surface-2);
}

.tp-value-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.tp-value-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}
.tp-value-num.ok { color: var(--ok); }

/* Affordability banner */
.tp-afford-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.tp-afford-banner.can-afford {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}

.tp-afford-banner.cant-afford {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.tp-afford-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tp-afford-text {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}

/* Tabs */
/* Segmented-control tabs: pills inside a soft track, the active one
   raised on a surface card. Reads cleaner than the old underline row. */
.tp-tabs {
    display: flex;
    gap: 0.2rem;
    padding: 0.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tp-tabs::-webkit-scrollbar { display: none; }

.tp-tab {
    background: none;
    border: none;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 9px;
    margin-bottom: 0; /* cancel the legacy underline-tab -2px pull */
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.tp-tab svg { opacity: 0.7; flex-shrink: 0; }
.tp-tab:hover { color: var(--text); }
.tp-tab:hover svg { opacity: 1; }
.tp-tab.active {
    color: var(--accent);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
}
.tp-tab.active svg { opacity: 1; }

.tp-tab-panel { padding-top: 0.75rem; }

/* Options list (flights & hotels) */
.tp-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-option-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    transition: border-color 0.15s;
}
.tp-option-card:hover { border-color: var(--accent); }

.tp-option-card.best-value {
    border-color: var(--ok);
}

.tp-option-card.best-value::before {
    content: "Best value";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ok);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    grid-column: 1 / -1;
    margin-bottom: -0.25rem;
}

.tp-option-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.tp-option-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.tp-option-pts {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    text-align: right;
}

.tp-option-cash {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: right;
    text-decoration: line-through;
}

.tp-option-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--muted);
    margin-top: 0.3rem;
}

/* Transfer strategy */
.tp-transfer-strategy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tp-transfer-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.tp-transfer-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.tp-transfer-from {
    color: var(--text);
}

.tp-transfer-arrow {
    color: var(--accent);
    font-size: 1.1rem;
}

.tp-transfer-to {
    color: var(--ok);
}

.tp-transfer-ratio {
    margin-left: auto;
    font-size: 0.78rem;
    background: var(--surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: var(--muted);
}

.tp-transfer-detail {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
}

.tp-transfer-action {
    margin-top: 0.6rem;
}

.tp-transfer-link {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.tp-transfer-link:hover { text-decoration: underline; }

/* Itinerary */
.tp-itinerary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─── Wanderlog-style Itinerary ──────────────────────────────── */

/* Day section */
.wl-day {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 1rem;
}

/* Day header */
.wl-day-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    user-select: none;
}

.wl-day-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wl-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}

.wl-day-date-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wl-day-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

.wl-day-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

/* Per-day city pill (multi-city trips). The text is contenteditable so
   the traveler can fix it inline; an empty one shows a placeholder. */
.wl-day-area {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.12rem;
    align-self: flex-start;
    max-width: 100%;
    padding: 0.05rem 0.45rem 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
}
.wl-day-area svg { flex: 0 0 auto; }
.wl-day-area-text {
    outline: none;
    min-width: 1ch;
    white-space: nowrap;
}
.wl-day-area-text:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    font-weight: 500;
}
.wl-day-area-text:focus {
    /* Solidify into an editable chip while typing. */
    background: var(--surface);
    color: var(--text);
    border-radius: 4px;
    padding: 0 0.2rem;
    box-shadow: 0 0 0 1px var(--accent);
}

.wl-route-info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

/* Day body */
.wl-day-body {
    padding: 0.75rem 1rem 0.5rem;
}

/* Individual stop */
.wl-stop {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

/* Left spine (number + dashed line) */
.wl-stop-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
    flex-shrink: 0;
    padding-top: 2px;
}

.wl-stop-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.wl-stop-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: none;
    border-left: 2px dashed var(--border);
    margin: 4px 0;
}

/* Stop card */
.wl-stop-card {
    flex: 1;
    display: flex;
    gap: 0.75rem;
    padding: 0 0 1rem 0.75rem;
    align-items: flex-start;
}

.wl-stop-body {
    flex: 1;
    min-width: 0;
}

.wl-stop-time {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 0.15rem;
}

.wl-stop-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

/* "what it is" subtitle under the venue name: kind + neighborhood */
.wl-stop-kind {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
    margin: -0.18rem 0 0.25rem;
    line-height: 1.35;
}

.wl-stop-address {
    font-size: 0.7rem;
    color: var(--muted);
    margin-bottom: 0.28rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Tiny amber pill shown when we could not confirm the spot inside the trip area */
.wl-stop-approx {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 999px;
    padding: 1px 7px;
    margin-bottom: 0.28rem;
}

.wl-stop-note {
    font-size: 0.83rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.wl-stop-webdesc {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

.wl-stop-bottom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wl-map-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.wl-map-link:hover { text-decoration: underline; }

/* Place avatar (colored initial, Wanderlog-style) */
.wl-stop-photo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: var(--radiusSm, 8px);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    letter-spacing: -0.02em;
}

/* Drive-time divider */
.wl-drive-divider {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.25rem;
    min-height: 40px;
}

.wl-drive-spine {
    width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.wl-drive-line {
    width: 2px;
    flex: 1;
    border-left: 2px dashed var(--border);
}

.wl-drive-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    z-index: 1;
}

.wl-drive-info {
    flex: 1;
    padding: 0.4rem 0 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wl-drive-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.wl-directions-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.wl-directions-link:hover { text-decoration: underline; }

.wl-drive-from {
    font-size: 0.72rem;
    color: var(--muted);
    flex-basis: 100%;
    margin-top: -0.3rem;
    padding-left: 0;
}

/* Add a place row */
.wl-add-place {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 56px;
    margin-bottom: 0.5rem;
    align-items: stretch;
}

.wl-add-place-input {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.45rem 0.45rem 0.85rem;
    color: var(--muted);
    min-width: 0;
    min-height: 38px;
    transition: border-color 0.15s, background 0.15s;
}
.wl-add-place-input:focus-within {
    border-style: solid;
    border-color: var(--accent);
    background: var(--surface);
}

.wl-place-input {
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.wl-place-input::placeholder { color: var(--muted); }

.wl-add-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.wl-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Recommended places carousel */
.wl-recommended {
    padding: 0.25rem 0 0.75rem 2rem;
    position: relative;
}

.wl-recommended-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.5rem;
    /* leave room for the < > nav buttons on the right */
    padding-right: 4rem;
}

/* < > carousel nav for the recommended row */
.wl-rec-nav {
    position: absolute;
    top: 0;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    line-height: 0;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.wl-rec-nav svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
    pointer-events: none;
}
.wl-rec-nav:hover { border-color: var(--accent); color: var(--accent); }
.wl-rec-prev { right: 2.1rem; }
.wl-rec-next { right: 0.25rem; }

.wl-recommended-scroll {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.wl-recommended-scroll::-webkit-scrollbar { display: none; }

.wl-rec-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.5rem;
    min-width: 80px;
    max-width: 80px;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s;
}
.wl-rec-card:hover { border-color: var(--accent); }

.wl-rec-photo {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border-radius: calc(var(--radius) / 1.5);
    letter-spacing: -0.02em;
}

.wl-rec-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

.wl-rec-add {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.wl-rec-add:hover { background: var(--accent-2); }

.wl-rec-more {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    min-width: 56px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.wl-rec-more:hover { border-color: var(--accent); }

/* Save row */
.tp-save-row {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.tp-btn-secondary {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tp-btn-secondary:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

/* Toast */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
    pointer-events: none;
}

.tp-toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    pointer-events: auto;
    box-shadow: var(--shadow);
    animation: tp-slide-in 0.2s ease;
}
.tp-toast.ok { border-color: var(--ok); }
.tp-toast.err { border-color: var(--danger); }

@keyframes tp-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tp-main {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .tp-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: none;
        overflow: visible;
    }

    .tp-content {
        overflow: visible;
    }

    .tp-value-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .tp-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tp-nav { display: none; }
}

/* ─── Trip Banner ──────────────────────────────────────────── */
.tp-trip-banner {
    position: relative;
    height: 160px;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 0;
    flex-shrink: 0;
}
.tp-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    transition: background-image 0.4s ease;
}
.tp-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
.tp-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
}
.tp-trip-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.25rem;
    outline: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tp-trip-title:focus { border-bottom: 2px solid rgba(255,255,255,0.6); }
.tp-trip-meta {
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tp-banner-photo-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s;
}
.tp-banner-photo-btn:hover { background: rgba(0,0,0,0.65); }

/* ─── Toolbar ──────────────────────────────────────────────── */
.tp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    flex-wrap: wrap;
}
.tp-toolbar-left { display: flex; align-items: center; gap: 0.6rem; }
.tp-trip-emoji { font-size: 1.6rem; }
.tp-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.tp-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.tp-tool-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.tp-tool-icon-btn {
    width: 32px;
    padding: 0;
    justify-content: center;
}
.tp-tool-btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
    border-radius: 8px;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tp-tool-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-text); }

.tp-affordability-chip {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid;
}
.tp-affordability-chip.can { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.tp-affordability-chip.cant { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* ─── Value strip ──────────────────────────────────────────── */
.tp-value-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
}
.tp-value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
    text-align: center;
}
.tp-value-highlight { border-color: var(--accent); background: var(--surface-2); }
.tp-value-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.tp-value-num { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.tp-value-num.ok { color: var(--ok); }

/* ─── Saved trips ──────────────────────────────────────────── */
.tp-saved-trips {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.tp-saved-trip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 0.4rem;
    transition: border-color 0.15s;
    text-align: left;
}
.tp-saved-trip-item:hover { border-color: var(--accent); }
.tp-saved-trip-dest { font-size: 0.83rem; font-weight: 600; color: var(--text); }
.tp-saved-trip-meta { font-size: 0.72rem; color: var(--muted); }

/* ─── Explore strip (eye-catching trips by point value) ────── */
.tp-explore-strip {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.tp-explore-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tp-explore-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, transform 0.15s;
}
.tp-explore-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.tp-explore-row-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.tp-explore-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.tp-explore-row-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-explore-row-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
}
.tp-explore-row-val {
    font-size: 0.72rem;
    color: var(--muted);
    flex-shrink: 0;
}
/* ─── Map toolbar ──────────────────────────────────────────── */
.tp-map-toolbar {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none;
}
.tp-map-day-btns {
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 70%;
}
.tp-map-day-btns::-webkit-scrollbar { display: none; }
.tp-map-day-btn {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    color: #111;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.tp-map-day-btn.active {
    background: #1D6B4A;
    color: #fff;
    border-color: #1D6B4A;
}
.tp-map-toolbar-right {
    display: flex;
    gap: 0.3rem;
    pointer-events: auto;
}
.tp-map-tool-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    color: #111;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.tp-map-tool-btn:hover { background: rgba(255,255,255,1); }
.tp-map-container { position: relative; }
.tp-map-expanded { height: 60vh !important; }
/* Map toolbar — hide on empty state (only one default "All days" btn) */
.tp-map-toolbar:not([data-active]) {
    opacity: 0;
    pointer-events: none;
}
.tp-map-toolbar[data-active] {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Attachments strip ────────────────────────────────────── */
.tp-attachments-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.tp-attach-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tp-attach-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tp-attach-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text);
}
.tp-attach-size { color: var(--muted); font-size: 0.68rem; }

/* ─── Gmail imported banner ────────────────────────────────── */
.tp-gmail-imported {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: color-mix(in srgb, var(--ok) 10%, var(--surface));
    border: 1px solid var(--ok);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.83rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.tp-gmail-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    margin-left: auto;
    font-size: 0.85rem;
}

/* ─── Budget & Transfer spreadsheet ───────────────────────── */
.tp-budget-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.tp-budget-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tp-budget-export-btn:hover { border-color: var(--accent); color: var(--accent); }
.tp-budget-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.25rem; color: var(--text); }
.tp-budget-sub { font-size: 0.83rem; color: var(--muted); margin: 0; line-height: 1.5; }

.tp-budget-section { margin-bottom: 1.5rem; }
.tp-budget-section-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0 0 0.75rem; }

.tp-budget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.tp-budget-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 0.4rem 0.75rem;
    border-bottom: 2px solid var(--border);
}
.tp-budget-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tp-budget-row:hover td { background: var(--surface-2); }
.tp-budget-row-cash td { background: color-mix(in srgb, var(--surface-2) 60%, var(--bg)); }
.tp-budget-row-first td:first-child { border-top: 2px solid var(--accent); }
.tp-budget-total-row td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; background: var(--surface-2); }
.tp-budget-best td { border-left: 3px solid var(--ok); }

.tp-budget-pts { color: var(--accent); font-weight: 700; }
.tp-budget-cash { color: var(--muted); }
.tp-budget-oop { color: var(--text); font-weight: 600; }
.tp-budget-note { color: var(--muted); font-size: 0.75rem; }
.tp-budget-note.ok { color: var(--ok); font-weight: 700; }
.tp-badge-type { color: var(--muted); font-size: 0.7rem; }
.tp-budget-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.75rem; }
.tp-budget-link:hover { text-decoration: underline; }
.tp-best-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ok);
    border: 1px solid var(--ok);
    border-radius: 999px;
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
}

.tp-budget-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin: 1rem 0;
}
.tp-budget-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem;
    text-align: center;
}
.tp-budget-kpi-highlight { border-color: var(--accent); }
.tp-budget-kpi-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.25rem; }
.tp-budget-kpi-val { font-size: 1rem; font-weight: 800; color: var(--text); }
.tp-budget-kpi-val.ok { color: var(--ok); }
.tp-budget-kpi-val.tp-bt-over { color: var(--err, #dc2626); }

/* Estimated vs actual tracker inputs */
.tp-bt-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.3rem 0.45rem;
    outline: none;
}
.tp-bt-input:focus { border-color: var(--accent); }
.tp-bt-money { max-width: 110px; }
.tp-bt-day { max-width: 110px; }
.tp-bt-del {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}
.tp-bt-del:hover { color: var(--err, #dc2626); background: var(--surface-2); }

.tp-budget-tip {
    display: flex;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: var(--radius);
    padding: 0.85rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.tp-budget-tip a { color: var(--accent); }
.tp-budget-tip-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ─── Explore ──────────────────────────────────────────────── */
.tp-explore-gallery { display: flex; flex-direction: column; gap: 1rem; }
.tp-explore-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.tp-explore-card-header { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: flex-start; }
.tp-explore-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: var(--accent-text);
    font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tp-explore-title { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 0.25rem; }
.tp-explore-meta { font-size: 0.75rem; color: var(--muted); }
.tp-explore-stops { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.tp-explore-stop {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text);
}
.tp-explore-stop-num {
    width: 16px; height: 16px; border-radius: 50%;
    color: #fff; font-size: 0.62rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.tp-explore-import {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.tp-explore-import:hover { background: var(--accent-2); }

/* ─── Modals ───────────────────────────────────────────────── */
/* Matches the Add Card dialog framing: accent top border, same radius,
   same width math, and the inner panel scrolls instead of clipping. */
.tp-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0;
    max-width: 480px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tp-modal-wide { max-width: 680px; }
.tp-modal::backdrop { background: rgba(0,0,0,0.6); }
.tp-modal-inner {
    padding: 1.25rem;
    position: relative;
    overflow-y: auto;
    max-height: calc(100vh - 4rem);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.tp-modal-inner h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--text); }
.tp-modal-inner p { font-size: 0.88rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.5; }
/* Trip-planner modals reuse the Add Card close button (.modal-close in
   styles.css). Its base rule expects a flex-column dialog, so adapt it
   to the block-flow .tp-modal-inner: block-level flex + auto left margin
   right-aligns it, sticky keeps it visible while the body scrolls. */
.tp-modal-inner .modal-close {
    display: flex;
    margin: -0.35rem -0.35rem 0.4rem auto;
}
.tp-modal-btn-primary {
    background: var(--accent); color: var(--accent-text);
    border: none; border-radius: var(--radius);
    font-size: 0.9rem; font-weight: 700;
    padding: 0.65rem 1.25rem;
    cursor: pointer; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: background 0.15s;
}
.tp-modal-btn-primary:hover { background: var(--accent-2); }
.tp-modal-foot { font-size: 0.72rem; color: var(--muted); text-align: center; margin-top: 0.75rem !important; }

/* Gmail steps */
.tp-gmail-steps { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.tp-gmail-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.tp-gmail-step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: var(--accent-text);
    font-size: 0.72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.tp-gmail-step strong { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; color: var(--text); }
.tp-gmail-step p { font-size: 0.8rem; margin: 0; }

/* Gmail bookings list */
.tp-gmail-booking {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 0.5rem;
}
.tp-gmail-booking-emoji { font-size: 1.4rem; flex-shrink: 0; }
.tp-gmail-booking-body { flex: 1; min-width: 0; }
.tp-gmail-booking-title { font-size: 0.83rem; font-weight: 700; color: var(--text); margin-bottom: 0.15rem; }
.tp-gmail-booking-detail { font-size: 0.75rem; color: var(--muted); }
.tp-gmail-booking-pts { font-size: 0.72rem; color: var(--ok); font-weight: 600; margin-top: 0.2rem; }
.tp-gmail-booking-check { flex-shrink: 0; margin-top: 0.25rem; cursor: pointer; accent-color: var(--accent); }

/* Share modal */
.tp-share-link-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }

/* View only / Can edit pills above the share link */
.tp-share-roles { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.tp-share-role {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}
.tp-share-role.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text, #fff);
}
.tp-share-input {
    flex: 1; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); font-size: 0.83rem;
    padding: 0.5rem 0.75rem; outline: none; min-width: 0;
}
.tp-share-options { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tp-share-option {
    flex: 1; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); font-size: 0.78rem;
    font-weight: 600; padding: 0.5rem 0.25rem; cursor: pointer; transition: border-color 0.15s;
}
.tp-share-option:hover { border-color: var(--accent); }

/* Share modal: collaborators */
.tp-share-collab {
    margin-top: 0.85rem; padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.tp-share-collab-title { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.2rem; }
.tp-share-collab-sub { font-size: 0.76rem; color: var(--muted); margin: 0 0 0.6rem; }
.tp-share-collab-row { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.tp-share-collab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tp-share-collab-empty { font-size: 0.78rem; color: var(--muted); padding: 0.25rem 0; }
.tp-share-collab-item {
    display: flex; align-items: center; gap: 0.55rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.4rem 0.6rem;
}
.tp-share-collab-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 0.74rem; font-weight: 700;
}
.tp-share-collab-name { flex: 1; font-size: 0.82rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-share-collab-role { font-size: 0.7rem; color: var(--muted); flex-shrink: 0; }
.tp-share-collab-remove {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 6px;
    flex-shrink: 0; transition: color 0.15s, background 0.15s;
}
.tp-share-collab-remove:hover { color: var(--danger, #e5484d); background: rgba(229, 72, 77, 0.1); }
.tp-share-collab-remove:disabled { opacity: 0.5; cursor: wait; }

/* AI quick prompts */
.tp-ai-quick-prompts {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
}
.tp-ai-quick {
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.2rem 0.65rem;
    font-size: 0.72rem; color: var(--muted); cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.tp-ai-quick:hover { border-color: var(--accent); color: var(--text); }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .tp-main { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .tp-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
    .tp-content { overflow: visible; }
    .tp-value-strip { grid-template-columns: repeat(3, 1fr); }
    .tp-budget-kpis { grid-template-columns: repeat(3, 1fr); }
    .tp-toolbar-actions { flex-wrap: wrap; }
    .tp-map-container { height: 250px; }
}
@media (max-width: 600px) {
    .tp-value-strip { grid-template-columns: repeat(2, 1fr); }
    .tp-budget-kpis { grid-template-columns: repeat(2, 1fr); }
    .tp-budget-table { font-size: 0.75rem; }
    .tp-budget-table th, .tp-budget-table td { padding: 0.4rem 0.4rem; }
    .tp-nav { display: none; }
}

/* ─── Toolbar spacing fix ───────────────────────────────────── */
.tp-toolbar {
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
.tp-toolbar-actions { gap: 0.35rem; }
.tp-tool-btn {
    font-size: 0.76rem;
    padding: 0.38rem 0.65rem;
    gap: 0.28rem;
}
.tp-tool-btn svg { flex-shrink: 0; }

/* ─── Leaflet popup custom styles ────────────────────────────── */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.leaflet-popup-content { margin: 0; }
.tp-map-popup {
    padding: 0.75rem;
    min-width: 180px;
    font-family: system-ui, -apple-system, sans-serif;
}
.tp-map-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.tp-map-popup-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tp-map-popup-day {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.tp-map-popup-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
    line-height: 1.3;
}
.tp-map-popup-type {
    font-size: 11px;
    color: #888;
    margin-bottom: 0.5rem;
}
.tp-map-popup-note {
    font-size: 11.5px;
    color: #555;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.tp-map-popup-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.tp-map-popup-link, .tp-map-popup-itinerary {
    font-size: 11px;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    transition: background 0.12s;
}
.tp-map-popup-link:hover, .tp-map-popup-itinerary:hover {
    background: #1D6B4A;
    color: #fff;
    border-color: #1D6B4A;
}

/* ─── Pin hover scale ────────────────────────────────────────── */
.tp-map-pin {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tp-map-pin:hover {
    transform: scale(1.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* ─── Flight class badges ────────────────────────────────────── */
.tp-class-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-class-economy {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.tp-class-business {
    background: color-mix(in srgb, #D97706 12%, var(--surface));
    color: #D97706;
    border: 1px solid color-mix(in srgb, #D97706 30%, var(--border));
}

/* ─── Embedded / inline layout overrides ────────────────────── */
/* When the trip planner lives inside the dashboard accordion panel
   (class tp-inline on .tp-main) override the full-viewport sizing
   so it fits cleanly inside the collapsible card. */
.tp-main.tp-inline {
    height: 72vh;
    min-height: 520px;
    max-height: 800px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    overflow: hidden;
}

/* AI FAB + panel position inside the panel (not fixed to viewport) */
.tp-ai-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
}

/* Goals block inside sidebar */
.tp-goals-inline {
    padding: 1rem 1.25rem 0.75rem;
    border-top: 1px solid var(--border);
}
.tp-goals-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tp-inline-add-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}
.tp-inline-add-btn:hover { background: var(--surface-2); }

/* ─── Inline AI planner in sidebar ────────────────────────── */
.tp-ai-inline {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.tp-ai-inline-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.tp-ai-inline-hint {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--muted);
}
.tp-ai-inline-msgs {
    max-height: 180px;
    overflow-y: auto;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-behavior: smooth;
}
.tp-ai-inline-input {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    border-top: 1px solid var(--border);
}
.tp-ai-fab[hidden] { display: none !important; }

/* ─── Itinerary options list ─────────────────────────────── */
.tp-itin-options-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}
.tp-itin-option {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
}
.tp-itin-option-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.tp-itin-option-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-itin-option-badge.budget { background: color-mix(in srgb, #0891b2 12%, var(--surface)); color: #0891b2; border: 1px solid #0891b2; }
.tp-itin-option-badge.cultural { background: color-mix(in srgb, #7c3aed 12%, var(--surface)); color: #7c3aed; border: 1px solid #7c3aed; }
.tp-itin-option-badge.adventure { background: color-mix(in srgb, #dc2626 12%, var(--surface)); color: #dc2626; border: 1px solid #dc2626; }
.tp-itin-option-title { font-weight: 700; font-size: 0.9rem; flex: 1; }
.tp-itin-option-days { font-size: 0.75rem; color: var(--muted); }
.tp-itin-option-stops { padding: 0.5rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tp-itin-option-stop { font-size: 0.73rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.55rem; color: var(--text); }
.tp-itin-option-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); }
.tp-itin-option-pts { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.tp-itin-option-load { background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius); padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.tp-itin-option-load:hover { background: var(--accent-2); }

/* ─── Place search results ───────────────────────────────── */
.tp-place-search-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tp-place-results { display: flex; flex-direction: column; gap: 0.4rem; max-height: 320px; overflow-y: auto; }
.tp-place-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    width: 100%;
}
.tp-place-result:hover { border-color: var(--accent); background: var(--surface-3); }
.tp-place-result-name { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.tp-place-result-addr { font-size: 0.72rem; color: var(--muted); }
.tp-place-result-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-place-loading { font-size: 0.85rem; color: var(--muted); padding: 0.5rem; }

/* ─── Edit stop form ─────────────────────────────────────── */
.tp-edit-stop-form { display: flex; flex-direction: column; gap: 0.4rem; }
.tp-edit-stop-form label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.tp-edit-stop-form input[type="time"],
.tp-edit-stop-form textarea { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.88rem; padding: 0.5rem 0.75rem; outline: none; font-family: inherit; }
.tp-edit-stop-form textarea:focus,
.tp-edit-stop-form input:focus { border-color: var(--accent); }

/* ─── Wl-day edit button (per day) ──────────────────────── */
.wl-day-export-btn {
    display: flex; align-items: center; gap: 0.3rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.2rem 0.5rem;
    font-size: 0.68rem; font-weight: 600; color: var(--muted);
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
    text-decoration: none; white-space: nowrap;
}
.wl-day-export-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Stop edit button ───────────────────────────────────── */
.wl-stop-edit-btn {
    background: none; border: 1px solid var(--border);
    border-radius: 6px; padding: 0.15rem 0.45rem;
    font-size: 0.68rem; color: var(--muted); cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.wl-stop-edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─── AI Chat Panel (primary sidebar) ─────────────────────── */
.tp-ai-chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.tp-ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.tp-ai-chat-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.tp-ai-chat-actions { display: flex; gap: 0.35rem; }
.tp-ai-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.tp-ai-chat-action-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Trip list panel ────────────────────────────────────── */
.tp-trips-list-panel {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    max-height: 220px;
    overflow-y: auto;
    flex-shrink: 0;
}
.tp-trips-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    background: var(--surface-2);
    z-index: 1;
}
.tp-trips-close {
    background: none; border: none; cursor: pointer; color: var(--muted);
    display: flex; align-items: center;
}
.tp-trips-list-content { padding: 0 0.5rem 0.5rem; }

/* ─── AI dest chips (in welcome message) ──────────────────── */
.tp-ai-dest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}
.tp-ai-dest-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tp-ai-dest-chip:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* ─── Chat textarea input ────────────────────────────────── */
.tp-ai-chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.6rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.tp-ai-chat-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.83rem;
    padding: 0.5rem 0.7rem;
    outline: none;
    font-family: inherit;
    resize: none;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.tp-ai-chat-input:focus { border-color: var(--accent); }
.tp-ai-chat-input::placeholder { color: var(--muted); }

/* ─── Portfolio compact ──────────────────────────────────── */
.tp-portfolio-compact { padding: 0.75rem 0.85rem; }
.tp-portfolio-compact .tp-portfolio-header { margin-bottom: 0.5rem; }
.tp-portfolio-compact .tp-program-row { padding: 0.3rem 0.4rem; font-size: 0.78rem; }

/* ─── Stop CRUD action buttons ───────────────────────────── */
.wl-stop-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.15rem;
}
.wl-stop-actions {
    display: none;
    align-items: center;
    gap: 0.25rem;
}
.wl-stop:hover .wl-stop-actions { display: flex; }
.wl-stop-action-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted);
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    padding: 0;
}
.wl-stop-action-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wl-stop-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.wl-stop-action-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ─── Per-stop attach ────────────────────────────────────── */
.wl-stop-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 5px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
    margin-left: 0.4rem;
}
.wl-stop-attach-btn:hover { border-color: var(--accent); color: var(--accent); }
.wl-stop-attachments { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

/* ─── Stop note editable ─────────────────────────────────── */
[contenteditable="true"]:focus { outline: 1px solid var(--accent); border-radius: 3px; }
.wl-stop-note[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
    font-style: italic;
}

/* ─── Trip notes ─────────────────────────────────────────── */
.tp-trip-notes-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.tp-trip-notes-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.tp-trip-notes-input {
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    padding: 0.65rem 0.75rem;
    resize: vertical;
    min-height: 70px;
    outline: none;
    line-height: 1.5;
}
.tp-trip-notes-input::placeholder { color: var(--muted); font-style: italic; }

/* ─── Reservations row ───────────────────────────────────── */
.tp-reservations-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.tp-reservations-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.tp-reservation-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tp-res-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.tp-res-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tp-reservations-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.tp-reservation-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    padding: 0.2rem 0.4rem;
    background: var(--surface-2);
    border-radius: 5px;
}

/* ═══ Sidebar AI assistant (primary left panel) ════════════════════ */
.tp-ai-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 520px;
    /* Stretch the assistant to fill the viewport so it feels like a real
       chat panel instead of a small dropped-in widget. */
    max-height: calc(100vh - 220px);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tp-ai-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.tp-ai-sidebar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
}
.tp-ai-sidebar-actions { display: inline-flex; gap: 0.35rem; }
.tp-ai-sidebar-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
}
.tp-ai-sidebar-action:hover { background: var(--surface-3, var(--surface)); }
.tp-ai-sidebar .tp-ai-quick-prompts {
    padding: 0.5rem 0.65rem 0;
    border-bottom: none;
}
.tp-ai-sidebar .tp-ai-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.65rem;
    min-height: 0;
}
.tp-ai-sidebar .tp-ai-input-row {
    border-top: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-2);
}
.tp-ai-attach-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    color: var(--text);
    padding: 0;
    line-height: 0;
}
.tp-ai-attach-btn:hover { background: var(--surface); }
.tp-ai-sidebar .tp-ai-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.86rem;
    background: var(--surface);
    color: var(--text);
}
.tp-ai-sidebar .tp-ai-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Collapsible sidebar sections */
.tp-collapse {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}
.tp-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tp-collapse > summary::-webkit-details-marker { display: none; }
.tp-collapse > summary::after {
    content: "▾";
    font-size: 0.8rem;
    color: var(--muted);
    transition: transform 0.15s;
}
.tp-collapse[open] > summary::after { transform: rotate(180deg); }
.tp-collapse > *:not(summary) { padding: 0 0.85rem 0.75rem; }

/* ═══ Trip-level notes (above day list) ════════════════════════════ */
.tp-trip-notes-block {
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.tp-trip-notes-label {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}
.tp-trip-notes {
    width: 100%;
    resize: vertical;
    min-height: 36px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    padding: 0;
}
.tp-trip-notes:focus { outline: none; }
.tp-trip-notes::placeholder { color: var(--muted); font-style: italic; }

/* ═══ Day-row actions (Auto-fill, Optimize, options) ═══════════════ */
.wl-day-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
.wl-day-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.22rem 0.5rem;
    font-size: 0.74rem;
    color: var(--text);
    cursor: pointer;
}
.wl-day-action:hover { background: var(--surface-2); }
.wl-day-options {
    width: 26px;
    padding: 0;
    justify-content: center;
}

/* Day options popup menu */
.wl-day-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.4rem;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.wl-day-menu-item {
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.45rem 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
}
.wl-day-menu-item:hover { background: var(--surface-2); }
.wl-day-menu-item.danger { color: var(--err, #dc2626); }
.wl-day-menu-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 0.15rem 0;
}
.wl-day-menu-label {
    font-size: 0.73rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wl-day-menu-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
}
.wl-day-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    padding: 0;
}
.wl-day-color-swatch:hover { transform: scale(1.1); }

/* Day-level "notes for this day" inline textarea */
.wl-day-notes-row {
    padding: 0.2rem 0.75rem 0.4rem 56px;
}
.wl-day-notes {
    width: 100%;
    resize: vertical;
    min-height: 28px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 5px;
    color: var(--text);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 0.3rem 0.5rem;
}
.wl-day-notes:focus {
    outline: none;
    border-style: solid;
    border-color: var(--accent);
}

/* Per-stop time input + type badge + cost */
.wl-stop-time {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 500;
    max-width: 92px;
    min-width: 60px;
}
.wl-stop-time:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
}
.wl-stop-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    font-weight: 600;
}
.wl-type-flight     { background: rgba(37, 99, 235, 0.1);  color: #2563eb; border-color: #2563eb33; }
.wl-type-hotel      { background: rgba(124, 58, 237, 0.1); color: #7c3aed; border-color: #7c3aed33; }
.wl-type-restaurant { background: rgba(220, 38, 38, 0.1);  color: #dc2626; border-color: #dc262633; }
.wl-type-activity   { background: rgba(217, 119, 6, 0.1);  color: #d97706; border-color: #d9770633; }
.wl-type-train      { background: rgba(8, 145, 178, 0.1);  color: #0891b2; border-color: #0891b233; }
.wl-type-bus        { background: rgba(5, 150, 105, 0.1);  color: #059669; border-color: #05966933; }
.wl-type-rental     { background: rgba(234, 88, 12, 0.1);  color: #ea580c; border-color: #ea580c33; }
.wl-stop-cost {
    font-size: 0.76rem;
    color: var(--text);
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    background: var(--surface-2);
    border-radius: 3px;
}
.wl-stop-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    color: var(--text);
    margin-right: 0.25rem;
}
.wl-stop-visited .wl-stop-card {
    opacity: 0.65;
    text-decoration-color: var(--muted);
}
.wl-stop-visited .wl-stop-name {
    text-decoration: line-through;
}
.wl-stop-photo-initial {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.wl-stop-photo {
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Trip-wide action row under itinerary (Add day / Optimize all) */
.tp-day-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
}
.tp-add-day-btn,
.tp-optimize-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
.tp-add-day-btn:hover,
.tp-optimize-all-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}
.wl-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}
.wl-empty-day {
    padding: 0.65rem 0.75rem 0.5rem 56px;
    font-size: 0.82rem;
    color: var(--muted);
}

/* ═══ Saved trips list — Wanderlog-style card ══════════════════════ */
.tp-saved-trip-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    width: 100%;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    display: block;
}
.tp-saved-trip-card:hover,
.tp-saved-trip-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-color: var(--accent);
    outline: none;
}
.tp-saved-trip-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem 0.7rem;
    width: 100%;
    background: transparent;
    pointer-events: none; /* the parent button handles clicks */
}
.tp-saved-trip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
/* Cash price slashed → points price, right side of the card body */
.tp-saved-trip-savings {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    line-height: 1.3;
}
.tp-saved-trip-cash {
    font-size: 0.72rem;
    color: var(--muted);
    text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.tp-saved-trip-pts {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.tp-saved-trip-invited {
    align-self: flex-start;
    margin-top: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
}
.tp-saved-trip-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tp-saved-trip-cover {
    height: 90px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}
.tp-saved-trip-cover-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tp-saved-trip-overlay-actions {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: inline-flex;
    gap: 0.25rem;
}
.tp-saved-trip-shared {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.9);
    color: var(--accent);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tp-saved-trip-icon-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(255,255,255,0.92);
    color: var(--text);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tp-saved-trip-icon-btn:hover { background: #fff; }
.tp-saved-trip-icon-btn { pointer-events: auto; }
.tp-saved-trip-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 0.15rem;
}
.tp-saved-trip-meta {
    font-size: 0.76rem;
    color: var(--muted);
}
.tp-saved-trip-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 0.35rem;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.tp-saved-trip-menu-item {
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text);
}
.tp-saved-trip-menu-item:hover { background: var(--surface-2); }
.tp-saved-trip-menu-item.danger { color: var(--err, #dc2626); }

/* ═══ Edit-stop modal: 2-col grid for the per-stop fields ═════════ */
.tp-modal-sub {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 1rem;
}
.tp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
.tp-edit-stop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}
.tp-edit-stop-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tp-edit-stop-full {
    grid-column: 1 / -1;
}
.tp-edit-stop-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-edit-stop-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    width: max-content;
}
.tp-edit-stop-attach-btn:hover { border-style: solid; }
.tp-edit-stop-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.tp-edit-stop-attach-chip {
    font-size: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    color: var(--text);
}
.tp-btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text);
}
.tp-btn-secondary:hover { background: var(--surface-2); }

/* ═══ Reservations and attachments strip (Wanderlog-style) ═════════ */
.tp-reservations {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
}
.tp-reservations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.tp-reservations-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.tp-reservations-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.45rem;
}
.tp-res-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.65rem 0.35rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.tp-res-tile:hover {
    border-color: var(--accent);
    background: var(--surface);
    transform: translateY(-1px);
}
.tp-res-icon { display: inline-grid; place-items: center; color: var(--accent); }
.tp-res-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}
.tp-res-count {
    position: absolute;
    top: 4px;
    right: 6px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
}
.tp-res-count.tp-res-count-empty { display: none; }
.tp-reservations-list {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tp-reservations-empty {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0.5rem 0 0;
    font-style: italic;
}
.tp-reservation-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1.5fr) minmax(0, 2fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}
.tp-reservation-row:hover { border-color: var(--accent); }
.tp-reservation-row-type {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-reservation-row-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-reservation-row-sub { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-reservation-row-when { color: var(--muted); white-space: nowrap; }
.tp-reservation-row-del {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
}
.tp-reservation-row-del:hover { color: var(--err, #dc2626); background: rgba(220, 38, 38, 0.08); }

/* Reservation stub inside a day (Wanderlog "Los Angeles → New York" card) */
.wl-res-stub {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem 0.55rem 56px;
    margin: 0.25rem 0;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
}
.wl-res-stub:hover { background: var(--surface); }
.wl-res-stub-icon {
    display: inline-grid;
    place-items: center;
    color: var(--accent);
    flex-shrink: 0;
}
.wl-res-stub-body { flex: 1; min-width: 0; }
.wl-res-stub-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.wl-res-stub-sub { font-size: 0.78rem; color: var(--muted); }
.wl-res-stub-time { font-size: 0.78rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ═══ Drag-drop affordances on stops ═══════════════════════════════ */
.wl-stop {
    cursor: grab;
}
.wl-stop:active { cursor: grabbing; }
.wl-stop-dragging {
    opacity: 0.4;
}
.wl-stop-drop-target {
    box-shadow: 0 -3px 0 0 var(--accent) inset;
}

/* ═══ Photo picker modal (5 candidates from web) ═══════════════════ */
.tp-photo-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.65rem;
    margin-top: 0.5rem;
}
.tp-photo-tile {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
}
.tp-photo-tile:hover { border-color: var(--accent); transform: scale(1.02); }
.tp-photo-tile-active { border-color: var(--accent); }
.tp-photo-tile-clear {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    border-style: dashed;
}
.tp-photo-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 1.5rem;
    font-size: 0.88rem;
}

/* Slightly tighter day actions to look less pill-y */
.wl-day-action {
    border-radius: 6px;
}
.tp-add-day-btn,
.tp-optimize-all-btn {
    border-radius: 6px;
}

/* Stop type badge — squared corners like Wanderlog labels */
.wl-stop-type-badge {
    border-radius: 3px;
}

/* ═══ Trip expenses (Budget tab) ═══════════════════════════════════ */
.tp-trip-expenses {
    margin-top: 1rem;
}
.tp-expense-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.tp-expense-controls .tp-input { padding: 0.45rem 0.7rem; min-width: 140px; }
.tp-expense-controls .tp-input-narrow { min-width: 90px; max-width: 110px; }
.tp-expense-controls .tp-select {
    padding: 0.45rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
}
.tp-expense-total {
    margin: 0.6rem 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text);
}
.tp-balance-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tp-balance-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
    background: var(--surface-2);
    border-radius: 4px;
    font-size: 0.85rem;
}
.tp-balance-row .ok { color: #16a34a; font-weight: 600; }
.tp-balance-row .err { color: #dc2626; font-weight: 600; }

/* ═══ Conversational chip rows (inline in chat) ════════════════════ */
.tp-ai-sidebar-pill {
    background: var(--accent);
    color: var(--accent-text);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tp-ai-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0.6rem 2.1rem;
    padding-right: 0.4rem;
}
.tp-ai-chip-row.tp-ai-chip-row-stale {
    opacity: 0.55;
}
.tp-ai-chip-row.tp-ai-chip-row-stale .tp-ai-chip {
    background: var(--surface-2);
    border-color: var(--border);
}
.tp-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.1;
}
.tp-ai-chip:hover {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}
/* Action chips (e.g. "Add a day", "Optimize routes") get a quiet accent
   tint so they read as suggestions, not commitments. */
.tp-ai-chip-action,
.tp-ai-chip-place {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--accent);
}
.tp-ai-chip-send {
    /* default look already matches what we want */
}
.tp-ai-chip-onboard {
    background: var(--surface);
    border-color: var(--border);
}
.tp-ai-chip-onboard:hover {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}




/* ─── Assistant-first dropdown (2026-06 redesign) ─────────────────────
   The dashboard Trip Planner panel starts in "home" mode: the assistant
   chat fills the dropdown, Claude-style, with My trips right below it.
   Opening or planning a trip flips to "trip" mode (the classic
   two-column planner). */

.tp-main.tp-inline.tp-mode-home { grid-template-columns: 1fr; }
.tp-mode-home .tp-content { display: none; }
.tp-mode-home .tp-sidebar {
    border-right: none;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem 1.25rem 1.5rem;
    box-sizing: border-box;
}
.tp-mode-home .tp-ai-sidebar {
    flex: 1 1 auto;
    min-height: 540px;
    max-height: none;
    /* Make the assistant feel like the centerpiece of the dropdown.
       Slightly larger radius + softer shadow than the trip-mode card. */
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
}
/* My trips becomes a card grid when it has the full panel width. */
.tp-mode-home #saved-trips-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
}

/* Trip mode keeps the sidebar usable: assistant on top, trips below. */
.tp-mode-trip .tp-sidebar { padding: 0.85rem; box-sizing: border-box; }

/* Header: thread trigger + icon buttons, same components as Ask Fins. */
.tp-ai-sidebar-header {
    background: var(--surface);
    padding: 0.55rem 0.7rem;
}
.tp-ai-sidebar-header .chat-header-title { min-width: 0; flex: 1 1 auto; }
.tp-ai-sidebar-header .chat-thread-title { max-width: 220px; }
.tp-ai-sidebar-actions { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Ask Finstracker parity: identical bubble metrics and colors to the
   .chat-msg family in styles.css — subtle surface assistant bubble,
   accent user bubble, 0.6rem gap with no extra per-message margins. */
.tp-ai-sidebar .tp-ai-msg-assistant .tp-ai-bubble {
    background: var(--surface-2);
    color: var(--text);
    border: none;
    box-shadow: none;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    max-width: 85%;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    line-height: 1.4;
}
.tp-ai-sidebar .tp-ai-msg-user .tp-ai-bubble {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 12px;
    border-bottom-right-radius: 4px;
    max-width: 85%;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    line-height: 1.4;
}
.tp-ai-sidebar .tp-ai-msg { margin-bottom: 0; }
.tp-ai-sidebar .tp-ai-messages {
    padding: 0.85rem;
    gap: 0.6rem;
    /* Hide the scrollbar track; scrolling itself is unchanged. */
    scrollbar-width: none;
}
.tp-ai-sidebar .tp-ai-messages::-webkit-scrollbar { display: none; }

/* Input row: rounded field + filled circular send, consistent sizing. */
.tp-ai-sidebar .tp-ai-input-row {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.6rem 0.7rem;
    gap: 0.45rem;
}
.tp-ai-sidebar .tp-ai-input {
    border-radius: 19px;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
    /* One line at rest (rows="1"), hugging the placeholder text; grows
       with typed content up to ~6 lines (JS cap matches), then scrolls. */
    max-height: min(30vh, 150px);
    box-sizing: border-box;
    /* Textarea now: grows with content (JS sets height), no manual handle */
    resize: none;
    overflow-y: auto;
    /* Scrollbar hidden: scrolling still works once the cap is hit. */
    scrollbar-width: none;
    font-family: inherit;
    line-height: 1.35;
}
.tp-ai-sidebar .tp-ai-input::-webkit-scrollbar { display: none; }
.tp-ai-sidebar .tp-ai-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tp-ai-sidebar .tp-ai-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    line-height: 0;
    transition: filter 0.12s ease;
}
.tp-ai-sidebar .tp-ai-send:hover { filter: brightness(1.08); }

/* Minimal map toolbar: one day dropdown + expand. */
.tp-map-day-select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    max-width: 130px;
}
.tp-map-day-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The thread menu inherits Ask Fins styling; just make sure it clears the
   rounded assistant card. */
.tp-ai-sidebar-header .chat-thread-menu { z-index: 60; }

/* ─── 2026-06-09 polish pass ─────────────────────────────────── */

/* Map: toolbar lives bottom-left so it never overlaps the +/- zoom
   controls (Leaflet default top-left). */
.tp-map-toolbar {
    top: auto;
    bottom: 0.6rem;
    left: 0.55rem;
    right: 0.55rem;
}
.tp-map-day-select {
    pointer-events: auto;
    background: rgba(255,255,255,0.94);
    color: #111;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
[data-theme="dark"] .tp-map-day-select,
[data-theme="dark"] .tp-map-tool-btn,
[data-theme="dark"] .tp-map-day-btn {
    background: rgba(30,32,36,0.92);
    color: #eee;
    border-color: rgba(255,255,255,0.18);
}

/* Previous chat questions: keep readable, just slightly quieter */
.tp-ai-chip-row.tp-ai-chip-row-stale { opacity: 0.85; }
.tp-ai-chip-row.tp-ai-chip-row-stale .tp-ai-chip { color: var(--text); }

/* Toolbar buttons: consistent icon centering (Gmail/attach/Explore/...) */
.tp-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
}
.tp-tool-btn svg { flex: 0 0 auto; display: block; }
.tp-tool-icon-btn { padding: 0.45rem 0.55rem; }

/* Ellipsis menu next to Print: secondary tools (Gmail / attach / Explore) */
.tp-toolbar-more-wrap { position: relative; display: inline-flex; }
.tp-toolbar-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}
.tp-toolbar-more-menu[hidden] { display: none; }
.tp-toolbar-more-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: none;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.tp-toolbar-more-item:hover { background: var(--surface-2); color: var(--accent); }
.tp-toolbar-more-item svg { flex: 0 0 auto; }

/* Chat input: attach + send perfectly aligned */
.tp-ai-sidebar .tp-ai-input-row { align-items: center; }
.tp-ai-sidebar .tp-ai-attach-btn {
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 0;
}

/* My trips: no divider line below the section */
.tp-saved-trips { border-bottom: none; }

/* Import trip button — icon-only pill at the right edge of My trips header */
.tp-import-trip-btn {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2, var(--surface));
    color: var(--text);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
}
.tp-import-trip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Add a place: spans the full row, suggestions drop below like a search bar */
.wl-add-place { position: relative; padding-right: 0.75rem; }
.wl-add-place-input { border-radius: 999px; }
.wl-place-suggest {
    position: absolute;
    left: 56px;
    right: 0.75rem;
    top: calc(100% - 2px);
    z-index: 80;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    overflow: hidden;
}
.wl-place-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}
.wl-place-suggest-item:last-child { border-bottom: none; }
.wl-place-suggest-item:hover { background: var(--surface-2); }
.wl-place-suggest-name { font-weight: 600; white-space: nowrap; }
.wl-place-suggest-sub {
    color: var(--muted);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recommended places: bigger cards with real photos */
.wl-rec-card { min-width: 120px; max-width: 120px; padding: 0; overflow: hidden; position: relative; }
.wl-rec-photo { width: 100%; height: 64px; border-radius: 0; }
.wl-rec-photo-img { background-size: cover; background-position: center; }
.wl-rec-name { padding: 0.35rem 0.45rem 0.5rem; font-size: 0.7rem; line-height: 1.25; }
.wl-rec-add {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wl-rec-add svg { display: block; }
.wl-rec-add:hover { background: var(--accent); }

/* Cover picker upload tile */
.tp-photo-tile-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--surface-2);
}
.tp-photo-tile-upload:hover { border-color: var(--accent); color: var(--accent); }

/* Auto-fill busy state */
.wl-day-busy { opacity: 0.55; pointer-events: none; }

/* Airport search row in the chat */
.tp-origin-search { width: 100%; max-width: 340px; }
.tp-origin-search-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
}
.tp-origin-search-input:focus { border-color: var(--accent); }
.tp-origin-search-list {
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    max-height: 220px;
    overflow-y: auto;
}
.tp-origin-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.83rem;
    cursor: pointer;
}
.tp-origin-opt:last-child { border-bottom: none; }
.tp-origin-opt:hover { background: var(--surface-2); }
.tp-origin-none { padding: 0.5rem 0.75rem; color: var(--muted); font-size: 0.78rem; }

/* Folder-style open/close: animate the columns between modes and slide
   the right panel in when a trip opens. */
.tp-main.tp-inline { transition: grid-template-columns 0.35s ease; }
.tp-mode-trip .tp-content { animation: tpContentIn 0.38s ease both; }
@keyframes tpContentIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: none; }
}

/* Titled Planner header (JS-injected as #tp-main's FIRST child, not a
   sidebar child). Default placement spans every column — that is the
   full-chat view's top bar. In the normal split view it is overridden
   below to cap the left (chat) column only. Hidden on the home view. */
#tp-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    padding: 0.55rem 1rem;
    background: var(--surface-2);
    /* Same hairline as the vertical divider between chat + itinerary. */
    border-bottom: 1px solid var(--border);
}
/* Banner row on top, sidebar + content pair below. Scoped to states
   where the banner is visible (trip mode, full chat) so the home view
   keeps its single implicit row with no dead space. */
.tp-main.tp-mode-trip,
.tp-main.tp-chat-full { grid-template-rows: auto minmax(0, 1fr); }
.tp-side-header-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}
.tp-side-header-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.tp-mode-home #tp-side-header { display: none; }

/* Split view (chat + itinerary both visible): the Planner header — and
   its << >> controls — caps the LEFT (chat) column only, not across both
   sections. The itinerary column runs full height to its right (row 1
   through row 2), so its cover banner sits flush at the top-right. The
   vertical divider continues up through the header via its right border.
   Chat-full keeps the header spanning the whole top (the default rule).
   Desktop only; the ≤900px layout stacks to one column. */
@media (min-width: 901px) {
    .tp-mode-trip:not(.tp-chat-full):not(.tp-itin-focus) #tp-side-header {
        grid-column: 1;
        border-right: 1px solid var(--border);
    }
    .tp-mode-trip:not(.tp-chat-full) .tp-sidebar {
        grid-column: 1;
        grid-row: 2;
    }
    .tp-mode-trip:not(.tp-chat-full) .tp-content {
        grid-column: 2;
        grid-row: 1 / -1;
    }
    /* Icon-rail collapse: the 64px column is too narrow for the titled
       header — hide it. The rail strip's >> already restores the panel. */
    .tp-itin-focus #tp-side-header { display: none; }
}

/* Rail mode: the assistant collapses to a slim 64px icon column.
   Only the JS-injected #tp-rail-strip stays visible; everything else
   in the sidebar is hidden so the itinerary and map take the width. */
.tp-main.tp-inline.tp-itin-focus { grid-template-columns: 64px 1fr; }
.tp-itin-focus .tp-sidebar {
    overflow: hidden;
    min-width: 0;
    padding: 0;
}
.tp-itin-focus .tp-sidebar > :not(#tp-rail-strip) { display: none !important; }
.tp-sidebar { transition: opacity 0.25s ease, padding 0.3s ease; min-width: 0; }

/* The rail strip is injected by JS as the first child of .tp-sidebar.
   Hidden in the normal layout; it only shows in rail and chat-full. */
#tp-rail-strip { display: none; }
.tp-itin-focus #tp-rail-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0;
}

/* Chat-full mode: the assistant takes the whole panel and the
   itinerary + map fold away. The strip renders as a small top row so
   the expand icon can restore the normal split. */
.tp-main.tp-inline.tp-chat-full { grid-template-columns: 1fr 0fr; }
.tp-chat-full .tp-content {
    overflow: hidden;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}
.tp-chat-full .tp-sidebar { border-right: none; }
.tp-chat-full #tp-rail-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.tp-content { transition: opacity 0.25s ease; }

.tp-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tp-rail-btn:hover { border-color: var(--accent); color: var(--accent); }

/* "New chat" pinned entry at the top of the past-chats dropdown */
#tp-chat-thread-menu .chat-thread-new {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    font-weight: 600;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.55rem;
}
#tp-chat-thread-menu .chat-thread-new svg { flex: 0 0 auto; }

/* Auto-fill busy indicator: pulsing dot inside the day button */
.wl-day-busy-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #6c8cff);
    margin-right: 4px;
    vertical-align: middle;
    animation: wlBusyPulse 0.9s ease-in-out infinite;
}
@keyframes wlBusyPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.1); }
}

/* ─── 2026-06-10 continuation: bubbles, suggestion pins, rail v2 ── */

/* Transparent suggestion pins on the map (recommended places) */
.tp-map-pin-suggest {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 107, 74, 0.35);
    border: 2px dashed rgba(29, 107, 74, 0.8);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.tp-map-pin-suggest:hover,
.tp-map-pin-suggest.is-active {
    background: var(--accent, #1D6B4A);
    border-style: solid;
    transform: scale(1.15);
}

/* Add-place inline search button + suggestion kind chip */
/* Lives INSIDE the dashed add-place pill (right edge), not as a
   separate floating button next to it. */
.wl-place-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wl-place-search-btn:hover {
    background: var(--accent, #1D6B4A);
    color: #fff;
}
.wl-place-search-btn svg { display: block; }

.wl-place-suggest-kind {
    color: var(--accent, #1D6B4A);
    font-weight: 600;
}

/* Modal field grid: stop inputs from spilling past the right edge.
   datetime-local and number inputs have large intrinsic widths; min-width: 0
   plus box-sizing lets them shrink to their grid column. */
.tp-edit-stop-grid { min-width: 0; }
.tp-edit-stop-field { min-width: 0; }
.tp-edit-stop-field .tp-input,
.tp-edit-stop-field input,
.tp-edit-stop-field textarea,
.tp-edit-stop-field select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tp-place-search-row .tp-input { min-width: 0; }
.tp-share-link-row .tp-share-input { min-width: 0; }

/* Reservation photo row (web image search) */
.tp-res-photo-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tp-res-photo-thumb {
    width: 52px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    background-size: cover;
    background-position: center;
}
#reservation-photo-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Attachment preview modal */
.tp-attachment-item { cursor: pointer; }
.tp-attachment-item:hover { border-color: var(--accent); }
.tp-attachment-preview-body { min-height: 120px; }
.tp-attachment-preview-img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
.tp-attachment-preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ─── 2026-06-10 batch 5: chat-full cleanup + contrast fixes ────── */

/* Full-chat view: no rail buttons (those belong to the collapsed rail
   only) and the same centered, home-style sizing as the planner's
   landing state — chat card with side gutters, My trips below it at
   its natural width instead of stretched edge to edge. */
.tp-chat-full #tp-rail-strip { display: none; }
.tp-chat-full .tp-sidebar {
    border-right: none;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 1.25rem 1.5rem;
    box-sizing: border-box;
    /* Two columns like Ask Finstracker: session list left, chat right. */
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 1.25rem;
    align-content: start;
}
/* Home mode hides the Planner banner, but in full-chat view it must
   stay visible: it holds the >> exit button. (The banner lives on
   #tp-main now, above this sidebar grid entirely.) */
.tp-mode-home.tp-chat-full #tp-side-header,
.tp-chat-full.tp-mode-home #tp-side-header { display: flex; }
.tp-chat-full .tp-sidebar > *:not(#tp-thread-pane):not(#tp-side-header) { grid-column: 2; }

/* Persistent session list — hidden everywhere except full-chat view. */
#tp-thread-pane { display: none; }
.tp-chat-full #tp-thread-pane {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    grid-column: 1;
    grid-row: 1 / span 30; /* spans the chat + My trips rows */
    align-self: start;
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    /* Integrated with the chat card: same surface, radius, and shadow
       as .tp-ai-sidebar so the two read as one connected unit. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem 0.6rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
    min-height: 540px; /* match the chat card height in full view */
    box-sizing: border-box;
}
.tp-thread-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.1rem 0.25rem 0.45rem 0.5rem;
}
.tp-thread-pane-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.tp-thread-pane-new {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tp-thread-pane-new:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.tp-thread-pane-new svg { display: block; }
#tp-thread-pane .chat-thread-item { width: 100%; text-align: left; }
#tp-thread-pane .chat-thread-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.35rem;
}

/* Narrow screens: drop the session column, keep the centered chat. */
@media (max-width: 900px) {
    .tp-chat-full .tp-sidebar { grid-template-columns: 1fr; max-width: 860px; }
    .tp-chat-full #tp-thread-pane { display: none; }
    .tp-chat-full .tp-sidebar > *:not(#tp-thread-pane):not(#tp-side-header) { grid-column: 1; }
}
.tp-chat-full .tp-ai-sidebar {
    flex: 1 1 auto;
    min-height: 540px;
    max-height: none;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
}
.tp-chat-full #saved-trips-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
}

/* Trip rows/cards must stay readable when hovered or selected — the
   green hover background made light text invisible. */
.tp-saved-trip-item:hover .tp-saved-trip-dest,
.tp-saved-trip-item.is-active .tp-saved-trip-dest { color: var(--accent); }
.tp-saved-trip-item:hover .tp-saved-trip-meta,
.tp-saved-trip-item.is-active .tp-saved-trip-meta { color: var(--text); }
.tp-saved-trip-card:hover .tp-saved-trip-dest,
.tp-saved-trip-card:focus-visible .tp-saved-trip-dest { color: var(--accent); }
.tp-saved-trip-card:hover .tp-saved-trip-meta,
.tp-saved-trip-card:focus-visible .tp-saved-trip-meta { color: var(--text); }
#tp-chat-thread-menu .chat-thread-item:hover,
#tp-chat-thread-menu .chat-thread-item.is-active { color: var(--text); }

/* Bubble text was hugging the bubble edge — match the Ask Finstracker
   feel with a touch more breathing room. */
.tp-ai-bubble,
.tp-ai-sidebar .tp-ai-msg-assistant .tp-ai-bubble,
.tp-ai-sidebar .tp-ai-msg-user .tp-ai-bubble {
    padding: 0.65rem 0.95rem;
}

/* ─── Travel legs between stops (Wanderlog-style) ───────────────── */
.wl-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0 2.6rem; /* aligns under the stop card, past the spine */
    padding: 0.2rem 0.6rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.wl-leg:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--surface-2);
}
.wl-leg-icon { display: inline-flex; align-items: center; }
.wl-leg-icon svg { display: block; }
.wl-leg-custom {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    text-indent: -999px;
}

/* Map hover tooltip on route segments — icon + mode + time + distance. */
.tp-leg-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.tp-leg-tooltip svg { display: inline-block; vertical-align: -2px; }

/* ============ Custom-dates range calendar ============ */
.tp-cal-modal { max-width: 340px; }
.tp-cal-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.tp-cal-sub { margin: 0 0 0.8rem; font-size: 0.78rem; color: var(--muted); }
.tp-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tp-cal-month { font-weight: 700; font-size: 0.9rem; }
.tp-cal-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tp-cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.tp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.tp-cal-dow {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0.25rem 0;
}
.tp-cal-pad { aspect-ratio: 1; }
.tp-cal-day {
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.tp-cal-day:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tp-cal-day:disabled { color: var(--muted); opacity: 0.35; cursor: default; }
.tp-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border); }
.tp-cal-day.in-range {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 0;
}
.tp-cal-day.is-start,
.tp-cal-day.is-end {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
}
.tp-cal-range {
    margin: 0.7rem 0 0;
    padding: 0.5rem 0.65rem;
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}
.tp-cal-range strong { color: var(--text); }
.tp-cal-apply { margin-top: 0.8rem; width: 100%; }
.tp-cal-apply:disabled { opacity: 0.5; cursor: default; }

/* ============ Trip-mate add modal (in-app, replaces browser prompt) ============ */
.tp-mate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.tp-mate-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.1rem;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.tp-mate-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.tp-mate-sub { margin: 0 0 0.8rem; font-size: 0.78rem; color: var(--muted); }
.tp-mate-name { width: 100%; }
.tp-mate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.tp-mate-cancel {
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.tp-mate-cancel:hover { border-color: var(--accent); }
.tp-mate-add {
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.tp-mate-add:hover { filter: brightness(1.1); }

/* ============ Day skeleton placeholders (while AI fills empty days) ============ */
.wl-day-skeleton { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0; }
.wl-skel-stop {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, var(--surface));
}
.wl-skel-dot,
.wl-skel-line,
.wl-skel-photo {
    background: linear-gradient(90deg,
        var(--border) 25%,
        color-mix(in srgb, var(--border) 55%, var(--surface)) 50%,
        var(--border) 75%);
    background-size: 200% 100%;
    animation: wl-skel-shimmer 1.4s ease-in-out infinite;
}
.wl-skel-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.wl-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.wl-skel-line { height: 10px; border-radius: 5px; width: 45%; }
.wl-skel-line-wide { width: 75%; height: 12px; }
.wl-skel-photo { width: 56px; height: 44px; border-radius: 10px; flex: none; }
@keyframes wl-skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-skel-dot, .wl-skel-line, .wl-skel-photo { animation: none; }
}

/* ============ Back-to-top FAB (long itineraries) ============ */
#tp-scroll-top-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#tp-scroll-top-fab:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════════════
   2026-06-12 batch: sticky planner header, placeholder itinerary,
   build-progress overlay, edit-stop modal restyle (matches "Add a place")
   ════════════════════════════════════════════════════════════════════ */

/* ─── Split-view sidebar (trip mode, NOT chat-full) ─────────────────
   These rules are scoped with :not(.tp-chat-full): both classes can sit
   on #tp-main at once, and letting the 52%/26%/20% flex caps leak into
   the chat-full grid is exactly what shrank the chat card there.
   Split view model: the chat is a fixed-proportion card (~56% of the
   column, never under 340px) and everything below it (My trips with its
   Show more toggle, Explore) flows naturally; the SIDEBAR scrolls as
   one column with the Planner header pinned sticky on top. */
.tp-mode-trip:not(.tp-chat-full) .tp-sidebar { overflow-y: auto; }
/* (No sticky header rule needed anymore: the Planner banner is grid
   row 1 of #tp-main and never scrolls — the sidebar scrolls below it.) */
.tp-mode-trip:not(.tp-chat-full) .tp-ai-sidebar {
    flex: 0 0 auto;
    height: 56%;
    min-height: 340px;
    max-height: none;
    margin-bottom: 0.75rem;
}
.tp-mode-trip:not(.tp-chat-full) .tp-saved-trips {
    flex: 0 0 auto;
    border-bottom: none;
    padding: 0.25rem 0.25rem 0.5rem;
}
.tp-mode-trip:not(.tp-chat-full) .tp-explore-strip { flex: 0 0 auto; }

/* Chat-full view: the chat card stretches inside the grid row instead
   of being squeezed by the (now scoped-out) trip-mode caps. The inline
   planner panel is 72vh, so cap against the panel, not the viewport. */
.tp-chat-full .tp-ai-sidebar {
    height: auto;
    min-height: 520px;
    max-height: none;
}

/* ─── My trips / Explore: Show more instead of inner scrollbars ───
   Collapsed state shows the first 3 entries; the pill toggle reveals
   the rest in place. Works in the trip-mode column list, the home and
   chat-full card grids (cards are direct children of the list), and
   the explore rows column. */
.tp-saved-trips.tp-collapsed #saved-trips-list > .tp-saved-trip-card:nth-child(n+4) { display: none; }
.tp-explore-strip.tp-collapsed .tp-explore-rows > .tp-explore-row:nth-child(n+4) { display: none; }
.tp-show-more-btn {
    display: block;
    margin: 0.6rem auto 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tp-show-more-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
}

/* ─── Placeholder itinerary (no trip loaded yet) ─────────────── */
.tp-itin-placeholder {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.75rem 1.75rem 2.25rem;
}
.tp-itin-placeholder-hint {
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0 0 1.5rem;
}
/* Idle skeletons: same rows as the loading shimmer, but still (no
   animation) and dimmed, so they read as "this is where days will go". */
.wl-skeleton-idle { opacity: 0.55; pointer-events: none; }
.wl-skeleton-idle .wl-skel-dot,
.wl-skeleton-idle .wl-skel-line,
.wl-skeleton-idle .wl-skel-photo { animation: none; }
.tp-ph-day { margin-bottom: 1.6rem; }
.tp-ph-day-title {
    height: 14px;
    width: 130px;
    border-radius: 7px;
    background: var(--border);
    margin-bottom: 0.85rem;
}

/* ─── Build-progress overlay over itinerary + map ────────────── */
.tp-content { position: relative; }
.tp-build-overlay {
    position: absolute;
    inset: 0;
    /* Above the Leaflet panes/controls (they go up to ~1000) so the map
       really sits under the blur. */
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 127, 127, 0.12);
    background: color-mix(in srgb, var(--bg) 45%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.tp-build-overlay[hidden] { display: none; }
.tp-build-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.35rem 1.9rem;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    text-align: center;
    max-width: 320px;
}
.tp-build-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    animation: tpBuildSpin 0.8s linear infinite;
}
@keyframes tpBuildSpin { to { transform: rotate(360deg); } }
.tp-build-overlay-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.tp-build-overlay-sub {
    font-size: 0.78rem;
    color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
    .tp-build-spinner { animation: none; }
}

/* ─── Edit-stop modal: same look as the "Add a place" form ───────
   Soft surface fields with a dashed border that solidifies to the
   accent on focus, pill radii, and segmented type pills instead of a
   bare <select>. */
.tp-edit-stop-modern .tp-input {
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 999px;
    min-height: 38px;
    padding: 0.45rem 0.9rem;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.tp-edit-stop-modern textarea.tp-input {
    border-radius: 14px;
    min-height: 0;
    resize: vertical;
}
.tp-edit-stop-modern .tp-input:focus {
    border-style: solid;
    border-color: var(--accent);
    background: var(--surface);
}
.tp-edit-stop-modern .tp-input::placeholder { color: var(--muted); }

.tp-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tp-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tp-type-pill:hover {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
}
.tp-type-pill-active {
    border-style: solid;
    border-color: var(--accent);
    background: var(--surface);
    color: var(--accent);
}

/* Visited toggle reads as one tappable row instead of a floating box */
.tp-edit-stop-visited-row {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}
.tp-edit-stop-visited-row:hover { border-style: solid; border-color: var(--accent); }
.tp-edit-stop-visited-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
}
.tp-edit-stop-visited-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
/* Attach button inherits the same pill language */
.tp-edit-stop-modern .tp-edit-stop-attach-btn { border-radius: 999px; }

/* Mobile exception: the sticky-header rules above (sidebar overflow hidden,
   capped My Trips) come after the responsive media queries earlier in this
   file and would out-rank them. On stacked mobile layouts the sidebar must
   stay fully visible and scroll with the page. */
@media (max-width: 900px) {
    .tp-mode-trip:not(.tp-chat-full) .tp-sidebar { overflow: visible; }
    .tp-mode-trip:not(.tp-chat-full) .tp-ai-sidebar { flex: 0 0 auto; height: auto; min-height: 0; max-height: 60vh; }
    .tp-mode-trip:not(.tp-chat-full) .tp-saved-trips { max-height: none; overflow-y: visible; }
}

/* ─── Map leg labels, leg mode menu, popup remove ───────────── */
/* Midpoint duration pill on each map leg, e.g. "18 min drive". The
   divIcon anchors top-left at the latlng, so the inner pill recenters
   itself with a transform. */
.tp-leg-label {
    transform: translate(-50%, -50%);
    display: inline-block;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: #333;
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* "Remove stop" button inside a pin popup */
.tp-map-popup-remove {
    font-size: 11px;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    transition: background 0.12s;
}
.tp-map-popup-remove:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* Transport-mode popover for a clicked map leg (wl-day-menu variant) */
.tp-leg-menu { min-width: 150px; }
.tp-leg-menu-title { padding: 0.3rem 0.6rem 0.1rem; }
.tp-leg-menu .wl-day-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tp-leg-menu .wl-day-menu-item.is-active {
    background: var(--surface-2);
    font-weight: 700;
}
.tp-leg-menu .wl-day-menu-item.is-active::after {
    content: "\2713";
    margin-left: auto;
    color: var(--accent, #1D6B4A);
}
.tp-leg-menu-ic {
    display: inline-flex;
    width: 14px;
    justify-content: center;
    color: var(--muted);
}
.tp-leg-menu-ic svg { width: 13px; height: 13px; }

/* ─── Wanderlog-modern polish (2026-06-12) ─────────────────────────────
   Targeted refinements on top of the existing trip planner: bigger photos,
   cleaner card surfaces, softer shadows, calmer typography. Scoped so the
   layout system and JS don't have to change. */

/* Day card: softer surface, gentler shadow, slightly bigger header */
.tp-itinerary .wl-day {
    border-color: var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 32px -20px rgba(15, 32, 24, 0.18), 0 1px 3px rgba(15, 32, 24, 0.04);
    margin-bottom: 1.25rem;
}
.tp-itinerary .wl-day-header {
    padding: 0.95rem 1.15rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.tp-itinerary .wl-day-name {
    font-size: 1rem;
    letter-spacing: -0.005em;
}
.tp-itinerary .wl-day-label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

/* Day body: more breathing room */
.tp-itinerary .wl-day-body {
    padding: 1rem 1.15rem 0.6rem;
}

/* Stop: bigger, photo-forward, modern */
.tp-itinerary .wl-stop-card {
    padding: 0 0 1.1rem 0.85rem;
    gap: 0.95rem;
}
.tp-itinerary .wl-stop-name {
    font-size: 1rem;
    line-height: 1.32;
    letter-spacing: -0.005em;
}
.tp-itinerary .wl-stop-kind {
    font-size: 0.76rem;
}
.tp-itinerary .wl-stop-note { font-size: 0.85rem; }
.tp-itinerary .wl-stop-photo {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 14px;
    border-color: var(--border);
    box-shadow: 0 4px 12px -6px rgba(15, 32, 24, 0.18);
    overflow: hidden;
}
.tp-itinerary .wl-stop-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-itinerary .wl-stop-num {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
    box-shadow: 0 2px 6px rgba(15, 32, 24, 0.18);
}

/* Trip banner: larger, more cinematic */
.tp-results .tp-trip-banner {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 56px -28px rgba(15, 32, 24, 0.35);
}
.tp-results .tp-trip-title {
    letter-spacing: -0.02em;
}

/* Value strip: softer card surfaces, bigger numbers */
.tp-value-strip {
    gap: 0.65rem;
    margin-top: 1.1rem;
}
.tp-value-card {
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px -10px rgba(15, 32, 24, 0.18);
    padding: 0.85rem 0.95rem;
    background: var(--surface, #fff);
}
.tp-value-card .tp-value-num {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}
.tp-value-card .tp-value-label {
    font-size: 0.62rem;
    letter-spacing: 0.09em;
}

/* Tabs: pill bar with subtle indicator */
.tp-results .tp-tabs {
    background: var(--surface-2);
    border-radius: 999px;
    padding: 0.3rem;
    border: 1px solid var(--border);
    gap: 0.15rem;
    margin-top: 1.25rem;
}
.tp-results .tp-tab {
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    color: var(--muted, #5a6357);
    transition: background 160ms ease, color 160ms ease;
}
.tp-results .tp-tab:hover {
    background: rgba(29, 107, 74, 0.06);
    color: var(--text, #1f2a23);
}
.tp-results .tp-tab.active {
    background: #1D6B4A;
    color: #fdfaf2;
    border-color: transparent;
}
.tp-results .tp-tab.active svg { color: #fdfaf2; opacity: 1; }

/* Toolbar: clean pill buttons */
.tp-results .tp-toolbar { margin-top: 1rem; }
.tp-results .tp-tool-btn {
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
}
.tp-results .tp-tool-btn-primary {
    background: #1D6B4A;
    color: #fdfaf2;
    border: 1px solid #1D6B4A;
}
.tp-results .tp-tool-btn-primary:hover { background: #155a3c; }

/* Reservation strip: warmer surface */
.tp-reservations {
    background: var(--surface-2);
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 1rem 1.15rem;
}
.tp-reservations .tp-res-tile {
    border-radius: 14px;
    padding: 0.65rem 0.55rem;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.tp-reservations .tp-res-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(15, 32, 24, 0.18);
}

/* Saved trip card: cleaner modern feel */
.tp-saved-trips .tp-saved-trip-card {
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px -14px rgba(15, 32, 24, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.tp-saved-trips .tp-saved-trip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(15, 32, 24, 0.24);
}

/* AI sidebar bubble: friendlier */
.tp-ai-sidebar .tp-ai-bubble {
    border-radius: 18px;
    padding: 0.75rem 0.95rem;
    line-height: 1.5;
}
.tp-ai-sidebar .tp-ai-msg-user .tp-ai-bubble {
    background: #1D6B4A;
    color: #fdfaf2;
}

/* Map empty overlay: calmer */
.tp-map-empty-overlay {
    background: linear-gradient(180deg, rgba(253, 250, 242, 0.9), rgba(229, 232, 225, 0.85));
    backdrop-filter: blur(6px);
}

/* Empty state: cleaner copy block */
.tp-empty .tp-empty-inner h2 { letter-spacing: -0.015em; }
.tp-chip {
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-weight: 600;
    transition: transform 160ms ease, background 160ms ease;
}
.tp-chip:hover {
    transform: translateY(-1px);
    background: rgba(29, 107, 74, 0.08);
}