/* ============================================
   Panama Relocation Assistant — Chat Styles
   ============================================ */
/* Watcher upload smoke test — 2026-05-04 (safe to delete this line) */

/* ── Suppress WooCommerce footer credit on all plugin pages ── */
.site-info a[href*="woocommerce"],
.site-info a[href*="WooCommerce"] { display: none !important; }


/* ── Corner Widget ── */
#panama-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#panama-chat-teaser {
    position: relative;
    background: #ffffff;
    border: 1px solid #c8e0b0;
    border-radius: 10px;
    padding: 9px 13px;
    margin-bottom: 10px;
    width: 260px;
    height: 44px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
#panama-chat-teaser::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 22px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #c8e0b0;
}
#panama-chat-teaser::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 23px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffff;
}
.pct-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 13px;
    right: 13px;
    font-size: 13px;
    color: #2D5A1B;
    line-height: 1.45;
    opacity: 0;
    transition: opacity 0.6s ease;
    white-space: nowrap;
}
.pct-line.pct-active {
    opacity: 1;
}
#panama-chat-button {
    background: #0F6E56;
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
}
#panama-chat-box {
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
#panama-chat-header {
    background: #0F6E56;
    color: white;
    padding: 15px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#panama-chat-header button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
}
#panama-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panama-message {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 85%;
    line-height: 1.5;
    flex-shrink: 0;
}
.panama-message.user {
    background: #0F6E56;
    color: white;
    align-self: flex-end;
}
.panama-message.assistant {
    background: #f0f0f0;
    color: #333;
    align-self: flex-start;
    max-width: 95%;
}
.panama-message h1,
.panama-message h2,
.panama-message h3 { margin: 6px 0 3px; }
.panama-message ul,
.panama-message ol { margin: 4px 0; padding-left: 18px; }
.panama-message li { margin: 2px 0; }
.panama-message p { margin: 3px 0; }
#panama-chat-input-area {
    padding: 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}
#panama-chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
}
#panama-chat-send {
    background: #0F6E56;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
}

/* ── Images in chat ── */
.panama-image-gallery {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.panama-response-image {
    max-width: 280px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: block;
    object-fit: cover;
}
.panama-response-image:hover { opacity: 0.9; }

/* ── Desktop Full Page Chat ── */
#panama-mobile-trigger { display: none; }
#panama-mobile-overlay { display: none; }

/* ── Workspace Layout ── */
#panama-workspace {
    display: flex;
    width: 100%;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

/* Tool Canvas — left panel, hidden until a tool is open */
#panama-tool-canvas {
    display: none;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    flex: 65;
}
#panama-workspace.tool-open #panama-tool-canvas {
    display: flex;
    min-width: 500px;
    flex: 1;
}

/* Chat Panel — full width by default, fixed sidebar when tool is open */
#panama-chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
#panama-workspace.tool-open #panama-chat-panel {
    flex: 0 0 420px;
    min-width: 300px;
    max-width: 420px;
    border-left: 1px solid #e0e0e0;
}

/* Tool Icon Bar */
#panama-tool-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 2px solid #ddd;
    background: #eef4f8;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    z-index: 20;
}
.panama-toolbar-utilities {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 25;
}
.panama-theme-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.panama-tool-btn {
    background: white;
    border: 1px solid #b8d0e8;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 18px;
    color: #2271b1;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.panama-tool-btn:hover {
    background: #d6eaf8;
    border-color: #2271b1;
    box-shadow: 0 2px 6px rgba(34,113,177,0.2);
}
.panama-tool-btn.active {
    background: #2271b1;
    border-color: #1a5a8f;
    color: white;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Tool Canvas Header */
#panama-tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    flex-shrink: 0;
}
#panama-tool-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}
#panama-tool-close {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: background 0.15s;
}
#panama-tool-close:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* Tool Content Area */
#panama-tool-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}
#panama-tool-content iframe,
#panama-map-div {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Fullpage chat — inside workspace, no separate border/radius */
#panama-fullpage-chat {
    display: flex;
    flex-direction: column;
    height: 600px; /* overridden by JS */
    min-height: 400px;
    max-height: none;
    border: none;
    border-radius: 0;
    overflow: hidden;
    font-family: sans-serif;
    margin: 0;
}
#panama-fullpage-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f9f9f9;
}
.panama-fp-message {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 80%;
    line-height: 1.6;
    font-size: 15px;
    flex-shrink: 0;
}
.panama-fp-message.user {
    background: #0F6E56;
    color: white;
    align-self: flex-end;
}
.panama-fp-message.assistant {
    background: white;
    color: #333;
    align-self: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.panama-fp-message h1,
.panama-fp-message h2,
.panama-fp-message h3 { margin: 8px 0 4px 0; }
.panama-fp-message ul,
.panama-fp-message ol { margin: 4px 0; padding-left: 20px; }
.panama-fp-message li { margin: 2px 0; }
.panama-fp-message p { margin: 4px 0; }
#panama-fullpage-input-area {
    padding: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    background: white;
    flex-shrink: 0;
}
#panama-fullpage-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
    font-size: 15px;
}
#panama-fullpage-send {
    background: #0F6E56;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
}


/* ── Mobile Full Screen Overlay ── */
#panama-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
}
#panama-mobile-overlay.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    pointer-events: auto;
    height: 100dvh;
    height: 100svh;
}
/* Lock background scroll without position:fixed on body (breaks iOS panel height). */
html.panama-mobile-overlay-open,
body.panama-mobile-overlay-open {
    overflow: hidden;
    overscroll-behavior: none;
}
/* Full-screen opaque layer — stays edge-to-edge when the panel shrinks for the
   iOS keyboard so homepage text does not bleed through beside the keyboard. */
#panama-mobile-scrim {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 0;
    /* Decorative only — must not capture touches above the chat panel. */
    pointer-events: none;
}
#panama-mobile-panel {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    font-family: sans-serif;
    overflow: hidden;
}
#panama-mobile-header {
    background: #0F6E56;
    color: white;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    gap: 8px;
}
#panama-mobile-header > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panama-pwa-install-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #fff8e8;
    border-bottom: 1px solid #f0d8a8;
    font-size: 13px;
    line-height: 1.45;
    color: #3d3428;
}
.panama-pwa-install-hint[hidden] { display: none !important; }
.panama-pwa-install-text {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.panama-pwa-share-icon {
    vertical-align: -2px;
    display: inline-block;
    color: #007aff;
}
.panama-pwa-install-dismiss {
    flex-shrink: 0;
    border: none;
    background: #0F6E56;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.panama-pwa-install-dismiss:active { opacity: 0.85; }
#panama-mobile-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}
.panama-mobile-back-site {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    line-height: 1.2;
}
.panama-mobile-back-site:active { opacity: 0.85; }
.pmobile-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.panama-mobile-signup {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.panama-mobile-signup:hover,
.panama-mobile-signup:active {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
#panama-mobile-nearme {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#panama-mobile-nearme .panama-nearme-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
#panama-mobile-nearme:hover { background: rgba(255, 255, 255, 0.28); }
#panama-mobile-nearme:disabled {
    opacity: 0.7;
    cursor: wait;
}
#panama-mobile-messages {
    /* top/bottom set in JS — iOS needs a definite box to scroll.
       Fallback 0/0 so the box is never zero-height before JS runs. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 16px;
    display: block;
    background: #f9f9f9;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    z-index: 1;
}
#panama-mobile-chat-pane > .panama-msg-counter,
#panama-mobile-chat-pane > #panama-mobile-img-preview,
#panama-mobile-chat-pane > #panama-mobile-voice-status,
#panama-mobile-chat-pane > #panama-mobile-voice-actions,
#panama-mobile-chat-pane > #panama-mobile-input-area {
    flex-shrink: 0;
}
#panama-mobile-nearme.panama-nearme-busy {
    opacity: 0.65;
    cursor: wait;
}
.panama-mobile-message {
    display: block;
    width: fit-content;
    max-width: 88%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 10px;
    clear: both;
}
.panama-mobile-message.user {
    background: #0F6E56;
    color: white;
    margin-left: auto;
    margin-right: 0;
}
.panama-mobile-message.assistant {
    background: white;
    color: #333;
    margin-left: 0;
    margin-right: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.panama-mobile-message h1,
.panama-mobile-message h2,
.panama-mobile-message h3 { margin: 8px 0 4px 0; }
.panama-mobile-message ul,
.panama-mobile-message ol { margin: 4px 0; padding-left: 20px; }
.panama-mobile-message li { margin: 2px 0; }
.panama-mobile-message p { margin: 4px 0; }

/* Links inside the green user bubbles. Without this they fall back to the
   user-agent default link/visited color, which renders muddy against the
   #0F6E56 background. Inherit the bubble's text color and keep a clear
   underline so the link affordance is preserved. */
.panama-message.user a,
.panama-message.user a:visited,
.panama-fp-message.user a,
.panama-fp-message.user a:visited,
.panama-mobile-message.user a,
.panama-mobile-message.user a:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.7);
    text-underline-offset: 2px;
}
.panama-message.user a:hover,
.panama-fp-message.user a:hover,
.panama-mobile-message.user a:hover {
    text-decoration-color: #ffffff;
}

#panama-mobile-input-area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid #ddd;
    display: flex;
    gap: 8px;
    background: white;
}
.panama-mobile-voice-status {
    padding: 7px 16px;
    font-size: 12px;
    line-height: 1.35;
    color: #3d5c52;
    background: #eef7f3;
    border-top: 1px solid #d8ebe3;
    flex-shrink: 0;
}
.panama-mobile-voice-status[hidden] { display: none; }
.panama-mobile-voice-status.is-listening {
    color: #8b2e24;
    background: #fdeeed;
    border-top-color: #f5d0cc;
}
/* Transcribing / sending — floating pill above the input (stacked via JS bottom offset) */
.panama-mobile-voice-status.is-processing,
.panama-mobile-voice-status.is-sending {
    margin: 0 12px 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    border: 1px solid #f0dfc0;
    border-radius: 999px;
    border-top: 1px solid #f0dfc0;
    box-shadow: 0 2px 10px rgba(122, 86, 16, 0.14);
    color: #7a5610;
    background: #fff6e8;
}
.panama-mobile-voice-status.is-sending {
    color: #0d5c47;
    background: #e8f7f1;
    border-color: #b8e6d4;
    box-shadow: 0 2px 10px rgba(15, 110, 86, 0.12);
}
.panama-mobile-voice-actions {
    display: flex;
    gap: 10px;
    padding: 0 16px 10px;
    background: #eef7f3;
    border-top: 1px solid #d8ebe3;
    flex-shrink: 0;
}
.panama-mobile-voice-actions[hidden] { display: none; }
.panama-voice-action {
    flex: 1;
    min-height: 44px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
.panama-voice-action-cancel {
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
}
.panama-voice-action-send {
    background: #0F6E56;
    color: #fff;
}
.panama-voice-action:disabled {
    opacity: 0.55;
    cursor: wait;
}
#panama-mobile-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
    font-size: 16px;
}
#panama-mobile-send {
    background: #0F6E56;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
}

/* Mobile voice-input mic button */
#panama-mobile-mic {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
/* Disabled-but-visible state for guest iOS users — explains why voice isn't
   wired without silently hiding the button. Pairs with the JS title=
   tooltip in wireMobileMic(). */
#panama-mobile-mic.panama-mic-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
#panama-mobile-mic.panama-mic-locked:active { transform: none; }
#panama-mobile-mic:active { transform: scale(0.94); }
#panama-mobile-mic.panama-mic-listening {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
    animation: panama-mic-pulse 1.1s ease-in-out infinite;
}
#panama-mobile-mic.panama-mic-processing {
    background: #e67e22;
    color: transparent;
    border-color: #e67e22;
    opacity: 0.88;
    cursor: wait;
    pointer-events: none;
    position: relative;
}
#panama-mobile-mic.panama-mic-processing:disabled {
    opacity: 0.88;
}
#panama-mobile-mic.panama-mic-processing::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: panama-mic-spin 0.7s linear infinite;
}
#panama-mobile-mic.panama-mic-processing:active { transform: none; }
@keyframes panama-mic-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #panama-mobile-mic.panama-mic-processing::after {
        animation: none;
        border-top-color: #fff;
    }
}
@keyframes panama-mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* ── Mobile chat pane wrapper ── */
#panama-mobile-chat-pane {
    position: relative;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
}
#panama-mobile-map-pane:not(.active),
#panama-mobile-trips-pane:not(.active) {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
#panama-mobile-map-pane.active,
#panama-mobile-trips-pane.active {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}
#panama-mobile-map-pane.active {
    display: flex;
    flex-direction: column;
}
#panama-mobile-trips-pane.active {
    display: block;
}
#panama-mobile-chat-pane > #panama-mobile-img-preview,
#panama-mobile-chat-pane > .panama-mobile-voice-status,
#panama-mobile-chat-pane > .panama-mobile-voice-actions {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}
#panama-mobile-chat-pane > .panama-mobile-voice-status.is-processing,
#panama-mobile-chat-pane > .panama-mobile-voice-status.is-sending {
    z-index: 4;
}

/* Mobile image-upload: compact chip above the input (never full-bleed preview). */
#panama-mobile-img-preview {
    flex-shrink: 0;
    padding: 8px 16px 0;
    background: #fff;
    border-top: 1px solid #eee;
    overflow: hidden;
}
#panama-mobile-cam-btn {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    line-height: 1;
}
#panama-mobile-cam-btn.panama-cam-loaded {
    border-color: #0F6E56;
    background: #e8f5f1;
    color: #0F6E56;
}
.panama-img-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 6px 8px;
    background: #f5f5f5;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}
.panama-img-chip img {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
}
.panama-img-chip span {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panama-img-chip-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #0F6E56;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.panama-inline-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    display: block;
    margin-bottom: 6px;
}

/* ── Mobile tab bar ── */
#panama-mobile-tabs {
    display: none; /* .visible added when chat overlay opens */
    flex-shrink: 0;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}
#panama-mobile-tabs.visible {
    display: flex;
}
.pmobile-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #888;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.pmobile-tab.pmobile-tab-active {
    color: #0F6E56;
    border-bottom-color: #0F6E56;
}

/* ── Mobile Trips pane ── */
#panama-mobile-trips-pane {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f9f9f9;
}
#panama-mobile-trips-pane.active { display: block; }
#panama-mobile-trips-content {
    padding: 16px;
}
.pmobile-trips-header {
    font-size: 18px;
    font-weight: 600;
    color: #1a2a1e;
    margin-bottom: 14px;
}
.pmobile-trips-empty {
    text-align: center;
    padding: 30px 14px;
    color: #444;
}
.pmobile-trips-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.pmobile-trips-empty-sub {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 6px;
}
.pmobile-trip-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, transform 0.1s;
}
.pmobile-trip-card:active { transform: scale(0.99); border-color: #0F6E56; }
.pmobile-trip-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pmobile-trip-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a2a1e;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmobile-trip-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.pmobile-trip-status-upcoming  { background: #e3f2fd; color: #1565c0; }
.pmobile-trip-status-active    { background: #fff8e1; color: #b8860b; }
.pmobile-trip-status-completed { background: #e8f5e9; color: #2e7d32; }
.pmobile-trip-meta {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
}
.pmobile-trip-progress {
    font-size: 12px;
    color: #0F6E56;
    margin-top: 8px;
    font-weight: 500;
}
.pmobile-trip-detail {
    padding: 0;
}
.pmobile-trip-back {
    background: none;
    border: none;
    color: #0F6E56;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0;
    margin-bottom: 10px;
    cursor: pointer;
}
.pmobile-trip-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2a1e;
    margin: 0 0 8px 0;
}
.pmobile-trip-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.pmobile-trip-meta-pill {
    font-size: 12px;
    background: #eef3f0;
    color: #1a2a1e;
    padding: 3px 8px;
    border-radius: 10px;
}
.pmobile-trip-focus {
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    padding: 8px 10px;
    background: #f0f7f4;
    border-left: 3px solid #0F6E56;
    border-radius: 4px;
}
.pmobile-trip-section {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}
.pmobile-trip-section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    font-weight: 600;
    margin-bottom: 10px;
}
.pmobile-trip-empty-section {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}
.pmobile-agenda-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.pmobile-agenda-row:last-child { border-bottom: none; }
.pmobile-agenda-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: #0F6E56;
    cursor: pointer;
}
.pmobile-agenda-body {
    flex: 1;
    min-width: 0;
}
.pmobile-agenda-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}
.pmobile-agenda-text {
    font-size: 14px;
    color: #1a2a1e;
    line-height: 1.4;
}
.pmobile-agenda-notes {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}
.pmobile-agenda-row.done .pmobile-agenda-text {
    text-decoration: line-through;
    color: #888;
}
.pmobile-trip-notes {
    width: 100%;
    min-height: 120px;
    max-height: 280px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
}
.pmobile-trip-notes:focus {
    outline: none;
    border-color: #0F6E56;
}
.pmobile-trip-notes-status {
    font-size: 12px;
    color: #0F6E56;
    margin-top: 6px;
    min-height: 16px;
}

/* Hide Trips tab for guests (data attribute is used so the JS can target it) */
body.panama-not-logged-in .pmobile-tab-trips,
body.panama-not-logged-in .pmobile-tab-listings,
body.panama-not-logged-in .pmobile-tab-planner,
body.panama-not-logged-in .pmobile-tab-budget,
body.panama-not-logged-in .pmobile-tab-saved,
body.panama-not-logged-in .pmobile-tab-messages { display: none; }

/* Tier-aware tool visibility — guests see Map and Routes only.
   Plan/Budget/Trips require an account (Explorer or Relocator).
   Server-side prompt also instructs Río not to emit OFFER_TASK/OFFER_TRIP/ADD_TASK
   markers for guests, so the cards never render either. */
body.panama-not-logged-in .panama-tool-btn[data-tool="budget"],
body.panama-not-logged-in .panama-tool-btn[data-tool="trips"],
body.panama-not-logged-in .panama-tool-btn[data-tool="listings"],
body.panama-not-logged-in .panama-tool-btn[data-tool="messages"],
body.panama-not-logged-in .panama-tool-btn[data-tool="planner"],
body.panama-not-logged-in .panama-tool-btn[data-tool="routes"] { display: none; }

/* ── Mobile map pane (tab layout) ── */
#panama-mobile-map-pane {
    display: none;
    flex: 1;
    min-height: 0;
}
#panama-mobile-map-pane.active {
    display: flex;
}
#panama-mobile-tab-map-div {
    width: 100%;
    height: 100%;
}

/* ── Full-screen mobile map overlay ── */
#panama-mobile-map-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: white;
    z-index: 100000;
    display: none;
    flex-direction: column;
}
#panama-mobile-map-overlay.active {
    display: flex;
}
#panama-mobile-map-header {
    background: #0F6E56;
    color: white;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
#panama-mobile-map-back {
    background: none;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 12px;
    min-width: 60px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#panama-mobile-map-header span {
    font-size: 15px;
    font-weight: 500;
}
.pmobile-map-header-spacer {
    min-width: 60px;
}
#panama-mobile-map-div {
    flex: 1;
    width: 100%;
}

/* "About this area" / "Photos" floating buttons are PLUGIN-rendered
   (`#panama-area-info-btn` / `#panama-photos-btn`) — not Google's native
   chips. Their text-color fix lives on those ID rules above. The earlier
   `.gm-style button` selectors targeted a misdiagnosis and were removed
   so we don't unintentionally restyle Google's actual controls. */

/* ── Responsive ── */
@media (max-width: 768px) {
    #panama-chat-messages { -webkit-overflow-scrolling: touch; overflow-y: scroll; }
    #panama-workspace { display: none; }
    #panama-mobile-trigger {
        display: block;
        text-align: center;
        padding: 40px 20px;
    }
    #panama-start-chat {
        background: #0F6E56;
        color: white;
        border: none;
        padding: 18px 36px;
        border-radius: 30px;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(15,110,86,0.4);
        width: 100%;
        max-width: 320px;
    }
}
@media (max-width: 480px) {
    #panama-chat-widget { bottom: 10px; right: 10px; }
    #panama-chat-button { padding: 10px 16px; font-size: 14px; }
    #panama-chat-teaser { display: none; }
    #panama-chat-input { font-size: 16px; }
    #panama-chat-send { font-size: 14px; }
    .panama-message { max-width: 92%; font-size: 15px; }
    #panama-chat-box {
        position: fixed;
        top: 10px; left: 10px; right: 10px; bottom: 70px;
        width: auto;
        height: auto;
        margin: 0;
        border-radius: 12px;
        z-index: 10000;
    }
}
/* ── Image lightbox (mobile + desktop) ── */
#panama-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 200000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#panama-image-lightbox.active { display: flex; }
.panama-lightbox-stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    touch-action: pinch-zoom;
}
.panama-lightbox-img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.panama-lightbox-caption {
    color: #e5e5e5;
    font-size: 14px;
    text-align: center;
    margin-top: 14px;
    max-width: 640px;
    line-height: 1.5;
    padding: 0 8px;
}
.panama-lightbox-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 1;
}
.panama-lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
.panama-response-image { cursor: zoom-in; }

/* ── Image captions ── */
.panama-image-wrap {
    display: flex;
    flex-direction: column;
    max-width: 280px;
}
.panama-image-caption {
    margin: 4px 0 0 0;
    font-size: 12px;
    font-style: italic;
    color: #666;
    line-height: 1.4;
    text-align: center;
}

/* ── Place Photos (PLACE_PHOTO marker) ───────────────────────────────────── */
.panama-place-photo-loading {
    margin: 10px 0 6px 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.panama-place-photo-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #4a8b6f;
    border-radius: 50%;
    animation: panama-place-photo-spin 0.8s linear infinite;
}
@keyframes panama-place-photo-spin {
    to { transform: rotate(360deg); }
}
figure.panama-place-photo {
    margin: 12px 0 8px 0;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}
figure.panama-place-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
.panama-place-photo-caption {
    margin: 6px 0 0 0;
    font-size: 13px;
    font-style: italic;
    color: #555;
    line-height: 1.4;
}
.panama-place-photo-attr {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}
.panama-place-photo-attr a {
    color: #888;
    text-decoration: none;
}
.panama-place-photo-attr a:hover {
    text-decoration: underline;
}

/* ── Place Gallery — 2x2 grid for [PLACE_GALLERY:] marker ───────────────── */
.panama-place-gallery {
    margin: 14px 0;
    max-width: 560px;
}
.panama-place-gallery-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a2a1e;
    margin: 0 0 8px 0;
    letter-spacing: 0.01em;
}
.panama-place-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.panama-place-gallery-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border: none;
    padding: 0;
    background: #e6e9ec;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.panama-place-gallery-tile:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.panama-place-gallery-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #0F6E56, 0 4px 14px rgba(0,0,0,0.15);
}
.panama-place-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.panama-place-gallery-attribution {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    font-style: italic;
    text-align: right;
}

/* Loading state — 4 placeholder tiles, soft pulse to signal "fetching" */
.panama-place-gallery-loading {
    margin: 14px 0;
    max-width: 560px;
}
.panama-place-gallery-loading-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.panama-place-gallery-spinner-tile {
    aspect-ratio: 1 / 1;
    background: #e6e9ec;
    border-radius: 10px;
    animation: panamaPlaceGalleryPulse 1.4s ease-in-out infinite;
    display: block;
}
.panama-place-gallery-spinner-tile:nth-child(2) { animation-delay: 0.15s; }
.panama-place-gallery-spinner-tile:nth-child(3) { animation-delay: 0.30s; }
.panama-place-gallery-spinner-tile:nth-child(4) { animation-delay: 0.45s; }
@keyframes panamaPlaceGalleryPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}

/* Narrow phones — keep 2x2, slightly tighter gap + smaller corner radius */
@media (max-width: 480px) {
    .panama-place-gallery,
    .panama-place-gallery-loading { max-width: 100%; }
    .panama-place-gallery-grid,
    .panama-place-gallery-loading-grid { gap: 6px; }
    .panama-place-gallery-tile,
    .panama-place-gallery-spinner-tile { border-radius: 8px; }
}

/* ── Hotel Cards ─────────────────────────────────────────────────────────── */
.panama-hotels-loading {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panama-hotels-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top-color: #0F6E56;
    border-radius: 50%;
    animation: panama-spin 0.7s linear infinite;
}
@keyframes panama-spin { to { transform: rotate(360deg); } }

.panama-hotels-fallback {
    margin-top: 12px;
}
.panama-hotels-fallback-link {
    display: inline-block;
    padding: 9px 16px;
    background: #003580;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}
.panama-hotels-fallback-link:hover { background: #002050; }

.panama-hotels-wrap {
    margin-top: 14px;
}
.panama-hotels-header {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}
.panama-hotels-via {
    font-weight: 400;
    color: #888;
    font-size: 11px;
}
.panama-hotel-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panama-hotel-card {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid #e8e4de;
    border-radius: 10px;
    overflow: hidden;
    align-items: stretch;
}
.panama-hotel-photo {
    width: 110px;
    min-width: 110px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0ede8;
}
.panama-hotel-photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.panama-hotel-info {
    padding: 10px 12px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.panama-hotel-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panama-hotel-stars {
    color: #f5a623;
    font-size: 12px;
    letter-spacing: 1px;
}
.panama-hotel-review {
    font-size: 12px;
    color: #555;
}
.panama-hotel-score {
    background: #003580;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}
.panama-hotel-price {
    font-size: 12px;
    color: #0F6E56;
    font-weight: 600;
    margin-top: 2px;
}
.panama-hotel-book {
    display: inline-block;
    margin-top: auto;
    padding: 5px 10px;
    background: #003580;
    color: #fff !important;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
}
.panama-hotel-book:hover { background: #002050; }

@media (max-width: 480px) {
    .panama-hotel-card { flex-direction: column; }
    .panama-hotel-photo { width: 100%; min-width: unset; height: 140px; }
    .panama-hotel-info { padding: 10px 12px 12px; }
}

/* ── Guest icebreaker register CTA ───────────────────────────────────────── */
.panama-register-link {
    color: #0F6E56;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(15,110,86,0.35);
    transition: border-color 0.15s;
}
.panama-register-link:hover {
    border-bottom-color: #0F6E56;
}

/* ── Message counter ──────────────────────────────────────────────────────── */
.panama-msg-counter {
    font-size: 11px;
    color: #999;
    text-align: right;
    padding: 4px 12px 0;
    min-height: 0;
}
.panama-msg-counter:empty {
    display: none;
}
.panama-msg-counter--low {
    color: #e67e22;
    font-weight: 600;
}
.panama-msg-low-warning {
    font-size: 13px;
    color: #c0392b;
    background: #fdf3f0;
    border-left: 3px solid #e74c3c;
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 4px;
}
.panama-msg-low-warning a {
    color: #1568a8;
    font-weight: 700;
    text-decoration: underline;
}
.panama-msg-low-warning a:hover {
    color: #0d4f8a;
}
.panama-msg-low-warning--exhausted {
    font-weight: 500;
}

body.panama-dark .panama-msg-low-warning {
    background: #1e0f0f;
    color: #f08070;
    border-left-color: #c0392b;
}
body.panama-dark .panama-msg-low-warning strong {
    color: #f5a090;
}
body.panama-dark .panama-msg-low-warning a {
    color: #37c19e;
    font-weight: 700;
    text-decoration: underline;
}
body.panama-dark .panama-msg-low-warning a:hover {
    color: #5fd3b0;
}

/* ── Hide WooCommerce header chrome (Storefront theme) ── */
.site-search,
.site-header-cart,
.wc-block-mini-cart,
.cart-contents { display: none !important; }

/* ── Chat page: remove breadcrumb, page title, extra padding ── */
/* Targeting by Storefront body class page-id-12 and our custom class */
.page-id-12 .storefront-breadcrumb,
/* Hide floating widget on the full chat page — it's redundant there */
.panama-chat-page #panama-chat-widget { display: none !important; }

/* Full chat page on desktop: suppress the body scrollbar so only the inner
   messages container scrolls. resizeFullPageChat() in panama-chat.js already
   sizes #panama-fullpage-chat to windowHeight - rect.top - 20, so the content
   fits within viewport — the outer scrollbar was only appearing because of a
   few pixels of overflow from theme padding. Scoped to desktop since mobile
   uses the fixed overlay and shouldn't lock body scrolling before the
   overlay opens. */
@media (min-width: 769px) {
    body.panama-chat-page {
        overflow: hidden;
    }
}

.panama-chat-page .storefront-breadcrumb,
.page-id-12 .woocommerce-breadcrumb,
.panama-chat-page .woocommerce-breadcrumb { display: none !important; }

.page-id-12 .entry-title,
.panama-chat-page .entry-title,
.page-id-12 h1.entry-title,
.panama-chat-page h1.entry-title { display: none !important; }

.page-id-12 .entry-content,
.panama-chat-page .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove the outer content column padding on chat page */
.page-id-12 #primary,
.panama-chat-page #primary,
.page-id-12 #main,
.panama-chat-page #main,
.page-id-12 .site-content .col-full,
.panama-chat-page .site-content .col-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Break out of Astra's 1200px content container on the chat page
   so the workspace uses the full browser width */
body.panama-chat-page .ast-container,
body.panama-chat-page .ast-container > .ast-row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Astra dynamically injects a max-width on the workspace via generated CSS —
   override it directly so the map+chat panel fills the full viewport */
body.panama-chat-page #panama-workspace {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Tool header actions row ── */
#panama-tool-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
#panama-save-route-btn,
#panama-about-route-btn {
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    color: white;
}
#panama-save-route-btn  { background: #27ae60; }
#panama-about-route-btn { background: #2271b1; }
#panama-save-route-btn:hover   { background: #219a52; }
#panama-about-route-btn:hover  { background: #1a5a8f; }
#panama-save-route-btn:disabled,
#panama-about-route-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Routes Panel ── */
#panama-routes-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fff;
}
.panama-routes-loading,
.panama-routes-empty {
    text-align: center;
    color: #888;
    font-size: 14px;
    padding: 30px 16px;
    line-height: 1.6;
}
.panama-route-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafafa;
    transition: background 0.15s;
}
.panama-route-item:hover { background: #f0f7ff; }
.panama-route-info { flex: 1; min-width: 0; }
.panama-route-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panama-route-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.panama-route-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}
.panama-route-open,
.panama-route-delete {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s;
}
.panama-route-open:hover  { background: #e8f4fd; border-color: #2271b1; }
.panama-route-delete:hover { background: #fdecea; border-color: #e74c3c; }

/* ── Map search overlay ── */
#panama-map-search {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    overflow: hidden;
    width: min(340px, calc(100% - 24px));
}
#panama-map-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 9px 14px;
    font-size: 13px;
    background: transparent;
    color: #333;
    min-width: 0;
}
#panama-map-search-input::placeholder { color: #aaa; }
#panama-map-search-btn {
    border: none;
    background: #7B4FBF;
    color: white;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    border-radius: 0 24px 24px 0;
}
#panama-map-search-btn:hover    { background: #6a3fae; }
#panama-map-search-btn:disabled { background: #aaa; cursor: default; }

/* ── Floating map action button group ── */
#panama-map-btn-group {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
}
#panama-area-info-btn,
#panama-photos-btn {
    background: white;
    color: #1a2a1e;  /* explicit dark text — was inheriting and rendering invisible against white pill */
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}
#panama-area-info-btn:hover,
#panama-photos-btn:hover {
    background: #f0f7ff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
