/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background-color: #1a1a2e;
    /* Fallback color */
}

#vr-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Glassmorphism Panel */
#ai-ui-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 90%;
    max-width: 420px;
}

#ai-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50px;
    padding: 10px 20px 10px 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ai-panel:hover {
    transform: translateY(-5px);
}

.avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 2px solid #0D8ABC;
    box-shadow: 0 4px 10px rgba(13, 138, 188, 0.3);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info {
    flex-grow: 1;
}

.info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.info p {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Nút Microphone */
#mic-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0D8ABC, #075f85);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(13, 138, 188, 0.4);
}

#mic-btn:hover:not(.disabled) {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(13, 138, 188, 0.6);
}

#mic-btn.disabled {
    background: #d1d5db;
    cursor: not-allowed;
    box-shadow: none;
    color: #9ca3af;
}

/* Hiệu ứng Pulse khi đang thu âm */
#mic-btn.recording {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Mock VR Design */
.mock-vr-overlay {
    color: white;
    text-align: center;
    padding-top: 20vh;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mock-vr-overlay h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.mock-vr-overlay p {
    font-size: 1.2rem;
    opacity: 0.8;
}

/* From Silva Code*/
/* ==========================================================
   VR 360 LÂM ĐỒNG - STYLE
   ========================================================== */

/* ============ DESIGN TOKENS ============ */
:root {
    /* Colors */
    --bg-deep: #050E1A;
    --bg-darker: #0A1628;
    --panel-bg: rgba(10, 22, 40, 0.55);
    --panel-bg-solid: rgba(10, 22, 40, 0.85);
    --panel-border: rgba(94, 234, 212, 0.18);
    --panel-border-hover: rgba(94, 234, 212, 0.45);

    --accent-green: #4ADE80;
    --accent-cyan: #5EEAD4;
    --accent-glow: rgba(94, 234, 212, 0.35);
    --accent-purple: #A855F7;

    --text-primary: #FFFFFF;
    --text-secondary: #B8C5D1;
    --text-muted: #6B7A8A;
    --text-dim: #4B5A6A;

    /* Sizes */
    --panel-radius: 18px;
    --pill-radius: 999px;
    --shadow-glow: 0 0 40px rgba(94, 234, 212, 0.12);
    --shadow-deep: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 250ms ease;
    --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ RESET ============ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

button:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* ============ PANORAMA LAYER ============ */
.pano-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--bg-deep);
}

/* Mock background (giả lập panorama khi chưa có Pano2VR) */
.pano-mock {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 35%, rgba(255, 180, 80, 0.55) 0%, transparent 35%),
        radial-gradient(ellipse at 70% 30%, rgba(255, 220, 150, 0.7) 0%, transparent 18%),
        linear-gradient(180deg,
            #0a1628 0%,
            #1a2f4a 25%,
            #2d4a6b 45%,
            #4a6a8a 60%,
            #6b8aa6 70%,
            #8aa6c0 78%,
            #5a7a90 85%,
            #2a4a5a 100%);
    background-size: cover;
}

.pano2vr-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pano-overlay {
    display: none;
}

/* Floating altitude/temperature info. Keep value ids unchanged for WeatherService. */
.quick-info {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    z-index: 42;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 0;
    transform: translateX(-50%);
    color: #fff;
    pointer-events: none;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 136px;
    padding: 0;
}

.quick-info-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.quick-info-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.quick-info-label {
    font-size: 9px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.7px;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    white-space: nowrap;
}

.quick-info-value {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

:fullscreen .quick-info,
:-webkit-full-screen .quick-info,
body.is-fullscreen .quick-info {
    z-index: 1002;
}

@media (max-width: 768px) {
    .quick-info {
        top: calc(max(10px, env(safe-area-inset-top)) + 46px);
        left: max(14px, env(safe-area-inset-left));
        max-width: min(310px, calc(100vw - 28px));
        gap: 6px;
        padding: 0;
        transform: none;
    }

    .quick-info-item {
        min-width: 0;
        flex: 1 1 0;
        gap: 8px;
        padding: 0;
    }

    .quick-info-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .quick-info-label {
        font-size: 8px;
        letter-spacing: 0.45px;
    }

    .quick-info-value {
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px),
(max-height: 500px) and (orientation: landscape) {
    .quick-info {
        top: max(8px, env(safe-area-inset-top));
        left: 50%;
        gap: 8px;
        transform: translateX(-50%);
    }

    .quick-info-item {
        min-width: 0;
        gap: 6px;
    }

    .quick-info-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .quick-info-icon svg {
        width: 15px;
        height: 15px;
    }

    .quick-info-label {
        font-size: 7.5px;
        letter-spacing: 0.35px;
    }

    .quick-info-value {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .quick-info {
        width: min(174px, calc(100vw - 28px));
        flex-direction: column;
        align-items: stretch;
    }

    .quick-info-item {
        width: 100%;
    }
}

/* ============ UI WRAPPER ============ */
.ui-wrapper {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    transition: opacity var(--t-slow);
}

.ui-wrapper>* {
    pointer-events: auto;
}

.ui-wrapper.ui-hidden {
    opacity: 0;
    pointer-events: none;
}

.ui-wrapper.ui-hidden>* {
    pointer-events: none;
}

/* ============ FULLSCREEN OVERLAY — đẩy mọi UI lên trên panorama ============
   Khi browser vào fullscreen, các phần tử anh em với #container có thể bị
   ẩn bởi fullscreen-stacking-context. Ta dùng cả pseudo-class :fullscreen
   (browser hiện đại) và class body.is-fullscreen (fallback iOS Safari < 16.4)
   để chắc chắn overlay nằm trên cùng. */
:fullscreen .ui-wrapper,
:-webkit-full-screen .ui-wrapper,
body.is-fullscreen .ui-wrapper {
    z-index: 1000;
}

:fullscreen .control-bar,
:-webkit-full-screen .control-bar,
body.is-fullscreen .control-bar {
    z-index: 1001;
}

:fullscreen .status-bar,
:-webkit-full-screen .status-bar,
body.is-fullscreen .status-bar {
    z-index: 1001;
}

:fullscreen .map-hover-popup,
:-webkit-full-screen .map-hover-popup,
body.is-fullscreen .map-hover-popup {
    z-index: 10000;
}

:fullscreen .modal-backdrop,
:-webkit-full-screen .modal-backdrop,
body.is-fullscreen .modal-backdrop {
    z-index: 10001;
}

/* ============ TOP BAR ============ */
.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-mark {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.5));
}

.logo-mark svg {
    width: 100%;
    height: 100%;
}

.logo-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    line-height: 1;
}

