/* ========================================
   TABLET STYLES - 769px to 1399px
   ======================================== */



/* Tablet Landscape Orientation - Desktop-style grid with wider avatar */
@media (min-width: 769px) and (max-width: 1199px) and (orientation: landscape) {
    /* CSS Variables for consistent styling */
    :root {
        --primary-cyan: #00ffff;
        --primary-cyan-dark: #00cccc;
        --primary-cyan-light: #66ffff;
        --bg-dark: #1a1a1a;
        --bg-darker: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-muted: #888888;
        --error-color: #ff6666;
        --success-color: #00ffaa;
        --warning-color: #ffa500;
        --border-radius: 8px;
        --border-radius-small: 4px;
        --border-radius-large: 12px;
        --transition-fast: all 0.15s ease;
        --transition-normal: all 0.3s ease;
        --transition-slow: all 0.5s ease;
        --shadow-light: 0 2px 8px rgba(0, 255, 255, 0.1);
        --shadow-medium: 0 4px 16px rgba(0, 255, 255, 0.15);
        --shadow-heavy: 0 8px 32px rgba(0, 255, 255, 0.2);
        --glow-light: 0 0 10px rgba(0, 255, 255, 0.3);
        --glow-medium: 0 0 20px rgba(0, 255, 255, 0.4);
        --glow-heavy: 0 0 30px rgba(0, 255, 255, 0.5);
    }

    /* Layout Structure - Use desktop-style grid for landscape tablets */
    body.main-interface {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main Container - Optimized grid for landscape tablets */
    #widget-container {
        display: grid !important;
        grid-template-areas: "controls avatar tokens" !important;
        grid-template-columns: 280px 1fr 250px !important; /* Much wider avatar column! */
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Hide mobile layout elements in grid mode */
    .vertical-layout-container,
    .mobile-header,
    .mobile-user-info,
    #mobile-avatar-container,
    .mobile-avatar-controls,
    #mobile-start-talk-button,
    #mobile-status-display,
    #mobile-chat-log,
    .mobile-token-section,
    .mobile-config-area,
    .mobile-config-section,
    .mobile-bottom-buttons,
    #mobile-organization-management {
        display: none !important;
    }

    /* Show desktop layout elements */
    .desktop-controls-column,
    .desktop-avatar-column,
    .desktop-tokens-column {
        display: flex !important;
    }

    /* Controls Column (Left) - Much narrower for more avatar space */
    .desktop-controls-column {
        grid-area: controls !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        padding: 15px 18px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        box-sizing: border-box !important;
    }

    /* Avatar Column (Middle) - MUCH more space for avatar */
    .desktop-avatar-column {
        grid-area: avatar !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        background: rgba(0, 20, 20, 0.8) !important;
        border-left: 2px solid rgba(0, 255, 255, 0.2) !important;
        border-right: 2px solid rgba(0, 255, 255, 0.2) !important;
        padding: 25px !important;
        gap: 20px !important;
        overflow-y: auto !important;
        height: 100vh !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
    }

    /* Tokens Column (Right) - Compact for tablets */
    .desktop-tokens-column {
        grid-area: tokens !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        padding: 15px 16px !important;
        background: rgba(0, 20, 20, 0.8) !important;
        border-left: 2px solid rgba(0, 255, 255, 0.2) !important;
        box-sizing: border-box !important;
    }

    /* Avatar Container - MUCH larger with more space available */
    .desktop-avatar-column #avatar-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 95% !important;
        max-width: 750px !important; /* Much larger! */
        min-width: 450px !important;
        aspect-ratio: 1.2 !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        transition: width 0.3s ease, max-width 0.3s ease !important;
    }

    /* Avatar Controls Area - Better spacing for tablets */
    .desktop-avatar-column #avatar-controls-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        gap: 18px !important;
    }

    /* Talk Button - Larger for tablets */
    .desktop-avatar-column #start-talk-button {
        display: block !important;
        width: 100% !important;
        max-width: 450px !important;
        padding: 16px 28px !important;
        font-size: 1.15em !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    /* Status Display - Better for tablets */
    .desktop-avatar-column #status-display {
        width: 100% !important;
        max-width: 450px !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 12px !important;
        font-size: 1rem !important;
    }

    /* Chat Log - Larger for tablets */
    .desktop-avatar-column #chat-log {
        width: 100% !important;
        max-width: 650px !important;
        min-height: 200px !important;
        max-height: 300px !important;
        margin: 0 auto !important;
        padding: 18px !important;
        font-size: 0.95rem !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    /* Controls styling - compact for smaller left column */
    .desktop-controls-column .config-section h5 {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    .desktop-controls-column select,
    .desktop-controls-column input,
    .desktop-controls-column textarea {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    .desktop-controls-column button,
    .desktop-controls-column .btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        margin: 2px 0 !important;
    }

    /* Token section - Compact for smaller right column */
    .desktop-tokens-column .token-display {
        font-size: 1.2rem !important;
        padding: 10px !important;
    }

    .desktop-tokens-column .token-info {
        font-size: 0.8rem !important;
        margin: 6px 0 !important;
    }

    .desktop-tokens-column button {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .desktop-tokens-column .bottom-buttons-wrapper {
        margin-top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Ensure all buttons in tokens column are visible and properly styled */
    .desktop-tokens-column .bottom-buttons-wrapper button {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        line-height: 1.3 !important;
        white-space: pre-line !important; /* Allow line breaks */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .desktop-tokens-column button:hover {
        background: rgba(0, 255, 255, 0.2) !important;
        border-color: rgba(0, 255, 255, 0.5) !important;
        box-shadow: var(--glow-light) !important;
    }
}

/* Tablet Portrait Orientation - Vertical mobile-style layout */
@media (min-width: 769px) and (max-width: 1199px) and (orientation: portrait) {
    :root {
        --primary-cyan: #00ffff;
        --primary-cyan-dark: #00cccc;
        --primary-cyan-light: #33ffff;
        --secondary-blue: #0080ff;
        --accent-purple: #8a2be2;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --background-primary: #0a0a0a;
        --background-secondary: #1a1a1a;
        --border-color: rgba(0, 255, 255, 0.3);
        --success-color: #00ffaa;
        --warning-color: #ffaa00;
        --error-color: #ff6666;
        --shadow-light: 0 2px 10px rgba(0, 255, 255, 0.1);
        --shadow-medium: 0 4px 20px rgba(0, 255, 255, 0.2);
        --shadow-heavy: 0 8px 40px rgba(0, 0, 0, 0.3);
        --border-radius: 8px;
        --border-radius-large: 12px;
        --border-radius-small: 4px;
        --transition-fast: 0.2s ease;
        --transition-normal: 0.3s ease;
        --transition-slow: 0.5s ease;
    }

    body.main-interface {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #widget-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Hide desktop layout components in portrait mode */
    .desktop-controls-column,
    .desktop-tokens-column,
    .desktop-avatar-column,
    .desktop-header {
        display: none !important;
    }

    /* Enable mobile-style vertical layout */
    .vertical-layout-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .mobile-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
        gap: 12px !important;
    }
    
    .mobile-header-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-left: auto !important;
        padding-left: 15px !important;
        max-width: 400px !important;
        overflow: visible !important;
        height: 100% !important;
        position: relative !important;
        z-index: 100 !important;
        flex-shrink: 0 !important;
    }

    /* Tablet Header Organization Management */
    .mobile-header-org-management {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: rgba(0, 20, 20, 0.6) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        max-width: 350px !important;
        overflow: visible !important;
        height: 44px !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 101 !important;
        margin: 0 !important;
    }

    .mobile-header-org-switcher {
        position: relative !important;
        min-width: 110px !important;
        max-width: 140px !important;
        flex-shrink: 1 !important;
        z-index: 102 !important;
    }

    .mobile-header-switcher-button {
        width: 100% !important;
        padding: 8px 10px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 255, 255, 0.4) !important;
        border-radius: 5px !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 0.75rem !important;
        font-family: inherit !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: 0.3px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    .mobile-header-switcher-button .switcher-arrow {
        margin-left: 6px !important;
        transition: transform 0.2s ease !important;
        font-size: 0.7rem !important;
        color: rgba(0, 255, 255, 0.8) !important;
        flex-shrink: 0 !important;
    }

    .mobile-header-switcher-button.open .switcher-arrow {
        transform: rotate(180deg) !important;
    }

    .mobile-header-switcher-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        z-index: 1010 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border: 1px solid rgba(0, 255, 255, 0.5) !important;
        border-radius: 6px !important;
        backdrop-filter: blur(25px) !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        margin-top: 4px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 255, 255, 0.2) !important;
        min-width: 180px !important;
        max-width: 240px !important;
        white-space: normal !important;
    }

    .mobile-user-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
    }

    .mobile-user-info .user-email {
        font-size: 16px !important;
        color: var(--text-primary) !important;
        font-weight: 500 !important;
    }

    .mobile-user-info .user-status {
        font-size: 14px !important;
        color: var(--text-secondary) !important;
    }

    #mobile-organization-management {
        width: 100% !important;
        max-width: 500px !important;
    }

    .org-management-container .switcher-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .org-management-container .switcher-button {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    .org-management-container .manage-button {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        color: var(--primary-cyan) !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    #mobile-avatar-container {
        width: 100% !important;
        max-width: 500px !important;
        height: 400px !important;
        background: rgba(10, 10, 10, 0.8) !important;
        border: 2px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 15px !important;
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.2) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Ensure avatar container fills mobile container properly */
    #mobile-avatar-container #avatar-container {
        width: 100% !important;
        height: 100% !important;
        min-height: 380px !important;
        display: block !important;
    }

    #mobile-avatar-container canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .mobile-avatar-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 500px !important;
        align-items: center !important;
    }

    #mobile-start-talk-button {
        width: 100% !important;
        max-width: 300px !important;
        padding: 15px 20px !important;
        font-size: 18px !important;
    }

    #mobile-status-display {
        width: 100% !important;
        max-width: 500px !important;
        padding: 12px !important;
        text-align: center !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: var(--text-secondary) !important;
        font-size: 14px !important;
    }

    #mobile-chat-log {
        width: 100% !important;
        max-width: 500px !important;
        height: 200px !important;
        background: rgba(10, 10, 10, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        padding: 15px !important;
        overflow-y: auto !important;
        color: var(--text-primary) !important;
    }

    .mobile-token-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 500px !important;
        padding: 20px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 12px !important;
        align-items: center !important;
    }

    .mobile-token-section .token-display {
        font-size: 2rem !important;
        color: var(--primary-cyan) !important;
        font-weight: bold !important;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
    }

    .mobile-token-section .token-time-info {
        font-size: 14px !important;
        color: var(--text-secondary) !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    /* === MODAL STYLING FOR TABLET PORTRAIT === */
    .modal-overlay {
        backdrop-filter: blur(8px) !important;
        background: rgba(0, 0, 0, 0.85) !important;
        padding: 15px !important;
    }
    
    .modal-content {
        width: 90% !important;
        max-width: 500px !important;
        max-height: 85vh !important;
        margin: 7.5vh auto !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
        border: 1px solid rgba(0, 255, 255, 0.4) !important;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.8),
            0 0 30px rgba(0, 255, 255, 0.3) !important;
        padding: 25px 30px 20px 30px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .modal-content h4 {
        font-size: 22px !important;
        color: #00ffff !important;
        text-align: center !important;
        margin-bottom: 18px !important;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.6) !important;
        flex-shrink: 0 !important;
    }
    
    .modal-close,
    .modal-close-button {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    
    .modal-close:hover,
    .modal-close-button:hover {
        background: rgba(255, 0, 0, 0.2) !important;
        border-color: rgba(255, 0, 0, 0.5) !important;
        transform: scale(1.1) !important;
    }

    /* Settings Modal Specific */
    .settings-modal-content {
        width: 90% !important;
        max-width: 500px !important;
        padding: 25px 30px !important;
    }

    /* Modal Body Content */
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 5px 5px 5px !important;
        margin: 0 -5px -5px -5px !important;
    }

    /* Create scrollable content area for forms */
    #feedback-form,
    .modal-form {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 10px 10px 10px !important;
        margin: 0 -10px -10px -10px !important;
    }

    /* Form Styling within Modals */
    .modal-content .form-group {
        margin-bottom: 20px !important;
    }
    
    .modal-content label {
        font-size: 15px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .modal-content select,
    .modal-content textarea,
    .modal-content input {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }
    
    .modal-content select:focus,
    .modal-content textarea:focus,
    .modal-content input:focus {
        border-color: #00ffff !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
        outline: none !important;
    }
    
    .modal-content textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }
    
    .modal-content .form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 25px !important;
        flex-shrink: 0 !important;
    }
    
    .modal-content .form-actions button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    .modal-content .form-actions button[type="submit"],
    .modal-content .settings-button-primary {
        background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%) !important;
        color: #000000 !important;
        border: none !important;
    }
    
    .modal-content .form-actions button[type="submit"]:hover,
    .modal-content .settings-button-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4) !important;
    }
    
    .modal-content .modal-cancel-button,
    .modal-content .settings-button-secondary {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .modal-content .modal-cancel-button:hover,
    .modal-content .settings-button-secondary:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    /* Status Messages in Modals */
    .modal-content .status-message,
    .modal-content .feedback-status-message {
        margin-top: 15px !important;
        padding: 10px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        text-align: center !important;
        font-weight: 500 !important;
    }
    


    /* Enhanced Dropdown Content Styling for Tablet */
    .mobile-header-switcher-dropdown .dropdown-header {
        padding: 10px 14px !important;
        border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
        background: rgba(0, 255, 255, 0.05) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        color: var(--primary-cyan) !important;
    }
    
    .mobile-header-switcher-dropdown .create-button {
        background: rgba(0, 255, 255, 0.2) !important;
        border: 1px solid rgba(0, 255, 255, 0.4) !important;
        border-radius: 4px !important;
        color: var(--primary-cyan) !important;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-weight: 500 !important;
    }
    
    .mobile-header-switcher-dropdown .create-button:hover {
        background: rgba(0, 255, 255, 0.3) !important;
        border-color: var(--primary-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.3) !important;
    }
    
    .mobile-header-switcher-dropdown .switcher-list {
        max-height: 180px !important;
        overflow-y: auto !important;
        padding: 6px 0 !important;
    }
    
    .mobile-header-switcher-dropdown .switcher-list .switcher-item {
        padding: 8px 14px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
        font-size: 0.85rem !important;
        color: var(--text-primary) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .mobile-header-switcher-dropdown .switcher-list .switcher-item:hover {
        background: rgba(0, 255, 255, 0.1) !important;
        color: var(--primary-cyan) !important;
    }
    
    .mobile-header-switcher-dropdown .switcher-list .switcher-item.active {
        background: rgba(0, 255, 255, 0.15) !important;
        color: var(--primary-cyan) !important;
        font-weight: 500 !important;
        border-left: 3px solid var(--primary-cyan) !important;
    }
    
    .mobile-header-switcher-dropdown .switcher-list .switcher-item:last-child {
        border-bottom: none !important;
    }
}

/* Small to Medium Tablet Specific (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    #widget-container {
        max-width: 80% !important;
        padding: 25px !important;
    }
    
    /* Avatar is in desktop layout for tablets, not vertical layout */
    .desktop-avatar-column #avatar-container {
        max-width: 550px !important;
        height: auto !important;
    }
    
    #start-talk-button {
        max-width: 400px !important;
    }

    /* === MODAL STYLING FOR SMALL-MEDIUM TABLETS === */
    .modal-overlay {
        backdrop-filter: blur(8px) !important;
        background: rgba(0, 0, 0, 0.85) !important;
        padding: 15px !important;
    }
    
    .modal-content {
        width: 90% !important;
        max-width: 550px !important;
        max-height: 85vh !important;
        margin: 7.5vh auto !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
        border: 1px solid rgba(0, 255, 255, 0.4) !important;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.8),
            0 0 30px rgba(0, 255, 255, 0.3) !important;
        padding: 25px 30px 20px 30px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .modal-content h4 {
        font-size: 22px !important;
        color: #00ffff !important;
        text-align: center !important;
        margin-bottom: 18px !important;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.6) !important;
        flex-shrink: 0 !important;
    }
    
    .modal-close,
    .modal-close-button {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    
    .modal-close:hover,
    .modal-close-button:hover {
        background: rgba(255, 0, 0, 0.2) !important;
        border-color: rgba(255, 0, 0, 0.5) !important;
        transform: scale(1.1) !important;
    }

    /* Settings Modal Specific */
    .settings-modal-content {
        width: 750px !important;
        max-width: 90vw !important;
        padding: 25px 30px !important;
    }

    /* Modal Body Content */
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 5px 5px 5px !important;
        margin: 0 -5px -5px -5px !important;
    }

    /* Form Styling within Modals */
    .modal-content .form-group {
        margin-bottom: 20px !important;
    }
    
    .modal-content label {
        font-size: 15px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .modal-content select,
    .modal-content textarea,
    .modal-content input {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }
    
    .modal-content select:focus,
    .modal-content textarea:focus,
    .modal-content input:focus {
        border-color: #00ffff !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
        outline: none !important;
    }
    
    .modal-content textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }
    
    .modal-content .form-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-top: 25px !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }
    
    .modal-content .form-actions button {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        min-width: 100px !important;
    }
    
    .modal-content .form-actions button[type="submit"],
    .modal-content .settings-button-primary {
        background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%) !important;
        color: #000000 !important;
        border: none !important;
    }
    
    .modal-content .form-actions button[type="submit"]:hover,
    .modal-content .settings-button-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4) !important;
    }
    
    .modal-content .modal-cancel-button,
    .modal-content .settings-button-secondary {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .modal-content .modal-cancel-button:hover,
    .modal-content .settings-button-secondary:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
    }
    


    .config-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .config-section-half {
        width: 100% !important;
        max-width: none !important;
    }
    
    .advantage-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .package-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* Mobile layout fixes for smaller tablets in vertical mode */
    .mobile-avatar-controls {
        text-align: center !important;
        margin: 20px 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #mobile-start-talk-button {
        margin: 0 auto !important;
        display: block !important;
    }

    #mobile-status-display {
        margin: 12px auto !important;
        max-width: 350px !important;
        width: 100% !important;
        display: block !important;
    }

    /* Organization/Project Switchers - Tablet optimized */
    .org-management-container .switcher-row {
        display: flex !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .org-management-container .switcher-button {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Gear buttons - Appropriately sized for tablets */
    .org-management-container .manage-button {
        padding: 10px !important;
        font-size: 0.8rem !important;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    .org-management-container {
        margin: 20px 0 !important;
        width: 100% !important;
    }

    .org-switcher {
        margin-bottom: 15px !important;
        position: relative !important;
    }

    /* Mobile Avatar Controls for Small Tablets */
    .mobile-avatar-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 400px !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    /* Ensure avatar container fills mobile container for small tablets */
    #mobile-avatar-container {
        width: 100% !important;
        max-width: 400px !important;
        height: 350px !important;
        margin: 0 auto !important;
        background: rgba(10, 10, 10, 0.8) !important;
        border: 2px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 12px !important;
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.2) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #mobile-avatar-container #avatar-container {
        width: 100% !important;
        height: 100% !important;
        min-height: 330px !important;
        display: block !important;
    }

    #mobile-avatar-container canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

/* Large Tablet Specific (993px - 1199px) */
@media (min-width: 993px) and (max-width: 1199px) {
    #widget-container {
        max-width: 85% !important;
        padding: 30px !important;
    }
    
    /* Avatar is in desktop layout for tablets, not vertical layout */
    .desktop-avatar-column #avatar-container {
        max-width: 600px !important;
        height: auto !important;
    }
    
    #start-talk-button {
        max-width: 450px !important;
    }
    
    .settings-modal-content {
        width: 800px !important;
        max-width: 90vw !important;
    }
    
    /* Keep config sections side-by-side on large tablets */
    .config-row {
        flex-direction: row !important;
        gap: 25px !important;
    }
    
    .config-section-half {
        width: 48% !important;
        max-width: 48% !important;
    }
    
    /* === MODAL STYLING FOR LARGE TABLETS === */
    .modal-overlay {
        backdrop-filter: blur(10px) !important;
        background: rgba(0, 0, 0, 0.85) !important;
        padding: 20px !important;
    }
    
    .modal-content {
        width: 90% !important;
        max-width: 600px !important;
        max-height: 85vh !important;
        margin: 7.5vh auto !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
        border: 1px solid rgba(0, 255, 255, 0.4) !important;
        box-shadow: 
            0 25px 80px rgba(0, 0, 0, 0.8),
            0 0 40px rgba(0, 255, 255, 0.3) !important;
        padding: 25px 35px 18px 35px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .modal-content h4 {
        font-size: 24px !important;
        color: #00ffff !important;
        text-align: center !important;
        margin-bottom: 18px !important;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.6) !important;
        flex-shrink: 0 !important;
    }
    
    .modal-close,
    .modal-close-button {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    
    .modal-close:hover,
    .modal-close-button:hover {
        background: rgba(255, 0, 0, 0.2) !important;
        border-color: rgba(255, 0, 0, 0.5) !important;
        transform: scale(1.1) !important;
    }

    /* Settings Modal Specific */
    .settings-modal-content {
        width: 800px !important;
        max-width: 90vw !important;
        padding: 25px 35px !important;
    }

    /* Modal Body Content */
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 8px 8px 8px !important;
        margin: 0 -8px -8px -8px !important;
    }

    /* Form Styling within Modals */
    .modal-content .form-group {
        margin-bottom: 25px !important;
    }
    
    .modal-content label {
        font-size: 16px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
    
    .modal-content select,
    .modal-content textarea,
    .modal-content input {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }
    
    .modal-content select:focus,
    .modal-content textarea:focus,
    .modal-content input:focus {
        border-color: #00ffff !important;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important;
        outline: none !important;
    }
    
    .modal-content textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .modal-content .form-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        margin-top: 30px !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }
    
    .modal-content .form-actions button {
        padding: 14px 28px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        min-width: 120px !important;
    }
    
    .modal-content .form-actions button[type="submit"],
    .modal-content .settings-button-primary {
        background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%) !important;
        color: #000000 !important;
        border: none !important;
    }
    
    .modal-content .form-actions button[type="submit"]:hover,
    .modal-content .settings-button-primary:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5) !important;
    }
    
    .modal-content .modal-cancel-button,
    .modal-content .settings-button-secondary {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .modal-content .modal-cancel-button:hover,
    .modal-content .settings-button-secondary:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-3px) !important;
    }

    /* Status Messages in Modals */
    .modal-content .status-message,
    .modal-content .feedback-status-message {
        margin-top: 20px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        text-align: center !important;
        font-weight: 500 !important;
    }
    


    /* Ensure inline styles set by JavaScript work */
    .modal-overlay[style*="display: flex"],
    .modal-overlay[style*="visibility: visible"] {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.desktop-header {
    display: none !important;
}

/* Hide old organization management UI - moved to header */
#organization-management,
#mobile-organization-management {
    display: none !important;
}