#panama-area-info-btn:disabled,
#panama-photos-btn:disabled { opacity: 0.65; cursor: default; }

/* ── Photo gallery overlay (sits over the map) ── */
#panama-photo-gallery {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panama-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0,0,0,0.85);
    flex-shrink: 0;
}
.panama-gallery-title {
    color: white;
    font-size: 14px;
    font-weight: 600;
}
.panama-gallery-close {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
}
.panama-gallery-close:hover { background: rgba(255,255,255,0.25); }

/* Photo gallery open — one dismiss control (gallery header), not two "Close" buttons */
#panama-tool-canvas.panama-gallery-active #panama-tool-close {
    display: none;
}
#panama-tool-canvas.panama-gallery-active #panama-map-search {
    display: none;
}

/* Hero photo */
.panama-gallery-hero-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.panama-gallery-hero {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.panama-gallery-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
.panama-gallery-hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 32px 14px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}
.panama-gallery-hero-caption {
    color: white;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    max-width: 72%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panama-gallery-hero-counter {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    flex-shrink: 0;
}
.panama-gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    font-size: 32px;
    width: 42px;
    height: 64px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, opacity 0.2s;
    line-height: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panama-gallery-nav-btn:hover { background: rgba(0,0,0,0.7); }
.panama-gallery-prev { left: 8px; }
.panama-gallery-next { right: 8px; }

/* Filmstrip */
.panama-gallery-strip {
    display: flex;
    gap: 3px;
    padding: 6px;
    background: #1a1a1a;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}
.panama-gallery-strip::-webkit-scrollbar { height: 4px; }
.panama-gallery-strip::-webkit-scrollbar-track { background: #1a1a1a; }
.panama-gallery-strip::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.panama-gallery-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: opacity 0.15s, border-color 0.15s;
}
.panama-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.panama-gallery-thumb:hover { opacity: 0.8; }
.panama-gallery-thumb.active {
    opacity: 1;
    border-color: #4a9eff;
}
.panama-gallery-empty {
    color: #aaa;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Place info panel (slides up from bottom of map on POI click) ── */
#panama-place-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    z-index: 10;
    overflow: hidden;
    animation: panelSlideUp 0.22s ease-out;
}
@keyframes panelSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.panama-place-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    border-bottom: 1px solid #f0f0f0;
}
.panama-place-type-badge {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.panama-place-panel-close {
    background: none;
    border: none;
    font-size: 15px;
    color: #bbb;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}
.panama-place-panel-close:hover { color: #555; }
.panama-place-panel-body {
    padding: 10px 14px 6px;
}
.panama-place-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    line-height: 1.25;
}
.panama-place-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.panama-place-rating {
    font-size: 13px;
    color: #444;
}
.panama-place-review-count {
    font-size: 11px;
    color: #aaa;
}
.panama-place-price {
    font-size: 13px;
    color: #666;
}
.panama-place-address {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panama-place-panel-actions {
    display: flex;
    gap: 8px;
    padding: 8px 14px 14px;
}
.panama-place-ai-btn,
.panama-place-photos-btn {
    flex: 1;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.panama-place-ai-btn:hover,
.panama-place-photos-btn:hover { opacity: 0.88; }
.panama-place-ai-btn {
    background: #27ae60;
    color: #fff;
}
.panama-place-photos-btn {
    background: #2271b1;
    color: #fff;
}

/* ── Photo lightbox ── */
#panama-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.panama-lb-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.panama-lb-inner img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
.panama-lb-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 14px;
}
.panama-lb-close:hover { background: rgba(255,255,255,0.25); }
.panama-lb-caption {
    color: #ccc;
    font-size: 12px;
    text-align: center;
    margin: 8px 0 4px;
}
.panama-lb-caption span { color: #888; }
.panama-lb-nav {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.panama-lb-prev, .panama-lb-next {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.panama-lb-prev:hover, .panama-lb-next:hover { background: rgba(255,255,255,0.25); }

/* ── Saved panel sections ── */
.panama-saved-section-header {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    padding: 11px 4px 5px;
}
.panama-saved-divider {
    border-top: 1px solid #eee;
    margin: 10px 0 6px;
}

/* ── Fullpage chat: fill available width ── */
#panama-fullpage-chat {
    max-width: 100%;
    border-radius: 8px;
    border-color: #e0e0e0;
}

/* ── First-time map help overlay ── */
.panama-map-help {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    background: rgba(255,255,255,0.98);
    border: 1px solid #d6dee7;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 14px 16px 12px;
    max-width: 320px;
    font-size: 13px;
    line-height: 1.45;
    color: #2d3748;
    animation: panamaMapHelpIn 0.25s ease-out;
}
@keyframes panamaMapHelpIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.panama-map-help-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a5a8f;
    margin-bottom: 8px;
    padding-right: 22px;
}
.panama-map-help-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #777;
    cursor: pointer;
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: 4px;
    padding: 0;
}
.panama-map-help-close:hover {
    background: #f0f0f0;
    color: #333;
}
.panama-map-help-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}
.panama-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* ── Climate zone map legend ── */
.panama-climate-legend {
    position: absolute;
    bottom: 28px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    z-index: 5;
    max-width: 280px;
    pointer-events: none;
}
.panama-climate-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
}
.panama-climate-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 3px 0;
}
.panama-climate-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.85;
    border: 1px solid rgba(0,0,0,0.12);
}
.panama-climate-legend-info {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.panama-climate-legend-info strong {
    font-size: 13px;
    color: #222;
}
.panama-climate-legend-temp {
    /* Deprecated as of legend v2 (2026-05-08) — kept for safety in case any
       old cached legend HTML still references it. New legends use the
       three-line .panama-climate-legend-meta structure below. */
    font-size: 11px;
    color: #666;
}
/* ── Legend v2: three-line per zone (name / temp / rainfall + season) ── */
.panama-climate-legend-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
    font-size: 11px;
    color: #555;
    line-height: 1.45;
}
.panama-climate-legend-meta-line {
    display: flex;
    gap: 4px;
    align-items: baseline;
}
.panama-climate-legend-meta-icon {
    width: 12px;
    flex-shrink: 0;
    opacity: 0.7;
    font-size: 10px;
}
.panama-climate-legend-meta-text {
    color: #555;
}
.panama-climate-legend-season {
    color: #888;
    font-style: italic;
}
.panama-climate-legend-hint {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    font-style: italic;
}