.logo-slogan {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Compass */
.compass {
    flex: 1;
    max-width: 720px;
    display: flex;
    justify-content: center;
}

.compass-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    padding: 8px 0;
}

.compass-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(94, 234, 212, 0.15) 20%,
            rgba(94, 234, 212, 0.4) 50%,
            rgba(94, 234, 212, 0.15) 80%,
            transparent 100%);
}

.compass-tick {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-deep);
    z-index: 1;
}

.compass-tick.active {
    color: var(--accent-cyan);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 0;
}

.compass-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 12px var(--accent-cyan), 0 0 4px #fff;
    margin-bottom: 2px;
}

/* Top right controls */
.top-right-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--pill-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--t-base);
}

.btn-pill:hover {
    border-color: var(--panel-border-hover);
    background: var(--panel-bg-solid);
}

.btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--text-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--t-base);
}

.btn-icon:hover {
    border-color: var(--panel-border-hover);
    background: var(--panel-bg-solid);
}

/* ============ PANELS (chung) ============ */
.panel {
    position: absolute;
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-glow), var(--shadow-deep);
    padding: 18px;
    transition: all var(--t-slow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.panel-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-cyan);
}

.btn-collapse,
.btn-close {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    transition: all var(--t-fast);
}

.btn-collapse:hover,
.btn-close:hover {
    background: rgba(94, 234, 212, 0.15);
    color: var(--accent-cyan);
}

.panel-corner-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 999;
    pointer-events: auto;
}

.panel-corner-close svg {
    pointer-events: none;
}

.is-hidden,
.ai-console-frame {
    display: none;
}

/* ============ LEFT PANEL: DESTINATIONS ============ */
.panel-left {
    top: 100px;
    left: 24px;
    width: 280px;
    max-height: calc(100vh - 220px);
    /* chừa chỗ status-bar + control-bar */
    display: flex;
    flex-direction: column;
}

.panel-left .panel-header,
.panel-left .btn-see-all {
    flex-shrink: 0;
}

.destinations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* cho phép flex item co lại để overflow áp dụng */
    padding-right: 4px;
    /* chừa chỗ thanh scroll */
}

/* Scrollbar tùy biến cho destinations-list */
.destinations-list::-webkit-scrollbar {
    width: 6px;
}

.destinations-list::-webkit-scrollbar-track {
    background: transparent;
}

.destinations-list::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.25);
    border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 234, 212, 0.5);
}

.dest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--t-base);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.dest-item:hover,
.dest-item.active {
    background: rgba(94, 234, 212, 0.08);
    border-color: rgba(94, 234, 212, 0.3);
    transform: translateX(2px);
}

/* Trên PC, giới hạn chiều cao danh sách tương đương 6 điểm đến để không đè lên mini-map, cho phép cuộn */
@media (min-width: 769px) {
    .destinations-list {
        max-height: 446px;
        /* 6 items * 66px + 5 gaps * 10px = 446px */
    }
}

.dest-thumb {
    width: 64px;
    height: 50px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a4a5a, #4a6a8a);
    position: relative;
    overflow: hidden;
}

.dest-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4));
}

.dest-thumb-1 {
    background: linear-gradient(135deg, #4a7a8a 30%, #6a9aaa 100%);
}

.dest-thumb-2 {
    background: linear-gradient(135deg, #ff8a50, #ffd070);
}

.dest-thumb-3 {
    background: linear-gradient(135deg, #5a7a4a, #8aaa7a);
}

.dest-thumb-4 {
    background: linear-gradient(135deg, #2a5a4a, #5a8a7a);
}

.dest-thumb-5 {
    background: linear-gradient(135deg, #6a4a7a, #9a7aaa);
}

.dest-info {
    flex: 1;
    min-width: 0;
}

.dest-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.dest-name svg {
    color: var(--accent-green);
    flex-shrink: 0;
}

.dest-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-see-all {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 12px;
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all var(--t-base);
}

.btn-see-all:hover {
    background: rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.5);
}

/* Collapsed state */
.panel-left.collapsed {
    width: 50px;
    padding: 18px 8px;
}

.panel-left.collapsed .panel-title,
.panel-left.collapsed .destinations-list,
.panel-left.collapsed .btn-see-all {
    display: none;
}

.panel-left.collapsed .btn-collapse svg {
    transform: rotate(180deg);
}

/* ============ RIGHT PANEL: OVERVIEW ============ */
.panel-right {
    top: 100px;
    right: 24px;
    width: 300px;
}

.panel-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.stat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 8px;
    color: var(--accent-green);
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 8px 16px;
    margin-top: 6px;
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 8px;
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--t-base);
}

.btn-detail:hover {
    background: rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.5);
}

.panel-right.hidden {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

/* ============ CENTER STAGE ============ */
.center-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.center-stage>* {
    pointer-events: auto;
}

.center-stage--hide {
    opacity: 0;
    transform: translate(-50%, -58%);
    pointer-events: none !important;
}

.center-stage--hide>* {
    pointer-events: none !important;
}

.title-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-script {
    font-family: 'Dancing Script', cursive;
    font-size: 38px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: -8px;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.title-main {
    font-size: 92px;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #B6F4EA 0%, #5EEAD4 50%, #4ADE80 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(94, 234, 212, 0.4));
    line-height: 1;
}

.title-sub {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dot-sep {
    color: var(--accent-cyan);
    margin: 0 4px;
}

.title-divider {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 200px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

.divider-diamond {
    color: var(--accent-cyan);
    font-size: 12px;
    text-shadow: 0 0 8px var(--accent-cyan);
}

/* ============ MODAL DESTINATIONS GRID ============ */
.modal-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 10px;
}

.modal-dest-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--t-fast);
    display: flex;
    flex-direction: column;
}

.modal-dest-item:hover {
    background: rgba(94, 234, 212, 0.1);
    border-color: rgba(94, 234, 212, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.modal-dest-thumb {
    width: 100%;
    height: 140px;
    background-color: var(--panel-border);
    background-size: cover;
    background-position: center;
}

.modal-dest-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.modal-dest-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.modal-dest-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .modal-dest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .modal-dest-grid {
        grid-template-columns: 1fr;
    }
}

/* AI BUTTON */
.ai-button {
    position: relative;
    width: 220px;
    height: 220px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-base);
}

.ai-button:hover {
    transform: scale(1.03);
}

.ai-button:active {
    transform: scale(0.98);
}

.ai-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ai-ring-outer {
    inset: 0;
    border: 1px solid rgba(94, 234, 212, 0.25);
    animation: ring-pulse 3s ease-in-out infinite;
}

.ai-ring-mid {
    inset: 25px;
    border: 1px solid rgba(94, 234, 212, 0.45);
    animation: ring-pulse 3s ease-in-out infinite 0.5s;
}

@keyframes ring-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.ai-core {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: radial-gradient(circle at 50% 40%,
            rgba(94, 234, 212, 0.3) 0%,
            rgba(20, 60, 90, 0.85) 50%,
            rgba(10, 22, 40, 0.95) 100%);
    border: 2px solid var(--accent-cyan);
    box-shadow:
        0 0 30px var(--accent-glow),
        inset 0 0 30px rgba(94, 234, 212, 0.15);
    color: var(--accent-cyan);
}

.ai-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-cyan);
}