/* Ensure mobile header organization management is visible when active */
.mobile-header-org-management.active,
#mobile-header-organization-management.active {
    display: flex !important;
}

/* ========================================
   iPad Pro and Large Tablet Portrait - 1024px wide devices
   This media query comes LAST to override general tablet portrait styles
   ======================================== */
@media (min-width: 1024px) and (max-width: 1199px) and (orientation: portrait) {
    :root {
        --primary-cyan: #00ffff;
        --primary-cyan-dark: #00cccc;
        --primary-cyan-light: #66ffff;
        --bg-dark: #1a1a1a;
        --bg-darker: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-muted: #888888;
        --error-color: #ff6666;
        --success-color: #00ffaa;
        --warning-color: #ffa500;
        --border-radius: 8px;
        --border-radius-small: 4px;
        --border-radius-large: 12px;
        --transition-fast: all 0.15s ease;
        --transition-normal: all 0.3s ease;
        --transition-slow: all 0.5s ease;
        --shadow-light: 0 2px 8px rgba(0, 255, 255, 0.1);
        --shadow-medium: 0 4px 16px rgba(0, 255, 255, 0.15);
        --shadow-heavy: 0 8px 32px rgba(0, 255, 255, 0.2);
        --glow-light: 0 0 10px rgba(0, 255, 255, 0.3);
        --glow-medium: 0 0 20px rgba(0, 255, 255, 0.4);
        --glow-heavy: 0 0 30px rgba(0, 255, 255, 0.5);
    }

    body.main-interface {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Scrollable layout for large tablets */
    #widget-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
    }

    /* Hide desktop layout components */
    .desktop-controls-column,
    .desktop-tokens-column,
    .desktop-avatar-column,
    .desktop-header {
        display: none !important;
    }

    /* Enable mobile-style vertical layout but centered */
    .vertical-layout-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 25px !important;
        width: 100% !important;
        max-width: 800px !important; /* Much larger for iPad Pro */
        margin: 0 auto !important;
    }

    .mobile-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 12px !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }

    .mobile-user-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 20px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border-radius: 15px !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }

    #mobile-organization-management {
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }

    #mobile-avatar-container {
        width: 100% !important;
        max-width: 700px !important; /* Much larger for iPad Pro */
        height: 500px !important; /* Taller for iPad Pro */
        background: rgba(10, 10, 10, 0.8) !important;
        border: 2px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 15px !important;
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.2) !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 auto !important;
    }

    .mobile-avatar-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 700px !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    #mobile-start-talk-button {
        width: 100% !important;
        max-width: 400px !important;
        padding: 18px 25px !important;
        font-size: 20px !important;
        margin: 0 auto !important;
    }

    #mobile-status-display {
        width: 100% !important;
        max-width: 700px !important;
        padding: 15px !important;
        text-align: center !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        color: var(--text-secondary) !important;
        font-size: 16px !important;
        margin: 0 auto !important;
    }

    #mobile-chat-log {
        width: 100% !important;
        max-width: 700px !important;
        height: 250px !important;
        background: rgba(10, 10, 10, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        padding: 20px !important;
        overflow-y: auto !important;
        color: var(--text-primary) !important;
        margin: 0 auto !important;
    }

    .mobile-token-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 700px !important;
        padding: 25px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 15px !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    .mobile-token-section .token-display {
        font-size: 2.5rem !important;
        color: var(--primary-cyan) !important;
        font-weight: bold !important;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
    }
} 