/* ── Floating pin legend (auto-shown on maps with 2+ AI pins) ── */
.panama-pin-legend {
    position: absolute;
    bottom: 28px;
    left: 8px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    z-index: 5;
    max-width: 240px;
    pointer-events: none; /* don't block map pan/tap */
}
.panama-pin-legend-title {
    font-size: 11px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.panama-pin-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
    color: #222;
}
.panama-pin-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.panama-map-help kbd {
    display: inline-block;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 11px;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.panama-map-help-dismiss {
    margin-top: 8px;
    background: #eef7ff;
    border: 1px solid #b8d0e8;
    color: #1a5a8f;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
}
.panama-map-help-dismiss:hover {
    background: #d6eaf8;
}

/* ── Icebreaker spacer (blank line between welcome CTA and opening question) ── */
.panama-icebreaker-spacer {
    margin: 0;
    height: 0.6em;
}

/* ── Toolbar suggestion button (injected after icebreaker for new members) ── */
.panama-suggestion-btn {
    display: inline-block;
    margin-top: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #0F6E56;
    background: #E1F5EE;
    border: 1.5px solid #9FE1CB;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    line-height: 1.2;
}
.panama-suggestion-btn:hover {
    background: #c5ece0;
    border-color: #1D9E75;
    box-shadow: 0 2px 5px rgba(15,110,86,0.15);
}
.panama-suggestion-btn:active {
    transform: translateY(1px);
}

/* ── Map offer pill button (inline "Want to see this on a map?" CTA) ── */
.panama-map-offers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.panama-map-offer-btn {
    background: #eef7ff;
    border: 1px solid #b8d0e8;
    color: #1a5a8f;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    line-height: 1.2;
}
.panama-map-offer-btn:hover {
    background: #d6eaf8;
    border-color: #2271b1;
    box-shadow: 0 2px 5px rgba(34,113,177,0.2);
}
.panama-map-offer-btn:active {
    transform: translateY(1px);
}
.panama-map-offer-btn.panama-map-offer-used,
.panama-map-offer-btn:disabled {
    background: #f4f4f4;
    border-color: #ddd;
    color: #888;
    cursor: default;
    box-shadow: none;
}

/* ── Task offer card ([OFFER_TASK:] — AI suggests adding an action item) ── */
.panama-task-offer-card {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    background: #f5f0fc;
    border: 1px solid #d4baef;
    border-radius: 10px;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.panama-task-offer-card--done {
    background: #f0faf5;
    border-color: #9FE1CB;
}
.panama-task-offer-icon {
    font-size: 15px;
    flex-shrink: 0;
}
.panama-task-offer-label {
    flex: 1;
    color: #3d2b6b;
    font-weight: 500;
    line-height: 1.3;
}
.panama-task-offer-btn {
    flex-shrink: 0;
    background: #7B4FBF;
    color: white;
    border: none;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s;
    white-space: nowrap;
}
.panama-task-offer-btn:hover {
    background: #6a3fae;
}
.panama-task-offer-btn:active {
    transform: translateY(1px);
}
.panama-task-offer-btn--done,
.panama-task-offer-btn:disabled {
    background: #0F6E56;
    cursor: default;
    transform: none;
}

/* ── Task-added confirmation note ([ADD_TASK:] immediate add) ── */
.panama-task-added-note {
    margin-top: 8px;
    font-size: 12px;
    color: #0F6E56;
    font-weight: 500;
}

/* ── Relocation Budget Tool ─────────────────────────────────────────────── */

#panama-budget-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: sans-serif;
    font-size: 13px;
}

/* Summary bar — 3 stat cards */
.panama-budget-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 16px;
    background: #f7f9fc;
    border-bottom: 1px solid #e5e9ef;
    flex-shrink: 0;
}
.panama-budget-stat {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.panama-budget-stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.panama-budget-stat-val {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Scrollable categories area */
.panama-budget-categories {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 8px;
}

/* Category block */
.panama-budget-cat {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 4px;
}
.panama-budget-cat-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 4px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}
.panama-budget-cat-name {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.panama-budget-cat-sub {
    font-size: 12px;
    color: #888;
}

/* Column header row */
.panama-budget-col-hdr {
    display: grid;
    grid-template-columns: 1fr 100px 100px 112px 1fr 28px;
    gap: 6px;
    padding: 5px 16px 3px;
    border-bottom: 1px solid #f0f0f0;
}
.panama-budget-col-hdr span {
    font-size: 10px;
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Item row */
.panama-budget-item {
    display: grid;
    grid-template-columns: 1fr 100px 100px 112px 1fr 28px;
    gap: 6px;
    align-items: center;
    padding: 5px 16px;
    border-bottom: 1px solid #f8f8f8;
}
.panama-budget-item input {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 12px;
    background: white;
    box-sizing: border-box;
    color: #333;
}
.panama-budget-item input:focus {
    outline: none;
    border-color: #0F6E56;
}
.panama-budget-item input[type="number"] {
    text-align: right;
}

/* Delete button */
.pbi-del {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.5;
}
.pbi-del:hover { opacity: 1; }

/* Add item row */
.panama-budget-add-row {
    padding: 6px 16px 8px;
}
.panama-budget-add-btn {
    background: none;
    border: 1px dashed #ccc;
    border-radius: 4px;
    color: #888;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
}
.panama-budget-add-btn:hover {
    border-color: #0F6E56;
    color: #0F6E56;
}

/* Footer — save button */
.panama-budget-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: white;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.panama-budget-save-btn {
    background: #0F6E56;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.panama-budget-save-btn:hover   { background: #005f8d; }
.panama-budget-save-btn:disabled { opacity: 0.6; cursor: default; }
.panama-budget-save-msg {
    font-size: 13px;
    font-weight: 500;
}

/* ── Budget tabs (Relocation / Monthly Living) ──────────────────────────── */
.panama-budget-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
.pbtab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pbtab:hover { color: #333; }
.pbtab.pbtab-active {
    color: #0F6E56;
    border-bottom-color: #0F6E56;
}
.pbtab-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── Monthly Living Tracker ─────────────────────────────────────────────── */
#panama-monthly-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 13px;
}

/* Month navigation row */
.pmonth-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.pmonth-arrow {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}
.pmonth-arrow:hover { border-color: #0F6E56; color: #0F6E56; }
.pmonth-label {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    min-width: 140px;
    text-align: center;
}

/* Location row */
.pmonth-location-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.pmonth-loc-label {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}
.pmonth-loc-input {
    flex: 1;
    max-width: 200px;
    padding: 5px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
}
.pmonth-loc-input:focus { outline: none; border-color: #0F6E56; }

/* Column headers */
.pmonth-col-hdr {
    display: grid;
    grid-template-columns: 1.4fr 110px 110px 1fr;
    gap: 6px;
    padding: 5px 16px 3px;
    border-bottom: 1px solid #eee;
}
.pmonth-col-hdr span {
    font-size: 10px;
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Category rows */
.pmonth-row {
    display: grid;
    grid-template-columns: 1.4fr 110px 110px 1fr;
    gap: 6px;
    align-items: center;
    padding: 5px 16px;
    border-bottom: 1px solid #f8f8f8;
}
.pmonth-cat-label {
    font-size: 13px;
    color: #333;
}
.pmonth-row input {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 12px;
    background: white;
    box-sizing: border-box;
}
.pmonth-row input[type="number"] { text-align: right; }
.pmonth-row input:focus { outline: none; border-color: #0F6E56; }

/* Totals row */
.pmonth-totals-row {
    display: grid;
    grid-template-columns: 1.4fr 110px 110px 1fr;
    gap: 6px;
    padding: 7px 16px;
    border-top: 2px solid #e5e9ef;
    background: #f7f9fc;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

/* Running averages block */
.pmonth-averages {
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.pmonth-avg-header {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.pmonth-avg-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #555;
    padding: 2px 0;
}
.pmonth-avg-row span:last-child { color: #0F6E56; font-weight: 500; }

/* Monthly footer */
.pmonth-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: white;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCOUTING TRIPS TRACKER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Trip list view ─────────────────────────────────────────────────────── */

#panama-trips-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#panama-trips-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.ptrips-empty {
    color: #888;
    text-align: center;
    padding: 32px 16px;
    font-size: 0.9rem;
}

.ptrips-card {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ptrips-card:hover {
    border-color: #1a6b3c;
    box-shadow: 0 2px 8px rgba(26,107,60,0.10);
}

.ptrips-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ptrips-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a2a1e;
}

.ptrips-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.ptrips-status-upcoming   { background: #e3f0ff; color: #1a56a0; }
.ptrips-status-active     { background: #d4f4e0; color: #1a6b3c; }
.ptrips-status-completed  { background: #f0f0f0; color: #666;    }

.ptrips-dates,
.ptrips-focus {
    font-size: 0.82rem;
    color: #555;
    margin-top: 4px;
}

.ptrips-list-footer {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.ptrips-new-btn {
    width: 100%;
    padding: 9px 0;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ptrips-new-btn:hover { background: #145530; }

/* ── Trip detail view ───────────────────────────────────────────────────── */

#panama-trip-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ptrip-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e9ef;
    background: #f7f9fb;
    flex-shrink: 0;
}

.ptrip-back-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #444;
    white-space: nowrap;
    flex-shrink: 0;
}
.ptrip-back-btn:hover { background: #eef0f2; }

.ptrip-title-input {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px 8px;
    background: transparent;
    color: #1a2a1e;
    min-width: 0;
}
.ptrip-title-input:focus {
    outline: none;
    border-color: #1a6b3c;
    background: #fff;
}

.ptrip-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}
.ptrip-meta-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #555;
    font-weight: 500;
}
.ptrip-meta-row select,
.ptrip-meta-row input[type="date"] {
    border: 1px solid #cdd3da;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.82rem;
    color: #333;
    background: #fff;
}

.ptrip-focus-row {
    padding: 6px 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}
.ptrip-focus-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #555;
    font-weight: 500;
    width: 100%;
}
.ptrip-focus-input {
    flex: 1;
    border: 1px solid #cdd3da;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.82rem;
}
.ptrip-focus-input:focus { outline: none; border-color: #1a6b3c; }

/* ── Section tabs ───────────────────────────────────────────────────────── */

.ptrip-tabs {
    display: flex;
    border-bottom: 2px solid #e0e5eb;
    background: #f7f9fb;
    flex-shrink: 0;
    overflow-x: auto;
}

.ptrip-tab {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.ptrip-tab:hover     { color: #1a6b3c; }
.ptrip-tab-active    { color: #1a6b3c; border-bottom-color: #1a6b3c; }

/* ── Tab panes ──────────────────────────────────────────────────────────── */

#ptrip-panes {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ptrip-pane { padding: 10px 12px; }
.ptrip-pane-hidden { display: none; }

.ptrip-section-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a6b3c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* ── Column headers (shared) ────────────────────────────────────────────── */

.ptrip-col-hdr {
    display: grid;
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 4px 0;
    border-bottom: 1px solid #e5e9ef;
    margin-bottom: 4px;
}

/* ── Flights grid ───────────────────────────────────────────────────────── */

.ptrip-fl-cols {
    grid-template-columns: 80px 90px 70px 55px 55px 140px 140px 1fr 28px;
    gap: 4px;
    align-items: center;
}

/* ── Accommodation grid ─────────────────────────────────────────────────── */

.ptrip-ac-cols {
    grid-template-columns: 1fr 110px 100px 100px 100px 1fr 28px;
    gap: 4px;
    align-items: center;
}

/* ── Agenda grid ────────────────────────────────────────────────────────── */

.ptrip-ag-cols {
    grid-template-columns: 100px 72px 1fr 1fr 28px 28px;
    gap: 4px;
    align-items: center;
}

/* ── Generic row ────────────────────────────────────────────────────────── */

.ptrip-row {
    display: grid;
    gap: 4px;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid #f0f2f4;
}
.ptrip-row:last-child { border-bottom: none; }

.ptrip-row input[type="text"],
.ptrip-row input[type="date"],
.ptrip-row input[type="time"],
.ptrip-row input[type="datetime-local"],
.ptrip-row select {
    width: 100%;
    border: 1px solid #d0d6dd;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 0.78rem;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}
.ptrip-row input:focus,
.ptrip-row select:focus { outline: none; border-color: #1a6b3c; }

.ptrip-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a6b3c;
}

.ptrip-del-row {
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    justify-self: center;
    transition: color 0.12s;
}
.ptrip-del-row:hover { color: #c0392b; }

/* ── Add row button ─────────────────────────────────────────────────────── */

.ptrip-add-row-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 0.8rem;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px dashed #8dc5a6;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.12s;
}
.ptrip-add-row-btn:hover { background: #d8edd5; }

/* ── Budget pane ────────────────────────────────────────────────────────── */

.ptrip-bud-col-hdr {
    display: grid;
    grid-template-columns: 1fr 110px 110px 90px;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e9ef;
    margin-bottom: 4px;
}

.ptrip-bud-row {
    display: grid;
    grid-template-columns: 1fr 110px 110px 90px;
    gap: 6px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f0f2f4;
}
.ptrip-bud-row:last-child { border-bottom: none; }

.ptrip-bud-label {
    font-size: 0.83rem;
    color: #333;
    font-weight: 500;
}

.ptrip-bud-est,
.ptrip-bud-act {
    border: 1px solid #d0d6dd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.82rem;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}
.ptrip-bud-est:focus,
.ptrip-bud-act:focus { outline: none; border-color: #1a6b3c; }

.ptrip-bud-diff {
    font-size: 0.82rem;
    text-align: right;
    color: #888;
    font-weight: 500;
}
.ptrip-bud-over  { color: #c0392b; }
.ptrip-bud-under { color: #27ae60; }

.ptrip-bud-totals {
    display: grid;
    grid-template-columns: 1fr 110px 110px 90px;
    gap: 6px;
    padding: 6px 0 0 0;
    margin-top: 4px;
    border-top: 2px solid #d0d6dd;
    font-size: 0.83rem;
    font-weight: 700;
    color: #333;
    text-align: right;
}
.ptrip-bud-totals span:first-child { text-align: left; }

/* ── Post-trip notes ────────────────────────────────────────────────────── */

.ptrip-notes-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.ptrip-notes-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: #444;
}

.ptrip-post-notes {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cdd3da;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #333;
    resize: vertical;
    line-height: 1.5;
}
.ptrip-post-notes:focus { outline: none; border-color: #1a6b3c; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.ptrip-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e5e9ef;
    background: #f7f9fb;
    flex-shrink: 0;
}

.ptrip-save-btn {
    padding: 7px 18px;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ptrip-save-btn:hover    { background: #145530; }
.ptrip-save-btn:disabled { background: #7faf97; cursor: default; }

.ptrip-save-msg {
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
}

.ptrip-del-btn {
    margin-left: auto;
    padding: 7px 14px;
    background: none;
    border: 1px solid #dca0a0;
    color: #c0392b;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.ptrip-del-btn:hover { background: #fdecea; }


/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT PLANNER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panel shell ────────────────────────────────────────────────────────── */

#panama-planner-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pplan-loading {
    padding: 24px;
    color: #888;
    font-size: 0.88rem;
}

/* ── Generation screen ──────────────────────────────────────────────────── */

.pplan-generate-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    flex: 1;
}

.pplan-generate-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.pplan-generate-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2a1e;
    margin: 0 0 10px 0;
}

.pplan-generate-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.55;
    max-width: 340px;
    margin: 0 0 20px 0;
}

.pplan-generate-btn {
    padding: 10px 24px;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.pplan-generate-btn:hover    { background: #145530; }
.pplan-generate-btn:disabled { background: #7faf97; cursor: default; }

.pplan-generate-note {
    font-size: 0.78rem;
    color: #999;
    margin: 8px 0 0 0;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */

#pplan-progress-bar-wrap {
    padding: 10px 14px 6px;
    border-bottom: 1px solid #e5e9ef;
    background: #f7f9fb;
    flex-shrink: 0;
}

#pplan-progress-bar {
    height: 8px;
    background: #dde3ea;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

#pplan-progress-fill {
    height: 100%;
    width: 0%;
    background: #4aab78;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s;
}

#pplan-progress-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

/* ── Toolbar (filter bar + collapse button) ─────────────────────────────── */

.pplan-toolbar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e9ef;
    background: #fff;
    flex-shrink: 0;
}

/* ── Category filter bar ────────────────────────────────────────────────── */

.pplan-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 8px 12px;
    flex: 1;
    min-width: 0;
    border-bottom: none;
    background: transparent;
    flex-shrink: 0;
    scrollbar-width: none;
}
.pplan-filter-bar::-webkit-scrollbar { display: none; }

/* ── Collapse/Expand All button ─────────────────────────────────────────── */

.pplan-collapse-btn,
.pplan-upcoming-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    margin-right: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1a6b3c;
    background: #f0f7f3;
    border: 1px solid #b8d9c6;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.pplan-collapse-btn:hover,
.pplan-upcoming-btn:hover { background: #dff0e8; border-color: #8dc5a6; }

/* When the Upcoming button has overdue items, surface the urgency: subtle
   red border + the badge pill inside displays the count. The badge ride
   inline so the button auto-sizes; no layout shift between states. */
.pplan-upcoming-btn-has-overdue {
    border-color: #f0a0a0;
}
.pplan-upcoming-btn-has-overdue:hover {
    border-color: #d97070;
    background: #fff0f0;
}
.pplan-upcoming-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    min-width: 12px;
    background: #c0392b;
    color: #fff;
    border-radius: 9px;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Upcoming-due modal — renders centered over the planner panel.
   Click row → close + scroll-to-task in the main list (see JS). */
.pplan-upcoming-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}
.pplan-upcoming-inner {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pplan-upcoming-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e9ef;
    background: #f8fafb;
}
.pplan-upcoming-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a6b3c;
}
.pplan-upcoming-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.pplan-upcoming-close:hover { background: #eef2f7; color: #333; }

.pplan-upcoming-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.pplan-upcoming-empty {
    padding: 28px 16px;
    text-align: center;
    color: #888;
    font-size: 0.85rem;
}
.pplan-upcoming-row {
    display: grid;
    grid-template-columns: 96px auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    margin: 2px 0;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.pplan-upcoming-row:hover { background: #f0f7f3; border-color: #b8d9c6; }
.pplan-upcoming-row.pplan-upcoming-overdue { background: #fff8f8; }
.pplan-upcoming-row.pplan-upcoming-overdue:hover { background: #ffefef; border-color: #f0a0a0; }
.pplan-upcoming-row.pplan-upcoming-overdue .pplan-upcoming-date { color: #c0392b; font-weight: 700; }
.pplan-upcoming-row.pplan-upcoming-today .pplan-upcoming-date { color: #1a6b3c; font-weight: 700; }

.pplan-upcoming-date {
    font-size: 0.78rem;
    color: #555;
    font-variant-numeric: tabular-nums;
}
.pplan-upcoming-cat {
    /* slight tightening when used inside the row */
    font-size: 0.62rem;
}
.pplan-upcoming-row-title {
    font-size: 0.85rem;
    color: #222;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pplan-upcoming-parent {
    color: #888;
    font-size: 0.78rem;
}

/* Brief flash applied via JS after scrollToTask — fades a soft yellow
   highlight so the user sees where the task landed in the main list. */
.pplan-task.pplan-flash {
    animation: pplan-flash-anim 1.5s ease-out;
}
@keyframes pplan-flash-anim {
    0%   { background: #fff7c4; box-shadow: 0 0 0 4px #fceca3; }
    70%  { background: #fffbe6; box-shadow: 0 0 0 4px transparent; }
    100% { background: #fff;    box-shadow: none; }
}

@media (max-width: 540px) {
    .pplan-upcoming-row {
        grid-template-columns: 80px auto 1fr;
        gap: 8px;
        padding: 7px 10px;
    }
    .pplan-upcoming-date { font-size: 0.72rem; }
    .pplan-upcoming-row-title { font-size: 0.8rem; }
}

.pplan-filter-btn {
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #d0d6dd;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: #555;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}
.pplan-filter-btn:hover     { background: #f0f7f3; border-color: #8dc5a6; color: #1a6b3c; }
.pplan-filter-active        { background: #1a6b3c; border-color: #1a6b3c; color: #fff; }
.pplan-filter-active:hover  { background: #145530; }

/* ── Task list ──────────────────────────────────────────────────────────── */

#pplan-task-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 10px;
}

.pplan-empty {
    color: #aaa;
    font-size: 0.85rem;
    padding: 20px 4px;
    text-align: center;
}

/* ── Task row ───────────────────────────────────────────────────────────── */

.pplan-task {
    border: 1px solid #e5e9ef;
    border-radius: 6px;
    margin-bottom: 6px;
    background: #fff;
    transition: border-color 0.12s;
}
.pplan-task:hover           { border-color: #b0c8bc; }
.pplan-task.pplan-done      { opacity: 0.6; }
.pplan-task.pplan-overdue   { border-color: #f0a0a0; background: #fff8f8; }
.pplan-task.pplan-draggable { cursor: grab; }
.pplan-task.pplan-drag-source { opacity: 0.4; border-style: dashed; }
.pplan-task.pplan-drag-over   { border-color: #1a6b3c; border-style: dashed; background: #f0f9f4; }

.pplan-drag-handle {
    font-size: 1rem;
    color: #b0bec5;
    cursor: grab;
    padding: 0 6px 0 2px;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.pplan-drag-handle:hover { color: #1a6b3c; }

.pplan-task-hdr {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
}

.pplan-expand {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: #aaa;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.12s;
}
.pplan-expand:hover { color: #1a6b3c; }

.pplan-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a6b3c;
    flex-shrink: 0;
}

.pplan-title {
    flex: 1;
    border: none;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a2a1e;
    padding: 2px 4px;
    min-width: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
}
.pplan-title:focus {
    outline: none;
    border-bottom-color: #1a6b3c;
    background: #f8fff9;
}
.pplan-done .pplan-title { text-decoration: line-through; color: #999; }

/* ── Category badge ─────────────────────────────────────────────────────── */

.pplan-cat {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.pplan-cat-visa       { background: #dbeafe; color: #1e40af; }
.pplan-cat-housing    { background: #d1fae5; color: #065f46; }
.pplan-cat-banking    { background: #fef3c7; color: #92400e; }
.pplan-cat-healthcare { background: #fee2e2; color: #991b1b; }
.pplan-cat-shipping   { background: #ede9fe; color: #5b21b6; }
.pplan-cat-pets       { background: #ffedd5; color: #9a3412; }
.pplan-cat-school     { background: #cffafe; color: #155e75; }
.pplan-cat-legal      { background: #f3f4f6; color: #374151; }
.pplan-cat-finance    { background: #ecfccb; color: #3f6212; }
.pplan-cat-social     { background: #fce7f3; color: #9d174d; }
.pplan-cat-misc       { background: #f3f4f6; color: #6b7280; }

/* ── Phase badge ──────────────────────────────────────────────────────────
   Sits next to the category chip on every task header. Five variants —
   pre_move / application / logistics / arrival / settling — visually
   distinct from category colors so the two dimensions don't blur into
   each other. Phase = relocation arc (when), category = topic (what). */
.pplan-phase {
    font-size: 0.64rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f3f4f6;
    color: #4b5563;
}
.pplan-phase-pre_move    { background: #fef3c7; color: #92400e; }
.pplan-phase-application { background: #fef9c3; color: #854d0e; }
.pplan-phase-logistics   { background: #e0e7ff; color: #3730a3; }
.pplan-phase-arrival     { background: #d1fae5; color: #065f46; }
.pplan-phase-settling    { background: #dcfce7; color: #166534; }

/* When .pplan-phase is a <select> (editable phase), strip the native chevron
   and form-element appearance so the colored pill matches the read-only span.
   Mirrors the select.pplan-cat pattern. */
select.pplan-phase {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    height: auto;
    padding: 2px 7px;
    width: auto;
    min-width: 0;
    max-width: 140px;
    flex: 0 0 auto;
}
select.pplan-phase:hover { filter: brightness(0.96); }
select.pplan-phase:focus { outline: 1px solid currentColor; outline-offset: 1px; }
/* Restore neutral styling inside the native dropdown popup so options are
   readable regardless of which phase color class is on the select itself. */
select.pplan-phase option {
    background: #fff;
    color: #333;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

/* ── Phase view toggle button ─────────────────────────────────────────────
   Sits in the planner toolbar next to "Upcoming". When inactive, looks
   like a neutral toolbar pill. When active (phase view is on), filled
   teal to mirror the active filter chips. */
.pplan-view-toggle-btn {
    background: #fff;
    border: 1px solid #c8d8cc;
    color: #444;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pplan-view-toggle-btn:hover {
    background: #f0f7f3;
    border-color: #8dc5a6;
    color: #1a6b3c;
}
.pplan-view-toggle-btn.pplan-view-toggle-active {
    background: #1a6b3c;
    border-color: #1a6b3c;
    color: #fff;
}
.pplan-view-toggle-btn.pplan-view-toggle-active:hover {
    background: #145530;
}

/* ── Phase header (group divider in phase view) ───────────────────────────
   Injected before the first task of each phase when in phase view mode.
   Hue echoes the .pplan-phase-* badge palette so the connection is visual. */
.pplan-phase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f7f9fb;
    border-left: 4px solid #94a3b8;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a2a1e;
}
.pplan-phase-header:first-child { margin-top: 4px; }
.pplan-phase-header-emoji { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.pplan-phase-header-title { flex: 1; letter-spacing: 0.01em; }
.pplan-phase-header-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Per-phase accent stripes — left border color */
.pplan-phase-header-pre_move    { background: #fef9e7; border-left-color: #d97706; }
.pplan-phase-header-application { background: #fefce8; border-left-color: #ca8a04; }
.pplan-phase-header-logistics   { background: #eef2ff; border-left-color: #4f46e5; }
.pplan-phase-header-arrival     { background: #ecfdf5; border-left-color: #059669; }
.pplan-phase-header-settling    { background: #f0fdf4; border-left-color: #16a34a; }

/* ── Layer 4: Suggest dates modal ────────────────────────────────────────
   Three-stage modal: date input -> spinner -> per-task confirmation list
   (or error state). Borrows .pplan-upcoming-modal layout shape. */
.pplan-suggest-dates-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 26, 0.45);
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pplan-suggest-dates-inner {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px 26px;
    box-sizing: border-box;
}
.pplan-suggest-dates-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 4px;
}
.pplan-suggest-dates-close:hover { background: rgba(0, 0, 0, 0.06); color: #1a2a1e; }
.pplan-suggest-dates-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.pplan-suggest-dates-emoji { font-size: 1.35rem; line-height: 1; }
.pplan-suggest-dates-title { font-weight: 700; font-size: 1.1rem; color: #14532d; }
.pplan-suggest-dates-sub { font-size: 0.86rem; color: #4b5563; line-height: 1.5; margin: 6px 0 14px; }
.pplan-suggest-dates-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a2a1e;
    margin: 8px 0 4px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pplan-suggest-dates-date-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 36px 9px 12px;
    font-size: 0.92rem;
    border: 1.5px solid #c8d8cc;
    border-radius: 6px;
    background: #fff;
    color: #1a2a1e;
}
.pplan-suggest-dates-date-input:focus { outline: none; border-color: #1a6b3c; }
.pplan-suggest-dates-hint { font-size: 0.78rem; color: #6b7280; margin: 6px 0 14px; }

.pplan-suggest-dates-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.pplan-suggest-dates-cancel,
.pplan-suggest-dates-submit,
.pplan-suggest-dates-apply,
.pplan-suggest-dates-retry,
.pplan-suggest-dates-select-all,
.pplan-suggest-dates-select-none {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.pplan-suggest-dates-cancel {
    background: #fff;
    color: #4b5563;
    border-color: #d1d5db;
}
.pplan-suggest-dates-cancel:hover { background: #f3f4f6; }
.pplan-suggest-dates-submit,
.pplan-suggest-dates-apply,
.pplan-suggest-dates-retry {
    background: #1a6b3c;
    color: #fff;
}
.pplan-suggest-dates-submit:hover,
.pplan-suggest-dates-apply:hover,
.pplan-suggest-dates-retry:hover { background: #145530; }

.pplan-suggest-dates-select-all,
.pplan-suggest-dates-select-none {
    background: #f0f7f3;
    color: #1a6b3c;
    border-color: #8dc5a6;
    padding: 4px 10px;
    font-size: 0.78rem;
}
.pplan-suggest-dates-select-all:hover,
.pplan-suggest-dates-select-none:hover { background: #d8edd5; }

.pplan-suggest-dates-compressed-note {
    background: #fef3c7;
    color: #92400e;
    border-left: 3px solid #d97706;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin: 0 0 14px;
}

.pplan-suggest-dates-list-wrap { margin: 14px 0 8px; }
.pplan-suggest-dates-list-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.pplan-suggest-dates-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    background: #fafbfc;
}
.pplan-suggest-dates-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #ecf0f3;
    cursor: pointer;
    transition: background 0.1s;
}
.pplan-suggest-dates-row:last-child { border-bottom: none; }
.pplan-suggest-dates-row:hover { background: #eef5f0; }
.pplan-suggest-dates-cb {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a6b3c;
}
.pplan-suggest-dates-row-title {
    flex: 1;
    font-size: 0.86rem;
    color: #1a2a1e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pplan-suggest-dates-row-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #6b7280;
    flex-shrink: 0;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.pplan-suggest-dates-row-current { opacity: 0.55; }
.pplan-suggest-dates-row-arrow { color: #94a3b8; }
.pplan-suggest-dates-row-suggested { color: #1a6b3c; font-weight: 600; }

.pplan-suggest-dates-spinner {
    text-align: center;
    padding: 40px 20px;
}
.pplan-suggest-dates-spinner-anim {
    width: 36px;
    height: 36px;
    border: 3px solid #c8e0d2;
    border-top-color: #1a6b3c;
    border-radius: 50%;
    animation: pplan-spinner-spin 0.9s linear infinite;
    margin: 0 auto 16px;
}
@keyframes pplan-spinner-spin {
    to { transform: rotate(360deg); }
}
.pplan-suggest-dates-spinner p { margin: 6px 0; color: #4b5563; font-size: 0.92rem; }

.pplan-suggest-dates-error {
    text-align: center;
    padding: 20px 10px;
}
.pplan-suggest-dates-error-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.pplan-suggest-dates-error p { color: #1a2a1e; font-size: 0.92rem; margin: 6px 0 16px; }
.pplan-suggest-dates-error-detail {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 6px;
    margin: 6px auto 14px !important;
    max-width: 460px;
    word-break: break-word;
}

/* Footer button — sits between Templates and Export */
.pplan-suggest-dates-btn {
    background: #fff;
    border: 1px solid #c8d8cc;
    color: #444;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pplan-suggest-dates-btn:hover {
    background: #f0f7f3;
    border-color: #8dc5a6;
    color: #1a6b3c;
}

/* ── "Start here" banner ─────────────────────────────────────────────────
   Appears above the task list on first-open of a fresh plan (0 completed,
   flat view, not dismissed). Highlights 3 pre-move tasks as suggested
   starting points. Soft teal-tinted card with sprout emoji. */
.pplan-start-here {
    position: relative;
    background: linear-gradient(135deg, #f0faf5 0%, #e8f5ed 100%);
    border: 1px solid #b8d9c6;
    border-left: 4px solid #1a6b3c;
    border-radius: 10px;
    padding: 14px 18px 14px 18px;
    margin: 4px 0 16px;
    box-shadow: 0 1px 3px rgba(26, 107, 60, 0.08);
}
.pplan-start-here-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #6b8074;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.pplan-start-here-dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1a2a1e;
}
.pplan-start-here-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.pplan-start-here-emoji { font-size: 1.2rem; line-height: 1; }
.pplan-start-here-title {
    font-weight: 700;
    font-size: 0.98rem;
    color: #14532d;
    letter-spacing: 0.01em;
}
.pplan-start-here-sub {
    font-size: 0.84rem;
    color: #3f6212;
    margin: 0 0 10px;
    line-height: 1.45;
}
.pplan-start-here-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pplan-start-here-list li { margin: 0; padding: 0; }
.pplan-start-here-list a {
    display: block;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #c8e0d2;
    border-radius: 6px;
    color: #14532d;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.pplan-start-here-list a:hover {
    background: #fff;
    border-color: #1a6b3c;
    transform: translateY(-1px);
}
.pplan-start-here-list a:active {
    transform: translateY(0);
}

/* When .pplan-cat is a <select> (editable category), strip the native chevron
   and underlying form-element appearance so the colored pill matches what
   the read-only span used to look like. The native dropdown menu still works
   on click — we're only suppressing the visual control chrome. */
select.pplan-cat {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    height: auto;
    /* Match the span padding exactly so visually identical to the old badge */
    padding: 2px 7px;
}
select.pplan-cat:hover  { filter: brightness(0.96); }
select.pplan-cat:focus  { outline: 1px solid currentColor; outline-offset: 1px; }
/* Restore neutral styling inside the native dropdown popup so options are
   readable regardless of which color class is on the select itself. */
select.pplan-cat option {
    background: #fff;
    color: #333;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

/* ── Priority badge ─────────────────────────────────────────────────────── */

.pplan-priority {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: filter 0.12s;
}
.pplan-priority:hover          { filter: brightness(0.93); }
.pplan-pri-none   { background: transparent; color: #9ca3af; border: 1px dashed #c0c7ce; text-transform: none; }
.pplan-pri-low    { background: #dbeafe; color: #1e40af; }
.pplan-pri-medium { background: #fef3c7; color: #92400e; }
.pplan-pri-high   { background: #fee2e2; color: #991b1b; font-weight: 800; }

/* ── Time estimate chip ─────────────────────────────────────────────────── */

.pplan-time {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    color: #555;
    background: #f1f4f8;
    cursor: pointer;
    user-select: none;
    transition: filter 0.12s, background 0.12s;
}
.pplan-time:hover { filter: brightness(0.94); }
.pplan-time-none           { background: transparent; color: #c0c7ce; border: 1px dashed #d6dbe1; padding: 1px 7px; }
.pplan-time-none::before   { content: 'Time'; }
.pplan-time-under-30        { background: #ecfccb; color: #3f6212; }
.pplan-time-hours           { background: #dbeafe; color: #1e40af; }
.pplan-time-multi-day       { background: #fef3c7; color: #92400e; }
.pplan-time-multi-week-wait { background: #ffedd5; color: #9a3412; }
.pplan-time-multi-month-wait{ background: #fee2e2; color: #991b1b; }

/* ── ETA chip (relative time to due date) ───────────────────────────────── */

.pplan-eta {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.pplan-eta-late    { background: #fee2e2; color: #991b1b; font-weight: 800; }
.pplan-eta-today   { background: #fef3c7; color: #92400e; font-weight: 700; }
.pplan-eta-soon    { background: #fff7e6; color: #b54708; }
.pplan-eta-far     { background: #ecfccb; color: #3f6212; }
.pplan-eta-distant { background: #f0f4f8; color: #506070; }
.pplan-eta-done    { background: transparent; color: #9ca3af; }

/* ── Completion celebration — green pulse + confetti dots ───────────────── */

.pplan-task.pplan-celebrate {
    animation: pplan-celebrate-anim 1.2s ease-out;
}
@keyframes pplan-celebrate-anim {
    0%   { background: #fff; box-shadow: 0 0 0 0 rgba(26, 107, 60, 0); }
    25%  { background: #e6f5ec; box-shadow: 0 0 0 4px rgba(26, 107, 60, 0.18); }
    100% { background: #fff; box-shadow: 0 0 0 0 rgba(26, 107, 60, 0); }
}
.pplan-confetti-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.pplan-task { position: relative; }
.pplan-confetti-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    opacity: 0;
    animation: pplan-confetti-fly 1.1s ease-out forwards;
}
.pplan-confetti-1 { background: #1a6b3c; --tx:  -32px; --ty: -28px; --r: -45deg; }
.pplan-confetti-2 { background: #f59e0b; --tx:   28px; --ty: -34px; --r:  45deg; }
.pplan-confetti-3 { background: #2563eb; --tx:   42px; --ty:  -8px; --r:  90deg; }
.pplan-confetti-4 { background: #db2777; --tx:  -44px; --ty:  -6px; --r: -90deg; }
.pplan-confetti-5 { background: #16a34a; --tx:   10px; --ty: -40px; --r:  10deg; }
.pplan-confetti-6 { background: #d97706; --tx:  -12px; --ty: -42px; --r: -10deg; }
@keyframes pplan-confetti-fly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0)), calc(-50% + var(--ty, 0))) rotate(var(--r, 0)) scale(1); }
}

/* ── Milestone toast (week-completion: 3 / 5 / 10) ──────────────────────── */

.pplan-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a6b3c;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 99998;
    pointer-events: none;
    max-width: 92vw;
    text-align: center;
}
.pplan-toast.pplan-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Today / Week / Overdue strip ───────────────────────────────────────── */

.pplan-today-strip {
    display: flex;
    gap: 8px;
    padding: 6px 12px 4px;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}
.pplan-strip-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f8fafb;
    cursor: pointer;
    font: inherit;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.pplan-strip-card:hover:not(:disabled) {
    background: #f0f7f3;
    border-color: #b8d9c6;
    transform: translateY(-1px);
}
.pplan-strip-card:disabled {
    opacity: 0.45;
    cursor: default;
}
.pplan-strip-count {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #1a6b3c;
}
.pplan-strip-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #555;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.pplan-strip-red    .pplan-strip-count { color: #c0392b; }
.pplan-strip-red.pplan-strip-active    { background: #fff0f0; border-color: #f0a0a0; }
.pplan-strip-amber  .pplan-strip-count { color: #b54708; }
.pplan-strip-amber.pplan-strip-active  { background: #fff7e6; border-color: #f6c374; }
.pplan-strip-green  .pplan-strip-count { color: #1a6b3c; }
.pplan-strip-green.pplan-strip-active  { background: #e6f5ec; border-color: #8dc5a6; }
.pplan-strip-card.pplan-strip-active   { box-shadow: 0 0 0 1px currentColor inset; }

/* ── Template modal (reuses .pplan-upcoming-modal backdrop) ─────────────── */

.pplan-template-help {
    padding: 10px 16px 0;
    font-size: 0.82rem;
    color: #666;
    line-height: 1.4;
}
.pplan-template-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.pplan-template-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin: 4px 0;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.pplan-template-row:hover {
    background: #f0f7f3;
    border-color: #8dc5a6;
    transform: translateY(-1px);
}
.pplan-template-emoji {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.pplan-template-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pplan-template-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a6b3c;
}
.pplan-template-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: #888;
}
.pplan-template-desc {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.4;
}

/* ── New footer buttons (Templates + Export .ics) ───────────────────────── */

.pplan-tpl-btn,
.pplan-ics-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a6b3c;
    background: #f0f7f3;
    border: 1px solid #b8d9c6;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.pplan-tpl-btn:hover,
.pplan-ics-btn:hover { background: #dff0e8; border-color: #8dc5a6; }

/* Review button uses a slightly stronger green to read as the primary
   action without competing with Save. */
.pplan-review-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: #1a6b3c;
    border: 1px solid #145530;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.pplan-review-btn:hover    { background: #145530; }
.pplan-review-btn:disabled { background: #b8d9c6; border-color: #b8d9c6; cursor: default; color: #fff; }

/* Inline review card — slides above the footer with the structured response. */
.pplan-review-card {
    position: relative;
    margin: 10px 12px;
    padding: 14px 36px 14px 16px;
    background: #f4fbf6;
    border: 1px solid #b8d9c6;
    border-left: 4px solid #1a6b3c;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(26, 107, 60, 0.08);
    flex-shrink: 0;
}
.pplan-review-card.pplan-review-error {
    background: #fff8f8;
    border-color: #f0a0a0;
    border-left-color: #c0392b;
}
.pplan-review-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.pplan-review-close:hover { background: #e6f5ec; color: #1a6b3c; }
.pplan-review-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pplan-review-icon { font-size: 1.05rem; line-height: 1; }
.pplan-review-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #145530;
}
.pplan-review-summary {
    font-size: 0.88rem;
    color: #333;
    line-height: 1.45;
    margin-bottom: 8px;
}
.pplan-review-section {
    margin: 8px 0;
}
.pplan-review-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #145530;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.pplan-review-missing    .pplan-review-section-title { color: #b54708; }
.pplan-review-sequence   .pplan-review-section-title { color: #1e40af; }
.pplan-review-pacing     .pplan-review-section-title { color: #92400e; }
.pplan-review-suggestions .pplan-review-section-title { color: #1a6b3c; }
.pplan-review-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.45;
}
.pplan-review-list li { margin: 2px 0; }

@media (max-width: 540px) {
    .pplan-tpl-btn span,
    .pplan-ics-btn span { display: none; }
    .pplan-today-strip { padding: 4px 8px 2px; }
    .pplan-strip-count { font-size: 1.05rem; }
    .pplan-strip-label { font-size: 0.65rem; }
}

/* ── Due date input ─────────────────────────────────────────────────────── */

.pplan-due {
    border: 1px solid #d0d6dd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.75rem;
    color: #555;
    background: #fff;
    flex-shrink: 0;
    width: 110px;
}
.pplan-due:focus { outline: none; border-color: #1a6b3c; }
.pplan-overdue .pplan-due { border-color: #f0a0a0; color: #c0392b; }

.pplan-del-task {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    color: #ccc;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.12s;
}
.pplan-del-task:hover { color: #c0392b; }

/* ── Subtasks section ───────────────────────────────────────────────────── */

.pplan-subtasks {
    padding: 0 8px 8px 36px;
}
.pplan-collapsed { display: none; }

.pplan-notes-row {
    margin-bottom: 6px;
}

.pplan-notes {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #e0e5ea;
    font-size: 0.78rem;
    color: #666;
    padding: 2px 4px;
    background: transparent;
    font-style: italic;
}
.pplan-notes:focus { outline: none; border-bottom-color: #1a6b3c; }

.pplan-sub {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #f3f5f7;
}
.pplan-sub:last-of-type { border-bottom: none; }
.pplan-sub-done .pplan-sub-title { text-decoration: line-through; color: #aaa; }

.pplan-sub-check {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #1a6b3c;
    flex-shrink: 0;
}

.pplan-sub-title {
    flex: 1;
    border: none;
    border-bottom: 1px solid transparent;
    font-size: 0.81rem;
    color: #444;
    padding: 1px 4px;
    background: transparent;
    transition: border-color 0.12s;
    min-width: 0;
}
.pplan-sub-title:focus { outline: none; border-bottom-color: #1a6b3c; }

.pplan-del-sub {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: #ccc;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.12s;
}
.pplan-del-sub:hover { color: #c0392b; }

.pplan-add-sub-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px dashed #8dc5a6;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.12s;
}
.pplan-add-sub-btn:hover { background: #d8edd5; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.pplan-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e5e9ef;
    background: #f7f9fb;
    flex-shrink: 0;
}


.pplan-add-btn {
    padding: 7px 14px;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px solid #8dc5a6;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.pplan-add-btn:hover { background: #d8edd5; }

.pplan-save-btn {
    padding: 7px 16px;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    margin-left: auto;
}
.pplan-save-btn:hover    { background: #145530; }
.pplan-save-btn:disabled { background: #8dc5a6; cursor: default; }

/* ── Reset button ────────────────────────────────────────────────────── */
.pplan-reset-btn {
    padding: 6px 11px;
    background: transparent;
    color: #a0836a;
    border: 1px solid #d4bfb0;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin-left: 4px;
    opacity: 0.75;
}
.pplan-reset-btn:hover {
    background: #fdf0eb;
    border-color: #c0392b;
    color: #c0392b;
    opacity: 1;
}

/* ── Reset confirmation bar ──────────────────────────────────────────── */
.pplan-reset-confirm-msg {
    font-size: 0.82rem;
    color: #7a3a2a;
    flex: 1;
    line-height: 1.3;
}
.pplan-reset-confirm-yes {
    padding: 6px 13px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s;
}
.pplan-reset-confirm-yes:hover    { background: #a52e22; }
.pplan-reset-confirm-yes:disabled { background: #e08070; cursor: default; }
.pplan-reset-confirm-no {
    padding: 6px 13px;
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.pplan-reset-confirm-no:hover { background: #e0e0e0; }

/* ── Task meta row (category badge + due date) ───────────────────────── */

.pplan-task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 6px 28px;
}

/* ── Wizard finish / summary screen ─────────────────────────────────── */

.pplan-wiz-finish-hdr {
    justify-content: center;
    gap: 8px;
}
.pplan-wiz-finish-hdr .pplan-wiz-chapter-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2a1e;
}

.pplan-wiz-finish-count {
    font-size: 0.82rem;
    color: #666;
    flex-shrink: 0;
}

/* Tap-to-remove task rows on finish screen */
.pplan-wiz-sum-toggleable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #e5e9ef;
    margin-bottom: 5px;
    cursor: default;
    background: #fff;
    transition: opacity 0.15s, background 0.12s;
    position: relative;
}
/* Subtle hover on the row reveals the X more strongly, but the row itself is
   no longer a click target — the X is. Prevents accidental task removal during
   review-before-save. */
.pplan-wiz-sum-toggleable:hover .pplan-wiz-sum-remove {
    opacity: 0.8;
}

.pplan-wiz-sum-icon {
    font-size: 0.8rem;
    color: #1a6b3c;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.pplan-wiz-sum-title {
    flex: 1;
    font-size: 0.86rem;
    color: #1a2a1e;
    min-width: 0;
    line-height: 1.35;
}

.pplan-wiz-sum-remove {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #c0392b;
    opacity: 0.4;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
    padding: 4px 8px;
    margin: -4px -4px -4px 0;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
}
.pplan-wiz-sum-remove:hover {
    opacity: 1;
    background: #fde8e6;
    color: #a0211a;
}
.pplan-wiz-sum-remove:focus-visible {
    outline: 2px solid #c0392b;
    outline-offset: 1px;
    opacity: 1;
}

@keyframes pplan-row-out {
    from { opacity: 1; max-height: 60px; margin-bottom: 5px; padding-top: 7px; padding-bottom: 7px; }
    to   { opacity: 0; max-height: 0;    margin-bottom: 0;   padding-top: 0;   padding-bottom: 0; }
}
.pplan-wiz-sum-removed {
    animation: pplan-row-out 0.25s ease forwards;
    overflow: hidden;
    pointer-events: none;
}

/* Chapter header within finish screen */
.pplan-wiz-finish-ch-hdr {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #888;
    padding: 10px 2px 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD CSS — plan builder overlay
   ═══════════════════════════════════════════════════════════════════════════ */

/* Widen tool canvas when wizard is active */
#panama-workspace.pplan-wizard-mode #panama-tool-canvas {
    width: 700px;
    min-width: 700px;
    max-width: 700px;
}

/* ── Choice screen (auto-generate vs guided wizard) ──────────────────────── */

.pplan-choice-screen {
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: min-content;
    box-sizing: border-box;
}

.pplan-choice-icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 4px;
}

.pplan-choice-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2a1e;
    text-align: center;
    margin: 0 0 4px;
}

.pplan-choice-intro {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.5;
}

.pplan-choice-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pplan-choice-card {
    border: 2px solid #e5e9ef;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}
.pplan-choice-card:hover { border-color: #1a6b3c; background: #f7fbf8; }

.pplan-choice-card-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #1a6b3c;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    margin-bottom: 6px;
}
.pplan-choice-auto .pplan-choice-card-badge  { background: #1a6b3c; }
.pplan-choice-wizard .pplan-choice-card-badge { background: #2563eb; }

.pplan-choice-card-icon  { font-size: 1.5rem; margin-bottom: 4px; }
.pplan-choice-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2a1e;
    margin-bottom: 4px;
}
.pplan-choice-card-desc {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.45;
}

.pplan-choice-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.12s;
    width: 100%;
    margin-top: 4px;
}
.pplan-choice-btn-primary   { background: #1a6b3c; color: #fff; }
.pplan-choice-btn-primary:hover  { background: #145530; }
.pplan-choice-btn-secondary { background: #f0f7f3; color: #1a6b3c; border: 1px solid #8dc5a6; }
.pplan-choice-btn-secondary:hover { background: #d8edd5; }

/* ── Pre-generation confirmation panel ─────────────────────────────────────── */

.pplan-confirm-screen {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;
}

.pplan-confirm-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: #1a6b3c;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: -8px;
}
.pplan-confirm-back:hover { text-decoration: underline; }

.pplan-confirm-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a2a1e;
    margin: 0;
}

.pplan-confirm-intro {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 8px;
    padding: 10px 12px;
    background: #f7fbf8;
    border-left: 3px solid #1a6b3c;
    border-radius: 4px;
}

.pplan-confirm-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pplan-confirm-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2a1e;
}

.pplan-confirm-hint {
    font-size: 0.75rem;
    color: #888;
    margin: 0 0 4px;
    line-height: 1.45;
}

.pplan-confirm-input,
.pplan-confirm-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d4d8dd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1a2a1e;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.12s;
}
.pplan-confirm-input:focus,
.pplan-confirm-textarea:focus {
    outline: none;
    border-color: #1a6b3c;
}
.pplan-confirm-textarea {
    resize: vertical;
    line-height: 1.45;
    min-height: 90px;
}

.pplan-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
    align-items: center;
}

.pplan-chip-empty {
    font-size: 0.78rem;
    color: #aaa;
    font-style: italic;
}

.pplan-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f3ec;
    color: #1a4a2a;
    border: 1px solid #b6d8c1;
    border-radius: 16px;
    padding: 3px 4px 3px 10px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.pplan-chip-group-concern .pplan-chip {
    background: #fbeee6;
    color: #6d3015;
    border-color: #e8c1a1;
}

.pplan-chip-text { white-space: nowrap; }

.pplan-chip-x {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.55;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 50%;
    transition: opacity 0.12s, background 0.12s;
}
.pplan-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.08); }

.pplan-chip-add {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.pplan-chip-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d4d8dd;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
}
.pplan-chip-input:focus { outline: none; border-color: #1a6b3c; }

.pplan-chip-add-btn {
    padding: 6px 14px;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px solid #8dc5a6;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.pplan-chip-add-btn:hover { background: #d8edd5; }

.pplan-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.pplan-confirm-go,
.pplan-confirm-skip {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    width: 100%;
    border: none;
    font-family: inherit;
}
.pplan-confirm-go {
    background: #1a6b3c;
    color: #fff;
}
.pplan-confirm-go:hover { background: #145530; }
.pplan-confirm-skip {
    background: transparent;
    color: #666;
    border: 1px solid #d4d8dd;
}
.pplan-confirm-skip:hover { background: #f5f5f5; color: #1a2a1e; }

/* ── Generating spinner state ──────────────────────────────────────────────── */

.pplan-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    gap: 12px;
    text-align: center;
}

.pplan-generating-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e9ef;
    border-top-color: #1a6b3c;
    border-radius: 50%;
    animation: pplanSpin 0.8s linear infinite;
}

@keyframes pplanSpin {
    to { transform: rotate(360deg); }
}

.pplan-generating-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a2a1e;
    margin: 0;
}

.pplan-generating-sub {
    font-size: 0.82rem;
    color: #888;
    margin: 0;
}

/* ── Wizard panel overlay ─────────────────────────────────────────────────── */

.pplan-wizard-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    z-index: 5;
    overflow: hidden;
}

/* ── Wizard header ────────────────────────────────────────────────────────── */

.pplan-wiz-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e5e9ef;
    flex-shrink: 0;
    background: #f7fbf8;
}

.pplan-wiz-step-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #888;
    flex-shrink: 0;
}

.pplan-wiz-chapter-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2a1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pplan-wiz-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.pplan-wiz-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0d8dd;
    transition: background 0.2s;
}
.pplan-wiz-dot.active { background: #1a6b3c; }
.pplan-wiz-dot.done   { background: #8dc5a6; }

/* ── Wizard body (scrollable) ─────────────────────────────────────────────── */

.pplan-wiz-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
}
.pplan-wiz-body::-webkit-scrollbar { width: 4px; }
.pplan-wiz-body::-webkit-scrollbar-thumb { background: #c8d8cc; border-radius: 2px; }

.pplan-wiz-desc {
    font-size: 0.82rem;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.5;
}

/* ── Wizard footer ────────────────────────────────────────────────────────── */

.pplan-wiz-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #e5e9ef;
    background: #f7f9fb;
    flex-shrink: 0;
}

.pplan-wiz-back-btn {
    padding: 8px 14px;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px solid #8dc5a6;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.pplan-wiz-back-btn:hover { background: #d8edd5; }

.pplan-wiz-next-btn {
    margin-left: auto;
    padding: 8px 18px;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
}
.pplan-wiz-next-btn:hover    { background: #145530; }
.pplan-wiz-next-btn:disabled { background: #8dc5a6; cursor: default; }

/* ── Task list (step screen) ──────────────────────────────────────────────── */

.pplan-wiz-task-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.pplan-wiz-task {
    border: 1px solid #e5e9ef;
    border-radius: 7px;
    background: #fff;
    transition: border-color 0.12s;
    overflow: hidden;
}
.pplan-wiz-task:hover { border-color: #8dc5a6; }

.pplan-wiz-task-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px 7px;
    cursor: pointer;
}

.pplan-wiz-task-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    accent-color: #1a6b3c;
}

.pplan-wiz-task-title {
    flex: 1;
    font-size: 0.86rem;
    color: #1a2a1e;
    line-height: 1.4;
    user-select: none;
}

/* Subtasks container inside each task */
.pplan-wiz-subtasks {
    padding: 4px 10px 8px 34px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pplan-wiz-sub-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
}

.pplan-wiz-sub-cb {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #1a6b3c;
}

.pplan-wiz-sub-title {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.35;
    user-select: none;
}

@keyframes pplan-sub-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pplan-wiz-sub-new { animation: pplan-sub-fadein 0.2s ease; }

/* Inline add-subtask row */
.pplan-wiz-inline-sub-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 8px 34px;
}

.pplan-wiz-inline-sub-input {
    flex: 1;
    border: 1px solid #d0d8dd;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
}
.pplan-wiz-inline-sub-input:focus  { border-color: #1a6b3c; }
.pplan-wiz-inline-sub-input:disabled { background: #f5f5f5; }

.pplan-wiz-inline-sub-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f0f7f3;
    color: #1a6b3c;
    border: 1px solid #8dc5a6;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}
.pplan-wiz-inline-sub-btn:hover    { background: #d8edd5; }
.pplan-wiz-inline-sub-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Custom task section ──────────────────────────────────────────────────── */

.pplan-wiz-custom-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #d0d8dd;
}

.pplan-wiz-custom-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.pplan-wiz-custom-input {
    flex: 1;
    border: 1px solid #d0d8dd;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 0.83rem;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
}
.pplan-wiz-custom-input:focus { border-color: #1a6b3c; }

.pplan-wiz-custom-add-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.pplan-wiz-custom-add-btn:hover { background: #145530; }

.pplan-wiz-custom-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pplan-wiz-custom-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 5px;
    background: #f0f7f3;
    font-size: 0.82rem;
    color: #1a2a1e;
}

.pplan-wiz-custom-label {
    flex: 1;
    font-size: 0.82rem;
    color: #1a2a1e;
}

.pplan-wiz-custom-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #aaa;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.12s;
}
.pplan-wiz-custom-remove:hover { color: #c0392b; }

/* ── Welcome screen ───────────────────────────────────────────────────────── */

.pplan-wiz-welcome-panel .pplan-wiz-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 24px;
}

.pplan-wiz-welcome-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.pplan-wiz-welcome-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2a1e;
    margin: 0 0 8px;
    line-height: 1.35;
}

.pplan-wiz-welcome-sub {
    font-size: 0.84rem;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.5;
    max-width: 340px;
}

.pplan-wiz-welcome-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-bottom: 24px;
    text-align: left;
}

.pplan-wiz-welcome-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f0f7f3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #333;
    line-height: 1.45;
}

.pplan-wiz-welcome-tip-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.pplan-wiz-welcome-btn {
    padding: 11px 28px;
    background: #1a6b3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
}
.pplan-wiz-welcome-btn:hover { background: #145530; }

/* ── Finish / summary screen ──────────────────────────────────────────────── */

.pplan-wiz-finish-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pplan-wiz-finish-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2a1e;
    margin: 0;
    flex: 1;
}

.pplan-wiz-finish-sub {
    font-size: 0.78rem;
    color: #888;
    margin: 4px 0 0;
    width: 100%;
}

.pplan-wiz-summary {
    display: flex;
    flex-direction: column;
}

.pplan-wiz-summary-chapter {
    margin-bottom: 8px;
}

.pplan-wiz-summary-ch-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #888;
    padding: 8px 2px 4px;
}

.pplan-wiz-summary-count {
    margin-left: auto;
    background: #e5e9ef;
    color: #555;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 800px) {
    #panama-workspace.pplan-wizard-mode #panama-tool-canvas {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* ── Planner: completed task treatment ───────────────────────────────────── */

.pplan-task.pplan-done {
    background: #f7fdf9;
    border-color: #c3e6cb;
}
.pplan-task.pplan-done .pplan-title {
    text-decoration: line-through;
    color: #999;
}

.pplan-done-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: #1a6b3c;
    background: #d1fae5;
    border-radius: 10px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* ── Show/Hide completed toggle bar ──────────────────────────────────────── */

.pplan-done-toggle-bar {
    padding: 4px 10px 2px;
    display: flex;
    justify-content: flex-end;
}

.pplan-done-toggle {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: #888;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.12s;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pplan-done-toggle:hover { color: #1a6b3c; }

/* ── Subtask done state ───────────────────────────────────────────────────── */

.pplan-sub-done .pplan-sub-title,
.pplan-sub-title-done {
    text-decoration: line-through;
    color: #aaa;
}

/* ── Subtask main row (with expand button) ───────────────────────────────── */

.pplan-sub-main {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    width: 100%;
    box-sizing: border-box;
}

#pplan-task-list .pplan-sub-title,
.pplan-sub-main > input.pplan-sub-title {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Expand (…) button */
.pplan-sub-expand {
    background: none;
    border: 1px solid #d8e2dc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: #888;
    padding: 1px 6px;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1.4;
}
.pplan-sub-expand:hover,
.pplan-sub-expand-open { background: #f0f7f3; color: #1a6b3c; border-color: #8dc5a6; }

/* ── Subtask metadata panel ───────────────────────────────────────────────── */

.pplan-sub-meta {
    margin: 4px 0 8px 24px;
    background: #f7fbf8;
    border: 1px solid #d8ead0;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pplan-sub-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pplan-sub-meta-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pplan-sub-meta-full {
    grid-column: 1 / -1;
}

.pplan-sub-meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.pplan-sub-meta-input {
    border: 1px solid #d0d8dd;
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 0.8rem;
    color: #333;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.12s;
}
.pplan-sub-meta-input:focus { outline: none; border-color: #1a6b3c; }

.pplan-sub-meta-notes {
    resize: vertical;
    min-height: 48px;
}

.pplan-sub-meta-close {
    align-self: flex-end;
    background: none;
    border: 1px solid #d0d8dd;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #888;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    margin-top: 2px;
}
.pplan-sub-meta-close:hover { background: #f5f5f5; color: #333; }


/* ══════════════════════════════════════════════════════════════════
   CHAT PAGE THEMES
   Applied via body class: vp-theme-parchment | vp-theme-jungle | vp-theme-slate
   Default (cream) needs no class — existing styles cover it.
══════════════════════════════════════════════════════════════════ */

/* ── Theme picker button ─────────────────────────────────────────── */
#vp-theme-btn {
    background: white;
    border: 1px solid #b8d0e8;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    margin-left: 0;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
}
#vp-theme-btn:hover { background: #d6eaf8; border-color: #2271b1; }

/* ── Theme picker popover ────────────────────────────────────────── */
#vp-theme-picker {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 12px;
    display: none;
    gap: 8px;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    white-space: nowrap;
}
#vp-theme-picker.open { display: flex; }
.vp-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    position: relative;
}
.vp-swatch:hover { transform: scale(1.15); }
.vp-swatch.active { border-color: #0F6E56; }
.vp-swatch[data-theme="default"]    { background: #F5F0E6; border-color: #c8b89a; }
.vp-swatch[data-theme="parchment"]  { background: #C8A96E; }
.vp-swatch[data-theme="jungle"]     { background: #1C3A0D; }
.vp-swatch[data-theme="slate"]      { background: #2a3341; }
.vp-swatch.active::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: bold;
    color: #0F6E56;
    line-height: 1;
}
.vp-swatch[data-theme="jungle"].active::after,
.vp-swatch[data-theme="slate"].active::after { color: #a8d090; }

.vp-theme-tooltip {
    font-size: 11px;
    color: #888;
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding-top: 4px;
    text-align: center;
    display: block;
}
.vp-theme-tooltip a { color: #0F6E56; text-decoration: none; }

/* ── PARCHMENT ───────────────────────────────────────────────────── */
body.vp-theme-parchment.panama-chat-page { background: #E8DCC8; }
body.vp-theme-parchment #panama-workspace {
    background: #f0e8d6;
    border-color: #c8b89a;
}
body.vp-theme-parchment #panama-tool-canvas {
    background: #f5ede0;
    border-right-color: #c8b89a;
}
body.vp-theme-parchment #panama-tool-bar {
    background: #d4c9b0;
    border-bottom-color: #b8a880;
}
body.vp-theme-parchment .panama-tool-btn {
    background: #f5ede0;
    border-color: #b8a880;
    color: #5c4a2a;
}
body.vp-theme-parchment .panama-tool-btn:hover { background: #e0d4b8; border-color: #8a6a30; }
body.vp-theme-parchment .panama-tool-btn.active { background: #8a6a30; border-color: #6a4e20; color: white; }
body.vp-theme-parchment #vp-theme-btn { background: #f5ede0; border-color: #b8a880; color: #5c4a2a; }
body.vp-theme-parchment #vp-theme-btn:hover { background: #e0d4b8; }
body.vp-theme-parchment #vp-theme-picker { background: #f5ede0; border-color: #c8b89a; }
body.vp-theme-parchment #panama-tool-header { background: #e8dcc8; border-bottom-color: #c8b89a; }
body.vp-theme-parchment #panama-tool-title { color: #3a2e1e; }
body.vp-theme-parchment #panama-tool-close { background: #f5ede0; border-color: #c8b89a; color: #5c4a2a; }
body.vp-theme-parchment #panama-fullpage-messages { background: #f0e8d6; }
body.vp-theme-parchment .panama-fp-message.assistant { background: #fff8ef; color: #3a2e1e; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
body.vp-theme-parchment #panama-fullpage-input-area { background: #e8dcc8; border-top-color: #c8b89a; }
body.vp-theme-parchment #panama-fullpage-input { background: #fff8ef; border-color: #c8b89a; color: #3a2e1e; }

/* ── JUNGLE NIGHT ────────────────────────────────────────────────── */
body.vp-theme-jungle.panama-chat-page { background: #0D1F0A; }
body.vp-theme-jungle #panama-workspace {
    background: #142010;
    border-color: #2a4a20;
}
body.vp-theme-jungle #panama-tool-canvas {
    background: #1a2e17;
    border-right-color: #2a4a20;
}
body.vp-theme-jungle #panama-tool-bar {
    background: #1C3A0D;
    border-bottom-color: #2a4a20;
}
body.vp-theme-jungle .panama-tool-btn {
    background: #243d1a;
    border-color: #3a6028;
    color: #a8d090;
}
body.vp-theme-jungle .panama-tool-btn:hover { background: #2e5020; border-color: #5a9040; }
body.vp-theme-jungle .panama-tool-btn.active { background: #4a8c30; border-color: #3a7020; color: white; }
body.vp-theme-jungle #vp-theme-btn { background: #243d1a; border-color: #3a6028; color: #a8d090; }
body.vp-theme-jungle #vp-theme-btn:hover { background: #2e5020; }
body.vp-theme-jungle #vp-theme-picker { background: #1C3A0D; border-color: #3a6028; }
body.vp-theme-jungle #panama-tool-header { background: #1a2e17; border-bottom-color: #2a4a20; }
body.vp-theme-jungle #panama-tool-title { color: #d0e8b8; }
body.vp-theme-jungle #panama-tool-close { background: #243d1a; border-color: #3a6028; color: #a8d090; }
body.vp-theme-jungle #panama-fullpage-messages { background: #142010; }
body.vp-theme-jungle .panama-fp-message.assistant { background: #1e3418; color: #d0e8b8; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
body.vp-theme-jungle #panama-fullpage-input-area { background: #1C3A0D; border-top-color: #2a4a20; }
body.vp-theme-jungle #panama-fullpage-input { background: #1a2e17; border-color: #3a6028; color: #d0e8b8; }
body.vp-theme-jungle #panama-fullpage-input::placeholder { color: #6a9858; }

/* ── SLATE ───────────────────────────────────────────────────────── */
body.vp-theme-slate.panama-chat-page { background: #161d27; }
body.vp-theme-slate #panama-workspace {
    background: #1e2530;
    border-color: #3a4555;
}
body.vp-theme-slate #panama-tool-canvas {
    background: #252d3a;
    border-right-color: #3a4555;
}
body.vp-theme-slate #panama-tool-bar {
    background: #2a3341;
    border-bottom-color: #3a4555;
}
body.vp-theme-slate .panama-tool-btn {
    background: #323d4e;
    border-color: #4a556e;
}

/* ── Planner: cleanup pass 2026-05-03 ───────────────────────────────────── */

/* Stronger title — Astra's input rules sometimes win without specificity. */
input.pplan-title {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #1a2a1e !important;
    letter-spacing: 0.005em;
}
.pplan-done input.pplan-title {
    color: #999 !important;
    text-decoration: line-through;
}

/* ── Shared date fields — compact width, custom calendar icon (all tools) ── */
input.pplan-due[type="date"],
input.pplan-sub-due[type="date"],
.panama-budget-item input.pbi-date[type="date"],
.pplan-suggest-dates-date-input[type="date"],
.ptrip-meta-row input[type="date"],
.ptrip-row input[type="date"],
input.panama-date-field[type="date"] {
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    text-align: left;
}
input.pplan-due[type="date"],
.ptrip-meta-row input[type="date"],
.ptrip-row input[type="date"],
input.panama-date-field[type="date"]:not(.pplan-sub-due):not(.pplan-suggest-dates-date-input) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    padding: 3px 6px !important;
}
input.pplan-sub-due[type="date"] {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    padding: 2px 5px !important;
}
.panama-budget-item input.pbi-date[type="date"] {
    width: 110px !important;
    min-width: 0 !important;
    max-width: 110px !important;
    padding: 4px 6px !important;
}
.pplan-suggest-dates-inner #pplan-suggest-dates-input[type="date"],
.pplan-suggest-dates-date-input[type="date"],
input.panama-date-field.pplan-suggest-dates-date-input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 9px 36px 9px 12px !important;
    font-size: 0.92rem !important;
}
/* Desk-calendar icon — native WebKit flow (text left, icon right) */
input.pplan-due[type="date"]::-webkit-calendar-picker-indicator,
input.pplan-sub-due[type="date"]::-webkit-calendar-picker-indicator,
.panama-budget-item input.pbi-date[type="date"]::-webkit-calendar-picker-indicator,
.pplan-suggest-dates-date-input[type="date"]::-webkit-calendar-picker-indicator,
.ptrip-meta-row input[type="date"]::-webkit-calendar-picker-indicator,
.ptrip-row input[type="date"]::-webkit-calendar-picker-indicator,
input.panama-date-field[type="date"]::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 0 0 4px;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='15' rx='1.5' fill='none' stroke='%230F6E56' stroke-width='1.35'/%3E%3Crect x='2' y='3' width='16' height='4' rx='1.5' fill='%230F6E56' fill-opacity='0.38'/%3E%3Cpath stroke='%230F6E56' stroke-width='1.1' d='M2 7h16'/%3E%3Ccircle cx='6' cy='10.5' r='.8' fill='%230F6E56'/%3E%3Ccircle cx='10' cy='10.5' r='.8' fill='%230F6E56'/%3E%3Ccircle cx='14' cy='10.5' r='.8' fill='%230F6E56'/%3E%3Ccircle cx='6' cy='14' r='.8' fill='%230F6E56'/%3E%3Ccircle cx='10' cy='14' r='.8' fill='%230F6E56'/%3E%3Ccircle cx='14' cy='14' r='.8' fill='%230F6E56'/%3E%3C/svg%3E") !important;
    background-size: 15px 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
input.pplan-due[type="date"]:hover::-webkit-calendar-picker-indicator,
input.pplan-sub-due[type="date"]:hover::-webkit-calendar-picker-indicator,
.panama-budget-item input.pbi-date[type="date"]:hover::-webkit-calendar-picker-indicator,
input.panama-date-field[type="date"]:hover::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='15' rx='1.5' fill='none' stroke='%23145a38' stroke-width='1.35'/%3E%3Crect x='2' y='3' width='16' height='4' rx='1.5' fill='%23145a38' fill-opacity='0.5'/%3E%3Cpath stroke='%23145a38' stroke-width='1.1' d='M2 7h16'/%3E%3Ccircle cx='6' cy='10.5' r='.8' fill='%23145a38'/%3E%3Ccircle cx='10' cy='10.5' r='.8' fill='%23145a38'/%3E%3Ccircle cx='14' cy='10.5' r='.8' fill='%23145a38'/%3E%3Ccircle cx='6' cy='14' r='.8' fill='%23145a38'/%3E%3Ccircle cx='10' cy='14' r='.8' fill='%23145a38'/%3E%3Ccircle cx='14' cy='14' r='.8' fill='%23145a38'/%3E%3C/svg%3E") !important;
}

/* Task-level due date */
input.pplan-due[type="date"] {
    font-size: 0.75rem !important;
    color: #555 !important;
    background: #fff !important;
}

/* Subtask-level due date */
input.pplan-sub-due[type="date"] {
    border: 1px solid #e0e5ea !important;
    border-radius: 4px;
    font-size: 0.7rem !important;
    color: #777 !important;
    background: #fff !important;
}
input.pplan-sub-due[type="date"]:hover { border-color: #c0d0c5 !important; }
input.pplan-sub-due[type="date"]:focus {
    outline: none;
    border-color: #1a6b3c !important;
    color: #333 !important;
}
.pplan-sub-done input.pplan-sub-due[type="date"] { opacity: 0.5; }

/* Header ✕ Delete-task icon — sits at the right edge of the task header. */
button.pplan-del-task-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #b8c0c8 !important;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px 7px !important;
    margin: 0 !important;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
    text-shadow: none !important;
    height: auto !important;
    min-width: 0 !important;
    width: auto !important;
}
button.pplan-del-task-icon:hover {
    color: #c0392b !important;
    background: #fde8e6 !important;
}
button.pplan-del-task-icon:focus {
    outline: 1px dotted #c0392b;
    outline-offset: 1px;
}

/* Defensive: hide the old big bottom Delete button if any cached JS still renders it. */
.pplan-task-actions .pplan-del-btn { display: none !important; }

/* Tighten the actions row now that it's just '+ Add subtask'. */
.pplan-task-actions {
    padding: 4px 8px 8px 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Meta row: allow gentle wrapping if a long category label + date + priority overflow. */
.pplan-task-meta {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Tiny 'Due:' label that sits before the task-level date input. */
.pplan-due-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a939d;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ============================================================
   Streaming UX polish (v2.35) — typing indicator + edge cursor
   ============================================================
   Replaces static "Thinking..." with three breathing dots while
   waiting for Río's first chunk; once streaming begins, a
   blinking cursor follows the last character so the response
   feels alive rather than dumped.
   ------------------------------------------------------------ */

/* Three bouncing dots that appear while the assistant is
   "thinking" (between user-send and first streamed chunk). */
.panama-typing-indicator {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 6px 2px;
    line-height: 1;
}
.panama-typing-indicator .panama-typing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0F6E56; /* brand teal */
    opacity: 0.4;
    animation-name: panamaTypingBounce !important;
    animation-duration: 1.2s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
}
.panama-typing-indicator .panama-typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.panama-typing-indicator .panama-typing-dot:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes panamaTypingBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.35; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* Blinking cursor at the streaming text edge. Removed by
   finishStream() when the response is complete. */
.panama-stream-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #0F6E56;
    animation: panamaCursorBlink 1s steps(2) infinite;
}
@keyframes panamaCursorBlink { 50% { opacity: 0; } }

/* Respect users who prefer reduced motion — drop the bounce
   and blink animations but keep the elements visible. */
@media (prefers-reduced-motion: reduce) {
    .panama-typing-indicator .panama-typing-dot,
    .panama-stream-cursor {
        animation: none;
    }
    .panama-typing-indicator .panama-typing-dot { opacity: 0.6; }
}

/* ============================================================
   Card-list formatting for labeled enumerations (v2.36)
   ============================================================
   When Río outputs 3+ consecutive paragraphs that look like
   "**Term** — explanation" (visa types, banks, neighborhoods),
   panamaWrapCardLists() groups them as a card list so each item
   reads as a discrete, scannable unit instead of a wall of
   bolded prose. CSS gives each card a soft tint, a teal
   accent stripe, and breathing room.
   ------------------------------------------------------------ */

.panama-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.panama-card-item {
    background: #f4f9f6;            /* soft brand-tinted neutral */
    border-left: 3px solid #0F6E56; /* teal accent stripe */
    border-radius: 4px;
    padding: 8px 12px;
    transition: background 0.15s ease;
}

.panama-card-item:hover {
    background: #ecf5ef;
}

/* Tighten the inner paragraph: cards already provide their own
   vertical rhythm via the gap on the list, so the wrapped <p>
   doesn't need its default margins. */
.panama-card-item p {
    margin: 0;
    line-height: 1.5;
}

/* The leading <strong> is the item's "label" — give it a touch
   more weight and a hint of teal so it pops against the body
   text without needing any change to Río's markdown. */
.panama-card-item p > strong:first-child {
    color: #0d5d49;
    font-weight: 700;
    margin-right: 2px;
}

/* Mobile tweaks: keep the cards but trim padding so they fit
   snugly inside the narrower mobile chat overlay. */
@media (max-width: 768px) {
    .panama-card-item {
        padding: 7px 10px;
    }
    .panama-card-list {
        gap: 5px;
        margin: 6px 0;
    }
}

/* ── Saved real-estate listing card (rendered after [SAVE_LISTING:] marker) ── */
.panama-listing-card {
    background: #fbfcf8;
    border: 1px solid #d6e3dd;
    border-left: 3px solid #0F6E56;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-size: 14px;
    color: #1a2d27;
}
.panama-listing-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.panama-listing-card-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.panama-listing-card-meta { flex: 1; min-width: 0; }
.panama-listing-card-title {
    font-weight: 600;
    color: #1a2d27;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panama-listing-card-sub {
    font-size: 12px;
    color: #50575e;
    margin-top: 2px;
}
/* ⚠️ amber callout — inline confirmation card version */
.panama-listing-card-notes,
/* ⚠️ same callout inside the Saved panel listing item */
.panama-listing-saved-notes {
    background: #fff7e5;
    border-left: 3px solid #c88a20;
    color: #604000;
    padding: 7px 10px;
    border-radius: 0 6px 6px 0;
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.45;
}
.panama-listing-card-status {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin-top: 8px;
}
.panama-listing-card-status-ok {
    color: #1a6b3c;
    font-style: normal;
    font-weight: 600;
}
.panama-listing-card-status-err {
    color: #b32d2e;
    font-style: normal;
    font-weight: 600;
}
.panama-listing-card-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.panama-listing-card-link {
    color: #0F6E56;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px dotted #0F6E56;
    padding-bottom: 1px;
}
.panama-listing-card-link:hover {
    color: #0d5d49;
    border-bottom-style: solid;
}

/* AI comment — Río's neutral orientation line, just below the title row */
.panama-listing-card-comment,
.panama-listing-saved-comment {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5853;
    font-style: italic;
}
.panama-listing-saved-comment {
    font-size: 12px;
    margin-top: 5px;
    padding-right: 10px;
}

/* Guest-mode conversion CTA — shown when a guest tries to save a listing */
.panama-listing-guest-cta {
    background: linear-gradient(135deg, #f6faf7 0%, #ecf5ef 100%);
    border: 1px solid #c8e0d4;
    border-left: 4px solid #0F6E56;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 14px;
    color: #1a2d27;
    line-height: 1.5;
}
.panama-listing-guest-cta-title {
    font-weight: 600;
    color: #0F6E56;
    margin-bottom: 4px;
}
.panama-listing-guest-cta-body {
    font-size: 13px;
    color: #4a5853;
    margin-bottom: 8px;
}
.panama-listing-guest-cta-link {
    display: inline-block;
    background: #0F6E56;
    color: white !important;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.15s;
}
.panama-listing-guest-cta-link:hover {
    background: #0d5d49;
    text-decoration: none;
}

/* Inline-card enrichment — thumb + spec pills */
.panama-listing-card-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8efea;
}
.panama-listing-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.panama-listing-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.panama-listing-card-spec-pill {
    background: #e8efea;
    color: #0d5d49;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* Saved-panel listing item enrichment */
.panama-listing-saved-toprow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.panama-listing-saved-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8efea;
}
.panama-listing-saved-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.panama-listing-saved-title-wrap {
    flex: 1;
    min-width: 0;
}
.panama-listing-saved-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.panama-listing-saved-spec-pill {
    background: #e8efea;
    color: #0d5d49;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

/* Risk indicator — PRIMARY: colored left stripe on the card edge.
   The corner dot is kept on the inline confirmation card (smaller surface,
   tooltip provides extra context) but removed on the Saved panel item
   (where the stripe + amber rio-notes callout carry the visual weight). */
.panama-listing-card,
.panama-listing-saved-item {
    position: relative;
}
/* Inline confirmation card already has a 3px brand-teal left border.
   When risk_level is present, widen and recolor it. */
.panama-listing-card {
    border-left-width: 6px;
}
.panama-listing-card.risk-green  { border-left-color: #1a6b3c; }
.panama-listing-card.risk-yellow { border-left-color: #c88a20; }
.panama-listing-card.risk-orange { border-left-color: #d35400; }

/* Saved-panel item has the existing route-item 1px border on all sides.
   Use box-shadow inset so we don't shift layout vs other Saved sections. */
.panama-listing-saved-item.risk-green  { box-shadow: inset 6px 0 0 #1a6b3c; }
.panama-listing-saved-item.risk-yellow { box-shadow: inset 6px 0 0 #c88a20; }
.panama-listing-saved-item.risk-orange { box-shadow: inset 6px 0 0 #d35400; }
.panama-listing-saved-item[class*="risk-"] {
    padding-left: 18px;  /* leave room for the inset stripe */
}

/* Corner dot — kept on the inline card only, removed on the Saved item.
   Slightly bigger and bolder than before (12px instead of 10px). */
.panama-listing-risk-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: help;
    transition: transform 0.15s ease-out;
}
.panama-listing-risk-dot:hover { transform: scale(1.3); }
.panama-listing-risk-dot.risk-green {
    background: #1a6b3c;
    box-shadow: 0 0 0 2px rgba(26, 107, 60, 0.22);
}
.panama-listing-risk-dot.risk-yellow {
    background: #c88a20;
    box-shadow: 0 0 0 2px rgba(200, 138, 32, 0.24);
}
.panama-listing-risk-dot.risk-orange {
    background: #d35400;
    box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.24);
}
/* Hide the dot on the Saved panel item — stripe replaces it there */
.panama-listing-saved-item .panama-listing-risk-dot {
    display: none;
}

/* Pre-screened-by-Rio disclaimer — soft + intentionally low-key */
.panama-listing-card-disclaimer,
.panama-listing-saved-disclaimer {
    margin-top: 8px;
    padding: 4px 0;
    font-size: 11px;
    color: #777;
    font-style: italic;
    line-height: 1.4;
    border-top: 1px dotted #e0e0e0;
}

/* ── Member's notes block on each saved listing ── */
.panama-listing-notes-block {
    grid-column: 1 / -1;
    margin-top: 10px;
    width: 100%;
}
.panama-listing-notes-toggle {
    background: transparent;
    border: 0;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: #0F6E56;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.panama-listing-notes-toggle:hover {
    color: #0d5d49;
    text-decoration: underline;
}
.panama-listing-notes-block.has-notes .panama-listing-notes-toggle {
    color: #0d5d49;
}
.panama-listing-notes-preview {
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-left: 22px;
    padding: 2px 0;
    line-height: 1.4;
    max-width: 540px;
}
.panama-listing-notes-block:not(.has-notes) .panama-listing-notes-preview {
    display: none;
}
.panama-listing-notes-editor {
    margin-top: 6px;
    padding: 8px;
    background: #fdfcf4;
    border: 1px solid #e6dfb8;
    border-radius: 6px;
}
.panama-listing-notes-editor[hidden] {
    display: none !important;
}
.panama-listing-notes-textarea {
    width: 100%;
    min-height: 90px;
    max-height: 280px;
    resize: vertical;
    border: 1px solid #d4c98a;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    font-family: inherit;
    background: #fffef9;
    color: #2c2400;
    box-sizing: border-box;
}
.panama-listing-notes-textarea:focus {
    outline: 2px solid #c88a20;
    outline-offset: -1px;
    border-color: #c88a20;
}
.panama-listing-notes-textarea::placeholder {
    color: #a89860;
    font-style: italic;
}
.panama-listing-notes-status {
    margin-top: 5px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    min-height: 14px;
}
.panama-listing-notes-status.ok  { color: #1a6b3c; font-style: normal; font-weight: 600; }
.panama-listing-notes-status.err { color: #b32d2e; font-style: normal; font-weight: 600; }

/* ── Listing action buttons (↗ open / 📁 archive / ↩ restore / 🗑 delete) ── */
.panama-listing-open,
.panama-listing-archive,
.panama-listing-restore,
.panama-listing-delete {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}
.panama-listing-open:hover    { background: #e8f4fd; border-color: #2271b1; }
.panama-listing-archive:hover { background: #f0f5e8; border-color: #5a8a3c; }
.panama-listing-restore:hover { background: #eef5f0; border-color: #0F6E56; }
.panama-listing-delete:hover  { background: #fdecea; border-color: #e74c3c; }

/* ── Archived listings drawer ──────────────────────────────────────────────── */
/* Toggle row — clickable header that shows/hides archived listings */
.panama-listing-archived-drawer {
    margin-top: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.panama-listing-archived-drawer:hover { background: #ebebeb; color: #555; }

/* Body (hidden by default, expanded on toggle) */
.panama-listing-archived-body { margin-top: 4px; }

/* Archived item — muted relative to active items */
.panama-listing-archived-item {
    opacity: 0.72;
}
.panama-listing-archived-item .panama-route-label {
    color: #666;
    text-decoration: line-through;
    text-decoration-color: #aaa;
}

/* ============================================================
   FULL-PAGE CHAT COLUMN — 820px centered rail (desktop)
   Toolbar + messages + input share one column; does not affect
   site header or tool-open (map/budget) split layout.
   ============================================================ */
@media (min-width: 769px) {
    body.panama-chat-page .site-main,
    body.panama-chat-page #main,
    body.panama-chat-page .site-content,
    body.panama-chat-page #content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) {
        justify-content: center;
        align-items: stretch;
        margin-top: 24px;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
        flex: 0 1 820px;
        max-width: 820px;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background: #f9f9f9;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-tool-bar {
        width: 100%;
        flex-shrink: 0;
        border-radius: 8px 8px 0 0;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-chat {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        border: none;
        border-radius: 0 0 8px 8px;
    }

    /* Stretch to column width — do not use margin:auto here (shrinks input bar). */
    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-messages,
    body.panama-chat-page #panama-workspace:not(.tool-open) .panama-msg-counter,
    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-input-area {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) .panama-fp-message {
        max-width: min(85%, 680px);
    }

    /* Input footer — full column width, matches messages panel */
    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-input-area {
        padding: 14px 20px 18px;
        gap: 12px;
        align-items: center;
        border-top: 1px solid #e0e0e0;
        background: #f9f9f9;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.4;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-send {
        flex: 0 0 auto;
        padding: 12px 22px;
        border-radius: 12px;
        white-space: nowrap;
    }

    body.panama-dark.panama-chat-page #panama-workspace:not(.tool-open) #panama-fullpage-input-area {
        background: #0e1614;
        border-top-color: #1f3029;
    }
}

/* Theme skins: workspace bg moves onto the centered chat column */
@media (min-width: 769px) {
    body.vp-theme-parchment.panama-chat-page #panama-workspace:not(.tool-open) {
        background: transparent;
    }
    body.vp-theme-parchment.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
        background: #f0e8d6;
        border-color: #c8b89a;
    }

    body.vp-theme-jungle.panama-chat-page #panama-workspace:not(.tool-open) {
        background: transparent;
    }
    body.vp-theme-jungle.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
        background: #142010;
        border-color: #2a4a20;
    }

    body.vp-theme-slate.panama-chat-page #panama-workspace:not(.tool-open) {
        background: transparent;
    }
    body.vp-theme-slate.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
        background: #1e2530;
        border-color: #3a4555;
    }

    body.panama-dark.panama-chat-page #panama-workspace:not(.tool-open) {
        background: transparent;
    }
    body.panama-dark.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
        background: #0e1614;
        border-color: #1f3029;
    }
}

/* ============================================================
   CHAT PAGE SURFACES — cream field + card column (light mode)
   Page chrome only; site header untouched. Shell = #panama-chat-panel.
   ============================================================ */
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) {
    background: #F5F0E6;
}
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) .site-content,
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) #content,
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) .site-main,
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) #main,
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) #primary {
    background: #F5F0E6;
}
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"]) #panama-workspace {
    background: transparent;
}
body.panama-chat-page:not(.panama-dark):not([class*="vp-theme-"])
    #panama-workspace:not(.tool-open) #panama-chat-panel {
    background: #ffffff;
    border-color: #e8e2d6;
    box-shadow: 0 2px 12px rgba(28, 58, 13, 0.08);
}

/* ============================================================
   CHAT PAGE — header-to-card spacing (desktop)
   Collapse theme top padding; single gap above the card (~44px).
   ============================================================ */
@media (min-width: 769px) {
    body.panama-chat-page .ast-container,
    body.panama-chat-page .ast-container > .ast-row,
    body.panama-chat-page #page,
    body.panama-chat-page article,
    body.panama-chat-page .hentry,
    body.panama-chat-page .entry-content,
    body.panama-chat-page .site-content,
    body.panama-chat-page .site-main,
    body.panama-chat-page #main,
    body.panama-chat-page #content,
    body.panama-chat-page #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.panama-chat-page #panama-workspace:not(.tool-open) {
        margin-top: 44px !important;
    }

    /* Tool-open: full-width split — toolbar spans both columns; canvas fills leftover space */
    body.panama-chat-page #panama-workspace.tool-open {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(280px, min(420px, 34vw));
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "pana-toolbar pana-toolbar"
            "pana-canvas pana-chat";
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }
    body.panama-chat-page #panama-workspace.tool-open #panama-chat-panel {
        display: contents;
    }
    body.panama-chat-page #panama-workspace.tool-open #panama-tool-bar {
        grid-area: pana-toolbar;
        width: 100%;
        max-width: none;
        flex: none;
        border-radius: 0;
    }
    body.panama-chat-page #panama-workspace.tool-open #panama-tool-canvas {
        grid-area: pana-canvas;
        display: flex !important;
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    body.panama-chat-page #panama-workspace.tool-open #panama-fullpage-chat {
        grid-area: pana-chat;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        width: 100%;
        border-left: 1px solid #e0e0e0;
        border-radius: 0;
    }
    body.panama-chat-page.panama-ws-tool-open .site-content,
    body.panama-chat-page.panama-ws-tool-open #content,
    body.panama-chat-page.panama-ws-tool-open article,
    body.panama-chat-page.panama-ws-tool-open .hentry,
    body.panama-chat-page.panama-ws-tool-open .entry-content {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   DARK MODE — late-night friendly skin (v1, 2026-05-10)
   ============================================================
   Activated by body.panama-dark (set by wp_body_open inline
   script reading localStorage `panaroxi-dark-mode`, falling
   back to OS `prefers-color-scheme: dark`). Toggle lives in
   the fullpage tool bar + mobile overlay header (sun/moon).

   Strategy: append-only overrides. Existing rules above stay
   byte-identical; dark mode wins via cascade order. Brand
   teal accent kept but brightened to ~#37c19e for AA contrast
   on dark backgrounds. Coverage: chat surfaces (widget,
   fullpage, mobile overlay), workspace panels (Plan, Budget,
   Trips), planner internals (tasks, modals, chips, today
   strip, review card), cards (offer, climate legend, label-
   list), inputs, lightbox.

   Palette (deepest → brightest):
     #0e1614  deepest page bg
     #13201c  chat surface
     #1a2d27  bubble / card / modal
     #243a32  hover / active panel
     #345a51  border
     #37c19e  accent (was #0F6E56 — brightened for contrast)
     #e6efea  primary text
     #a8b9b2  secondary text
     #6a7b75  tertiary / placeholder
   ------------------------------------------------------------ */

/* ── 1. Page surfaces ───────────────────────────────────── */
body.panama-dark { color-scheme: dark; }

/* ── 1b. Site-wide WordPress / Astra chrome (all pages) ── */
html body.panama-dark {
    background-color: #0e1614 !important;
}
body.panama-dark #page,
body.panama-dark .site,
body.panama-dark .site-content,
body.panama-dark #content,
body.panama-dark .site-main,
body.panama-dark #main,
body.panama-dark #primary,
body.panama-dark .ast-container,
body.panama-dark .ast-separate-container .ast-article-single,
body.panama-dark .hentry {
    background-color: #0e1614;
    color: #e6efea;
}
body.panama-dark #masthead,
body.panama-dark .site-header,
body.panama-dark header.site-header,
body.panama-dark .main-header-bar,
body.panama-dark .ast-primary-header-bar,
body.panama-dark .ast-main-header-wrap,
body.panama-dark .ast-above-header-bar,
body.panama-dark .ast-below-header-bar {
    background-color: #13201c !important;
    border-bottom: 1px solid #345a51 !important;
}
body.panama-dark .main-header-menu > .menu-item > .menu-link,
body.panama-dark .ast-header-navigation .menu-link,
body.panama-dark .site-header .menu-link,
body.panama-dark #masthead .main-header-menu a,
body.panama-dark #masthead .ast-builder-menu a {
    color: #e6efea !important;
}
body.panama-dark .main-header-menu > .menu-item > .menu-link:hover,
body.panama-dark .ast-header-navigation .menu-link:hover,
body.panama-dark #masthead .main-header-menu a:hover,
body.panama-dark #masthead .ast-builder-menu a:hover {
    color: #37c19e !important;
}
body.panama-dark .ast-mobile-menu-buttons-fill .menu-toggle,
body.panama-dark .menu-toggle,
body.panama-dark .ast-button-wrap .menu-toggle {
    color: #e6efea !important;
    background: transparent !important;
    border-color: #345a51 !important;
}
body.panama-dark .site-footer,
body.panama-dark footer.site-footer,
body.panama-dark .ast-footer-overlay,
body.panama-dark .site-below-footer-wrap {
    background-color: #0e1614 !important;
    color: #a8b9b2 !important;
    border-top: 1px solid #345a51 !important;
}
body.panama-dark .site-footer a,
body.panama-dark footer.site-footer a {
    color: #37c19e !important;
}
body.panama-dark .site-footer a:hover,
body.panama-dark footer.site-footer a:hover {
    color: #5fd3b0 !important;
}
/* Home hero stays deep green — header sits above it as its own bar */
body.panama-dark.vp-home-page #masthead,
body.panama-dark.vp-home-page .ast-primary-header-bar {
    background-color: #13201c !important;
}

body.panama-dark.panama-chat-page { background: #0e1614; }
body.panama-dark #panama-workspace { background: #0e1614; }
body.panama-dark #panama-chat-panel { background: #0e1614; }

/* ── 2. Corner widget (chat-box on home page) ───────────── */
body.panama-dark #panama-chat-box {
    background: #13201c;
    border: 1px solid #345a51;
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}
body.panama-dark #panama-chat-header {
    background: #0f4a3c;
    color: #e6efea;
    border-bottom: 1px solid #345a51;
}
body.panama-dark #panama-chat-messages { background: #13201c; }
body.panama-dark #panama-chat-input-area {
    background: #13201c;
    border-top: 1px solid #345a51;
}
body.panama-dark #panama-chat-input {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #e6efea;
}
body.panama-dark #panama-chat-input::placeholder { color: #6a7b75; }

/* Widget message bubbles */
body.panama-dark .panama-message.user {
    background: #1f4a40;
    color: #e6efea;
}
body.panama-dark .panama-message.assistant {
    background: #1a2d27;
    color: #d6e0db;
}

/* Floating chat button + teaser */
body.panama-dark #panama-chat-button {
    background: #0f4a3c;
    color: #e6efea;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
body.panama-dark #panama-chat-teaser .pct-line { color: #b8c8c0; }

/* ── 3. Fullpage chat ───────────────────────────────────── */
body.panama-dark #panama-fullpage-chat { background: #0e1614; }
body.panama-dark #panama-fullpage-messages { background: #0e1614; }
body.panama-dark .panama-fp-message.user {
    background: #1f4a40;
    color: #e6efea;
}
body.panama-dark .panama-fp-message.assistant {
    background: #13201c;
    color: #d6e0db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
body.panama-dark .panama-fp-message.assistant .panama-image-caption,
body.panama-dark .panama-fp-message.assistant .panama-place-photo-caption {
    color: #a8b9b2;
}
body.panama-dark .panama-fp-message.assistant .panama-place-photo-attr {
    color: #6a7b75;
}
body.panama-dark #panama-fullpage-input-area {
    background: #0e1614;
    border-top: 1px solid #1f3029;
}
body.panama-dark #panama-fullpage-input {
    background: #13201c;
    border: 1px solid #345a51;
    color: #e6efea;
}
body.panama-dark #panama-fullpage-input::placeholder { color: #6a7b75; }
body.panama-dark #panama-fullpage-send {
    background: #1e8869;
    color: #fff;
}
body.panama-dark #panama-fullpage-send:hover { background: #25a17e; }

/* ── 4. Mobile overlay ──────────────────────────────────── */
body.panama-dark #panama-mobile-scrim { background: #0e1614; }
body.panama-dark #panama-mobile-overlay { background: transparent; }
body.panama-dark #panama-mobile-header {
    background: #0f4a3c;
    color: #e6efea;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .panama-pwa-install-hint {
    background: #2a2418;
    border-bottom-color: #3d3528;
    color: #e8dfd0;
}
body.panama-dark .panama-pwa-share-icon { color: #5ac8fa; }
body.panama-dark .panama-pwa-install-dismiss { background: #1a7a5e; }
body.panama-dark .pmobile-header-actions button { color: #e6efea; }
body.panama-dark #panama-mobile-tabs {
    background: #13201c;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .pmobile-tab { color: #a8b9b2; }
body.panama-dark .pmobile-tab-active {
    color: #37c19e;
    border-bottom-color: #37c19e;
}
body.panama-dark #panama-mobile-messages { background: #0e1614; }
body.panama-dark .panama-mobile-message.user {
    background: #1f4a40;
    color: #e6efea;
}
body.panama-dark .panama-mobile-message.assistant {
    background: #13201c;
    color: #d6e0db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
body.panama-dark .panama-mobile-message.assistant .panama-image-caption,
body.panama-dark .panama-mobile-message.assistant .panama-place-photo-caption {
    color: #a8b9b2;
}
body.panama-dark .panama-mobile-message.assistant .panama-place-photo-attr {
    color: #6a7b75;
}
body.panama-dark #panama-mobile-input-area {
    background: #13201c;
    border-top: 1px solid #1f3029;
}
body.panama-dark .panama-mobile-voice-status {
    color: #a8c9bc;
    background: #152822;
    border-top-color: #1f3029;
}
body.panama-dark .panama-mobile-voice-status.is-listening {
    color: #f0a8a0;
    background: #2a1818;
    border-top-color: #4a2828;
}
body.panama-dark .panama-mobile-voice-status.is-processing {
    color: #f0d090;
    background: #2a2218;
    border-color: #4a3a28;
    border-top-color: #4a3a28;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.panama-dark .panama-mobile-voice-status.is-sending {
    color: #aaf0d8;
    background: #152822;
    border-color: #2a4a3a;
    border-top-color: #2a4a3a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.panama-dark #panama-mobile-mic.panama-mic-processing {
    background: #c96a1a;
    border-color: #c96a1a;
}
body.panama-dark #panama-mobile-mic.panama-mic-processing::after {
    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
}
body.panama-dark .panama-mobile-voice-actions {
    background: #152822;
    border-top-color: #1f3029;
}
body.panama-dark .panama-voice-action-cancel {
    background: #1a2d27;
    color: #c5d5cf;
    border-color: #345a51;
}
body.panama-dark #panama-mobile-input {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #e6efea;
}
body.panama-dark #panama-mobile-input::placeholder { color: #6a7b75; }
body.panama-dark #panama-mobile-send {
    background: #1e8869;
    color: #fff;
}
body.panama-dark #panama-mobile-mic,
body.panama-dark #panama-mobile-nearme,
body.panama-dark #panama-mobile-cam-btn {
    color: #e6efea;
}
body.panama-dark #panama-mobile-cam-btn.panama-cam-loaded {
    border-color: #25a17e;
    background: #1a2d27;
    color: #7dcea0;
}
body.panama-dark #panama-mobile-img-preview {
    background: #13201c;
    border-top-color: #1f3029;
}
body.panama-dark .panama-img-chip {
    background: #1a2d27;
    border-color: #345a51;
}
body.panama-dark .panama-img-chip span { color: #a8b9b2; }
body.panama-dark .panama-mic-locked { opacity: 0.4; }

/* Mobile map back-button strip */
body.panama-dark #panama-mobile-map-header {
    background: #0f4a3c;
    color: #e6efea;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark #panama-mobile-map-back { color: #e6efea; }

/* ── 5. Workspace tool bar + tool canvas ────────────────── */
body.panama-dark #panama-tool-bar {
    background: #0e1614;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .panama-tool-btn {
    background: #13201c;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .panama-tool-btn:hover {
    background: #1a2d27;
    border-color: #4a7065;
}
body.panama-dark .panama-tool-btn.active {
    background: #1e8869;
    border-color: #25a17e;
    color: #fff;
}
body.panama-dark #panama-tool-canvas {
    background: #0e1614;
    border-right: 1px solid #1f3029;
}
body.panama-dark #panama-tool-header {
    background: #13201c;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark #panama-tool-title { color: #e6efea; }
body.panama-dark #panama-tool-close,
body.panama-dark #panama-save-route-btn {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark #panama-tool-close:hover { background: #243a32; }
body.panama-dark #panama-tool-content { color: #d6e0db; }

/* Message-count chip */
body.panama-dark .panama-msg-counter {
    color: #a8b9b2;
    background: rgba(255,255,255,0.04);
}

/* ── 6. Planner — tasks, headers, chips, controls ──────── */
body.panama-dark .pplan-task {
    background: #13201c;
    border: 1px solid #1f3029;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
body.panama-dark .pplan-task:hover { border-color: #345a51; }
body.panama-dark .pplan-task-header { background: transparent; }
body.panama-dark .pplan-task-meta { color: #a8b9b2; }
body.panama-dark .pplan-task-actions { color: #a8b9b2; }
body.panama-dark .pplan-done {
    background: #131a18;
    opacity: 0.7;
}

/* Override Astra's white-bg + dark-text rule with !important */
body.panama-dark input.pplan-title {
    color: #e6efea !important;
    background: transparent !important;
}
body.panama-dark .pplan-done input.pplan-title {
    color: #6a7b75 !important;
}

/* Subtask rows */
body.panama-dark .pplan-sub {
    background: transparent;
    border-top: 1px dashed #1f3029;
}
body.panama-dark .pplan-sub input[type="text"] {
    background: transparent;
    color: #d6e0db;
}
body.panama-dark .pplan-sub-done input[type="text"] {
    color: #6a7b75;
    text-decoration: line-through;
}

/* Date inputs — dark calendar shell. WebKit renders yyyy-mm-dd segments and
   the calendar icon with their own colors; light-mode planner !important
   rules must be overridden here. Applies to planner, budget, trips, modals. */
body.panama-dark input[type="date"],
body.panama-dark input.panama-date-field[type="date"],
body.panama-dark input.pplan-due[type="date"],
body.panama-dark input.pplan-sub-due[type="date"],
body.panama-dark .panama-budget-item input.pbi-date[type="date"],
body.panama-dark .panama-budget-item input[type="date"],
body.panama-dark .pplan-suggest-dates-date-input[type="date"],
body.panama-dark .ptrip-meta-row input[type="date"],
body.panama-dark .ptrip-row input[type="date"] {
    color-scheme: dark;
    background-color: #1a2d27 !important;
    border: 1px solid #4a6b62 !important;
    color: #e6efea !important;
    cursor: pointer;
}
body.panama-dark input[type="date"]::-webkit-datetime-edit,
body.panama-dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.panama-dark input[type="date"]::-webkit-datetime-edit-text,
body.panama-dark input[type="date"]::-webkit-datetime-edit-year-field,
body.panama-dark input[type="date"]::-webkit-datetime-edit-month-field,
body.panama-dark input[type="date"]::-webkit-datetime-edit-day-field {
    color: #e6efea;
}
body.panama-dark input[type="date"]::-webkit-datetime-edit-text {
    color: #a8b9b2;
}
body.panama-dark input[type="date"]:not(:valid)::-webkit-datetime-edit-year-field,
body.panama-dark input[type="date"]:not(:valid)::-webkit-datetime-edit-month-field,
body.panama-dark input[type="date"]:not(:valid)::-webkit-datetime-edit-day-field {
    color: #d6e0db;
}
/* Dark mode — mint desk-calendar icon (same layout as shared date rules above) */
body.panama-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark input.pplan-due[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark input.pplan-sub-due[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark .panama-budget-item input[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark .pplan-suggest-dates-date-input::-webkit-calendar-picker-indicator,
body.panama-dark .ptrip-meta-row input[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark .ptrip-row input[type="date"]::-webkit-calendar-picker-indicator,
body.panama-dark input.panama-date-field[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='15' rx='1.5' fill='none' stroke='%23aaf0d8' stroke-width='1.35'/%3E%3Crect x='2' y='3' width='16' height='4' rx='1.5' fill='%23aaf0d8' fill-opacity='0.42'/%3E%3Cpath stroke='%23aaf0d8' stroke-width='1.1' d='M2 7h16'/%3E%3Ccircle cx='6' cy='10.5' r='.8' fill='%23aaf0d8'/%3E%3Ccircle cx='10' cy='10.5' r='.8' fill='%23aaf0d8'/%3E%3Ccircle cx='14' cy='10.5' r='.8' fill='%23aaf0d8'/%3E%3Ccircle cx='6' cy='14' r='.8' fill='%23aaf0d8'/%3E%3Ccircle cx='10' cy='14' r='.8' fill='%23aaf0d8'/%3E%3Ccircle cx='14' cy='14' r='.8' fill='%23aaf0d8'/%3E%3C/svg%3E") !important;
}
body.panama-dark input[type="date"]:hover::-webkit-calendar-picker-indicator,
body.panama-dark input.pplan-due[type="date"]:hover::-webkit-calendar-picker-indicator,
body.panama-dark input.pplan-sub-due[type="date"]:hover::-webkit-calendar-picker-indicator,
body.panama-dark .panama-budget-item input[type="date"]:hover::-webkit-calendar-picker-indicator,
body.panama-dark input.panama-date-field[type="date"]:hover::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='15' rx='1.5' fill='none' stroke='%23d8fff4' stroke-width='1.35'/%3E%3Crect x='2' y='3' width='16' height='4' rx='1.5' fill='%23d8fff4' fill-opacity='0.5'/%3E%3Cpath stroke='%23d8fff4' stroke-width='1.1' d='M2 7h16'/%3E%3Ccircle cx='6' cy='10.5' r='.8' fill='%23d8fff4'/%3E%3Ccircle cx='10' cy='10.5' r='.8' fill='%23d8fff4'/%3E%3Ccircle cx='14' cy='10.5' r='.8' fill='%23d8fff4'/%3E%3Ccircle cx='6' cy='14' r='.8' fill='%23d8fff4'/%3E%3Ccircle cx='10' cy='14' r='.8' fill='%23d8fff4'/%3E%3Ccircle cx='14' cy='14' r='.8' fill='%23d8fff4'/%3E%3C/svg%3E") !important;
}
body.panama-dark .pplan-due-label { color: #6a7b75; }

/* Editable category dropdown — constrain width so the <select> sizes to its
   content instead of stretching across the meta row, and set color-scheme so
   the native dropdown popup also renders dark. Brightness-hover from the base
   rule plays poorly against dark fills, so override it to a subtle outline. */
body.panama-dark select.pplan-cat {
    width: auto !important;
    min-width: 0 !important;
    max-width: 140px;
    flex: 0 0 auto;
    color-scheme: dark;
}
body.panama-dark select.pplan-cat:hover { filter: none; }
/* Dropdown popup options when expanded — keep readable on dark */
body.panama-dark select.pplan-cat option {
    background: #1a2d27;
    color: #e6efea;
}

/* Thin white ring around every task-level category chip in dark mode —
   matches the filter chips at the top of the planner. Semi-transparent so
   it adapts to each category's coloured background without harsh contrast. */
body.panama-dark .pplan-cat,
body.panama-dark .pplan-phase {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-sizing: border-box;
}

/* Phase badge dark variants — desaturated to match the dark palette while
   preserving the chronological hue progression (warm earth tones for early
   phases, cool blue for mid, green/teal for later). */
body.panama-dark .pplan-phase                  { background: #1f2429; color: #c8d4ce; }
body.panama-dark .pplan-phase-pre_move         { background: #2a2210; color: #f0c870; }
body.panama-dark .pplan-phase-application      { background: #2a2810; color: #f0d488; }
body.panama-dark .pplan-phase-logistics        { background: #1b2540; color: #a8b8f0; }
body.panama-dark .pplan-phase-arrival          { background: #16322a; color: #6fd9ad; }
body.panama-dark .pplan-phase-settling         { background: #1a2e1a; color: #b8e088; }

/* Dark mode for the editable phase select — mirrors select.pplan-cat */
body.panama-dark select.pplan-phase {
    color-scheme: dark;
}
body.panama-dark select.pplan-phase:hover { filter: none; }
body.panama-dark select.pplan-phase option {
    background: #1a2d27;
    color: #e6efea;
}

/* Phase view toggle button — dark mode */
body.panama-dark .pplan-view-toggle-btn {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-view-toggle-btn:hover {
    background: #243a32;
    border-color: #4a7065;
    color: #e6efea;
}
body.panama-dark .pplan-view-toggle-btn.pplan-view-toggle-active {
    background: #1e8869;
    border-color: #25a17e;
    color: #fff;
}
body.panama-dark .pplan-view-toggle-btn.pplan-view-toggle-active:hover {
    background: #25a17e;
}

/* Phase headers — dark mode. Background goes near-black with a brighter
   per-phase accent stripe so the headers feel like section dividers. */
body.panama-dark .pplan-phase-header {
    background: #13201c;
    color: #e6efea;
    border-left-color: #345a51;
}
body.panama-dark .pplan-phase-header-count {
    color: #a8b9b2;
    background: rgba(255, 255, 255, 0.06);
}
body.panama-dark .pplan-phase-header-pre_move    { background: #1f1a10; border-left-color: #d97706; }
body.panama-dark .pplan-phase-header-application { background: #1f1d10; border-left-color: #ca8a04; }
body.panama-dark .pplan-phase-header-logistics   { background: #161a2a; border-left-color: #6366f1; }
body.panama-dark .pplan-phase-header-arrival     { background: #131e1a; border-left-color: #10b981; }
body.panama-dark .pplan-phase-header-settling    { background: #131f15; border-left-color: #22c55e; }

/* Suggest-dates modal — dark mode */
body.panama-dark .pplan-suggest-dates-modal { background: rgba(8, 14, 12, 0.78); }
body.panama-dark .pplan-suggest-dates-inner {
    background: #13201c;
    color: #d6e0db;
    border: 1px solid #345a51;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
body.panama-dark .pplan-suggest-dates-close { color: #a8b9b2; }
body.panama-dark .pplan-suggest-dates-close:hover { background: #243a32; color: #e6efea; }
body.panama-dark .pplan-suggest-dates-title { color: #aaf0d8; }
body.panama-dark .pplan-suggest-dates-sub { color: #a8b9b2; }
body.panama-dark .pplan-suggest-dates-label { color: #c8d4ce; }
body.panama-dark .pplan-suggest-dates-hint { color: #6a7b75; }
body.panama-dark .pplan-suggest-dates-date-input {
    background: #1a2d27;
    color: #e6efea;
    border-color: #345a51;
    color-scheme: dark;
}
body.panama-dark .pplan-suggest-dates-date-input:focus {
    border-color: #37c19e;
    box-shadow: 0 0 0 2px rgba(55, 193, 158, 0.18);
}
body.panama-dark .pplan-suggest-dates-cancel {
    background: #1a2d27;
    color: #c8d4ce;
    border-color: #345a51;
}
body.panama-dark .pplan-suggest-dates-cancel:hover { background: #243a32; color: #e6efea; }
body.panama-dark .pplan-suggest-dates-submit,
body.panama-dark .pplan-suggest-dates-apply,
body.panama-dark .pplan-suggest-dates-retry {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .pplan-suggest-dates-submit:hover,
body.panama-dark .pplan-suggest-dates-apply:hover,
body.panama-dark .pplan-suggest-dates-retry:hover { background: #25a17e; }
body.panama-dark .pplan-suggest-dates-select-all,
body.panama-dark .pplan-suggest-dates-select-none {
    background: #1a2d27;
    color: #7fdcc1;
    border-color: #345a51;
}
body.panama-dark .pplan-suggest-dates-select-all:hover,
body.panama-dark .pplan-suggest-dates-select-none:hover { background: #243a32; }
body.panama-dark .pplan-suggest-dates-compressed-note {
    background: #2a2010;
    color: #f0d088;
    border-left-color: #d97706;
}
body.panama-dark .pplan-suggest-dates-list {
    background: #13201c;
    border-color: #345a51;
}
body.panama-dark .pplan-suggest-dates-row {
    border-bottom-color: #1f3029;
}
body.panama-dark .pplan-suggest-dates-row:hover { background: #1a2d27; }
body.panama-dark .pplan-suggest-dates-row-title { color: #e6efea; }
body.panama-dark .pplan-suggest-dates-row-dates { color: #a8b9b2; }
body.panama-dark .pplan-suggest-dates-row-arrow { color: #6a7b75; }
body.panama-dark .pplan-suggest-dates-row-suggested { color: #7fdcc1; }
body.panama-dark .pplan-suggest-dates-spinner p { color: #c8d4ce; }
body.panama-dark .pplan-suggest-dates-spinner-anim {
    border-color: #2a4338;
    border-top-color: #37c19e;
}
body.panama-dark .pplan-suggest-dates-error p { color: #e6efea; }
body.panama-dark .pplan-suggest-dates-error-detail {
    background: #131a18 !important;
    color: #a8b9b2 !important;
    border: 1px solid #1f3029;
}
body.panama-dark .pplan-suggest-dates-btn {
    background: #1a2d27;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-suggest-dates-btn:hover {
    background: #243a32;
    border-color: #4a7065;
    color: #e6efea;
}

/* Start-here banner — dark mode */
body.panama-dark .pplan-start-here {
    background: linear-gradient(135deg, #13201c 0%, #182921 100%);
    border-color: #2a6a55;
    border-left-color: #37c19e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
body.panama-dark .pplan-start-here-dismiss { color: #8a9994; }
body.panama-dark .pplan-start-here-dismiss:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e6efea;
}
body.panama-dark .pplan-start-here-title { color: #aaf0d8; }
body.panama-dark .pplan-start-here-sub   { color: #a8b9b2; }
body.panama-dark .pplan-start-here-list a {
    background: rgba(255, 255, 255, 0.04);
    border-color: #2a6a55;
    color: #c8e8d8;
}
body.panama-dark .pplan-start-here-list a:hover {
    background: rgba(55, 193, 158, 0.10);
    border-color: #37c19e;
    color: #e6efea;
}

/* Category chips — desaturated dark variants.
   !important because the <select> form element + browser defaults can
   silently win over a plain class rule on form controls. */
body.panama-dark .pplan-cat-visa       { background: #1b2940 !important; color: #93b5f0 !important; }
body.panama-dark .pplan-cat-housing    { background: #16322a !important; color: #6fd9ad !important; }
body.panama-dark .pplan-cat-banking    { background: #3a2e0f !important; color: #f0d088 !important; }
body.panama-dark .pplan-cat-healthcare { background: #3a1c1c !important; color: #f0a0a0 !important; }
body.panama-dark .pplan-cat-shipping   { background: #2a1f3d !important; color: #c8a8f0 !important; }
body.panama-dark .pplan-cat-pets       { background: #3a2614 !important; color: #f0b888 !important; }
body.panama-dark .pplan-cat-school     { background: #14323a !important; color: #88d8e8 !important; }
body.panama-dark .pplan-cat-legal      { background: #232830 !important; color: #b8c0c8 !important; }
body.panama-dark .pplan-cat-finance    { background: #1f2914 !important; color: #b8e088 !important; }
body.panama-dark .pplan-cat-social     { background: #3a1a30 !important; color: #f0a8d0 !important; }
body.panama-dark .pplan-cat-misc       { background: #1f2429 !important; color: #98a0a8 !important; }

/* Priority chip */
body.panama-dark .pplan-prio { color: #a8b9b2; border-color: #345a51; }
body.panama-dark .pplan-prio-high   { color: #f0a0a0; border-color: #6a3030; background: #2a1414; }
body.panama-dark .pplan-prio-medium { color: #f0d088; border-color: #6a5018; background: #2a2010; }
body.panama-dark .pplan-prio-low    { color: #a8b9b2; }

/* Time / ETA chips */
body.panama-dark .pplan-time-chip,
body.panama-dark .pplan-eta-chip {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-eta-overdue { background: #2a1414; color: #f0a0a0; border-color: #6a3030; }
body.panama-dark .pplan-eta-today   { background: #1a2d27; color: #7fdcc1; border-color: #2a6a55; }
body.panama-dark .pplan-eta-done    { background: #131a18; color: #6a7b75; }

/* Header delete-X icon */
body.panama-dark button.pplan-del-task-icon { color: #5a6a64 !important; }
body.panama-dark button.pplan-del-task-icon:hover {
    color: #f08070 !important;
    background: #2a1414 !important;
}

/* Toolbar buttons (Collapse All, Upcoming, Templates, Export, Río review) */
body.panama-dark .pplan-toolbar-btn,
body.panama-dark .pplan-upcoming-btn,
body.panama-dark .pplan-tmpl-btn,
body.panama-dark .pplan-ics-btn {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-toolbar-btn:hover,
body.panama-dark .pplan-upcoming-btn:hover,
body.panama-dark .pplan-tmpl-btn:hover,
body.panama-dark .pplan-ics-btn:hover {
    background: #243a32;
    border-color: #4a7065;
}
body.panama-dark .pplan-upcoming-btn-has-overdue {
    border-color: #6a3030 !important;
    background: #1f1818;
}
body.panama-dark .pplan-upcoming-badge {
    background: #c0392b;
    color: #fff;
}

/* Today / Week / Overdue strip */
body.panama-dark .pplan-today-strip { background: transparent; }
body.panama-dark .pplan-today-card {
    background: #13201c;
    border: 1px solid #345a51;
    color: #d6e0db;
}
body.panama-dark .pplan-today-card:hover {
    background: #1a2d27;
    border-color: #4a7065;
}
body.panama-dark .pplan-today-card.active {
    background: #1e8869;
    color: #fff;
    border-color: #25a17e;
}
body.panama-dark .pplan-today-card-count { color: #7fdcc1; }
body.panama-dark .pplan-today-card.active .pplan-today-card-count { color: #fff; }
body.panama-dark .pplan-today-card-label { color: #a8b9b2; }
body.panama-dark .pplan-today-card.active .pplan-today-card-label { color: #d6e8e0; }

/* Filter pills (All / Open / Done) */
body.panama-dark .pplan-filter-btn {
    background: #13201c;
    border: 1px solid #345a51;
    color: #a8b9b2;
}
body.panama-dark .pplan-filter-btn.active {
    background: #1e8869;
    color: #fff;
    border-color: #25a17e;
}

/* Progress bar */
body.panama-dark .pplan-progress {
    background: #1a2d27;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-progress-fill { background: #37c19e; }
body.panama-dark .pplan-progress-text { color: #c8d4ce; }

/* Review-plan button + card */
body.panama-dark .pplan-review-btn { background: #1e8869; color: #fff; }
body.panama-dark .pplan-review-btn:hover { background: #25a17e; }
body.panama-dark .pplan-review-btn:disabled { background: #2a3a32; border-color: #2a3a32; color: #6a7b75; }
body.panama-dark .pplan-review-card {
    background: #13201c;
    border: 1px solid #345a51;
    color: #d6e0db;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
body.panama-dark .pplan-review-card.pplan-review-error {
    background: #2a1414;
    border-color: #6a3030;
}
body.panama-dark .pplan-review-close { color: #a8b9b2; }
body.panama-dark .pplan-review-close:hover { background: #243a32; color: #7fdcc1; }
body.panama-dark .pplan-review-title { color: #e6efea; }
body.panama-dark .pplan-review-summary { color: #d6e0db; }
body.panama-dark .pplan-review-missing    .pplan-review-section-title { color: #f0a888; }
body.panama-dark .pplan-review-sequence   .pplan-review-section-title { color: #a8c8f0; }
body.panama-dark .pplan-review-pacing     .pplan-review-section-title { color: #f0d088; }
body.panama-dark .pplan-review-suggestions .pplan-review-section-title { color: #7fdcc1; }
body.panama-dark .pplan-review-list li { color: #c8d4ce; }

/* ── 7. Modals (Upcoming, Templates, Wizard) ────────────── */
body.panama-dark .pplan-upcoming-modal,
body.panama-dark .pplan-tmpl-modal,
body.panama-dark .pplan-wiz-modal {
    background: rgba(8, 14, 12, 0.78);
}
body.panama-dark .pplan-upcoming-inner,
body.panama-dark .pplan-tmpl-inner,
body.panama-dark .pplan-wiz-inner {
    background: #13201c;
    border: 1px solid #345a51;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    color: #d6e0db;
}
body.panama-dark .pplan-upcoming-header,
body.panama-dark .pplan-tmpl-header,
body.panama-dark .pplan-wiz-header {
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .pplan-upcoming-title,
body.panama-dark .pplan-tmpl-title,
body.panama-dark .pplan-wiz-title { color: #e6efea; }
body.panama-dark .pplan-upcoming-close,
body.panama-dark .pplan-tmpl-close,
body.panama-dark .pplan-wiz-close {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #a8b9b2;
}
body.panama-dark .pplan-upcoming-close:hover,
body.panama-dark .pplan-tmpl-close:hover,
body.panama-dark .pplan-wiz-close:hover {
    background: #243a32;
    color: #e6efea;
}
body.panama-dark .pplan-upcoming-empty,
body.panama-dark .pplan-tmpl-empty { color: #a8b9b2; }
body.panama-dark .pplan-upcoming-row {
    background: #1a2d27;
    border: 1px solid #1f3029;
}
body.panama-dark .pplan-upcoming-row:hover {
    background: #243a32;
    border-color: #4a7065;
}
body.panama-dark .pplan-upcoming-row.pplan-upcoming-overdue {
    background: #2a1414;
    border-color: #4a2020;
}
body.panama-dark .pplan-upcoming-row.pplan-upcoming-overdue:hover {
    background: #3a1818;
    border-color: #6a3030;
}
body.panama-dark .pplan-upcoming-row.pplan-upcoming-overdue .pplan-upcoming-date {
    color: #f08070;
}
body.panama-dark .pplan-upcoming-row.pplan-upcoming-today .pplan-upcoming-date {
    color: #7fdcc1;
}
body.panama-dark .pplan-upcoming-date { color: #c8d4ce; }
body.panama-dark .pplan-upcoming-row-title { color: #e6efea; }
body.panama-dark .pplan-upcoming-parent { color: #a8b9b2; }

/* Template cards */
body.panama-dark .pplan-tmpl-card {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #d6e0db;
}
body.panama-dark .pplan-tmpl-card:hover {
    background: #243a32;
    border-color: #4a7065;
}
body.panama-dark .pplan-tmpl-card-icon { background: rgba(55,193,158,0.12); }
body.panama-dark .pplan-tmpl-card-title { color: #e6efea; }
body.panama-dark .pplan-tmpl-card-desc { color: #a8b9b2; }

/* ── 8. Chat cards — offers, climate legend, label list ── */
body.panama-dark .panama-task-offer-card,
body.panama-dark .panama-trip-offer-card {
    background: #1f1a2a;
    border: 1px solid #3a3050;
    color: #d6e0db;
}
body.panama-dark .panama-task-offer-btn,
body.panama-dark .panama-trip-offer-btn {
    background: #4a3878;
    color: #fff;
}
body.panama-dark .panama-task-offer-btn:hover,
body.panama-dark .panama-trip-offer-btn:hover { background: #5a4490; }

/* Card title text — light-mode uses dark indigo #3d2b6b which is invisible
   on the dark purple card bg. Push it bright for legibility. */
body.panama-dark .panama-task-offer-label {
    color: #e6efea;
    font-weight: 500;
}
body.panama-dark .panama-task-offer-icon { opacity: 0.95; }

/* "Done" state — green confirmation card */
body.panama-dark .panama-task-offer-card--done {
    background: #14241c;
    border-color: #2a6a55;
}
body.panama-dark .panama-task-offer-card--done .panama-task-offer-label {
    color: #7fdcc1;
}
body.panama-dark .panama-task-offer-btn--done,
body.panama-dark .panama-task-offer-btn:disabled {
    background: #1e8869;
    color: #fff;
}

body.panama-dark .panama-map-offer-btn {
    background: #14333d;
    color: #88c8e0;
    border-color: #2a5a6a;
}
body.panama-dark .panama-map-offer-btn:hover { background: #1c4654; }

body.panama-dark .panama-climate-legend,
body.panama-dark .panama-pin-legend {
    background: rgba(19, 32, 28, 0.94);
    border: 1px solid #345a51;
    color: #d6e0db;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
body.panama-dark .panama-climate-legend-title,
body.panama-dark .panama-pin-legend-title { color: #e6efea; }
body.panama-dark .panama-pin-legend-item  { color: #d6e0db; }
body.panama-dark .panama-climate-legend-meta,
body.panama-dark .panama-climate-legend-temp,
body.panama-dark .panama-climate-legend-rain { color: #a8b9b2; }

body.panama-dark .panama-card-list { background: transparent; }
body.panama-dark .panama-card-item {
    background: #13201c;
    border-left: 3px solid #37c19e;
    color: #d6e0db;
}
body.panama-dark .panama-card-item:hover { background: #1a2d27; }
body.panama-dark .panama-card-item p > strong:first-child { color: #7fdcc1; }

/* ── 9. Lightbox ────────────────────────────────────────── */
body.panama-dark .panama-lightbox { background: rgba(0,0,0,0.92); }
body.panama-dark .panama-lightbox-stage { color: #e6efea; }
body.panama-dark .panama-lightbox-caption { color: #c8d4ce; }
body.panama-dark .panama-lightbox-close { color: #e6efea; }

/* ── 10. Streaming UX bits (typing dots, cursor, card stripe) */
body.panama-dark .panama-typing-indicator .panama-typing-dot { background: #37c19e; }
body.panama-dark .panama-stream-cursor { background: #37c19e; }

/* ── 11. Dark/light toggle button (shared style) ────────── */
.panama-dark-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    flex-shrink: 0;
}
.panama-dark-toggle:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.05);
}
.panama-dark-toggle:active { transform: scale(0.95); }
.panama-dark-toggle:focus-visible {
    outline: 2px solid #0F6E56;
    outline-offset: 2px;
}
.panama-dark-toggle .panama-dark-icon-sun,
.panama-dark-toggle .panama-dark-icon-moon { display: inline-block; }
.panama-dark-toggle .panama-dark-icon-moon { display: none; }
body.panama-dark .panama-dark-toggle .panama-dark-icon-sun  { display: none; }
body.panama-dark .panama-dark-toggle .panama-dark-icon-moon { display: inline-block; }
body.panama-dark .panama-dark-toggle:hover { background: rgba(255,255,255,0.08); }
body.panama-dark .panama-dark-toggle:focus-visible { outline-color: #37c19e; }

/* Mobile overlay header variant — sits next to ✕ close */
#panama-mobile-header .panama-dark-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    color: #fff;
}
#panama-mobile-header .panama-dark-toggle:hover { background: rgba(255,255,255,0.12); }

/* Tool-bar variant — sits with the workspace tool buttons */
#panama-tool-bar .panama-dark-toggle {
    margin-left: 4px;
    color: #555;
}
body.panama-dark #panama-tool-bar .panama-dark-toggle { color: #c8d4ce; }
body.panama-dark #panama-tool-bar .panama-dark-toggle:hover {
    background: #243a32;
    border-color: #345a51;
}

/* ── 12. Misc — links, scrollbars, code, hr ─────────────── */
body.panama-dark a { color: #7fdcc1; }
body.panama-dark a:hover { color: #aaf0d8; }
body.panama-dark hr { border-color: #1f3029; }
body.panama-dark code,
body.panama-dark pre {
    background: #0a1210;
    color: #d6e0db;
    border: 1px solid #1f3029;
}

/* Custom scrollbars on chat panes (WebKit-only — graceful no-op elsewhere) */
body.panama-dark #panama-fullpage-messages::-webkit-scrollbar,
body.panama-dark #panama-mobile-messages::-webkit-scrollbar,
body.panama-dark #panama-tool-content::-webkit-scrollbar { width: 10px; }
body.panama-dark #panama-fullpage-messages::-webkit-scrollbar-track,
body.panama-dark #panama-mobile-messages::-webkit-scrollbar-track,
body.panama-dark #panama-tool-content::-webkit-scrollbar-track { background: #0e1614; }
body.panama-dark #panama-fullpage-messages::-webkit-scrollbar-thumb,
body.panama-dark #panama-mobile-messages::-webkit-scrollbar-thumb,
body.panama-dark #panama-tool-content::-webkit-scrollbar-thumb {
    background: #2a4338;
    border-radius: 5px;
}
body.panama-dark #panama-fullpage-messages::-webkit-scrollbar-thumb:hover,
body.panama-dark #panama-mobile-messages::-webkit-scrollbar-thumb:hover,
body.panama-dark #panama-tool-content::-webkit-scrollbar-thumb:hover { background: #3a5a4a; }

/* Existing theme picker (🎨) — soften its light-mode appearance in dark */
body.panama-dark #vp-theme-btn {
    background: #1a2d27;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark #vp-theme-btn:hover { background: #243a32; }
body.panama-dark #vp-theme-picker {
    background: #13201c;
    border-color: #345a51;
}

/* ============================================================
   DARK MODE — Planner empty state + wizard supplement
   ============================================================
   Patches surfaces the first dark-mode pass missed: the
   two-card choice screen (Build it with me / Generate
   automatically), the pre-generation confirmation summary,
   and the wizard interior (chapters, tasks, subtasks,
   footer buttons, finish review). All of these were
   hardcoded with light-only colors — most painfully the
   `.pplan-choice-title` heading which used #1a2a1e (near-
   black) so it disappeared on dark bg.
   ------------------------------------------------------------ */

/* ── Choice screen (the empty-state landing) ─────────────── */
body.panama-dark .pplan-choice-title { color: #e6efea; }
body.panama-dark .pplan-choice-intro { color: #a8b9b2; }
body.panama-dark .pplan-choice-card {
    background: #13201c;
    border-color: #1f3029;
    color: #d6e0db;
}
body.panama-dark .pplan-choice-card:hover {
    background: #1a2d27;
    border-color: #37c19e;
}
body.panama-dark .pplan-choice-card-title { color: #e6efea; }
body.panama-dark .pplan-choice-card-desc  { color: #a8b9b2; }
body.panama-dark .pplan-choice-wizard .pplan-choice-card-badge { background: #4a3878; color: #fff; }
body.panama-dark .pplan-choice-auto   .pplan-choice-card-badge { background: #1e8869; color: #fff; }
body.panama-dark .pplan-choice-btn-primary {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .pplan-choice-btn-primary:hover { background: #25a17e; }
body.panama-dark .pplan-choice-btn-secondary {
    background: #1a2d27;
    color: #7fdcc1;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-choice-btn-secondary:hover {
    background: #243a32;
    color: #aaf0d8;
    border-color: #4a7065;
}

/* The auto-generate "Takes ~10s" / "Uses 5 messages" footer */
body.panama-dark .pplan-generate-note { color: #6a7b75; }
body.panama-dark .pplan-generate-note.pplan-generate-cost { color: #f0d088; }

/* The standalone Generate button (legacy path, before choice screen) */
body.panama-dark .pplan-generate-btn { background: #1e8869; color: #fff; }
body.panama-dark .pplan-generate-btn:hover    { background: #25a17e; }
body.panama-dark .pplan-generate-btn:disabled { background: #2a3a32; color: #6a7b75; }

/* ── Pre-generation confirmation panel ──────────────────── */
body.panama-dark .pplan-confirm-screen { color: #d6e0db; }
body.panama-dark .pplan-confirm-back   { color: #a8b9b2; }
body.panama-dark .pplan-confirm-back:hover { color: #7fdcc1; }
body.panama-dark .pplan-confirm-title  { color: #e6efea; }
body.panama-dark .pplan-confirm-intro  { color: #a8b9b2; }
body.panama-dark .pplan-confirm-section {
    background: #13201c;
    border: 1px solid #1f3029;
}
body.panama-dark .pplan-confirm-label { color: #e6efea; }
body.panama-dark .pplan-confirm-hint  { color: #6a7b75; }
body.panama-dark .pplan-confirm-input,
body.panama-dark .pplan-confirm-textarea {
    background: #1a2d27;
    color: #e6efea;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-confirm-input::placeholder,
body.panama-dark .pplan-confirm-textarea::placeholder { color: #6a7b75; }
body.panama-dark .pplan-confirm-input:focus,
body.panama-dark .pplan-confirm-textarea:focus {
    border-color: #37c19e;
    box-shadow: 0 0 0 2px rgba(55,193,158,0.18);
}
body.panama-dark .pplan-confirm-go {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .pplan-confirm-go:hover { background: #25a17e; }
body.panama-dark .pplan-confirm-skip {
    background: #1a2d27;
    color: #a8b9b2;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-confirm-skip:hover {
    background: #243a32;
    color: #e6efea;
}

/* ── Wizard panel ────────────────────────────────────────── */
body.panama-dark .pplan-wizard-panel {
    background: #13201c;
    color: #d6e0db;
}
body.panama-dark .pplan-wiz-header {
    background: transparent;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .pplan-wiz-step-label   { color: #a8b9b2; }
body.panama-dark .pplan-wiz-chapter-title{ color: #e6efea; }
body.panama-dark .pplan-wiz-dot          { background: #2a3a32; }
body.panama-dark .pplan-wiz-dot.active   { background: #37c19e; }
body.panama-dark .pplan-wiz-dot.done     { background: #1e8869; }
body.panama-dark .pplan-wiz-desc         { color: #c8d4ce; }
body.panama-dark .pplan-wiz-body::-webkit-scrollbar-thumb { background: #2a4338; }
body.panama-dark .pplan-wiz-footer {
    background: transparent;
    border-top: 1px solid #1f3029;
}
body.panama-dark .pplan-wiz-back-btn {
    background: #1a2d27;
    color: #a8b9b2;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-wiz-back-btn:hover { background: #243a32; color: #e6efea; }
body.panama-dark .pplan-wiz-next-btn { background: #1e8869; color: #fff; }
body.panama-dark .pplan-wiz-next-btn:hover    { background: #25a17e; }
body.panama-dark .pplan-wiz-next-btn:disabled { background: #2a3a32; color: #6a7b75; }

/* Wizard task picker — chapter contents */
body.panama-dark .pplan-wiz-task {
    background: #1a2d27;
    border: 1px solid #1f3029;
}
body.panama-dark .pplan-wiz-task:hover { border-color: #37c19e; }
body.panama-dark .pplan-wiz-task-title { color: #e6efea; }
body.panama-dark .pplan-wiz-sub-title  { color: #c8d4ce; }
body.panama-dark .pplan-wiz-subtasks   { color: #a8b9b2; }

/* Wizard finish-review chapter */
body.panama-dark .pplan-wiz-finish-hdr,
body.panama-dark .pplan-wiz-finish-ch-hdr {
    color: #e6efea;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .pplan-wiz-finish-count { color: #7fdcc1; }
body.panama-dark .pplan-wiz-sum-toggleable {
    background: #1a2d27;
    border: 1px solid #1f3029;
    color: #d6e0db;
}
body.panama-dark .pplan-wiz-sum-toggleable:hover { border-color: #345a51; }
body.panama-dark .pplan-wiz-sum-title { color: #e6efea; }
body.panama-dark .pplan-wiz-sum-icon  { color: #a8b9b2; }
body.panama-dark .pplan-wiz-sum-remove {
    color: #5a6a64;
}
body.panama-dark .pplan-wiz-sum-remove:hover {
    color: #f08070;
    background: #2a1414;
}
body.panama-dark .pplan-wiz-sum-removed {
    opacity: 0.4;
    background: #131a18;
}

/* Wizard welcome screen ("Let's build your relocation plan together")
   — title was #1a2a1e (near-black) and tip cards used light green bg #f0f7f3.
   Confirmed unreadable in dark mode 2026-05-12. */
body.panama-dark .pplan-wiz-welcome-title { color: #e6efea; }
body.panama-dark .pplan-wiz-welcome-sub   { color: #a8b9b2; }
body.panama-dark .pplan-wiz-welcome-tip {
    background: #1a2d27;
    color: #d6e0db;
    border: 1px solid #1f3029;
}
body.panama-dark .pplan-wiz-welcome-tip strong { color: #e6efea; }
body.panama-dark .pplan-wiz-welcome-btn { background: #1e8869; color: #fff; }
body.panama-dark .pplan-wiz-welcome-btn:hover { background: #25a17e; }

/* ============================================================
   DARK MODE — Planner internals (round 2: ID-selectored
   progress bar + toolbar / filter row + subtask widgets)
   ============================================================
   Original dark block targeted .pplan-progress* class selectors;
   the actual elements use #pplan-progress-bar* IDs and were
   silently missed. Plus a few subtask-row widgets and the
   white-bg "+ Add subtask" button.
   ------------------------------------------------------------ */

/* Top progress bar (above filter row) — uses IDs, not classes */
body.panama-dark #pplan-progress-bar-wrap {
    background: #0e1614;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark #pplan-progress-bar {
    background: #1a2d27;
}
body.panama-dark #pplan-progress-fill {
    background: #37c19e;
}
body.panama-dark #pplan-progress-label {
    color: #a8b9b2;
}

/* Toolbar row (holds filter chips + collapse/expand button) */
body.panama-dark .pplan-toolbar {
    background: #0e1614;
    border-bottom: 1px solid #1f3029;
}
body.panama-dark .pplan-filter-bar { background: transparent; }
body.panama-dark .pplan-filter-btn {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-filter-btn:hover {
    background: #243a32;
    border-color: #37c19e;
    color: #7fdcc1;
}
body.panama-dark .pplan-filter-active {
    background: #1e8869 !important;
    border-color: #25a17e !important;
    color: #fff !important;
}
body.panama-dark .pplan-filter-active:hover {
    background: #25a17e !important;
    border-color: #37c19e !important;
}
body.panama-dark .pplan-collapse-btn {
    background: #1a2d27;
    border: 1px solid #345a51;
    color: #c8d4ce;
}
body.panama-dark .pplan-collapse-btn:hover {
    background: #243a32;
    color: #e6efea;
}

/* Subtask elements */
body.panama-dark .pplan-sub {
    border-bottom-color: #1f3029;
}
body.panama-dark .pplan-sub-title {
    background: transparent;
    color: #d6e0db;
}
body.panama-dark .pplan-sub-title:focus {
    border-bottom-color: #37c19e;
    color: #e6efea;
}
body.panama-dark .pplan-sub-done .pplan-sub-title {
    color: #6a7b75;
}
body.panama-dark .pplan-del-sub {
    color: #4a5a54;
}
body.panama-dark .pplan-del-sub:hover {
    color: #f08070;
}

/* The "+ Add subtask" dashed button — was light green on light bg */
body.panama-dark .pplan-add-sub-btn {
    background: #13201c;
    color: #7fdcc1;
    border: 1px dashed #345a51;
}
body.panama-dark .pplan-add-sub-btn:hover {
    background: #1a2d27;
    border-color: #37c19e;
    color: #aaf0d8;
}

/* Notes textarea — italic, no border, "Notes..." placeholder */
body.panama-dark .pplan-notes {
    background: transparent;
    color: #a8b9b2;
    border-bottom-color: #1f3029;
}
body.panama-dark .pplan-notes::placeholder { color: #6a7b75; }
body.panama-dark .pplan-notes:focus {
    border-bottom-color: #37c19e;
    color: #e6efea;
}
body.panama-dark .pplan-notes-row { background: transparent; }

/* Planner footer (Save + Reset row at bottom) */
body.panama-dark .pplan-footer {
    background: #0e1614;
    border-top-color: #1f3029;
}
body.panama-dark .pplan-footer .pplan-save-btn  {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .pplan-footer .pplan-save-btn:hover { background: #25a17e; }
body.panama-dark .pplan-footer .pplan-reset-btn {
    background: #1a2d27;
    color: #a8b9b2;
    border: 1px solid #345a51;
}
body.panama-dark .pplan-footer .pplan-reset-btn:hover {
    background: #243a32;
    color: #e6efea;
}

/* Done/strikethrough title — keep contrast but signal completion */
body.panama-dark .pplan-done .pplan-title { color: #6a7b75 !important; }
body.panama-dark .pplan-sub-done .pplan-sub-title { color: #6a7b75; }

/* ============================================================
   DARK MODE — Place Gallery ([PLACE_GALLERY:] marker)
   Append-only block per feedback_dark_mode_architecture.md.
   Tile bg + title + attribution adjusted; pulse animation
   inherits from light-mode rules. Lightbox styling is shared
   with [PLACE_PHOTO:] and already has dark-mode coverage.
   ============================================================ */
body.panama-dark .panama-place-gallery-title {
    color: #d8e0d3;
}
body.panama-dark .panama-place-gallery-tile,
body.panama-dark .panama-place-gallery-spinner-tile {
    background: #1a2d27;
}
body.panama-dark .panama-place-gallery-tile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.panama-dark .panama-place-gallery-tile:focus-visible {
    box-shadow: 0 0 0 3px #37c19e, 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.panama-dark .panama-place-gallery-attribution {
    color: #88a08c;
}

/* Listing card — dark mode */
body.panama-dark .panama-listing-card {
    background: #1a2d27;
    border-color: #345a51;
    border-left-color: #37c19e;
    color: #e6efea;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
body.panama-dark .panama-listing-card-title { color: #e6efea; }
body.panama-dark .panama-listing-card-sub   { color: #b3c4bc; }
body.panama-dark .panama-listing-card-notes {
    background: #3a2d10;
    border-left-color: #e0a64a;
    color: #f3d99a;
}
body.panama-dark .panama-listing-card-status     { color: #88a08c; }
body.panama-dark .panama-listing-card-status-ok  { color: #6fcf91; }
body.panama-dark .panama-listing-card-status-err { color: #ec7878; }
body.panama-dark .panama-listing-card-link {
    color: #6fcf91;
    border-bottom-color: #6fcf91;
}
body.panama-dark .panama-listing-card-link:hover {
    color: #8fdcad;
    border-bottom-color: #8fdcad;
}

/* AI comment — dark mode */
body.panama-dark .panama-listing-card-comment,
body.panama-dark .panama-listing-saved-comment {
    color: #a8b8af;
}

/* Guest CTA — dark mode */
body.panama-dark .panama-listing-guest-cta {
    background: linear-gradient(135deg, #1a2d27 0%, #13201c 100%);
    border-color: #345a51;
    border-left-color: #37c19e;
    color: #e6efea;
}
body.panama-dark .panama-listing-guest-cta-title {
    color: #6fcf91;
}
body.panama-dark .panama-listing-guest-cta-body {
    color: #b3c4bc;
}
body.panama-dark .panama-listing-guest-cta-link {
    background: #37c19e;
    color: #0e1614 !important;
}
body.panama-dark .panama-listing-guest-cta-link:hover {
    background: #6fcf91;
}

/* Listing-card enrichment — dark mode */
body.panama-dark .panama-listing-card-thumb,
body.panama-dark .panama-listing-card-thumb,
body.panama-dark .panama-listing-saved-thumb {
    background: #0e1614;
}
body.panama-dark .panama-listing-card-spec-pill,
body.panama-dark .panama-listing-saved-spec-pill {
    background: #345a51;
    color: #b3d4c5;
}

/* Risk dot + stripe — dark mode (brighter colors for contrast) */
body.panama-dark .panama-listing-card.risk-green  { border-left-color: #37c19e; }
body.panama-dark .panama-listing-card.risk-yellow { border-left-color: #e0a64a; }
body.panama-dark .panama-listing-card.risk-orange { border-left-color: #e87038; }

body.panama-dark .panama-listing-saved-item.risk-green  { box-shadow: inset 6px 0 0 #37c19e; }
body.panama-dark .panama-listing-saved-item.risk-yellow { box-shadow: inset 6px 0 0 #e0a64a; }
body.panama-dark .panama-listing-saved-item.risk-orange { box-shadow: inset 6px 0 0 #e87038; }

body.panama-dark .panama-listing-risk-dot.risk-green {
    background: #37c19e;
    box-shadow: 0 0 0 2px rgba(55, 193, 158, 0.30);
}
body.panama-dark .panama-listing-risk-dot.risk-yellow {
    background: #e0a64a;
    box-shadow: 0 0 0 2px rgba(224, 166, 74, 0.30);
}
body.panama-dark .panama-listing-risk-dot.risk-orange {
    background: #e87038;
    box-shadow: 0 0 0 2px rgba(232, 112, 56, 0.30);
}

body.panama-dark .panama-listing-card-disclaimer,
body.panama-dark .panama-listing-saved-disclaimer {
    color: #88a08c;
    border-top-color: #2a3a35;
}

/* Notes block — dark mode */
body.panama-dark .panama-listing-notes-toggle {
    color: #37c19e;
}
body.panama-dark .panama-listing-notes-toggle:hover {
    color: #6fcf91;
}
body.panama-dark .panama-listing-notes-block.has-notes .panama-listing-notes-toggle {
    color: #6fcf91;
}
body.panama-dark .panama-listing-notes-preview {
    color: #a8b8af;
}
body.panama-dark .panama-listing-notes-editor {
    background: #1d2d27;
    border-color: #3a5a4e;
}
body.panama-dark .panama-listing-notes-textarea {
    background: #13201c;
    border-color: #3a5a4e;
    color: #e6efea;
}
body.panama-dark .panama-listing-notes-textarea:focus {
    outline-color: #e0a64a;
    border-color: #e0a64a;
}
body.panama-dark .panama-listing-notes-textarea::placeholder {
    color: #6a7c73;
}
body.panama-dark .panama-listing-notes-status     { color: #88a08c; }
body.panama-dark .panama-listing-notes-status.ok  { color: #6fcf91; }
body.panama-dark .panama-listing-notes-status.err { color: #ec7878; }


/* ── Chat page: deep teal field + card column (fullpage, not tool-open) ── */
body.panama-dark.panama-chat-page .site-content,
body.panama-dark.panama-chat-page #content,
body.panama-dark.panama-chat-page .site-main,
body.panama-dark.panama-chat-page #main,
body.panama-dark.panama-chat-page #primary {
    background: #0e1614;
}
body.panama-dark.panama-chat-page #panama-workspace:not(.tool-open) {
    background: transparent;
}
body.panama-dark.panama-chat-page #panama-workspace:not(.tool-open) #panama-chat-panel {
    background: #13201c;
    border-color: #1f3029;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}


/* ============================================================
   DARK MODE -- Relocation Budget panel (+ Monthly Living tab)
   ============================================================ */

body.panama-dark .panama-budget-summary {
    background: #13201c;
    border-bottom-color: #1f3029;
}
body.panama-dark .panama-budget-stat {
    background: #1a2d27;
    border-color: #345a51;
}
body.panama-dark .panama-budget-stat-label { color: #a8b9b2; }
body.panama-dark .panama-budget-stat-val  { color: #e6efea; }

body.panama-dark .panama-budget-cat       { border-bottom-color: #1f3029; }
body.panama-dark .panama-budget-cat-hdr {
    background: #1a2d27;
    border-bottom-color: #1f3029;
}
body.panama-dark .panama-budget-cat-name { color: #e6efea; }
body.panama-dark .panama-budget-cat-sub  { color: #a8b9b2; }

body.panama-dark .panama-budget-col-hdr,
body.panama-dark .panama-budget-item {
    border-bottom-color: #1f3029;
}
body.panama-dark .panama-budget-col-hdr span { color: #6a7b75; }

body.panama-dark .panama-budget-item input {
    background: #1a2d27 !important;
    color: #e6efea !important;
    border-color: #345a51 !important;
    color-scheme: dark;
}
/* Budget date column — datetime-edit + picker (see shared date block above too) */
body.panama-dark .panama-budget-item input.pbi-date[type="date"] {
    color: #c8d4ce !important;
}
body.panama-dark .panama-budget-item input:focus {
    border-color: #37c19e !important;
    box-shadow: 0 0 0 2px rgba(55, 193, 158, 0.18);
}
body.panama-dark .panama-budget-item input::placeholder { color: #6a7b75; }

body.panama-dark .pbi-del { color: #f08070; }

body.panama-dark .panama-budget-add-btn {
    border-color: #345a51;
    color: #a8b9b2;
}
body.panama-dark .panama-budget-add-btn:hover {
    border-color: #37c19e;
    color: #7fdcc1;
}

body.panama-dark .panama-budget-footer,
body.panama-dark .pmonth-footer {
    background: #13201c;
    border-top-color: #1f3029;
}
body.panama-dark .panama-budget-save-btn {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .panama-budget-save-btn:hover { background: #25a17e; }
body.panama-dark .panama-budget-save-btn:disabled {
    background: #2a3a32;
    color: #6a7b75;
}
body.panama-dark .panama-budget-save-msg { color: #a8b9b2; }

body.panama-dark .panama-budget-tabs {
    border-bottom-color: #345a51;
    background: #13201c;
}
body.panama-dark .pbtab { color: #a8b9b2; }
body.panama-dark .pbtab:hover { color: #e6efea; }
body.panama-dark .pbtab.pbtab-active {
    color: #37c19e;
    border-bottom-color: #37c19e;
}

/* Monthly Living tab */
body.panama-dark .pmonth-nav {
    border-bottom-color: #1f3029;
    background: #13201c;
}
body.panama-dark .pmonth-arrow {
    background: #1a2d27;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark .pmonth-arrow:hover {
    border-color: #37c19e;
    color: #7fdcc1;
}
body.panama-dark .pmonth-label { color: #e6efea; }

body.panama-dark .pmonth-location-row {
    border-bottom-color: #1f3029;
    background: #13201c;
}
body.panama-dark .pmonth-loc-label { color: #a8b9b2; }
body.panama-dark .pmonth-loc-input {
    background: #1a2d27 !important;
    color: #e6efea !important;
    border-color: #345a51 !important;
    color-scheme: dark;
}
body.panama-dark .pmonth-loc-input:focus { border-color: #37c19e !important; }

body.panama-dark .pmonth-col-hdr {
    border-bottom-color: #1f3029;
}
body.panama-dark .pmonth-col-hdr span { color: #6a7b75; }

body.panama-dark .pmonth-row {
    border-bottom-color: #1f3029;
}
body.panama-dark .pmonth-cat-label { color: #d6e0db; }
body.panama-dark .pmonth-row input {
    background: #1a2d27 !important;
    color: #e6efea !important;
    border-color: #345a51 !important;
    color-scheme: dark;
}
body.panama-dark .pmonth-row input:focus { border-color: #37c19e !important; }

body.panama-dark .pmonth-totals-row {
    background: #1a2d27;
    border-top-color: #345a51;
    color: #e6efea;
}
body.panama-dark .pmonth-averages {
    background: #13201c;
    border-top-color: #1f3029;
}
body.panama-dark .pmonth-avg-header { color: #a8b9b2; }
body.panama-dark .pmonth-avg-row     { color: #c8d4ce; }
body.panama-dark .pmonth-avg-row span:last-child { color: #37c19e; }

/* Spanish Message Coach v2 — drafted reply card */
.panama-coach-reply-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f5f0e6;
  border: 1px solid #e8e2d6;
  border-radius: 8px;
}
.panama-coach-reply-tip {
  font-size: 13px;
  line-height: 1.5;
  color: #3d5248;
  background: #eef7f3;
  border: 1px solid #cfe5db;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.panama-coach-reply-tip strong { color: #0d5d49; }
.panama-coach-reply-tip em { font-style: normal; color: #1a4a3c; }
.panama-coach-reply-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5a6b62;
  margin: 0 0 6px;
}
.panama-coach-reply-field-label--spanish {
  margin-top: 12px;
  color: #0d5d49;
}
.panama-coach-reply-status {
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #3d6a58;
  margin: 4px 0 10px;
}
.panama-coach-reply-status--err { color: #a33b2e; }
.panama-coach-reply-text {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 12px;
  white-space: pre-wrap;
  color: #2c3e2e;
}
/* Inline-editable coach draft (replaces read-only quote div) */
textarea.panama-coach-reply-edit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  padding: 2px 4px;
  margin: 0 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: #2c3e2e;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
textarea.panama-coach-reply-edit:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.2);
}
textarea.panama-coach-reply-edit--english {
  font-family: inherit;
  font-style: normal;
  font-size: 15px;
  background: #fff;
  border: 1px solid #d6e3dd;
  padding: 10px 12px;
  border-radius: 6px;
}
textarea.panama-coach-reply-edit--english:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.15);
}
textarea.panama-coach-reply-edit--spanish {
  background: #faf8f4;
  border: 1px solid #e0dbd0;
  padding: 10px 12px;
  border-radius: 6px;
}
@media (max-width: 768px) {
  textarea.panama-coach-reply-edit { font-size: 16px; }
  textarea.panama-coach-reply-edit--english { font-size: 16px; }
}
.panama-coach-reply-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.panama-coach-reply-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 120ms;
}
.panama-coach-reply-btn:hover { opacity: 0.9; }
.panama-coach-reply-btn-copy {
  background: var(--pr-teal, #37c19e);
  color: #ffffff;
}
.panama-coach-reply-btn-copy:disabled { opacity: 0.7; cursor: default; }
.panama-coach-reply-btn-update {
  background: #e8f4ef;
  color: #0d5d49;
  border: 1px solid #b8d9cc;
  margin: 4px 0 2px;
  width: 100%;
  justify-content: center;
}
.panama-coach-reply-btn-update:hover { background: #d4ebe2; opacity: 1; }
.panama-coach-reply-btn-update--dirty {
  background: #0F6E56;
  color: #fff;
  border-color: #0F6E56;
}
.panama-coach-reply-btn-update:disabled { opacity: 0.65; cursor: wait; }
.panama-coach-reply-btn-whatsapp {
  background: #25D366;
  color: #ffffff;
}
.panama-coach-reply-btn-whatsapp.panama-coach-reply-btn-disabled,
.panama-coach-reply-btn-whatsapp[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* Dark mode override (append-only per panama dark-mode architecture) */
body.panama-dark .panama-coach-reply-card {
  background: #182622;
  border-color: #2a3d36;
}
body.panama-dark .panama-coach-reply-text {
  color: #e3ddd0;
}
body.panama-dark textarea.panama-coach-reply-edit {
  color: #e3ddd0;
  background: transparent;
  border-color: transparent;
}
body.panama-dark textarea.panama-coach-reply-edit:focus {
  border-color: #37c19e;
  box-shadow: 0 0 0 2px rgba(55, 193, 158, 0.22);
}
body.panama-dark .panama-coach-reply-tip {
  background: #152822;
  border-color: #2a4a3a;
  color: #b8c8c0;
}
body.panama-dark .panama-coach-reply-tip strong { color: #7fdcc1; }
body.panama-dark .panama-coach-reply-tip em { color: #a8d4c4; }
body.panama-dark .panama-coach-reply-field-label { color: #8a9b94; }
body.panama-dark .panama-coach-reply-field-label--spanish { color: #7fdcc1; }
body.panama-dark .panama-coach-reply-status { color: #7fdcc1; }
body.panama-dark .panama-coach-reply-status--err { color: #f0a8a0; }
body.panama-dark textarea.panama-coach-reply-edit--english {
  background: #1a2d27;
  border-color: #345a51;
  color: #e6efea;
}
body.panama-dark textarea.panama-coach-reply-edit--spanish {
  background: #13201c;
  border-color: #2a4038;
  color: #e3ddd0;
}
body.panama-dark .panama-coach-reply-btn-update {
  background: #1a2d27;
  color: #a8d4c4;
  border-color: #345a51;
}
body.panama-dark .panama-coach-reply-btn-update:hover {
  background: #243a32;
  opacity: 1;
}
body.panama-dark .panama-coach-reply-btn-update--dirty {
  background: #1e8869;
  color: #fff;
  border-color: #25a17e;
}
body.panama-dark .panama-coach-reply-btn-copy {
  background: #1e8869;
  color: #fff;
}
body.panama-dark .panama-coach-reply-btn-copy:hover {
  background: #25a17e;
  opacity: 1;
}
body.panama-dark .panama-coach-reply-btn-whatsapp {
  background: #1a2d27;
  color: #7fdcc1;
  border: 1px solid #2a6a50;
}
body.panama-dark .panama-coach-reply-btn-whatsapp:hover {
  background: #243a32;
  border-color: #37c19e;
  opacity: 1;
}
body.panama-dark .panama-coach-reply-btn-whatsapp.panama-coach-reply-btn-disabled,
body.panama-dark .panama-coach-reply-btn-whatsapp[aria-disabled="true"] {
  background: #1a2d27;
  color: #6a7b75;
  border-color: #345a51;
  opacity: 1;
}

/* In-country TRANSLATE — artifact translation card */
.panama-translate-card {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e8e2d6;
  background: #f8f7f4;
}
.panama-translate-card.translate-mode-menu {
  background: #faf6ee;
  border-color: #e8dcc8;
}
.panama-translate-card.translate-mode-paperwork {
  background: #f0f3f6;
  border-color: #c8d4de;
}
.panama-translate-card.translate-mode-sign,
.panama-translate-card.translate-mode-text {
  background: #f8f7f4;
}
.panama-translate-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 15px;
  color: #2c3e2e;
}
.panama-translate-card-icon {
  font-size: 18px;
  line-height: 1;
}
.panama-translate-section {
  margin-bottom: 12px;
}
.panama-translate-section:last-of-type {
  margin-bottom: 8px;
}
.panama-translate-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b5c;
  margin-bottom: 6px;
}
.panama-translate-section-body {
  font-size: 14px;
  line-height: 1.55;
  color: #2c3e2e;
}
.panama-translate-section-body p {
  margin: 0 0 8px;
}
.panama-translate-section-body ul {
  margin: 0;
  padding-left: 1.2em;
}
.panama-translate-card-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  color: #7a8a7c;
}
.panama-desktop-cam-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.panama-desktop-cam-btn.panama-cam-loaded {
  border-color: var(--pr-teal, #37c19e);
  background: #eefaf6;
}
#panama-fullpage-input-area,
#panama-chat-input-area {
  flex-wrap: wrap;
  align-items: center;
}
.panama-desktop-img-preview {
  flex: 1 1 100%;
  margin-bottom: 6px;
}

/* Drag-and-drop photo onto chat (desktop fullpage + mobile panel) */
#panama-fullpage-chat,
#panama-mobile-panel,
#panama-chat-box {
  position: relative;
}
#panama-fullpage-chat.panama-chat-drop-active,
#panama-mobile-panel.panama-chat-drop-active,
#panama-chat-box.panama-chat-drop-active {
  outline: 2px dashed var(--pr-teal, #37c19e);
  outline-offset: -3px;
  background-color: rgba(55, 193, 158, 0.07);
}
#panama-fullpage-chat.panama-chat-drop-active::after,
#panama-mobile-panel.panama-chat-drop-active::after,
#panama-chat-box.panama-chat-drop-active::after {
  content: 'Drop photo to attach';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(44, 62, 46, 0.88);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}
body.panama-dark .panama-translate-card {
  background: #182622;
  border-color: #2a3d36;
}
body.panama-dark .panama-translate-card.translate-mode-menu {
  background: #1e2420;
  border-color: #3d3830;
}
body.panama-dark .panama-translate-card.translate-mode-paperwork {
  background: #161c22;
  border-color: #2a3540;
}
body.panama-dark .panama-translate-card-head,
body.panama-dark .panama-translate-section-body {
  color: #e3ddd0;
}
body.panama-dark .panama-translate-section-title {
  color: #9aab9c;
}
/* PRICE_CHECK — receipt / bill / quote sanity card */
.panama-price-card {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e8e2d6;
  background: #f8f7f4;
}
.panama-price-card.verdict-fair {
  border-color: #c5dcc8;
  background: #f4faf5;
}
.panama-price-card.verdict-high {
  border-color: #e8dcc0;
  background: #faf8f2;
}
.panama-price-card.verdict-way-off {
  border-color: #e8cfc0;
  background: #faf6f2;
}
.panama-price-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.panama-price-card-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}
.panama-price-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.panama-price-card-title {
  font-weight: 600;
  font-size: 15px;
  color: #2c3e2e;
  line-height: 1.3;
}
.panama-price-verdict-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.3;
}
.panama-price-verdict-badge.verdict-fair {
  background: #e2f2e4;
  color: #2d6b3a;
}
.panama-price-verdict-badge.verdict-high {
  background: #f5ecd8;
  color: #8a6a1a;
}
.panama-price-verdict-badge.verdict-way-off {
  background: #f5e8dc;
  color: #a85a20;
}
.panama-price-section {
  margin-bottom: 12px;
}
.panama-price-section:last-of-type {
  margin-bottom: 8px;
}
.panama-price-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b5c;
  margin-bottom: 6px;
}
.panama-price-section-body {
  font-size: 14px;
  line-height: 1.55;
  color: #2c3e2e;
}
.panama-price-section-body p {
  margin: 0 0 8px;
}
.panama-price-section-body ul {
  margin: 0;
  padding-left: 1.2em;
}
.panama-price-card-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  font-style: italic;
  color: #7a8a7c;
}
body.panama-dark .panama-price-card {
  background: #182622;
  border-color: #2a3d36;
}
body.panama-dark .panama-price-card.verdict-fair {
  background: #15241c;
  border-color: #2a4a36;
}
body.panama-dark .panama-price-card.verdict-high {
  background: #1e2420;
  border-color: #3d3830;
}
body.panama-dark .panama-price-card.verdict-way-off {
  background: #221e1a;
  border-color: #4a3830;
}
body.panama-dark .panama-price-card-title,
body.panama-dark .panama-price-section-body {
  color: #e3ddd0;
}
body.panama-dark .panama-price-section-title {
  color: #9aab9c;
}
body.panama-dark .panama-price-verdict-badge.verdict-fair {
  background: #1e3a28;
  color: #7ed49a;
}
body.panama-dark .panama-price-verdict-badge.verdict-high {
  background: #3a3420;
  color: #e8c86a;
}
body.panama-dark .panama-price-verdict-badge.verdict-way-off {
  background: #3a2a20;
  color: #e8a070;
}
body.panama-dark .panama-price-card-footer {
  color: #7a8a7c;
  border-top-color: rgba(255, 255, 255, 0.06);
}

body.panama-dark .panama-desktop-cam-btn {
  background: #1a2824;
  border-color: #2a3d36;
  color: #e3ddd0;
}

/* TRANSLATE Phase C — to_local showable card, TTS, fullscreen */
.panama-translate-card.translate-mode-to_local {
  background: #ffffff;
  border-color: #1a1a1a;
  color: #111111;
}
.panama-translate-card-head--to-local {
  margin-bottom: 16px;
}
.panama-translate-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.panama-translate-card-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #4a4a4a;
}
.panama-translate-to-local-spanish {
  font-size: 1.65rem;
  line-height: 1.55;
  font-weight: 500;
  color: #111111;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.panama-translate-to-local-phonetic {
  font-size: 14px;
  line-height: 1.45;
  color: #444444;
  font-style: italic;
  margin-bottom: 14px;
}
.panama-translate-to-local-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.panama-translate-tts-btn {
  flex-shrink: 0;
  border: 1px solid #c8d4ce;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  color: #2c3e2e;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .panama-translate-tts-btn:not(.panama-translate-tts-btn--prominent) {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }
}
.panama-translate-tts-btn:hover {
  background: #eefaf6;
  border-color: var(--pr-teal, #37c19e);
}
.panama-translate-tts-btn--prominent {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panama-translate-tts-icon {
  font-size: 18px;
}
.panama-translate-fullscreen-btn {
  border: 1px solid #1a1a1a;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  color: #111;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panama-translate-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.panama-translate-section-title-row .panama-translate-section-title {
  margin-bottom: 0;
}
.panama-translate-menu-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panama-translate-menu-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.panama-translate-menu-line-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
}
.panama-translate-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: #ffffff;
  color: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.panama-translate-fullscreen-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  text-align: center;
}
.panama-translate-fullscreen-text {
  font-size: 2.5rem;
  line-height: 1.45;
  font-weight: 600;
  white-space: pre-wrap;
}
.panama-translate-fullscreen-phonetic {
  margin-top: 20px;
  font-size: 1.25rem;
  font-style: italic;
  color: #333333;
  line-height: 1.4;
}
.panama-translate-fullscreen-actions {
  margin: 20px 0;
}
.panama-translate-fullscreen-close {
  border: 2px solid #111;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 28px;
  cursor: pointer;
  min-width: 120px;
}
.panama-translate-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #2c3e2e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 100060;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: 90vw;
  text-align: center;
}
.panama-translate-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.panama-dark .panama-translate-card.translate-mode-to_local {
  background: #ffffff;
  border-color: #1a1a1a;
  color: #111111;
}
body.panama-dark .panama-translate-to-local-spanish,
body.panama-dark .panama-translate-card.translate-mode-to_local .panama-translate-card-title {
  color: #111111;
}
body.panama-dark .panama-translate-fullscreen {
  background: #ffffff;
  color: #111111;
}

/* =============================================================================
   Spanish Message Coach v3 Phase 3b — Save card + Messages panel
   ============================================================================= */

/* Save-to-Messages prompt card (appears below assistant bubble when
   SAVE_CORRESPONDENCE marker fires) */
.panama-save-correspondence-card {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fdf5e6;
  border: 1px dashed #d4c5a9;
  border-radius: 8px;
}
.panama-save-correspondence-prompt {
  font-size: 14px;
  color: #4a3f2f;
  margin-bottom: 10px;
  line-height: 1.5;
}
.panama-save-correspondence-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.panama-save-correspondence-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.panama-save-correspondence-btn-save {
  background: var(--pr-teal, #37c19e);
  color: #ffffff;
}
.panama-save-correspondence-btn-save:disabled {
  opacity: 0.7;
  cursor: default;
}
.panama-save-correspondence-btn-dismiss {
  background: transparent;
  color: #6b6b6b;
  border: 1px solid #d0d0d0;
}

/* Messages workspace panel */
.panama-messages-panel {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
}
.panama-messages-empty {
  text-align: center;
  padding: 40px 20px;
  color: #6b6b6b;
}
.panama-messages-empty h3 {
  margin-top: 0;
  font-size: 18px;
  color: #2c3e2e;
}
.panama-messages-empty p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 12px auto 0;
}
.panama-messages-list-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--pr-teal, #37c19e);
}
.panama-messages-list-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b6b6b;
}
.panama-messages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panama-messages-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e8e2d6;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms;
}
.panama-messages-list-item:hover {
  background: #faf6ec;
}
.panama-messages-list-item-main {
  flex: 1;
  min-width: 0;
}
.panama-messages-list-item-label {
  font-weight: 600;
  color: #2c3e2e;
  font-size: 14px;
  margin-bottom: 4px;
}
.panama-messages-list-item-meta {
  font-size: 12px;
  color: #6b6b6b;
}
.panama-messages-list-item-status {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.panama-status-active { background: #e3f5ed; color: #1f7a4e; }
.panama-status-resolved { background: #e3eaf5; color: #1f4d7a; }
.panama-status-abandoned { background: #f5e3e3; color: #7a1f1f; }

/* Thread view */
.panama-messages-thread-header {
  border-bottom: 1px solid #e8e2d6;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.panama-messages-thread-back {
  background: none;
  border: none;
  color: var(--pr-teal, #37c19e);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  margin-bottom: 8px;
}
.panama-messages-thread-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #2c3e2e;
}
.panama-messages-thread-meta {
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 12px;
}
.panama-messages-thread-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.panama-messages-thread-actions button {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  cursor: pointer;
}
.panama-messages-thread-delete {
  color: #a52a2a;
  border-color: #d4a5a5 !important;
}
.panama-messages-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panama-messages-thread-message {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e8e2d6;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.panama-messages-thread-message-meta {
  font-size: 11px;
  color: #6b6b6b;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.panama-messages-thread-message-original,
.panama-messages-thread-message-translation,
.panama-messages-thread-message-reply,
.panama-messages-thread-message-draft {
  margin-bottom: 8px;
}
.panama-messages-thread-message-original strong,
.panama-messages-thread-message-translation strong,
.panama-messages-thread-message-reply strong,
.panama-messages-thread-message-draft > strong {
  display: inline-block;
  font-size: 11px;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.panama-messages-thread-message-draft-en,
.panama-messages-thread-message-draft-es {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
  font-size: 14px;
}
.panama-messages-thread-message-draft-en {
  background: #f4f8f6;
  border: 1px solid #d6e3dd;
  color: #1a2a1e;
}
.panama-messages-thread-message-draft-es {
  background: #faf8f4;
  border: 1px solid #e0dbd0;
  color: #2c3e2e;
  font-style: italic;
}
.panama-messages-draft-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 4px;
  font-style: normal;
}

/* Dark mode overrides (append-only per panama dark-mode architecture) */
body.panama-dark .panama-save-correspondence-card {
  background: #1f2f2a;
  border-color: #3a4d44;
}
body.panama-dark .panama-save-correspondence-prompt {
  color: #d8d2c4;
}
body.panama-dark .panama-save-correspondence-btn-dismiss {
  color: #b0b0b0;
  border-color: #4a4a4a;
}
body.panama-dark .panama-messages-empty,
body.panama-dark .panama-messages-list-subtitle,
body.panama-dark .panama-messages-list-item-meta,
body.panama-dark .panama-messages-thread-meta,
body.panama-dark .panama-messages-thread-message-meta {
  color: #b0b0b0;
}
body.panama-dark .panama-messages-empty h3,
body.panama-dark .panama-messages-thread-header h3,
body.panama-dark .panama-messages-list-item-label {
  color: #e3ddd0;
}
body.panama-dark .panama-messages-list-item,
body.panama-dark .panama-messages-thread-message {
  background: #13201c;
  border-color: #2a3d36;
}
body.panama-dark .panama-messages-list-item:hover {
  background: #182622;
}
body.panama-dark .panama-messages-thread-header {
  border-bottom-color: #2a3d36;
}
body.panama-dark .panama-messages-thread-actions button {
  background: #182622;
  border-color: #2a3d36;
  color: #e3ddd0;
}
body.panama-dark .panama-messages-thread-message-draft-en {
  background: #1a2d27;
  border-color: #345a51;
  color: #e6efea;
}
body.panama-dark .panama-messages-thread-message-draft-es {
  background: #13201c;
  border-color: #2a4038;
  color: #e3ddd0;
}
body.panama-dark .panama-messages-draft-label {
  color: #8a9b94;
}
body.panama-dark .panama-messages-thread-message-draft > strong {
  color: #a8b9b2;
}

/* =============================================================================
   UI fixes — Messages thread buttons + mobile tab bar (theme button bleed)
   ============================================================================= */

/* Theme often sets button { background: brand-green; color: #fff }. Our thread
   actions only set background:#fff, so labels vanish. Delete worked (explicit
   red color). Reset label + hover for all thread actions. */
.panama-messages-panel .panama-messages-thread-actions button,
#panama-tool-content .panama-messages-thread-actions button {
  color: #2c3e2e;
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
  font-weight: 500;
}
.panama-messages-panel .panama-messages-thread-actions button:hover,
.panama-messages-panel .panama-messages-thread-actions button:focus-visible,
#panama-tool-content .panama-messages-thread-actions button:hover,
#panama-tool-content .panama-messages-thread-actions button:focus-visible {
  color: #2c3e2e;
  background-color: #f5f0e6;
  border-color: #c4b8a0;
  outline: none;
}
.panama-messages-panel .panama-messages-thread-actions .panama-messages-thread-delete,
#panama-tool-content .panama-messages-thread-actions .panama-messages-thread-delete {
  color: #a52a2a;
}
.panama-messages-panel .panama-messages-thread-actions .panama-messages-thread-delete:hover,
#panama-tool-content .panama-messages-thread-actions .panama-messages-thread-delete:hover {
  color: #8b2222;
  background-color: #fdf5f5;
  border-color: #d4a5a5;
}

/* Mobile Chat / Map / Trips — active tab must not get solid green fill + green
   text (unreadable). Use light tint + underline only. */
#panama-mobile-tabs button.pmobile-tab {
  background-color: transparent;
  background-image: none;
  color: #6b6b6b;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#panama-mobile-tabs button.pmobile-tab.pmobile-tab-active {
  color: #0F6E56;
  background-color: #e8f4f0;
  border-bottom-color: #0F6E56;
}
#panama-mobile-tabs button.pmobile-tab:focus,
#panama-mobile-tabs button.pmobile-tab:focus-visible,
#panama-mobile-tabs button.pmobile-tab:active {
  color: #0F6E56;
  background-color: #e8f4f0;
  outline: none;
  box-shadow: none;
}

body.panama-dark #panama-mobile-tabs button.pmobile-tab {
  color: #a8b9b2;
  background-color: transparent;
}
body.panama-dark #panama-mobile-tabs button.pmobile-tab.pmobile-tab-active,
body.panama-dark #panama-mobile-tabs button.pmobile-tab:focus,
body.panama-dark #panama-mobile-tabs button.pmobile-tab:focus-visible,
body.panama-dark #panama-mobile-tabs button.pmobile-tab:active {
  color: #5ee0b8;
  background-color: #1a2e28;
  border-bottom-color: #37c19e;
}
body.panama-dark .panama-messages-panel .panama-messages-thread-actions button:hover,
body.panama-dark #panama-tool-content .panama-messages-thread-actions button:hover {
  color: #e3ddd0;
  background-color: #243a32;
  border-color: #3a5d52;
}

/* Itemized translate documents (quotes / invoices / receipts) — 2026-05-29 */
.panama-translate-line-items { display: flex; flex-direction: column; margin-top: 0; gap: 0; }
.panama-translate-line-item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; padding: 1px 0; border-bottom: 1px solid #ececec;
    font-size: 14px; line-height: 1.25;
}
.panama-translate-line-item:last-child { border-bottom: 0; }
.panama-translate-li-desc { flex: 1 1 auto; min-width: 0; }
.panama-translate-li-price {
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
    font-weight: 600; white-space: nowrap;
}
body.panama-dark .panama-translate-line-item { border-bottom-color: #2a3a35; }
body.panama-dark .panama-translate-li-price { color: #9fe0c8; }

/* ============================================================
   DARK MODE — Scouting Trips panel
   ============================================================ */

body.panama-dark .ptrips-empty { color: #a8b9b2; }

body.panama-dark .ptrips-card {
    background: #13201c;
    border-color: #345a51;
}
body.panama-dark .ptrips-card:hover {
    border-color: #37c19e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.panama-dark .ptrips-label { color: #e6efea; }
body.panama-dark .ptrips-dates,
body.panama-dark .ptrips-focus { color: #a8b9b2; }

body.panama-dark .ptrips-status-upcoming  { background: #1b2940; color: #93b5f0; }
body.panama-dark .ptrips-status-active    { background: #16322a; color: #6fd9ad; }
body.panama-dark .ptrips-status-completed { background: #1f2429; color: #98a0a8; }

body.panama-dark .ptrips-list-footer {
    background: #13201c;
    border-top-color: #1f3029;
}
body.panama-dark .ptrips-new-btn {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .ptrips-new-btn:hover { background: #25a17e; }

body.panama-dark .ptrip-detail-header,
body.panama-dark .ptrip-tabs,
body.panama-dark .ptrip-footer {
    background: #13201c;
    border-color: #1f3029;
}
body.panama-dark .ptrip-back-btn {
    background: #1a2d27;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark .ptrip-back-btn:hover { background: #243a32; color: #e6efea; }

body.panama-dark .ptrip-title-input {
    color: #e6efea;
}
body.panama-dark .ptrip-title-input:focus {
    background: #1a2d27 !important;
    border-color: #37c19e;
}

body.panama-dark .ptrip-meta-row,
body.panama-dark .ptrip-focus-row {
    background: #13201c;
    border-bottom-color: #1f3029;
}
body.panama-dark .ptrip-meta-row label,
body.panama-dark .ptrip-focus-row label,
body.panama-dark .ptrip-notes-label { color: #a8b9b2; }

body.panama-dark .ptrip-meta-row select,
body.panama-dark .ptrip-meta-row input[type="date"],
body.panama-dark .ptrip-focus-input,
body.panama-dark .ptrip-post-notes,
body.panama-dark .ptrip-row input[type="text"],
body.panama-dark .ptrip-row input[type="date"],
body.panama-dark .ptrip-row input[type="time"],
body.panama-dark .ptrip-row input[type="datetime-local"],
body.panama-dark .ptrip-row select,
body.panama-dark .ptrip-bud-est,
body.panama-dark .ptrip-bud-act {
    background: #1a2d27 !important;
    color: #e6efea !important;
    border-color: #345a51 !important;
    color-scheme: dark;
}
body.panama-dark .ptrip-meta-row select:focus,
body.panama-dark .ptrip-meta-row input[type="date"]:focus,
body.panama-dark .ptrip-focus-input:focus,
body.panama-dark .ptrip-post-notes:focus,
body.panama-dark .ptrip-row input:focus,
body.panama-dark .ptrip-row select:focus,
body.panama-dark .ptrip-bud-est:focus,
body.panama-dark .ptrip-bud-act:focus {
    border-color: #37c19e !important;
    box-shadow: 0 0 0 2px rgba(55, 193, 158, 0.18);
}

body.panama-dark .ptrip-tab { color: #a8b9b2; }
body.panama-dark .ptrip-tab:hover,
body.panama-dark .ptrip-tab-active {
    color: #37c19e;
    border-bottom-color: #37c19e;
}

body.panama-dark .ptrip-section-header { color: #7fdcc1; }
body.panama-dark .ptrip-col-hdr,
body.panama-dark .ptrip-bud-col-hdr {
    color: #6a7b75;
    border-bottom-color: #1f3029;
}
body.panama-dark .ptrip-row,
body.panama-dark .ptrip-bud-row {
    border-bottom-color: #1f3029;
}
body.panama-dark .ptrip-del-row { color: #6a7b75; }
body.panama-dark .ptrip-del-row:hover { color: #f08070; }

body.panama-dark .ptrip-add-row-btn {
    background: #1a2d27;
    color: #7fdcc1;
    border-color: #345a51;
}
body.panama-dark .ptrip-add-row-btn:hover { background: #243a32; }

body.panama-dark .ptrip-bud-label { color: #d6e0db; }
body.panama-dark .ptrip-bud-diff   { color: #a8b9b2; }
body.panama-dark .ptrip-bud-over    { color: #f08070; }
body.panama-dark .ptrip-bud-under   { color: #37c19e; }
body.panama-dark .ptrip-bud-totals {
    border-top-color: #345a51;
    color: #e6efea;
}

body.panama-dark .ptrip-save-btn {
    background: #1e8869;
    color: #fff;
}
body.panama-dark .ptrip-save-btn:hover    { background: #25a17e; }
body.panama-dark .ptrip-save-btn:disabled { background: #2a3a32; color: #6a7b75; }
body.panama-dark .ptrip-save-msg { color: #a8b9b2; }
body.panama-dark .ptrip-del-btn {
    border-color: #6a3030;
    color: #f08070;
}
body.panama-dark .ptrip-del-btn:hover {
    background: #2a1414;
    color: #f0a888;
}

/* ============================================================
   DARK MODE — Saved / Routes panel
   ============================================================ */

body.panama-dark #panama-routes-panel {
    background: #0e1614;
}
body.panama-dark .panama-routes-loading,
body.panama-dark .panama-routes-empty {
    color: #a8b9b2;
}

body.panama-dark .panama-route-item {
    background: #13201c;
    border-color: #345a51;
}
body.panama-dark .panama-route-item:hover {
    background: #1a2d27;
    border-color: #4a7065;
}
body.panama-dark .panama-route-label { color: #e6efea; }
body.panama-dark .panama-route-meta  { color: #a8b9b2; }

body.panama-dark .panama-route-open,
body.panama-dark .panama-route-delete,
body.panama-dark .panama-listing-open,
body.panama-dark .panama-listing-archive,
body.panama-dark .panama-listing-restore,
body.panama-dark .panama-listing-delete {
    background: #1a2d27;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark .panama-route-open:hover,
body.panama-dark .panama-listing-open:hover {
    background: #1b2940;
    border-color: #4a7090;
}
body.panama-dark .panama-route-delete:hover,
body.panama-dark .panama-listing-delete:hover {
    background: #2a1414;
    border-color: #6a3030;
}
body.panama-dark .panama-listing-archive:hover {
    background: #1f2914;
    border-color: #4a7040;
}
body.panama-dark .panama-listing-restore:hover {
    background: #16322a;
    border-color: #37c19e;
}

body.panama-dark .panama-saved-section-header { color: #a8b9b2; }
body.panama-dark .panama-saved-divider { border-top-color: #1f3029; }

body.panama-dark .panama-listing-archived-drawer {
    background: #1a2d27;
    border-color: #345a51;
    color: #a8b9b2;
}
body.panama-dark .panama-listing-archived-drawer:hover {
    background: #243a32;
    color: #e6efea;
}
body.panama-dark .panama-listing-archived-item .panama-route-label {
    color: #8a9994;
}

/* Map search overlay */
body.panama-dark #panama-map-search {
    background: #13201c;
    border: 1px solid #345a51;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
body.panama-dark #panama-map-search-input {
    color: #e6efea;
}
body.panama-dark #panama-map-search-input::placeholder { color: #6a7b75; }

/* Translate card — read-aloud button (mobile parity + dark legibility) */
body.panama-dark .panama-translate-tts-btn {
  background: #1a2d27;
  border-color: #4a6b62;
  color: #e6efea;
}
body.panama-dark .panama-translate-tts-btn:hover {
  background: #243a32;
  border-color: #37c19e;
}

/* LISTINGS_LINK — encuentra24 deep-link card */
.panama-listings-link-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f8faf8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}
.panama-listings-link-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.panama-listings-link-card-icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.panama-listings-link-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.panama-listings-link-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e2e;
  line-height: 1.35;
}
.panama-listings-link-card-subtitle {
  font-size: 12px;
  color: #6a7b6e;
  line-height: 1.35;
}
.panama-listings-filters-wrap {
  margin-bottom: 4px;
}
.panama-listings-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding-top: 2px;
}
.panama-listings-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #5a6b5c;
  flex-shrink: 0;
  min-width: 52px;
}
.panama-listings-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.panama-listings-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #2c5a42;
  background: #ffffff;
  border: 1px solid #c8d8cc;
  border-radius: 999px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.panama-listings-filter-chip:hover,
.panama-listings-filter-chip:active {
  background: #eef6f0;
  border-color: #37c19e;
  color: #1e4a36;
}
.panama-listings-filter-chip--active,
.panama-listings-filter-chip--category {
  font-weight: 600;
  background: #e8f4ec;
  border-color: #37c19e;
  color: #1a4a32;
}
.panama-listings-filter-chip--active:hover,
.panama-listings-filter-chip--active:active,
.panama-listings-filter-chip--category:hover,
.panama-listings-filter-chip--category:active {
  background: #d8eee0;
}
.panama-listings-go-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  margin-bottom: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: #2c5a42;
  border: 1px solid #2c5a42;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.panama-listings-go-btn:hover,
.panama-listings-go-btn:active {
  background: #1e4a36;
  border-color: #1e4a36;
}
.panama-listings-link-card-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  font-style: italic;
  color: #7a8a7c;
  line-height: 1.45;
}
body.panama-dark .panama-listings-link-card {
  background: #182622;
  border-color: #2a3d36;
}
body.panama-dark .panama-listings-link-card-title {
  color: #e3ddd0;
}
body.panama-dark .panama-listings-link-card-subtitle {
  color: #9aab9c;
}
body.panama-dark .panama-listings-filter-label {
  color: #9aab9c;
}
body.panama-dark .panama-listings-filter-chip {
  background: #1a2d27;
  border-color: #3a5248;
  color: #c8e6d8;
}
body.panama-dark .panama-listings-filter-chip:hover,
body.panama-dark .panama-listings-filter-chip:active {
  background: #243a32;
  border-color: #37c19e;
  color: #e6efea;
}
body.panama-dark .panama-listings-filter-chip--active,
body.panama-dark .panama-listings-filter-chip--category {
  background: #1e3a30;
  border-color: #37c19e;
  color: #b8f0d8;
}
body.panama-dark .panama-listings-filter-chip--active:hover,
body.panama-dark .panama-listings-filter-chip--active:active,
body.panama-dark .panama-listings-filter-chip--category:hover,
body.panama-dark .panama-listings-filter-chip--category:active {
  background: #254a3c;
}
body.panama-dark .panama-listings-go-btn {
  background: #37c19e;
  border-color: #37c19e;
  color: #0f1f1a;
}
body.panama-dark .panama-listings-go-btn:hover,
body.panama-dark .panama-listings-go-btn:active {
  background: #2da88a;
  border-color: #2da88a;
}
body.panama-dark .panama-listings-link-card-footer {
  color: #7a8a7c;
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* FLIGHT_SEARCH — Duffel live options + Google Flights click-out */
.panama-flight-fare-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f8faf8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}
.panama-flight-fare-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.panama-flight-fare-card-icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.panama-flight-fare-card-body {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e2e;
  line-height: 1.45;
  min-width: 0;
}
.panama-flight-fare-card-actions {
  margin-top: 12px;
}
.panama-flight-fare-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: #1e4a36;
  border: 1px solid #1e4a36;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.panama-flight-fare-card-link:hover,
.panama-flight-fare-card-link:active {
  background: #163828;
  border-color: #163828;
  color: #ffffff;
}
.panama-flight-fare-card-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.panama-flight-fare-card-muted,
.panama-affiliate-note .panama-flight-fare-card-muted {
  font-size: 11px;
  font-style: italic;
  color: #7a8a7c;
  line-height: 1.45;
}
body.panama-dark .panama-flight-fare-card {
  background: #182622;
  border-color: #2a3d36;
}
body.panama-dark .panama-flight-fare-card-body {
  color: #e3ddd0;
}
body.panama-dark .panama-flight-fare-card-link {
  background: #37c19e;
  border-color: #37c19e;
  color: #0f1f1a;
}
body.panama-dark .panama-flight-fare-card-link:hover,
body.panama-dark .panama-flight-fare-card-link:active {
  background: #2da88a;
  border-color: #2da88a;
  color: #0f1f1a;
}
body.panama-dark .panama-flight-fare-card-notes {
  border-top-color: rgba(255, 255, 255, 0.06);
}
body.panama-dark .panama-flight-fare-card-muted {
  color: #7a8a7c;
}

/* FLIGHT_SEARCH — Duffel live options + Google Flights click-out */
.panama-flight-options-card {
  margin-top: 12px;
}
.panama-flight-options-body {
  flex: 1;
  min-width: 0;
}
.panama-flight-options-status.panama-flight-options-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.panama-flight-options-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.panama-flight-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 8px 10px;
  background: rgba(30, 74, 54, 0.06);
  border-radius: 8px;
}
.panama-flight-options-price {
  font-size: 15px;
  font-weight: 700;
  color: #1e4a36;
}
.panama-flight-options-detail {
  font-size: 13px;
  color: #5a6b5c;
  line-height: 1.35;
}
body.panama-dark .panama-flight-options-row {
  background: rgba(55, 193, 158, 0.08);
}
body.panama-dark .panama-flight-options-price {
  color: #b8f0d8;
}
body.panama-dark .panama-flight-options-detail {
  color: #9aab9c;
}

/* FEAT-1 — dedicated Listings panel + agent connect */
#panama-tool-content:has(.panama-listings-panel) {
  overflow-y: auto;
  padding: 16px 20px 20px;
  box-sizing: border-box;
  background: #fff;
}
#panama-tool-content .panama-listings-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panama-listings-panel-counts {
  font-size: 13px;
  font-weight: 600;
  color: #5a6b5c;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.panama-ext-callout{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  padding:9px 12px;border:1px solid #CFE3B8;border-radius:10px;
  background:#F3F8EC;color:#2D5A1B;text-decoration:none;font-size:13px;
  line-height:1.35;transition:background .15s;}
.panama-ext-callout:hover{background:#E8F2D8;}
.panama-ext-callout-icon{font-size:16px;line-height:1;}
.panama-ext-callout strong{font-weight:600;}
.panama-listings-panel-controls {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.panama-listings-panel-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6b5c;
  margin-bottom: 8px;
}
.panama-listings-panel-select {
  flex: 1;
  min-height: 40px;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #c8d8cc;
  border-radius: 8px;
  background: #fff;
}
.panama-listings-panel-budget-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.panama-listings-panel-budget-label {
  font-size: 12px;
  font-weight: 600;
  color: #5a6b5c;
}
.panama-listings-panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.panama-listings-panel-chip {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #c8d8cc;
  border-radius: 999px;
  background: #fff;
  color: #2c5a42;
  cursor: pointer;
}
.panama-listings-panel-chip--active {
  font-weight: 600;
  background: #e8f4ec;
  border-color: #37c19e;
  color: #1a4a32;
}
.panama-listings-panel-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.panama-listings-panel-empty,
.panama-listings-panel-loading {
  color: #7a8a7c;
  font-size: 14px;
  padding: 16px 4px;
}

/* Saved search bookmarks (Encuentra24 search URLs, not single ads) */
.panama-listing-card--search {
  border-color: #d4e8f0;
  background: linear-gradient(180deg, #f8fcfe 0%, #fff 100%);
}
.panama-listing-card--search .panama-listing-card-icon {
  font-size: 22px;
}
.panama-listing-saved-item--search {
  border-color: #d4e8f0;
  background: #f8fcfe;
}
.panama-listing-saved-item--search .panama-listing-saved-toprow::before {
  content: '🔍 Saved search';
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a7a9e;
  margin-bottom: 4px;
}
.panama-saved-listings-moved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  margin-top: 8px;
  background: #f4faf6;
  border: 1px solid #d4e8da;
  border-radius: 10px;
  font-size: 14px;
  color: #2c5a42;
}
.panama-saved-listings-moved-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #37c19e;
  border-radius: 8px;
  background: #e8f4ec;
  color: #1a4a32;
  cursor: pointer;
}
.panama-listing-agent-connect {
  margin-top: 10px;
}
.panama-listing-agent-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #2c5a42;
  border-radius: 8px;
  background: #2c5a42;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.panama-listing-agent-btn:hover,
.panama-listing-agent-btn:active {
  background: #1e4a36;
}
.panama-listing-agent-sent {
  font-size: 13px;
  font-weight: 600;
  color: #1a4a32;
  padding: 8px 0;
}
#panama-mobile-listings-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#panama-mobile-listings-pane.active {
  display: block;
}
.pmobile-listings-header {
  font-size: 17px;
  font-weight: 700;
  padding: 14px 16px 8px;
  color: #2c3e2e;
}
.pmobile-listings-status-toggle {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}
.pmobile-listings-status-btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #c8d8cc;
  border-radius: 999px;
  background: #fff;
  color: #2c5a42;
  cursor: pointer;
}
.pmobile-listings-status-btn.active {
  font-weight: 600;
  background: #e8f4ec;
  border-color: #37c19e;
}
.pmobile-listings-filters {
  padding: 0 16px 10px;
}
.pmobile-listings-filters-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #c8d8cc;
  border-radius: 8px;
  background: #fff;
  color: #2c5a42;
  cursor: pointer;
  text-align: left;
}
.pmobile-listings-filters-toggle-label {
  flex: 1;
}
.pmobile-listings-filters-chevron {
  font-size: 12px;
  color: #6a7b6e;
}
.pmobile-listings-filters-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #37c19e;
  flex-shrink: 0;
}
.pmobile-listings-filters-active-dot.hidden {
  display: none;
}
.pmobile-listings-filters-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmobile-listings-filters-body[hidden] {
  display: none !important;
}
.pmobile-listings-filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pmobile-listings-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #5a6b5c;
}
.pmobile-listings-filter-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #c8d8cc;
  border-radius: 8px;
  background: #fff;
  color: #2c3e2e;
}
.pmobile-listings-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pmobile-listings-filter-chip {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #c8d8cc;
  border-radius: 999px;
  background: #fff;
  color: #2c5a42;
  cursor: pointer;
}
.pmobile-listings-filter-chip--active {
  font-weight: 600;
  background: #e8f4ec;
  border-color: #37c19e;
}
.pmobile-listings-list {
  padding-bottom: 8px;
}
.pmobile-listings-clear-filters {
  display: inline-block;
  margin-top: 12px;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #37c19e;
  border-radius: 999px;
  background: #e8f4ec;
  color: #1a4a32;
  cursor: pointer;
}
.pmobile-listings-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 12px 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: 10px;
  cursor: pointer;
}
.pmobile-listings-card.risk-green  { box-shadow: inset 5px 0 0 #1a6b3c; }
.pmobile-listings-card.risk-yellow { box-shadow: inset 5px 0 0 #c88a20; }
.pmobile-listings-card.risk-orange { box-shadow: inset 5px 0 0 #d35400; }
.pmobile-listings-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.pmobile-listings-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e2e;
  line-height: 1.35;
}
.pmobile-listings-card-sub {
  font-size: 12px;
  color: #6a7b6e;
  margin-top: 2px;
}
.pmobile-listings-back {
  display: block;
  margin: 12px 16px;
  min-height: 40px;
  padding: 8px 0;
  font-size: 14px;
  font-family: inherit;
  border: none;
  background: none;
  color: #2c5a42;
  cursor: pointer;
  text-align: left;
}
.pmobile-listings-empty {
  padding: 24px 16px;
  text-align: center;
  color: #6a7b6e;
}
body.panama-dark .panama-listings-panel-controls {
  background: #13201c;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.panama-dark #panama-tool-content:has(.panama-listings-panel) {
  background: #13201c;
}
body.panama-dark .panama-listing-card--search {
  border-color: #2a4550;
  background: linear-gradient(180deg, #152228 0%, #13201c 100%);
}
body.panama-dark .panama-listing-saved-item--search {
  border-color: #2a4550;
  background: #152228;
}
body.panama-dark .panama-listing-saved-item--search .panama-listing-saved-toprow::before {
  color: #6ec4e8;
}
body.panama-dark .panama-ext-callout{background:#1f2a16;border-color:#3a5226;color:#9BCB6E;}
body.panama-dark .panama-ext-callout:hover{background:#26331b;}
body.panama-dark .panama-listings-panel-counts,
body.panama-dark .panama-listings-panel-control,
body.panama-dark .panama-listings-panel-budget-label {
  color: #9aab9c;
}
body.panama-dark .panama-listings-panel-select {
  background: #1a2d27;
  border-color: #3a5248;
  color: #e6efea;
}
body.panama-dark .panama-listings-panel-chip {
  background: #1a2d27;
  border-color: #3a5248;
  color: #c8e6d8;
}
body.panama-dark .panama-listings-panel-chip--active {
  background: #1e3a30;
  border-color: #37c19e;
  color: #b8f0d8;
}
body.panama-dark .panama-saved-listings-moved {
  background: #1a2824;
  border-color: #2a4a36;
  color: #c8e6d8;
}
body.panama-dark .panama-saved-listings-moved-btn {
  background: #1e3a30;
  border-color: #37c19e;
  color: #e6efea;
}
body.panama-dark .panama-listing-agent-btn {
  background: #37c19e;
  border-color: #37c19e;
  color: #0f1f1a;
}
body.panama-dark .panama-listing-agent-sent {
  color: #b8f0d8;
}
body.panama-dark .pmobile-listings-header,
body.panama-dark .pmobile-listings-card-title {
  color: #e6efea;
}
body.panama-dark .pmobile-listings-card {
  background: #1a2824;
  border-color: #2a3d36;
}
body.panama-dark .pmobile-listings-card.risk-green  { box-shadow: inset 5px 0 0 #37c19e; }
body.panama-dark .pmobile-listings-card.risk-yellow { box-shadow: inset 5px 0 0 #e0a64a; }
body.panama-dark .pmobile-listings-card.risk-orange { box-shadow: inset 5px 0 0 #e87038; }
body.panama-dark .pmobile-listings-status-btn {
  background: #1a2d27;
  border-color: #3a5248;
  color: #c8e6d8;
}
body.panama-dark .pmobile-listings-status-btn.active {
  background: #1e3a30;
  border-color: #37c19e;
}
body.panama-dark .pmobile-listings-filters-toggle {
  background: #1a2d27;
  border-color: #3a5248;
  color: #c8e6d8;
}
body.panama-dark .pmobile-listings-filters-chevron {
  color: #9aab9c;
}
body.panama-dark .pmobile-listings-filters-active-dot {
  background: #37c19e;
}
body.panama-dark .pmobile-listings-filter-label {
  color: #9aab9c;
}
body.panama-dark .pmobile-listings-filter-select {
  background: #1a2d27;
  border-color: #3a5248;
  color: #e6efea;
}
body.panama-dark .pmobile-listings-filter-chip {
  background: #1a2d27;
  border-color: #3a5248;
  color: #c8e6d8;
}
body.panama-dark .pmobile-listings-filter-chip--active {
  background: #1e3a30;
  border-color: #37c19e;
  color: #b8f0d8;
}
body.panama-dark .pmobile-listings-clear-filters {
  background: #1e3a30;
  border-color: #37c19e;
  color: #b8f0d8;
}

/* ── Phase-aware mobile toolbar + full-screen tools menu (Option C / B) ─────── */
.pmobile-tab.pmobile-tab-phase-hidden { display: none !important; }

.pmobile-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0);
    transition: background 0.22s ease;
    pointer-events: auto;
}
.pmobile-more-sheet.open { background: rgba(0, 0, 0, 0.3); }
.pmobile-more-scrim {
    flex: 0 0 auto;
    min-height: max(48px, env(safe-area-inset-top));
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.pmobile-more-inner {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.pmobile-more-sheet.open .pmobile-more-inner { transform: translateY(0); opacity: 1; }
.pmobile-more-head {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    background: #0F6E56;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.pmobile-more-title { font-size: 17px; font-weight: 500; color: #fff; }
.pmobile-more-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
}
.pmobile-more-body { padding: 4px 16px 24px; }
.pmobile-more-section-wrap { margin-top: 4px; }
.pmobile-more-section {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6a7d76;
    margin: 16px 4px 4px;
}
.pmobile-more-section-hint {
    font-size: 13px;
    color: #8a9a94;
    margin: 0 4px 10px;
    text-transform: none;
    letter-spacing: normal;
}
.pmobile-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.pmobile-more-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 6px;
    background: #f4f8f6;
    border: 1px solid #d6e6df;
    border-radius: 14px;
    color: #1a3d33;
    cursor: pointer;
    min-height: 92px;
}
.pmobile-more-cell:active { background: #e2efea; transform: scale(0.97); }
.pmobile-more-cell-icon { font-size: 28px; line-height: 1; }
.pmobile-more-cell-label { font-size: 13px; font-weight: 500; }

body.panama-dark .pmobile-more-inner { background: #0e1614; }
body.panama-dark .pmobile-more-head { background: #0b3a2f; }
body.panama-dark .pmobile-more-section { color: #7fa294; }
body.panama-dark .pmobile-more-section-hint { color: #6a8a7c; }
body.panama-dark .pmobile-more-cell {
    background: #13201c;
    border-color: #345a51;
    color: #c8d4ce;
}
body.panama-dark .pmobile-more-cell:active { background: #1a2d27; }