.ai-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
}

/* Sound waves */
.ai-wave {
    position: absolute;
    top: 50%;
    width: 100px;
    height: 60px;
    transform: translateY(-50%);
    pointer-events: none;
}

.ai-wave-left {
    left: -90px;
}

.ai-wave-right {
    right: -90px;
}

.ai-wave::before,
.ai-wave::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 12px;
    background: var(--accent-cyan);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--accent-glow);
    transform: translateY(-50%);
    animation: wave-pulse 1.2s ease-in-out infinite;
}

.ai-wave-left::before {
    right: 10px;
    height: 22px;
    animation-delay: 0s;
}

.ai-wave-left::after {
    right: 25px;
    height: 14px;
    animation-delay: 0.15s;
}

.ai-wave-right::before {
    left: 10px;
    height: 22px;
    animation-delay: 0s;
}

.ai-wave-right::after {
    left: 25px;
    height: 14px;
    animation-delay: 0.15s;
}

.ai-wave-left {
    background: repeating-linear-gradient(90deg,
            transparent 0, transparent 4px,
            var(--accent-cyan) 4px, var(--accent-cyan) 6px,
            transparent 6px, transparent 12px,
            rgba(94, 234, 212, 0.6) 12px, rgba(94, 234, 212, 0.6) 14px);
    -webkit-mask: radial-gradient(ellipse at right, #000 0%, transparent 80%);
    mask: radial-gradient(ellipse at right, #000 0%, transparent 80%);
}

.ai-wave-right {
    background: repeating-linear-gradient(90deg,
            rgba(94, 234, 212, 0.6) 0, rgba(94, 234, 212, 0.6) 2px,
            transparent 2px, transparent 8px,
            var(--accent-cyan) 8px, var(--accent-cyan) 10px,
            transparent 10px, transparent 14px);
    -webkit-mask: radial-gradient(ellipse at left, #000 0%, transparent 80%);
    mask: radial-gradient(ellipse at left, #000 0%, transparent 80%);
}

@keyframes wave-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateY(-50%) scaleY(0.6);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
    }
}

/* Header của mini-map: title bên trái, nút close bên phải
   (cùng pattern với .panel-header của panel-overview) */
.mini-map-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.mini-map-text {
    flex: 1;
    min-width: 0;
}

/* ============ MINI MAP ============ */
.mini-map {
    position: absolute;
    bottom: 90px;
    left: 24px;
    width: 320px;
    height: 220px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-glow), var(--shadow-deep);
    padding: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 50;
}

/* ============ MINI-MAP COLLAPSED INTERACTION ============
   Khi collapsed, mọi tap/click trên map (kể cả pin, popup, tooltip, MapLibre canvas)
   chỉ trigger expand. Triển khai: vô hiệu hoá pointer-events trên toàn bộ phần tử
   con của #map-container, cho event "xuyên qua" đến #mini-map handler.
   Cần !important vì MapLibre có thể inline-style pointer-events trên canvas.
   ============================================================== */
.mini-map:not(.expanded) #map-container,
.mini-map:not(.expanded) #map-container *,
.mini-map:not(.expanded) .maplibregl-map,
.mini-map:not(.expanded) .maplibregl-canvas-container,
.mini-map:not(.expanded) .maplibregl-canvas,
.mini-map:not(.expanded) .maplibregl-marker,
.mini-map:not(.expanded) .map-marker-pin,
.mini-map:not(.expanded) .maplibregl-popup,
.mini-map:not(.expanded) .maplibregl-popup * {
    pointer-events: none !important;
    /* Tắt touch gestures của trình duyệt (pinch zoom, scroll) trên map khi collapsed */
    touch-action: none !important;
}

/* Cursor zoom-in báo hiệu "click để bung lớn" — đặt trên parent vì children đã none */
.mini-map:not(.expanded) {
    cursor: zoom-in;
    touch-action: manipulation;
}

/* Overlay actions (close, layer, expand) vẫn nhận event bình thường */
.mini-map .mini-map-overlay-actions,
.mini-map .mini-map-overlay-actions * {
    pointer-events: auto !important;
    cursor: pointer;
}

.mini-map.expanded {
    bottom: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    z-index: 9999;
}

#map-container {
    width: 100%;
    height: 100%;
}

.mini-map-overlay-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    gap: 8px;
}

.btn-map-action {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 22, 40, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all var(--t-fast);
}

.btn-map-action:hover {
    background: rgba(94, 234, 212, 0.2);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.mini-map .maplibregl-ctrl-bottom-right,
.mini-map .maplibregl-ctrl-bottom-left {
    display: none;
    /* Ẩn logo và attribution để mini map gọn gàng */
}

/* Custom Marker Pin
   Cấu trúc 2 lớp:
   - .map-marker-pin (root) — MapLibre giữ inline transform translate(...) để
     định vị. KHÔNG đặt transform/animation lên đây — sẽ phá vị trí pin.
   - .map-marker-pin-inner (con) — chứa background + nhận hover/active/pressed
     scale animation. Free để transform tuỳ ý. */
.map-marker-pin {
    width: 54px;
    height: 54px;
    /* Pin có thể đụng vào tooltip hoặc nhau khi zoom — đảm bảo touch target rộng */
    touch-action: manipulation;
}

.map-marker-pin:not(.active)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255, 215, 0, 0.24) 0 38%, rgba(255, 204, 0, 0.12) 39% 68%, rgba(255, 204, 0, 0) 70%),
        conic-gradient(from 135deg, rgba(255, 215, 0, 0.18), rgba(255, 255, 255, 0.08), rgba(255, 204, 0, 0.16), rgba(255, 215, 0, 0.18));
    border: 1px solid rgba(255, 235, 150, 0.32);
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.28));
    pointer-events: none;
}

.map-marker-pin-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../media/img-thumbs/location.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: transform var(--t-fast), filter var(--t-fast);
    /* hint cho browser tối ưu animation */
    will-change: transform;
}

.map-marker-pin:hover .map-marker-pin-inner {
    transform: scale(1.15);
}

