/* ============================================
   PROPELLERDECK MOBILE RESPONSIVE STYLES
   ============================================
   This file contains all mobile-specific styles
   and responsive overrides for PropellerDeck
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES & BREAKPOINTS
   ============================================ */
:root {
    /* Breakpoint Variables */
    --mobile-sm: 375px;
    /* iPhone SE, small phones */
    --mobile-md: 428px;
    /* Standard phones */
    --tablet: 768px;
    /* Tablets */
    --desktop: 1024px;
    /* Desktop */

    /* Mobile Spacing */
    --mobile-padding-sm: 8px;
    --mobile-padding-md: 12px;
    --mobile-padding-lg: 16px;
    --mobile-gap: 10px;

    /* Touch Targets */
    --touch-target-min: 44px;
    --touch-target-recommended: 48px;
}

/* ============================================
   2. MOBILE-FIRST BASE STYLES
   ============================================ */
@media (max-width: 768px) {

    /* Global box-sizing fix */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* Prevent horizontal scroll - CRITICAL */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Single column grid for mobile - no footer */
        grid-template-columns: 1fr !important;
        grid-template-rows: 48px 1fr !important;
        grid-template-areas:
            "topbar"
            "content" !important;
    }

    /* All containers must respect viewport */
    .content,
    .topbar,
    .footer,
    .mobile-panel,
    .mobile-panel-content {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Smooth scrolling for touch */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: var(--text-md) !important;
        /* Prevents iOS zoom */
    }
}

/* ============================================
   3. FLUID TYPOGRAPHY
   ============================================ */
/* Desktop to Mobile scaling */
@media (max-width: 1024px) {

    h1,
    .true-h1 {
        font-size: clamp(1.5rem, 5vw + 0.5rem, 2rem);
    }

    h2 {
        font-size: clamp(1.25rem, 4vw + 0.4rem, 1.5rem);
    }

    h3 {
        font-size: clamp(1.1rem, 3vw + 0.3rem, 1.25rem);
    }

    body,
    p {
        font-size: clamp(0.875rem, 2vw + 0.2rem, 1rem);
    }

    .chat-bubble,
    .llm {
        font-size: clamp(0.875rem, 2vw + 0.2rem, 0.95rem);
    }

    #topbar-logo {
        font-size: var(--text-md);
    }
}

/* ============================================
   4. HAMBURGER MENU & OVERLAY
   ============================================ */
/* Hamburger Button - Hidden on Desktop */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: var(--space-8);
    height: var(--space-8);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    z-index: 1001;
    transition: transform 0.3s ease;
    position: relative;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Show hamburger on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