/* ========================================
   iPad Pro Landscape - 1366px wide devices
   Override desktop styles with touch-optimized interface
   ======================================== */
@media (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
    :root {
        --primary-cyan: #00ffff;
        --primary-cyan-dark: #00cccc;
        --primary-cyan-light: #66ffff;
        --bg-dark: #1a1a1a;
        --bg-darker: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-muted: #888888;
        --error-color: #ff6666;
        --success-color: #00ffaa;
        --warning-color: #ffa500;
        --border-radius: 8px;
        --border-radius-small: 4px;
        --border-radius-large: 12px;
        --transition-fast: all 0.15s ease;
        --transition-normal: all 0.3s ease;
        --transition-slow: all 0.5s ease;
        --shadow-light: 0 2px 8px rgba(0, 255, 255, 0.1);
        --shadow-medium: 0 4px 16px rgba(0, 255, 255, 0.15);
        --shadow-heavy: 0 8px 32px rgba(0, 255, 255, 0.2);
        --glow-light: 0 0 10px rgba(0, 255, 255, 0.3);
        --glow-medium: 0 0 20px rgba(0, 255, 255, 0.4);
        --glow-heavy: 0 0 30px rgba(0, 255, 255, 0.5);
    }

    body.main-interface {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Override desktop grid with touch-optimized layout */
    #widget-container {
        display: grid !important;
        grid-template-areas: "controls avatar tokens" !important;
        grid-template-columns: 350px 1fr 300px !important; /* Wider columns for touch */
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Hide desktop header - use mobile header instead */
    .desktop-header {
        display: none !important;
    }

    /* Hide mobile layout elements */
    .vertical-layout-container,
    .mobile-header,
    .mobile-user-info,
    #mobile-avatar-container,
    .mobile-avatar-controls,
    #mobile-start-talk-button,
    #mobile-status-display,
    #mobile-chat-log,
    .mobile-token-section,
    .mobile-config-area,
    .mobile-config-section,
    .mobile-bottom-buttons,
    #mobile-organization-management {
        display: none !important;
    }

    /* Show desktop layout elements with touch optimizations */
    .desktop-controls-column,
    .desktop-avatar-column,
    .desktop-tokens-column {
        display: flex !important;
    }

    /* Controls Column (Left) - Touch-optimized */
    .desktop-controls-column {
        grid-area: controls !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        padding: 20px 25px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        box-sizing: border-box !important;
    }

    /* Avatar Column (Middle) - Optimized for iPad Pro landscape */
    .desktop-avatar-column {
        grid-area: avatar !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        background: rgba(0, 20, 20, 0.8) !important;
        border-left: 2px solid rgba(0, 255, 255, 0.2) !important;
        border-right: 2px solid rgba(0, 255, 255, 0.2) !important;
        padding: 30px !important;
        gap: 25px !important;
        overflow-y: auto !important;
        height: 100vh !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
    }

    /* Tokens Column (Right) - Touch-optimized */
    .desktop-tokens-column {
        grid-area: tokens !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        padding: 20px 25px !important;
        background: rgba(0, 20, 20, 0.8) !important;
        border-left: 2px solid rgba(0, 255, 255, 0.2) !important;
        box-sizing: border-box !important;
    }

    /* Avatar Container - Optimized for iPad Pro landscape */
    .desktop-avatar-column #avatar-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 95% !important;
        max-width: 800px !important; /* Even larger for iPad Pro */
        min-width: 600px !important;
        aspect-ratio: 1.3 !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        transition: width 0.3s ease, max-width 0.3s ease !important;
    }

    /* Avatar Controls Area - Touch-optimized spacing */
    .desktop-avatar-column #avatar-controls-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        gap: 20px !important;
    }

    /* Talk Button - Large and touch-friendly */
    .desktop-avatar-column #start-talk-button {
        display: block !important;
        width: 100% !important;
        max-width: 500px !important;
        padding: 20px 35px !important;
        font-size: 1.25em !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 2px solid rgba(0, 255, 255, 0.5) !important;
        color: var(--primary-cyan) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
        font-weight: 600 !important;
    }

    .desktop-avatar-column #start-talk-button:hover {
        background: rgba(0, 255, 255, 0.2) !important;
        border-color: var(--primary-cyan) !important;
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.5) !important;
        transform: translateY(-2px) !important;
    }

    /* Status Display - Touch-optimized */
    .desktop-avatar-column #status-display {
        width: 100% !important;
        max-width: 500px !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 15px !important;
        font-size: 1.1rem !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: var(--text-secondary) !important;
    }

    /* Chat Log - Optimized for iPad Pro */
    .desktop-avatar-column #chat-log {
        width: 100% !important;
        max-width: 800px !important;
        min-height: 200px !important;
        max-height: 350px !important;
        margin: 0 auto !important;
        padding: 20px !important;
        font-size: 1rem !important;
        overflow-y: auto !important;
        flex: 1 !important;
        background: rgba(10, 10, 10, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: var(--text-primary) !important;
    }

    /* Controls styling - Touch-friendly sizing */
    .desktop-controls-column .config-section h5 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        color: var(--primary-cyan) !important;
    }

    .desktop-controls-column select,
    .desktop-controls-column input,
    .desktop-controls-column textarea {
        padding: 12px 15px !important;
        font-size: 1rem !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        color: var(--text-primary) !important;
        min-height: 44px !important; /* Touch-friendly minimum */
    }

    .desktop-controls-column button,
    .desktop-controls-column .btn {
        padding: 12px 18px !important;
        font-size: 1rem !important;
        margin: 6px 0 !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        color: var(--primary-cyan) !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        min-height: 44px !important; /* Touch-friendly minimum */
    }

    .desktop-controls-column button:hover,
    .desktop-controls-column .btn:hover {
        background: rgba(0, 255, 255, 0.2) !important;
        border-color: var(--primary-cyan) !important;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
    }

    /* Token section - Touch-optimized */
    .desktop-tokens-column .token-display {
        font-size: 1.8rem !important;
        padding: 15px !important;
        color: var(--primary-cyan) !important;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
        font-weight: bold !important;
    }

    .desktop-tokens-column .token-info {
        font-size: 1rem !important;
        margin: 8px 0 !important;
        color: var(--text-secondary) !important;
    }

    .desktop-tokens-column button {
        padding: 12px 18px !important;
        font-size: 1rem !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        color: var(--primary-cyan) !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        min-height: 44px !important;
    }

    .desktop-tokens-column button:hover {
        background: rgba(0, 255, 255, 0.2) !important;
        border-color: var(--primary-cyan) !important;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
    }

    .desktop-tokens-column .bottom-buttons-wrapper {
        margin-top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .desktop-tokens-column .bottom-buttons-wrapper button {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 1rem !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        color: var(--primary-cyan) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        min-height: 50px !important;
    }

    .desktop-tokens-column .bottom-buttons-wrapper button:hover {
        background: rgba(0, 255, 255, 0.2) !important;
        border-color: var(--primary-cyan) !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
        transform: translateY(-1px) !important;
    }
}