.map-marker-pin.active .map-marker-pin-inner {
    background-image: url('../media/img-thumbs/placeholder.gif');
    transform: scale(1.35);
    filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.85)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
}

.map-marker-pin.active {
    width: 36px;
    height: 36px;
    z-index: 20;
}

/* Long-press feedback trên mobile */
.map-marker-pin-inner.is-pressed {
    transform: scale(0.9);
    filter: brightness(0.85);
}

/* Radar (Heading Indicator) */
.map-radar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    pointer-events: none;
    z-index: 8;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.72));
    transition: transform 0.1s linear;
    /* Mượt mà khi xoay */
}

/* Radar cone using conic-gradient or clip-path. Let's use a simple SVG-like approach or CSS border */
.map-radar-cone {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        conic-gradient(from 322.5deg, rgba(59, 130, 246, 0) 0deg, rgba(96, 165, 250, 0.36) 10deg, rgba(37, 99, 235, 0.3) 37.5deg, rgba(96, 165, 250, 0.36) 65deg, rgba(59, 130, 246, 0) 75deg);
    border: none;
    box-shadow:
        0 0 14px rgba(59, 130, 246, 0.48),
        0 0 26px rgba(96, 165, 250, 0.24);
    /* Trỏ về phía "trên" (0 độ) của container */
}

/* Map Layer Button */
.btn-map-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    transition: all var(--t-fast);
}

.btn-map-layer:hover {
    background: rgba(94, 234, 212, 0.15);
    color: var(--accent-cyan);
}

.btn-open-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 10px;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--t-base);
}

.btn-open-map:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: var(--accent-green);
}

/* ============ CONTROL BAR ============ */
.control-bar {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    background: rgba(5, 14, 26, 0.58);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--pill-radius);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 22px rgba(94, 234, 212, 0.08);
}

.ctrl-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 12px;
    color: var(--text-secondary);
    transition: all var(--t-base);
}

.ctrl-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.ctrl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: all var(--t-base);
}

.ctrl-icon--glow {
    background: rgba(94, 234, 212, 0.12);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.4);
}

.ctrl-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ctrl-btn--active .ctrl-label {
    color: var(--accent-cyan);
}

.ctrl-dot {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 6px var(--accent-cyan);
}

/* ============ STATUS BAR ============ */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 14, 26, 0.85) 100%);
    font-size: 12px;
    color: var(--text-secondary);
}

.status-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-online {
    color: var(--accent-green);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--accent-green);
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.status-handbook {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: var(--pill-radius);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--t-base);
}

.status-handbook:hover {
    border-color: var(--panel-border-hover);
    background: var(--panel-bg-solid);
}

/* ============ MODAL ============ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    background: var(--bg-darker);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(94, 234, 212, 0.2), 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform var(--t-base);
}

.modal-backdrop.open .modal {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.modal-body h3 {
    color: var(--text-primary);
    font-size: 16px;
    margin: 18px 0 8px;
}

.modal-body h3:first-child {
    margin-top: 0;
}

.modal-body ul {
    margin: 10px 0 10px 20px;
}

.modal-body li {
    margin-bottom: 6px;
}

.modal-body strong {
    color: var(--accent-cyan);
}

.modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.modal-body th,
.modal-body td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-body th {
    color: var(--accent-cyan);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Scrollbar */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.3);
    border-radius: 3px;
}

/* Sheet backdrop ẩn mặc định (chỉ hiện trên mobile khi sheet mở) */
.sheet-backdrop {
    display: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
    .panel-left {
        width: 250px;
    }

    .panel-right {
        width: 270px;
    }

    .title-main {
        font-size: 76px;
    }

    .title-script {
        font-size: 32px;
    }
}