/* Hamburger Animation when menu is open */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Hamburger notification badge */
.mobile-menu-toggle__badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-danger, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.mobile-menu-toggle__badge--hidden {
    opacity: 0;
    transform: scale(0);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================
   4b. MOBILE MENU (Context-Aware Hamburger)
   ============================================ */
/* Hidden by default, slides in from left on mobile */
.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 48px;
        left: 0;
        width: 280px;
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
        background: var(--color-surface);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        border-right: 1px solid var(--color-border);
    }

    .mobile-menu--open {
        transform: translateX(0);
    }

    /* ── Mode Toggle Pills ── */
    .mobile-menu__pills {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .mobile-menu__pill {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--color-border);
        border-radius: 20px;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .mobile-menu__pill:hover {
        border-color: var(--color-accent);
        color: var(--color-text);
    }

    .mobile-menu__pill--active {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
        font-weight: 600;
    }

    .mobile-menu__pill--active:hover {
        color: #fff;
    }

    .mobile-menu__pill i {
        font-size: 0.75rem;
    }

    /* ── Sections ── */
    .mobile-menu__section {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
    }

    /* ── Dashboard Switcher ── */
    .mobile-menu__switcher {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 16px;
        margin-bottom: 4px;
    }

    .mobile-menu__switcher-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .mobile-menu__switcher-btn:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }

    .mobile-menu__switcher-btn--active {
        background: var(--color-surface-active);
        color: var(--color-text);
        font-weight: 600;
    }

    .mobile-menu__switcher-btn i {
        width: 18px;
        text-align: center;
        font-size: 0.85rem;
        color: var(--color-accent);
    }

    /* ── Nav List ── */
    .mobile-menu__nav {
        list-style: none;
        margin: 0;
        padding: 0 12px;
    }

    .mobile-menu__nav li {
        margin: 2px 0;
    }

    .mobile-menu__link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
        transition: all 0.15s ease;
        min-height: 40px;
    }

    .mobile-menu__link:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }

    .mobile-menu__link--active {
        background: linear-gradient(to left, transparent 0%, rgba(60, 160, 160, 0.3) 50%, var(--color-accent) 100%);
        color: var(--color-text);
        font-weight: 600;
    }

    .mobile-menu__link--new {
        color: var(--color-accent);
        font-weight: 500;
    }

    .mobile-menu__link--new:hover {
        color: var(--color-accent);
        background: rgba(60, 160, 160, 0.1);
    }

    .mobile-menu__link i {
        width: 18px;
        text-align: center;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .mobile-menu__link-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* ── Nav Group & Section Headings ── */
    .mobile-menu__nav-group {
        padding: 0;
    }

    .mobile-menu__nav-heading {
        padding: 12px 24px 4px;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* ── Footer ── */
    .mobile-menu__footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 12px 16px;
        border-top: 1px solid var(--color-border);
        margin-top: auto;
        flex-shrink: 0;
    }

    .mobile-menu__footer-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        border-radius: 50%;
        border: 1px solid var(--color-border);
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-decoration: none;
    }

    .mobile-menu__footer-btn:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
        border-color: var(--color-accent);
    }

    /* Notification badge on mobile menu footer button */
    .mobile-menu__footer-btn--notif {
        position: relative;
    }

    .mobile-menu__footer-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--color-danger, #ef4444);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        border-radius: 10px;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .mobile-menu__footer-badge--hidden {
        opacity: 0;
        transform: scale(0);
    }
}

