@media (min-width: 1025px) {
    #mobile-ui-root {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .top-island,
    .left-island-group,
    .bottom-footer,
    .custom-copyright,
    .route-controls,
    .locate-btn {
        display: none !important;
    }

    #mobile-ui-root {
        display: block !important;
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 100;
    }

    .amap-logo, 
    .amap-copyright,
    .amap-controls {
        display: none !important;
    }

    .pl-title { 
        font-size: 0 !important; 
        padding: 0 20px !important;
        margin-bottom: 20px !important; 
    }
    .pl-title::before {
        content: "Chongqing\A Drifter"; 
        white-space: pre;
        font-size: 3.6rem !important; 
        line-height: 1.05 !important;
        letter-spacing: -0.02em;
        display: block;
        margin-bottom: 12px;
        background: inherit;
        background-size: inherit;
        background-position: inherit;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: inherit;
    }
    .pl-title::after {
        content: "AI-POWERED SMART MAP";
        font-family: 'Inter', sans-serif !important;
        font-style: normal !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.15em !important;
        -webkit-text-fill-color: #d97706 !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .gemini-star-badge { 
        display: block !important;
        position: static !important;
        animation: none !important;
        opacity: 1 !important;
    }
    
    .pl-title .gemini-star-badge svg {
        width: 14px !important;
        height: 14px !important;
        animation: geminiPulse 3s ease-in-out infinite !important;
    }

    .pl-subtitle { 
        font-size: 0.85rem !important; 
        line-height: 1.65 !important;
        max-width: 85% !important; 
        margin-bottom: 32px !important; 
    }
    
    .pl-input-wrapper { 
        width: calc(100% - 50px) !important; 
        margin-bottom: 12px !important;
    }
    .pl-input {
        padding: 12px 30px 12px 0 !important; 
    }
    .pl-arrow-btn {
        bottom: 12px !important; 
    }
    .pl-msg {
        margin-bottom: 24px !important;
        min-height: 18px !important;
    }
    
    .pl-btn-group { 
        flex-direction: column !important; 
        gap: 16px !important; 
        width: calc(100% - 50px) !important; 
    }
    .pl-neu-btn { 
        justify-content: center !important; 
        width: 100% !important; 
        padding: 15px 20px !important; 
        font-size: 0.85rem !important;
    }
    
    #premium-landing > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        row-gap: 16px !important;
        width: 100% !important;
        padding: 0 40px !important;
        margin-top: 12px !important;
    }
    #premium-landing > div:last-child button {
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        font-size: 0.6rem !important;
        color: #a8a29e !important; 
    }
    #premium-landing > div:last-child button:nth-child(1) {
        text-align: right !important;
        padding-right: 16px !important;
        border-right: 1px solid rgba(0,0,0,0.15) !important; 
    }
    #premium-landing > div:last-child button:nth-child(2) {
        text-align: left !important;
        padding-left: 16px !important;
    }
    #premium-landing > div:last-child a {
        grid-column: 1 / 3 !important;
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }

    .tour-welcome-card, .tour-card {
        width: 88vw !important;
        max-width: 320px !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }
    .tour-welcome-card h2 { 
        font-size: 1.4rem !important; 
        line-height: 1.3 !important; 
    }
    .tour-welcome-card p { 
        font-size: 0.85rem !important; 
        margin-bottom: 20px !important; 
    }

    .m-header {
        position: absolute; top: 16px; left: 16px; right: 16px;
        display: flex; justify-content: space-between; align-items: center;
        pointer-events: auto; z-index: 10;
    }
    .m-logo { display: flex; align-items: center; gap: 8px; background: rgba(14,14,18,0.85); padding: 8px 14px; border-radius: 50px; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
    .m-logo-line { width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(180deg,#f87171,#fbbf24,#34d399,#60a5fa,#f87171); background-size: 100% 200%; animation: colorFlow 2s infinite; }
    .m-logo-text { color: white; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; }
    .m-search-trigger { width: 42px; height: 42px; border-radius: 50%; background: rgba(14,14,18,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

    .m-categories-wrapper {
        position: absolute; top: 72px; left: 0; right: 0;
        pointer-events: auto; z-index: 10;
    }
    .m-categories {
        display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px;
        padding: 0 16px;
    }
    .m-categories::-webkit-scrollbar { display: none; }
    .m-cat-btn {
        background: rgba(14,14,18,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.6); padding: 8px 16px; border-radius: 50px; font-size: 0.75rem; font-weight: 600;
        white-space: nowrap; transition: 0.2s; display: flex; align-items: center; font-family: 'Inter', sans-serif;
    }
    .m-cat-btn.active { background: #1c1917; color: #fbbf24; border-color: #fbbf24; }

    .m-fab-container {
        position: absolute; bottom: 90px; right: 16px;
        display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
        pointer-events: auto; z-index: 20;
    }
    .m-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
    .m-fab-main {
        width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
        color: #1c1917; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 8px 24px rgba(251,191,36,0.4); transition: 0.3s;
        position: relative !important;
    }

    .m-bottom-nav {
        position: absolute; bottom: 0; left: 0; right: 0; height: 72px;
        background: rgba(14,14,18,0.85); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.08);
        display: flex; justify-content: space-around; align-items: center; padding: 0 12px 12px;
        pointer-events: auto; z-index: 20;
    }
    .m-nav-item {
        background: none; border: none; color: rgba(255,255,255,0.5); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; font-family: 'Inter', sans-serif;
    }
    .m-nav-item span { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; }
    .m-nav-item:active { color: #fbbf24; }

    .m-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(16px);
        z-index: 200; display: none; flex-direction: column; padding: 16px; opacity: 0; transition: opacity 0.2s; pointer-events: none;
    }
    .m-overlay.visible { display: flex; opacity: 1; pointer-events: auto; }
    .m-search-bar { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.1); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); }
    .m-search-bar input { flex: 1; background: transparent; border: none; color: white; font-size: 1rem; outline: none; font-family: 'Inter', sans-serif; }
    .m-search-bar input::placeholder { color: rgba(255,255,255,0.4); }
    .m-search-bar button { background: none; border: none; display: flex; align-items: center; }
    .m-ai-reply { margin-top: 16px; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 12px; color: white; font-size: 0.9rem; line-height: 1.5; display: none; align-items: flex-start; gap: 10px; border: 1px solid rgba(255,255,255,0.1); }

    #filterDrawerOverlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    #filterDrawerOverlay.visible {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .left-island-group.mobile-open {
        display: flex !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 360px !important;
        height: 420px !important;
        max-height: 85vh !important;
        box-sizing: border-box !important;
        background: rgba(14, 14, 18, 0.96) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 24px !important;
        z-index: 1000 !important;
        padding: 24px 20px 24px 20px !important;
        flex-direction: column !important;
        gap: 0 !important;
        box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
        pointer-events: auto !important;
        animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .left-island-group.mobile-open .left-island-1 {
        display: none !important;
    }

    .left-island-group.mobile-open .left-island-2 {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 16px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .left-island-group.mobile-open .left-island-3 {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .left-island-group.mobile-open .left-cart-tabs {
        margin: 16px 0 12px 0 !important; 
        padding: 0 !important;
        display: flex !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .left-island-group.mobile-open .left-cart-tab {
        font-size: 0.65rem !important;
        padding: 12px 0 !important;
        flex: 1 !important;
        text-align: center !important;
    }

    .left-island-group.mobile-open .left-cart-body {
        flex: 1 !important; 
        overflow-y: auto !important;
        padding-right: 4px !important;
        margin-bottom: 16px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .left-island-group.mobile-open .generate-btn {
        flex-shrink: 0 !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .left-island-group.mobile-open .left-cart-body::-webkit-scrollbar {
        width: 3px !important;
    }
    .left-island-group.mobile-open .left-cart-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 3px !important;
    }

    .route-controls[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        position: absolute !important;
        top: 118px !important;
        left: 0 !important;
        right: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 16px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 10 !important;
        gap: 8px !important;
    }
    
    .route-controls::-webkit-scrollbar {
        display: none !important; 
    }
    
    .route-controls .rc-title {
        display: none !important; 
    }
    
    .route-controls .rc-btn {
        background: rgba(14,14,18,0.7) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: rgba(255,255,255,0.6) !important;
        padding: 8px 16px !important;
        border-radius: 50px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        transition: 0.2s !important;
        font-family: 'Inter', sans-serif !important;
        flex-shrink: 0 !important;
    }
    
    .route-controls .rc-btn.active {
        background: #1c1917 !important;
        color: #fbbf24 !important;
        border-color: #fbbf24 !important;
    }

    #travelGuideOverlay { padding: 0 !important; align-items: flex-start !important; }
    .tg-modal-box { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; border: none !important; margin: 0 !important; box-sizing: border-box !important; }
    .tg-layout { flex-direction: column; }
    .tg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 16px; overflow-y: hidden; overflow-x: auto; display: flex; flex-shrink: 0; }
    .tg-sidebar::-webkit-scrollbar { display: none; }
    .tg-sidebar #tgSidebarNav { flex-direction: row !important; gap: 8px; }
    .tg-nav { white-space: nowrap; padding: 8px 12px; box-shadow: none; border-bottom: 2px solid transparent; border-radius: 8px; }
    .tg-nav.active { box-shadow: inset 0 -2px 0 0 #fbbf24; background: rgba(255,255,255,0.08); border-radius: 8px 8px 0 0; padding-left: 12px; }
    .tg-content-area { padding: 20px 16px; flex: 1; }
    .tg-header-box { padding: 48px 20px 16px 20px !important; flex-shrink: 0; box-sizing: border-box !important; }
    .tg-header-box h2 { font-size: 2rem !important; }

    .modal-overlay {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }
    .modal-header {
        padding: 48px 20px 16px 20px !important;
        flex-direction: column !important;
        position: relative !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .modal-header h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        max-width: 85% !important;
        white-space: normal !important;
    }
    .close-btn {
        position: absolute !important;
        top: 48px !important;
        right: 16px !important;
    }
    .modal-body {
        padding: 20px !important;
        gap: 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 !important;
    }
    .day-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .day-left {
        padding-top: 0 !important;
    }
    .day-num-bg {
        font-size: 4rem !important;
        top: -12px !important;
        left: -5px !important;
    }
    .place-card {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .place-img {
        width: 100% !important;
        height: 180px !important;
    }
    .trip-overview-box, .trip-tips-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .revision-box {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .revision-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .revision-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .modal-footer {
        flex-direction: column !important;
        padding: 16px 20px 48px 20px !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    .footer-stats {
        text-align: center !important;
        margin-bottom: 4px !important;
    }
    .modal-footer > div {
        flex-direction: column !important;
        width: 100% !important;
    }
    .start-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    @keyframes modalPopIn {
        from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .drifter-ai-reply {
        top: 130px !important;
        width: 92% !important;
        max-width: none !important;
        padding: 14px 18px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
    }

    .drifter-ai-reply-text {
        white-space: normal !important;
        line-height: 1.5 !important;
        display: block !important;
        word-wrap: break-word !important;
        font-size: 0.85rem !important;
    }
}