@media (max-width: 1024px) {
    .compass {
        display: none;
    }

    .panel-left,
    .panel-right {
        width: 230px;
    }

    .title-main {
        font-size: 60px;
        letter-spacing: 4px;
    }

    .title-script {
        font-size: 26px;
    }

    .title-sub {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .ai-button {
        width: 180px;
        height: 180px;
    }

    .ai-core {
        width: 110px;
        height: 110px;
    }
}

/* ============ TABLET / LARGE PHONE (≤ 768px) ============ */
@media (max-width: 768px) {

    /* Bump ui-wrapper above control-bar (20) + status-bar (15) để bottom-sheet
     và backdrop nằm trên các thanh điều khiển. Wrapper vẫn pointer-events:none
     nên không chặn click vào control-bar khi sheet đóng. */
    .ui-wrapper {
        z-index: 30;
    }

    /* Safe-area cho iPhone notch / home indicator */
    .top-bar {
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        gap: 10px;
    }

    .logo-mark {
        width: 36px;
        height: 36px;
    }

    .logo-name {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .logo-slogan {
        font-size: 7.5px;
        letter-spacing: 1.5px;
        margin-top: 2px;
    }

    .top-right-controls {
        gap: 6px;
    }

    .btn-pill {
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
    }

    /* Mini-map trên mobile portrait — luôn hiển thị, đặt PHÍA TRÊN control-bar
     với khoảng cách an toàn để không chồng nút điều khiển.
     - Control-bar: bottom = 48px + safe-area, height ≈ 60px (icon 32 + label 9 + padding)
       → top edge của control-bar cách viewport-bottom ≈ 108px
     - Mini-map bottom phải ≥ 108 + 16 (gap) = 124px */
    .mini-map {
        display: flex;
        width: 140px;
        height: 140px;
        bottom: calc(124px + env(safe-area-inset-bottom));
        left: 12px;
        /* z-index 35 = trên ui-wrapper (30) + control-bar (20) + status-bar (15) */
        z-index: 35;
        pointer-events: auto;
    }

    .mini-map-header {
        padding: 8px;
    }

    .mini-map-title {
        font-size: 11px;
    }

    .mini-map-desc {
        display: none;
    }

    .btn-open-map {
        padding: 6px;
        font-size: 10px;
    }

    /* Mini-map mờ đi khi bottom-sheet đang mở để không tranh chấp không gian */
    .ui-wrapper:has(.panel.mobile-open) .mini-map {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    /* Panel destinations + overview chuyển thành bottom-sheet */
    .panel-left,
    .panel-right {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 75vh;
        margin: 0;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 25;
    }

    .panel-left.mobile-open,
    .panel-right.mobile-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Grip handle gợi ý vuốt — kẻ ngang nhỏ trên cùng */
    .panel-left::before,
    .panel-right::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.25);
        margin: 0 auto 12px;
        flex-shrink: 0;
    }

    /* Header + nút đóng — đảm bảo click được */
    .panel-left .panel-header,
    .panel-right .panel-header {
        flex-shrink: 0;
    }

    .panel-left .btn-collapse,
    .panel-right .btn-close {
        position: relative;
        z-index: 2;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Xoay chevron của btn-collapse 90° để giống nút "đóng xuống" */
    .panel-left .btn-collapse svg {
        transform: rotate(-90deg);
        width: 14px;
        height: 14px;
    }

    /* Disable desktop "collapsed" state trên mobile */
    .panel-left.collapsed {
        width: 100%;
        padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    }

    .panel-left.collapsed .panel-title {
        display: block;
    }

    .panel-left.collapsed .destinations-list {
        display: flex;
    }

    .panel-left.collapsed .btn-see-all {
        display: flex;
    }

    .panel-left.collapsed .btn-collapse svg {
        transform: rotate(-90deg);
    }

    /* Sheet backdrop — tap để đóng. Đặt trong ui-wrapper (z-index 30),
     z-index local 24: trên top-bar (0) — dim phần đó, dưới panel (25) — panel hiện trên. */
    .sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(5, 14, 26, 0.5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        z-index: 24;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Destinations list cuộn được khi nội dung dài */
    .destinations-list {
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }

    .dest-item {
        padding: 10px;
    }

    .dest-thumb {
        width: 70px;
        height: 56px;
    }

    .dest-name {
        font-size: 14px;
    }

    .dest-desc {
        font-size: 12px;
    }

    /* Panel overview cuộn được */
    .panel-right .panel-desc {
        font-size: 13px;
    }

    .panel-right .stat-list {
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .center-stage {
        gap: 28px;
        padding: 0 16px;
    }

    .title-main {
        font-size: 46px;
        letter-spacing: 3px;
    }

    .title-script {
        font-size: 22px;
    }

    .title-sub {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .ai-button {
        width: 150px;
        height: 150px;
    }

    .ai-core {
        width: 96px;
        height: 96px;
    }

    .ai-label {
        font-size: 10px;
    }

    .ai-wave {
        display: none;
    }

    .ai-hint {
        font-size: 10px;
        bottom: -42px;
    }

    /* Control bar — đảm bảo nằm trên status bar, không tràn */
    .control-bar {
        bottom: calc(48px + env(safe-area-inset-bottom));
        padding: 8px 10px;
        gap: 2px;
        max-width: calc(100vw - 16px);
    }

    .ctrl-btn {
        padding: 6px 8px;
        min-width: 52px;
    }

    .ctrl-icon {
        width: 32px;
        height: 32px;
    }

    .ctrl-icon svg {
        width: 18px;
        height: 18px;
    }

    .ctrl-label {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    /* Status bar — gọn lại, ẩn ngày tháng */
    .status-bar {
        padding: 6px 14px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        font-size: 10px;
    }

    .status-left {
        gap: 10px;
    }

    .status-item:nth-child(3) {
        display: none;
    }

    /* ẩn date */
    .status-handbook {
        padding: 5px 10px;
        font-size: 10px;
        gap: 4px;
    }

    .status-handbook svg:last-child {
        display: none;
    }

    /* Modal chiếm gần full screen */
    .modal-backdrop {
        padding: 12px;
    }

    .modal {
        max-width: 100%;
        max-height: 88vh;
        border-radius: 16px;
    }

    .modal-header {
        padding: 14px 18px;
    }

    .modal-title {
        font-size: 16px;
    }

    .modal-body {
        padding: 16px 18px;
        font-size: 13px;
    }
}

/* ============ PHONE NHỎ (≤ 480px) ============ */
@media (max-width: 480px) {
    .logo-block {
        gap: 8px;
    }

    .logo-mark {
        width: 30px;
        height: 30px;
    }

    .logo-name {
        font-size: 15px;
        letter-spacing: 0.5px;
    }

    .logo-slogan {
        display: none;
    }

    .top-right-controls {
        gap: 4px;
    }

    .btn-pill {
        padding: 5px 8px;
        font-size: 11px;
    }

    .btn-pill svg:first-child {
        width: 14px;
        height: 14px;
    }

    .btn-pill svg:last-child {
        width: 10px;
        height: 10px;
    }

    .btn-icon {
        width: 34px;
        height: 34px;
    }

    .center-stage {
        gap: 22px;
    }

    .title-main {
        font-size: 38px;
        letter-spacing: 2px;
    }

    .title-script {
        font-size: 18px;
    }

    .title-sub {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .ai-button {
        width: 130px;
        height: 130px;
    }

    .ai-core {
        width: 84px;
        height: 84px;
    }

    .ai-core svg {
        width: 28px;
        height: 28px;
    }

    .ai-label {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    /* Status bar tối giản: chỉ giữ trạng thái online */
    .status-bar {
        padding: 5px 10px;
        padding-bottom: max(5px, env(safe-area-inset-bottom));
        font-size: 9.5px;
    }

    .status-left {
        gap: 8px;
    }

    .status-item:nth-child(2) {
        display: none;
    }

    /* ẩn cả time */
    .status-handbook span {
        display: none;
    }

    /* chỉ giữ icon */
    .status-handbook {
        padding: 5px 8px;
    }

    .control-bar {
        bottom: calc(36px + env(safe-area-inset-bottom));
        gap: 0;
        padding: 6px 8px;
    }

    .ctrl-btn {
        padding: 5px 6px;
        min-width: 48px;
    }

    .ctrl-icon {
        width: 28px;
        height: 28px;
    }

    .ctrl-icon svg {
        width: 16px;
        height: 16px;
    }

    .ctrl-label {
        font-size: 8px;
    }

    .modal-backdrop {
        padding: 8px;
    }

    .modal {
        max-height: 92vh;
        border-radius: 12px;
    }

    .modal-header {
        padding: 12px 14px;
    }

    .modal-title {
        font-size: 15px;
    }

    .modal-body {
        padding: 14px;
        font-size: 12.5px;
    }
}

/* ============ LANDSCAPE PHONE (chiều cao < 500px) ============ */
@media (max-height: 500px) and (orientation: landscape) {
    .top-bar {
        padding: 6px 14px;
    }

    .logo-mark {
        width: 28px;
        height: 28px;
    }

    .logo-name {
        font-size: 14px;
    }

    .logo-slogan {
        display: none;
    }

    /* Ẩn title-block để dành chỗ cho VR */
    .title-block {
        display: none;
    }

    .center-stage {
        gap: 0;
    }

    .ai-button {
        width: 110px;
        height: 110px;
    }

    .ai-core {
        width: 70px;
        height: 70px;
    }

    .ai-core svg {
        width: 24px;
        height: 24px;
    }

    .ai-label {
        font-size: 8px;
    }

    .ai-hint {
        display: none;
    }

    .control-bar {
        bottom: calc(8px + env(safe-area-inset-bottom));
        padding: 5px 8px;
    }

    .status-bar {
        display: none;
    }

    .ctrl-btn {
        padding: 4px 6px;
    }

    .ctrl-icon {
        width: 26px;
        height: 26px;
    }

    .ctrl-label {
        font-size: 7.5px;
    }
}

/* ============ TOUCH DEVICES — bỏ hover effects ============ */
@media (hover: none) and (pointer: coarse) {
    .ctrl-btn:hover {
        background: transparent;
        color: var(--text-secondary);
    }

    .btn-pill:hover,
    .btn-icon:hover,
    .status-handbook:hover {
        background: var(--panel-bg);
    }
}

/* ============ MAP HOVER POPUP ============ */
.map-hover-popup {
    position: fixed;
    z-index: 9999;
    width: 260px;
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--accent-glow);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.map-hover-popup.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.map-popup-thumb {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.map-popup-rating {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.map-popup-rating span {
    color: #fff;
    font-weight: 400;
}

.map-popup-content {
    padding: 12px;
}

.map-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin: 0 0 4px 0;
}

.map-popup-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.map-popup-actions {
    display: flex;
    gap: 6px;
}

.popup-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.popup-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.popup-btn.btn-vr {
    background: rgba(94, 234, 212, 0.1);
    color: var(--accent-cyan);
    border-color: rgba(94, 234, 212, 0.3);
}

.popup-btn.btn-vr:hover {
    background: rgba(94, 234, 212, 0.2);
}

.popup-btn svg {
    width: 14px;
    height: 14px;
}

/* Tooltip co lại trên màn hình hẹp để không tràn viewport */
@media (max-width: 480px) {
    .map-hover-popup {
        width: min(220px, calc(100vw - 24px));
    }

    .map-popup-thumb {
        height: 96px;
    }

    .map-popup-content {
        padding: 10px;
    }

    .map-popup-title {
        font-size: 13px;
    }

    .map-popup-desc {
        font-size: 10.5px;
        margin-bottom: 8px;
    }
}

/* =====================================================
   RESPONSIVE: MOBILE LANDSCAPE (Ngang & Hẹp)
   Layout 3 vùng: mini-map (trái-dưới) — center-stage (giữa) — panel-right
   - Bỏ scale() vì làm rect không khớp click target & gây overlap mơ hồ
   - Dùng width % cố định, panels không full-width
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Panels: cố định 2 bên, không còn là bottom-sheet */
    .panel-left,
    .panel-right {
        position: fixed;
        top: 50px;
        bottom: 56px;
        height: auto;
        max-height: calc(100vh - 110px);
        width: 38vw;
        max-width: 320px;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        border-radius: 12px;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 28;
    }

    .panel-left {
        left: 8px;
        right: auto;
    }

    .panel-right {
        right: 8px;
        left: auto;
    }

    /* Khi panel ẩn (mobile-open class không có) → ẩn hẳn để không che VR.
     Bottom-sheet logic không áp dụng ở landscape. */
    .panel-left:not(.mobile-open),
    .panel-right:not(.mobile-open) {
        transform: translateY(calc(100% + 60px));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.25s ease;
    }

    .panel-left.mobile-open,
    .panel-right.mobile-open {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    /* Bỏ grip handle — không phải bottom sheet nữa */
    .panel-left::before,
    .panel-right::before {
        display: none;
    }

    /* VÔ HIỆU HOÁ .collapsed (cột 50px) ở landscape phone — sẽ kéo dài
     thành cột dọc cao chiếm hết bên trái màn hình. Layout landscape
     đã có panel cố định 38vw, không cần thu gọn cột. Click "thu gọn"
     trong landscape đã được JS chuyển sang đóng panel hẳn (closeAllSheets).
     Rule dưới đây ngăn .collapsed gây hiệu ứng phụ nếu class còn sót. */
    .panel-left.collapsed {
        width: 38vw;
        max-width: 320px;
        padding: 10px;
    }

    .panel-left.collapsed .panel-title,
    .panel-left.collapsed .destinations-list,
    .panel-left.collapsed .btn-see-all {
        display: revert;
    }

    .panel-left.collapsed .btn-collapse svg {
        transform: none;
    }

    /* Mini-map: bottom-left, không chồng control-bar */
    .mini-map {
        width: 160px;
        height: 110px;
        bottom: 60px;
        left: 8px;
        z-index: 35;
        display: flex;
        transform: none;
    }

    /* Center-stage: cho click xuyên qua khi không có button trực tiếp */
    .center-stage {
        pointer-events: none;
    }

    .center-stage>* {
        pointer-events: auto;
    }

    .title-main {
        font-size: 32px;
    }

    .ai-button {
        width: 120px;
        height: 120px;
        margin-top: -10px;
    }

    .ai-core {
        width: 76px;
        height: 76px;
    }

    .ai-core svg {
        width: 24px;
        height: 24px;
    }

    .ai-label {
        font-size: 9px;
    }

    /* Control-bar: thu gọn ở dưới, bỏ khoảng cách an toàn (status-bar đã ẩn) */
    .control-bar {
        bottom: 6px;
        padding: 5px 8px;
    }
}

/* =====================================================
   ADAPTIVE NARROW LAYOUT: TABLET + MOBILE LANDSCAPE
   Goal: keep panorama visible and prevent left/right panels overlapping.
   Mobile portrait is intentionally excluded here.
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px),
(max-height: 500px) and (orientation: landscape) {
    .ui-wrapper {
        z-index: 30;
    }

    .top-bar {
        padding: 8px 14px;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        gap: 10px;
    }

    .logo-mark {
        width: 30px;
        height: 30px;
    }

    .logo-name {
        font-size: 15px;
        letter-spacing: 0.7px;
    }

    .logo-slogan {
        display: none;
    }

    .top-right-controls {
        gap: 6px;
    }

    .btn-pill {
        padding: 6px 10px;
        font-size: 11px;
    }

    .btn-icon {
        width: 34px;
        height: 34px;
    }

    .title-block {
        display: none;
    }

    .center-stage {
        pointer-events: none;
        gap: 0;
    }

    .center-stage>* {
        pointer-events: auto;
    }

    .ai-button {
        width: 112px;
        height: 112px;
    }

    .ai-core {
        width: 72px;
        height: 72px;
    }

    .ai-core svg {
        width: 24px;
        height: 24px;
    }

    .ai-label {
        font-size: 8px;
    }

    .ai-hint {
        display: none;
    }

    .panel-left,
    .panel-right {
        position: fixed;
        top: calc(max(8px, env(safe-area-inset-top)) + 44px);
        bottom: calc(54px + env(safe-area-inset-bottom));
        height: auto;
        max-height: none;
        width: min(42vw, 300px);
        max-width: 300px;
        margin: 0;
        padding: 12px;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        z-index: 42;
        transition:
            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.22s ease,
            width 0.24s ease,
            padding 0.24s ease;
    }

    .panel-left {
        left: max(8px, env(safe-area-inset-left));
        right: auto;
        transform: translateX(calc(-100% - 18px));
    }

    .panel-right {
        right: max(8px, env(safe-area-inset-right));
        left: auto;
        width: min(38vw, 320px);
        max-width: 320px;
        transform: translateX(calc(100% + 18px));
    }

    .panel-left.mobile-open,
    .panel-right.mobile-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .panel-left::before,
    .panel-right::before {
        display: none;
    }

    .panel-header {
        margin-bottom: 10px;
    }

    .panel-title {
        font-size: 11px;
        letter-spacing: 0.8px;
        line-height: 1.2;
    }

    .panel-desc {
        font-size: 11px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .destinations-list {
        max-height: none;
        gap: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dest-item {
        gap: 9px;
        padding: 7px;
        border-radius: 10px;
    }

    .dest-thumb {
        width: 54px;
        height: 42px;
        border-radius: 7px;
    }

    .dest-name {
        font-size: 12px;
    }

    .dest-desc {
        font-size: 10px;
    }

    .btn-see-all {
        padding: 8px;
        font-size: 11px;
        border-radius: 10px;
    }

    .stat-list {
        gap: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stat-item {
        gap: 9px;
        padding: 7px 2px;
    }

    .stat-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

    .stat-value {
        font-size: 14px;
    }

    .panel-left.collapsed {
        width: 48px;
        max-width: 48px;
        padding: 8px;
        overflow: visible;
    }

    .panel-left.collapsed .panel-header {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 0;
    }

    .panel-left.collapsed .panel-header::after {
        content: none;
        display: none;
    }

    .panel-left.collapsed .panel-title,
    .panel-left.collapsed .destinations-list,
    .panel-left.collapsed .btn-see-all {
        display: none !important;
    }

    .panel-left.collapsed .btn-collapse {
        width: 32px;
        height: 32px;
        color: var(--accent-cyan);
        background: rgba(94, 234, 212, 0.16);
        border: 1px solid rgba(94, 234, 212, 0.34);
        box-shadow: 0 0 14px rgba(94, 234, 212, 0.16);
    }

    .panel-left .btn-collapse svg {
        transform: none;
    }

    .panel-left.collapsed .btn-collapse svg {
        transform: rotate(180deg);
    }

    .sheet-backdrop.open {
        opacity: 0;
        pointer-events: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ui-wrapper:has(.panel.mobile-open) .mini-map {
        opacity: 1;
        pointer-events: auto;
    }

    .mini-map {
        display: flex;
        width: 170px;
        height: 112px;
        left: max(8px, env(safe-area-inset-left));
        bottom: calc(52px + env(safe-area-inset-bottom));
        border-radius: 10px;
        z-index: 36;
        transform: none;
        cursor: zoom-in;
    }

    body.layout-left-expanded .panel-left {
        bottom: calc(182px + env(safe-area-inset-bottom));
    }

    body.layout-left-expanded .mini-map:not(.expanded) {
        left: max(8px, env(safe-area-inset-left));
        bottom: calc(62px + env(safe-area-inset-bottom));
    }

    body.layout-left-collapsed .mini-map:not(.expanded) {
        left: calc(max(8px, env(safe-area-inset-left)) + 58px);
    }

    .mini-map.expanded {
        left: 3vw;
        bottom: 3vh;
        width: 94vw;
        height: 94vh;
        cursor: default;
    }

    .mini-map-overlay-actions {
        top: 6px;
        right: 6px;
        gap: 5px;
    }

    .btn-map-action {
        width: 26px;
        height: 26px;
    }

    .control-bar {
        bottom: calc(6px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 16px);
        padding: 5px 8px;
        gap: 0;
    }

    .ctrl-btn {
        min-width: 48px;
        padding: 4px 6px;
    }

    .ctrl-icon {
        width: 26px;
        height: 26px;
    }

    .ctrl-icon svg {
        width: 16px;
        height: 16px;
    }

    .ctrl-label {
        font-size: 7.5px;
        letter-spacing: 0.35px;
    }

    .status-bar {
        padding: 5px 12px;
        font-size: 9.5px;
    }

    .status-left {
        gap: 8px;
    }

    .status-handbook {
        padding: 5px 9px;
        font-size: 9.5px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {

    .panel-left,
    .panel-right {
        top: calc(max(6px, env(safe-area-inset-top)) + 38px);
        bottom: calc(42px + env(safe-area-inset-bottom));
        width: min(40vw, 280px);
        max-width: 280px;
        padding: 10px;
    }

    .panel-right {
        width: min(38vw, 300px);
        max-width: 300px;
    }

    .panel-left.collapsed {
        width: 46px;
        max-width: 46px;
    }

    .mini-map {
        width: 124px;
        height: 82px;
        bottom: calc(44px + env(safe-area-inset-bottom));
    }

    body.layout-left-expanded .panel-left {
        bottom: calc(150px + env(safe-area-inset-bottom));
    }

    body.layout-left-expanded .mini-map:not(.expanded) {
        left: max(8px, env(safe-area-inset-left));
        bottom: calc(56px + env(safe-area-inset-bottom));
    }

    body.layout-left-collapsed .mini-map:not(.expanded) {
        left: calc(max(8px, env(safe-area-inset-left)) + 56px);
    }

    .status-bar {
        display: none;
    }
}

/* ============ COMPACT OVERVIEW PANEL ============ */
#panel-overview {
    width: min(260px, calc(100vw - 48px));
    padding: 12px 13px;
    border-radius: 12px;
    background: rgba(5, 14, 26, 0.54);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#panel-overview .panel-header {
    margin-bottom: 7px;
    gap: 10px;
}

#panel-overview .panel-title {
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#panel-overview .btn-close {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

#panel-overview .btn-close svg {
    width: 12px;
    height: 12px;
}

#panel-overview .panel-desc {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    color: rgba(184, 197, 209, 0.86);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#panel-overview .stat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 8px;
    overflow: visible;
}

#panel-overview .stat-item {
    min-width: 0;
    min-height: 30px;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

#panel-overview .stat-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

#panel-overview .stat-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 6px;
    background: rgba(94, 234, 212, 0.08);
    color: var(--accent-cyan);
}

#panel-overview .stat-icon svg {
    width: 13px;
    height: 13px;
}

#panel-overview .stat-content,
#panel-overview .stat-label {
    display: none;
}

#panel-overview .stat-value {
    min-width: 0;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#panel-overview .btn-detail {
    width: 100%;
    margin-top: 0;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

#panel-overview .btn-detail svg {
    width: 12px;
    height: 12px;
}

.modal-title {
    font-weight: 500;
}

.modal--overview-detail {
    max-width: 520px;
    border-radius: 14px;
}

.modal--overview-detail .modal-header {
    padding: 13px 16px;
}

.modal--overview-detail .modal-title {
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal--overview-detail .modal-body {
    padding: 14px 16px 16px;
    font-size: 13px;
    line-height: 1.42;
}

.overview-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400;
}

.overview-detail-desc {
    margin: 0;
    color: rgba(184, 197, 209, 0.9);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42;
}

.overview-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 7px;
}

.overview-detail-stat {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(94, 234, 212, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.overview-detail-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(94, 234, 212, 0.08);
    color: var(--accent-cyan);
}

.overview-detail-icon svg {
    width: 13px;
    height: 13px;
}

.overview-detail-value {
    min-width: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    #panel-overview {
        width: min(92vw, 330px);
        padding: 11px 12px;
    }

    #panel-overview .panel-desc {
        font-size: 11px;
        line-height: 1.3;
    }
}