/* Desktop: hide mobile menu completely */
@media (min-width: 769px) {
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ============================================
   5. TOPBAR MOBILE STYLES
   GitHub-mobile-inspired: hamburger | logo+selector | profile
   ============================================ */
@media (max-width: 768px) {

    /* ── Topbar container ── */
    .topbar {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 var(--space-3) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        z-index: 9999 !important;
        border-bottom: 1px solid var(--color-border) !important;
        gap: 0 !important;
    }

    /* ── Left: hamburger ── */
    .mobile-menu-toggle {
        flex-shrink: 0 !important;
        margin-right: var(--space-3) !important;
        order: 0 !important;
    }

    /* ── Center: logo + product selector ── */
    .topbar__left {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    #topbar-logo {
        font-size: var(--text-md) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    #topbar-logo a {
        display: flex !important;
        align-items: baseline !important;
    }

    #version-badge {
        display: none !important;
    }

    /* Product selector — compact inline display */
    .product-selector {
        position: relative !important;
        margin-left: 2px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .product-selector__trigger {
        gap: 0 !important;
        align-items: center !important;
    }

    .product-selector__org-name {
        display: none !important;
    }

    .product-selector__slash {
        font-size: 13px !important;
        margin: 0 3px !important;
    }

    .product-selector__label {
        font-size: 13px !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .product-selector__chevron {
        font-size: 9px !important;
        margin-left: 4px !important;
    }

    .product-selector__panel {
        left: 0 !important;
        right: auto !important;
        width: 240px !important;
    }

    /* ── Right: bell + profile ── */
    .topbar__nav {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: var(--space-2) !important;
    }

    .topbar__menu {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Hide nav buttons (Dashboard/Workspaces) — now in mobile menu */
    .topbar__nav-btn {
        display: none !important;
    }

    /* Hide theme toggle, help dropdown, changelog on mobile — now in mobile menu */
    .topbar__item:has(.theme-toggle-btn),
    .topbar__item:has(a[href*="changelog"]),
    .topbar__item:has(.help-dropdown) {
        display: none !important;
    }

    .username {
        display: none !important;
    }

    .topbar__item {
        padding: 0 !important;
    }

    /* Show mobile-only dropdown items */
    .dropdown-item.mobile-only {
        display: flex !important;
    }

    /* Profile pic + dropdown */
    .topbar__item.dropdown {
        display: flex !important;
        position: relative !important;
        z-index: 10000 !important;
        padding: 0 !important;
    }

    .topbar__profile-pic {
        display: block !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
    }

    /* Dropdown menu — fixed below topbar */
    .dropdown-menu {
        position: fixed !important;
        z-index: 99999 !important;
        top: 48px !important;
        right: 8px !important;
        background: var(--color-surface-elevated) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 8px !important;
    }
}

/* Desktop: show topbar buttons, hide mobile-only dropdown items */
@media (min-width: 769px) {
    .dropdown-item.mobile-only {
        display: none !important;
    }

    .topbar__item:has(.theme-toggle-btn),
    .topbar__item:has(.help-dropdown) {
        display: flex !important;
    }
}

/* ============================================
   7. CONTENT AREA MOBILE LAYOUT
   ============================================ */
@media (max-width: 768px) {
    .content {
        padding: 0 !important;
        grid-area: content;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .content__section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "workflow-management"
            "llmchat";
        gap: var(--space-4);
        height: auto;
        max-height: none;
    }

    /* Hide divider on mobile */
    .divider {
        display: none;
    }

    /* Full width components */
    .workflow-management,
    .llmchat {
        width: 100%;
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* ============================================
   8. CHAT INTERFACE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .chat-window {
        padding-bottom: var(--space-4);
    }

    .chat-bubble {
        max-width: 90%;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-base);
    }

    .llm {
        font-size: var(--text-base);
        padding: var(--space-2);
    }

    /* Input container */
    .input-container {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .input-wrapper {
        flex: 1 1 100%;
        min-width: 0;
    }

    .chat-input {
        font-size: var(--text-md);
        padding: var(--space-2\.5) 14px;
        min-height: var(--touch-target-min);
    }

    .send-button {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: var(--space-3) 18px;
        font-size: var(--text-md);
    }

    .upload_button {
        width: var(--height-input);
        height: var(--height-input);
        font-size: var(--text-lg);
    }

    /* Cancel run button repositioning */
    .cancel-run-button-wrapper {
        bottom: var(--space-16);
        left: var(--space-2);
    }

    .cancel-run-button {
        width: var(--height-input);
        height: var(--height-input);
    }
}

/* ============================================
   9. TABLES RESPONSIVE
   ============================================ */
@media (max-width: 768px) {

    /* Add horizontal scroll wrapper */
    .user-dashboard__table-container,
    .workflows-table-container,
    .workspaces-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Minimum width to prevent squishing */
    .user-dashboard__table,
    .workflows-table,
    .workspaces-table {
        min-width: 600px;
    }

    /* Reduce padding in table cells */
    .user-dashboard__table th,
    .user-dashboard__table td,
    .workflows-table th,
    .workflows-table td,
    .workspaces-table th,
    .workspaces-table td {
        padding: 0.6rem 0.4rem;
        font-size: var(--text-base);
    }

    /* Stack action buttons */
    .workspace-actions,
    .credential-row {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* ============================================
   10. MODALS MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 768px) {

    .modal-content,
    .changelog-modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
        padding: 15px;
        margin: var(--space-5) auto;
    }

    .modal-header h2 {
        font-size: var(--text-xl);
    }

    /* Larger close button for touch */
    .close,
    .changelog-modal-close {
        font-size: var(--text-3xl);
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Full-width modal buttons */
    .modal-footer button {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================
   11. FORMS MOBILE LAYOUT
   ============================================ */
@media (max-width: 768px) {

    /* Stack form grids vertically */
    #create-user-form,
    #edit-user-form {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    /* Full width inputs */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .settings-select,
    .settings-input {
        width: 100%;
        min-height: var(--touch-target-min);
        font-size: var(--text-md);
        padding: var(--space-3);
    }

    /* Larger submit buttons */
    .form-group input[type="submit"],
    .btn,
    .btn--primary,
    .btn--secondary {
        min-height: var(--touch-target-recommended);
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-md);
    }
}

/* ============================================
   12. SETTINGS PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .settings-container {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4) 0;
    }

    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 var(--space-2);
        gap: 0.3rem;
    }

    .settings-nav-item {
        flex-shrink: 0;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }

    .settings-content {
        padding: var(--space-4);
    }

    .settings-card-content {
        padding: var(--space-4);
    }

    /* Profile picture section */
    .profile-picture-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-preview {
        width: 100px;
        height: 100px;
    }

    /* Credential inputs stack */
    .credential-input-group {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .credential-values {
        flex-direction: column;
        width: 100%;
    }
}

/* ============================================
   13. ADMIN DASHBOARD MOBILE
   ============================================ */
@media (max-width: 768px) {
    .stats-overview-container {
        flex-direction: column;
        gap: var(--space-3);
    }

    .stats-overview {
        padding: var(--space-4);
    }

    .widget-container {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .admin-content {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        transform: none;
        position: relative;
        box-shadow: none;
        border-bottom: 1px solid var(--color-border);
        height: auto;
        left: 0;
        top: 0;
    }

    .admin-main-content {
        margin-left: 0;
    }

    .admin-menu {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: var(--space-2) 0;
    }

    .admin-menu li {
        margin-bottom: 0;
        margin-right: var(--space-2);
        flex-shrink: 0;
    }
}

/* ============================================
   14. TOUCH OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {

    /* Minimum touch target sizes — scoped to navigation elements */
    .topbar__link,
    .topbar__item > a,
    .topbar__item > button,
    .settings-nav-item,
    .admin-menu a {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Touch feedback */
    .topbar__item > a:active,
    .topbar__item > button:active,
    .mobile-menu-toggle:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    /* Prevent accidental text selection */
    .topbar,
    .footer {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Better touch scrolling */
    .chat-window,
    .settings-nav,
    .admin-menu {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ============================================
   15. WORKFLOW CREATOR MOBILE
   ============================================ */
@media (max-width: 768px) {
    .reactflow-wrapper {
        height: 60vh;
    }

    .reactflow-controls .btn {
        min-width: 44px;
        min-height: 44px;
        padding: var(--space-2\.5);
        font-size: var(--text-lg);
    }

    /* Touch-friendly node selection */
    .react-flow__node {
        min-width: 120px;
        min-height: 60px;
    }
}

/* ============================================
   16. FILE BROWSER MOBILE
   ============================================ */
@media (max-width: 768px) {
    .file-browser-content {
        flex-direction: column;
    }

    .file-browser-sidebar {
        width: 100%;
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .folder-item {
        padding: var(--space-2);
        min-height: var(--touch-target-min);
    }

    .breadcrumb {
        font-size: var(--text-base);
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================
   17. FOOTER MOBILE
   ============================================ */
@media (max-width: 768px) {
    .footer {
        display: none !important;
    }
}

/* ============================================
   18. UTILITY CLASSES
   ============================================ */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }
}

/* ============================================
   19. LANDSCAPE ORIENTATION
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .topbar {
        height: 44px;
    }

    /* Reduce vertical padding in landscape */
    .content {
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================
   20. VERY SMALL SCREENS (< 375px)
   ============================================ */
@media (max-width: 374px) {
    #topbar-logo {
        font-size: var(--text-base) !important;
    }

    .topbar {
        padding: 0 var(--space-2) !important;
    }

    .content {
        padding: var(--space-2);
    }

    .chat-bubble {
        max-width: 95%;
        font-size: var(--text-base);
    }
}

@media (max-width: 768px) {
    .cancel-run-button-wrapper {
        position: fixed !important;
        bottom: 70px !important;
        /* Above input area */
        left: 15px !important;
        /* Left side with padding */
        right: auto !important;
        z-index: 9999 !important;
        /* Very high to stay on top */
    }

    .cancel-run-button-wrapper.active {
        display: block !important;
    }

    .cancel-run-button-wrapper .indicator-container {
        display: flex !important;
        padding: 5px var(--space-2\.5) !important;
        gap: var(--space-2) !important;
        border-radius: 18px !important;
        background: var(--color-surface) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
        align-items: center !important;
    }

    .cancel-run-button-wrapper .crb-border {
        width: 26px !important;
        height: 26px !important;
    }

    .cancel-run-button-wrapper .cancel-run-button {
        width: var(--space-5) !important;
        height: var(--space-5) !important;
        font-size: var(--text-xs) !important;
    }

    .cancel-run-button-wrapper .status-text {
        font-size: var(--text-xs) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .content__section.mobile-accordion-container {
        height: calc(100vh - 48px) !important;
        height: calc(100dvh - 48px) !important;
        /* 48px topbar, no footer on mobile */
        max-height: calc(100vh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        overflow: hidden !important;
    }

    .mobile-accordion-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        grid-template-columns: none !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .mobile-panel {
        width: 100%;
        position: relative;
        border-bottom: 1px solid var(--color-border);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        flex: 1 1 50%;
        min-height: 0;
        max-height: 50%;
    }

    .mobile-panel.collapsed {
        flex: 0 0 28px !important;
        min-height: var(--height-input-sm);
        max-height: var(--height-input-sm) !important;
        overflow: hidden !important;
    }

    .mobile-panel:not(.collapsed):only-of-type,
    .mobile-panel:not(.collapsed) {
        flex: 1 1 calc(100% - 28px);
        max-height: calc(100% - 28px);
    }

    .mobile-panel-banner {
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-1) var(--space-2);
        display: flex;
        align-items: center;
        gap: var(--space-1\.5);
        min-height: var(--height-input-sm);
        max-height: var(--height-input-sm);
        flex-shrink: 0;
        cursor: pointer;
    }

    .mobile-panel.collapsed .mobile-panel-banner {
        border-bottom: none;
    }

    /* --- Chat banner: title + trash + settings + chevron --- */
    .mobile-banner-title {
        flex: 1 1 auto;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .mobile-banner-buttons {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        margin-right: 16px;
    }

    /* Hide trash & settings when chat panel is collapsed */
    .mobile-panel.collapsed .mobile-banner-buttons {
        display: none;
    }

    .mobile-banner-btn {
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 0.75rem;
    }

    .mobile-banner-btn:hover {
        color: var(--color-accent);
    }

    /* --- Tabs banner: "Tabs" label + chevron --- */
    .mobile-banner-label {
        flex: 1 1 auto;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-text-secondary);
    }

    /* Hide the original .llmchat_header on mobile (now in banner) */
    .llmchat .llmchat_header,
    .mobile-panel-content .llmchat_header {
        display: none !important;
    }

    /* Also hide the <br> that follows llmchat_header */
    .llmchat .llmchat_header + #task-activity-panel + br {
        display: none !important;
    }

    .mobile-collapse-btn {
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--space-5);
        height: var(--space-5);
        padding: 0;
        transition: all 0.2s ease;
    }

    .mobile-collapse-btn:hover {
        color: var(--color-accent);
        transform: scale(1.15);
    }

    .mobile-collapse-btn:active {
        transform: scale(0.9);
    }

    .mobile-collapse-btn i {
        font-size: var(--text-base);
        transition: transform 0.3s ease;
    }

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

    .mobile-panel-content {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    .mobile-panel.collapsed .mobile-panel-content {
        flex: 0 0 0;
        overflow: hidden;
        opacity: 0;
        min-height: 0 !important;
        max-height: 0 !important;
    }

    .mobile-accordion-container .divider {
        display: none !important;
    }

    #llmchat.llmchat,
    .mobile-panel-content>#llmchat,
    .mobile-panel-content>.llmchat,
    .mobile-panel-content .llmchat {
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: var(--space-2\.5) 6% !important;
    }

    #llmchat .chat-window,
    .mobile-panel-content .chat-window,
    .llmchat .chat-window {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin-bottom: var(--space-4) !important;
    }

    #llmchat .input-container,
    .mobile-panel-content .input-container,
    .llmchat .input-container {
        flex-shrink: 0 !important;
        margin-top: auto !important;
    }

}

@media (min-width: 769px) {
    .mobile-panel-banner {
        display: none !important;
    }

    .mobile-collapse-btn {
        display: none !important;
    }

    .mobile-panel {
        display: contents;
    }

    .mobile-panel-content {
        display: contents;
    }

    .content__section.mobile-accordion-container {
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
    }
}

@media (max-width: 768px) {

    /* Horizontal layout: attachment | input | send */
    .input-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 8px !important;
    }

    /* Attachment button on LEFT */
    .attachment-button {
        order: 1;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        border-radius: 50% !important;
        background: var(--color-surface-elevated) !important;
    }

    /* Input in MIDDLE (takes remaining space) */
    .input-wrapper {
        order: 1 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .chat-input {
        font-size: 0.75rem !important;
    }

    .chat-input::placeholder {
        font-size: 0.65rem !important;
    }

    /* Send button column on RIGHT */
    .send-button-column {
        order: 2 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    .send-button {
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: var(--color-accent) !important;
    }

    .scroll-to-bottom-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        border-radius: 50% !important;
    }
}

@media (max-width: 768px) {

    .chat-bubble,
    .llm {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        line-height: 1.4 !important;
        margin: 3px 0 !important;
    }

    /* Override dashboard.css .user_message / .llm_message font sizes */
    .user_message,
    .user_message *,
    .user_message p,
    .llm_message,
    .llm_message *,
    .llm_message p {
        font-size: 0.75rem !important;
    }

    /* Chat message headings should be larger than body text */
    .user_message h2,
    .llm_message h2 {
        font-size: 1.0rem !important;
    }

    .user_message h1,
    .llm_message h1 {
        font-size: 1.1rem !important;
    }

    .user_message h3,
    .llm_message h3 {
        font-size: 0.9rem !important;
    }

    /* Hide Task Activity Panel on mobile */
    #task-activity-panel {
        display: none !important;
    }

    /* Align header buttons properly with chat title */
    .header-buttons-row {
        align-items: center !important;
    }

    /* Reduce trash icon size for better visual balance */
    #delete-memory {
        font-size: 1rem !important;
    }

    .chat-window {
        padding-bottom: 0.5rem !important;
    }

    /* EditorJS document tab content font sizes */
    .ce-paragraph,
    .cdx-block,
    .ce-block__content {
        font-size: 0.75rem !important;
    }

    h1.ce-header {
        font-size: 1.1rem !important;
    }

    h2.ce-header,
    .ce-header {
        font-size: 1.0rem !important;
    }

    h3.ce-header {
        font-size: 0.9rem !important;
    }

    /* EditorJS toolbar - keep within viewport on mobile */
    .ce-toolbar {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
    }

    .ce-toolbar__content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .ce-toolbar__actions {
        position: absolute !important;
        right: 8px !important;
        left: auto !important;
    }

    /* Content blocks - remove left margin that pushes text off-screen */
    .ce-block__content {
        margin-left: 0 !important;
        padding: 0 8px !important;
        max-width: 100% !important;
    }

    /* Editor redactor - remove right margin on mobile */
    .codex-editor__redactor {
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Tab edit toggle buttons (download/save) - keep in viewport */
    .tab-edit-toggle {
        right: 4px !important;
        top: 4px !important;
        z-index: 100 !important;
    }

    .edit-toggle-btn,
    .tab-download-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {

    /* 2. Browser bottom bar - safe area detection */
    .input-container {
        padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
    }

    .tab,
    .tab-dynamic,
    div.tab-dynamic {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 8px !important;
        gap: 8px !important;
    }

    button.tab-close {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: 6px !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. Tab names - make visible */
    .tab-title {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        max-width: calc(100% - 24px) !important;
        padding-right: 4px !important;
    }

    /* 4. Hide "open in new tab" button everywhere except task tabs */
    .tab-open-external {
        display: none !important;
    }

    .task-tab .tab-open-external,
    [data-tab-type="task"] .tab-open-external {
        display: inline-flex !important;
    }

    /* 5. Reduce tab bar height */
    .tab-bar,
    #tab-bar {
        height: 32px !important;
        min-height: 32px !important;
        padding: 2px 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .tab,
    .tab-dynamic {
        height: 28px !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        max-width: 150px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding-right: 24px !important;
        /* More space for close button */
        position: relative !important;
    }

    .tab-close {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.7rem !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    button:has(i.fa-plus),
    .new-project-btn,
    .add-tab-btn {
        height: 28px !important;
        min-height: 28px !important;
        width: 28px !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide text, show only + icon */
    button:has(i.fa-plus) span,
    .new-project-btn span,
    .add-tab-btn span {
        display: none !important;
    }

    /* Center the icon */
    button:has(i.fa-plus) i,
    .new-project-btn i,
    .add-tab-btn i {
        margin: 0 !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 768px) {

    /* Fix horizontal overflow */
    .tab-container,
    .tab-bar,
    #tab-bar,
    .mobile-panel-content {
        max-width: 100vw !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    .btn-add-project,
    #btn-add-project {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        padding: 0 !important;
        font-size: 0 !important;
        /* Hides text */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Show only the + icon */
    .btn-add-project i,
    #btn-add-project i {
        font-size: 0.85rem !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Project browser header: single row, children shrink to fit */
    div.project-browser-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        overflow: hidden !important;
    }

    div.project-browser-header > * {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Search fills remaining space */
    div.project-browser-header input[type="search"] {
        flex: 1 1 0 !important;
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    /* Sort dropdown: auto-width, compact */
    .project-browser-header.select,
    select.project-browser-header {
        flex: 0 0 auto !important;
        width: auto !important;
        font-size: 0.75rem !important;
        padding: 4px 6px !important;
    }

    /* Sort direction button: compact */
    #project-sort-dir {
        flex: 0 0 auto !important;
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
    }

    /* Prevent right-side overflow */
    .tab-bar>* {
        margin-right: 4px !important;
    }
}
@media (max-width: 768px) {

    /* Admin sidebar - make it slide out like main sidebar */
    .admin-sidebar {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        width: 280px !important;
        height: calc(100vh - 48px) !important;
        height: calc(100dvh - 48px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Admin main content - full width when sidebar closed */
    .admin-main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    /* Org dashboard sidebar - same treatment */
    .org-sidebar,
    .organization-sidebar {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        width: 280px !important;
        height: calc(100vh - 48px) !important;
        height: calc(100dvh - 48px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }

    .org-sidebar.mobile-open,
    .organization-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Organization dropdown - limit width */
    .org-sidebar select,
    .organization-sidebar select {
        max-width: 240px !important;
        font-size: 0.85rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Dashboard content - full width */
    .dashboard-content,
    .org-dashboard-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    /* Hide footer on dashboard pages */
    body[class*="dashboard"] .footer,
    .admin-page .footer,
    .org-dashboard-page .footer {
        display: none !important;
    }
}


@media (max-width: 768px) {
    /* Hide the org dashboard's own sidebar on mobile */
    .org-sidebar,
    .organization-sidebar,
    .org-dashboard-sidebar {
        display: none !important;
    }
    
    /* Make org dashboard content full width */
    .org-dashboard-content,
    .organization-dashboard-content,
    .org-dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Also hide admin dashboard sidebar on mobile */
    .admin-sidebar {
        display: none !important;
    }
    
    /* Admin content full width */
    .admin-main-content,
    .admin-dashboard-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }
}

/* Dashboard dropdowns - show on mobile, hide on desktop */
.dashboard-dropdown-mobile {
    display: none !important;
}

.dashboard-link-desktop {
    display: flex !important;
}

@media (max-width: 768px) {
    .dashboard-dropdown-mobile {
        display: block !important;
    }
    
    .dashboard-link-desktop {
        display: none !important;
    }
}

/* ============================================
   ADD-TAB DROPDOWN MOBILE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
    /* Reduce dropdown width to fit content, constrain to viewport */
    .tab-add-dropdown {
        min-width: auto !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        overflow: hidden !important;
    }

    /* Reduce font size for all dropdown items */
    .tab-add-dropdown .tab-add-dropdown-item {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tab-add-dropdown .tab-add-dropdown-item i {
        font-size: 12px !important;
        width: 16px !important;
    }

    /* Category headers smaller too */
    .tab-add-dropdown .tab-category-header {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
    }

    .tab-add-dropdown .tab-category-header i:first-child {
        font-size: 12px !important;
    }

    /* Make category groups non-relative so submenu flows inline */
    .tab-category-group {
        position: static !important;
    }

    /* Convert submenu from side-panel to inline accordion */
    .tab-category-submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: auto !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-left: 0 !important;
        background: var(--color-surface-elevated) !important;
        z-index: auto !important;
    }

    /* On mobile, hide submenu by default (no hover) - higher specificity to beat tabs.css which loads later */
    .tab-add-dropdown .tab-category-group:hover > .tab-category-submenu {
        display: none !important;
    }

    /* Show submenu when category is tapped (toggled via JS) - highest specificity */
    .tab-add-dropdown .tab-category-group.mobile-expanded > .tab-category-submenu {
        display: block !important;
    }

    .tab-add-dropdown .tab-category-group.mobile-expanded .category-arrow {
        transform: rotate(90deg);
    }

    /* Indent submenu items */
    .tab-category-submenu .tab-add-dropdown-item {
        padding-left: 24px !important;
        font-size: 0.75rem !important;
        border-radius: 0 !important;
    }
}

/* Duplicate topbar block removed — consolidated in Section 5 */

/* ============================================
   LOGIN PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {

    /* Login container - expand to usable width on mobile */
    .login_container {
        width: 90% !important;
        height: auto !important;
        padding: 0 5% !important;
    }

    /* Reduce excessive <br> spacing above the logo */
    .login_container > br {
        display: none !important;
    }

    /* Shrink the large logo icon */
    .login_container .logo {
        font-size: 4rem !important;
    }

    /* Login heading */
    .login_container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Form spacing */
    .login_container .form_ form {
        gap: 1.5vh !important;
    }

    /* Override the chat-circle send-button style for the login page */
    .login_container .send-button {
        width: 100% !important;
        height: auto !important;
        min-height: var(--touch-target-recommended) !important;
        border-radius: 10px !important;
        padding: 12px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        background: var(--color-accent) !important;
        color: white !important;
    }

    /* Make login inputs full-width and comfortable */
    .login_container .input-container {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .login_container .chat-input {
        font-size: 1rem !important;
        padding: 12px !important;
        min-height: var(--touch-target-min) !important;
        width: 100% !important;
    }

    /* Auth action links - stack vertically */
    .login_container .form_ p {
        font-size: 0.85rem !important;
        margin: 0.25rem 0 !important;
        text-align: center !important;
    }
}

/* ============================================
   DOCUMENT EDITOR MOBILE
   ============================================ */
@media (max-width: 768px) {

    /* Docs page - fill available height */
    .org-docs-page {
        height: auto !important;
        overflow: visible !important;
    }

    /* Header - stack title and actions vertically */
    .org-docs-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Actions row - wrap and use icons only on small screens */
    .org-docs-actions {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Hide button text, show only icons — text is inline, so use font-size trick */
    .org-docs-actions .org-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0 !important;
        gap: 0 !important;
    }

    .org-docs-actions .org-btn i {
        font-size: 0.875rem !important;
    }

    /* Keep the commit count badge visible */
    .org-docs-actions .org-docs-badge {
        display: inline-flex !important;
        font-size: 0.65rem !important;
    }

    /* Repo selector - full width */
    .org-docs-repo-selector {
        width: 100% !important;
    }

    .org-docs-repo-selector .org-select {
        width: 100% !important;
        font-size: 0.85rem !important;
    }

    /* Two-panel container - stack vertically */
    .org-docs-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 60vh !important;
    }

    /* Sidebar - horizontal at top */
    .org-docs-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 30vh !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border) !important;
    }

    /* Editor panel fills remaining space */
    .org-docs-editor-panel {
        min-height: 40vh !important;
    }

    /* Editor header - ensure actions don't overflow */
    .org-docs-editor-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Editor toolbar (SimpleMDE) - match dark theme */
    .org-docs-editor-body .editor-toolbar {
        background: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border) !important;
        padding: 4px !important;
        flex-wrap: wrap !important;
        display: flex !important;
    }

    .org-docs-editor-body .editor-toolbar a {
        color: var(--color-text-muted) !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .org-docs-editor-body .editor-toolbar a:hover,
    .org-docs-editor-body .editor-toolbar a.active {
        background: var(--color-surface-hover) !important;
        color: var(--color-text) !important;
        border-radius: 4px !important;
    }

    /* Hide side-by-side and fullscreen on mobile */
    .org-docs-editor-body .editor-toolbar a[title*="Side"],
    .org-docs-editor-body .editor-toolbar a[title*="Fullscreen"] {
        display: none !important;
    }

    /* CodeMirror editor area */
    .org-docs-editor-body .CodeMirror {
        font-size: 14px !important;
    }
}