@media (max-width: 380px) {

    #panel-overview .stat-list,
    .overview-detail-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   AI ASSISTANT STATE — Huyền Sương / Gemini Live
   Áp dụng đồng bộ cho #ai-button (giữa) và .ctrl-btn[data-action="ai"]
   ========================================================== */
.ai-button.is-disabled,
.ctrl-btn[data-action="ai"].is-disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Khi đang ở trạng thái lỗi (denied/unsupported/...) thì cursor not-allowed
   để báo cho user là click không có tác dụng */
.ai-button.is-error.is-disabled,
.ctrl-btn[data-action="ai"].is-error.is-disabled {
    cursor: not-allowed;
}

/* Hint text khi error: bo nền đỏ nhẹ + tăng dễ đọc cho user */
.ai-button.is-error .ai-hint {
    color: #fecaca;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* CONNECTING — đang khởi tạo Gemini */
.ai-button.is-connecting .ai-core,
.ctrl-btn[data-action="ai"].is-connecting .ctrl-icon {
    animation: ai-pulse-soft 1.4s ease-in-out infinite;
    filter: saturate(0.6);
}

@keyframes ai-pulse-soft {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.95; }
}

/* RECORDING — Aurora theme: teal → cyan → violet, hài hoà với màu accent #5EEAD4 của trang */
.ai-button.is-recording .ai-core {
    background: linear-gradient(135deg, #14B8A6 0%, #06B6D4 35%, #6366F1 70%, #A855F7 100%) !important;
    background-size: 220% 220%;
    color: #fff;
    animation:
        ai-aurora-shift 4s ease-in-out infinite,
        ai-pulse-aurora 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ai-button.is-recording .ai-ring-outer {
    border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.35) inset;
    animation: ai-ring-spin 6s linear infinite;
}

.ai-button.is-recording .ai-ring-mid {
    border-color: rgba(94, 234, 212, 0.7);
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.45) inset;
    animation: ai-ring-spin-reverse 4s linear infinite;
}

/* Sóng aurora nhỏ ở 2 bên nút giữa */
.ai-button.is-recording .ai-wave-left,
.ai-button.is-recording .ai-wave-right {
    background: linear-gradient(90deg, rgba(94, 234, 212, 0.85), rgba(168, 85, 247, 0));
    opacity: 1;
    animation: ai-wave-float 1.6s ease-in-out infinite;
}

.ai-button.is-recording .ai-wave-right {
    background: linear-gradient(-90deg, rgba(168, 85, 247, 0.85), rgba(94, 234, 212, 0));
    animation-delay: -0.8s;
}

/* Control bar AI button — phiên bản nhẹ */
.ctrl-btn[data-action="ai"].is-recording {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(99, 102, 241, 0.32) 50%, rgba(168, 85, 247, 0.35) 100%);
    background-size: 200% 200%;
    box-shadow:
        0 0 18px rgba(94, 234, 212, 0.45),
        0 0 32px rgba(168, 85, 247, 0.3);
    animation: ai-aurora-shift 4s ease-in-out infinite;
}

.ctrl-btn[data-action="ai"].is-recording .ctrl-icon {
    color: #5EEAD4;
    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.85)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.5));
    animation: ai-icon-breathe 1.6s ease-in-out infinite;
}

/* Mặc định ẩn ctrl-dot của AI button — chỉ hiện khi đang ghi âm */
.ctrl-btn[data-action="ai"] .ctrl-dot {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ctrl-btn[data-action="ai"].is-recording .ctrl-dot {
    opacity: 1;
    background: linear-gradient(135deg, #5EEAD4, #A855F7);
    box-shadow:
        0 0 10px rgba(94, 234, 212, 1),
        0 0 18px rgba(168, 85, 247, 0.7);
    animation: ai-dot-blink 1s ease-in-out infinite;
}

@keyframes ai-aurora-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes ai-pulse-aurora {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(94, 234, 212, 0.55),
            0 0 24px rgba(94, 234, 212, 0.55),
            0 0 44px rgba(168, 85, 247, 0.35);
    }
    70% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 18px rgba(168, 85, 247, 0),
            0 0 32px rgba(94, 234, 212, 0.7),
            0 0 60px rgba(168, 85, 247, 0.45);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(168, 85, 247, 0),
            0 0 24px rgba(94, 234, 212, 0.55),
            0 0 44px rgba(168, 85, 247, 0.35);
    }
}

@keyframes ai-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ai-ring-spin-reverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

@keyframes ai-wave-float {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.6; }
    50%      { transform: translateX(4px) scaleX(1.15); opacity: 1; }
}

@keyframes ai-icon-breathe {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.85)); }
    50%      { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(94, 234, 212, 1)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.7)); }
}

@keyframes ai-dot-blink {
    0%, 100% { opacity: 1;   transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.4; transform: translateX(-50%) scale(0.85); }
}

/* READY — sẵn sàng nhận lệnh */
.ai-button.is-ready .ai-core {
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.45);
}

/* ERROR — mất kết nối backend */
.ai-button.is-error .ai-core,
.ctrl-btn[data-action="ai"].is-error .ctrl-icon {
    color: #fca5a5;
    filter: grayscale(0.4);
}