/* ==================== RESPONSIVE OPTIMIZATION FOR ALL RESOLUTIONS ==================== */
/* Optimizes LEXOR for 1080p, 2K, 4K, square aspect ratios, ultrawide, and all devices */

/* ==================== FLEXIBLE BASE LAYOUT ==================== */
.main-panels {
    grid-template-columns: minmax(240px, 16%) 1fr minmax(260px, 18%);
}

body[data-layout="writer"] .main-panels {
    grid-template-columns: minmax(240px, 16%) 1fr minmax(260px, 18%);
}

body[data-layout="roleplay"] .main-panels {
    grid-template-columns: minmax(220px, 15%) 1fr;
}

.canvas-overlay:not(.hidden) {
    left: 16%;
    right: 18%;
}

body[data-layout="writer"].canvas-fullscreen .canvas-overlay:not(.hidden) {
    left: 0;
    right: 0;
}

/* ==================== ULTRAWIDE MONITORS (2560px+) ==================== */
@media (min-width: 2560px) {
    .main-panels {
        grid-template-columns: minmax(280px, 350px) 1fr minmax(300px, 380px);
    }
    body[data-layout="roleplay"] .main-panels {
        grid-template-columns: minmax(260px, 320px) 1fr;
    }
    .canvas-editor {
        font-size: 18px;
        line-height: 1.7;
    }
    .folder-explorer-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ==================== 2K RESOLUTION (2048px - 2559px) ==================== */
@media (min-width: 2048px) and (max-width: 2559px) {
    .main-panels {
        grid-template-columns: minmax(260px, 17%) 1fr minmax(280px, 19%);
    }
    .canvas-editor {
        font-size: 17px;
    }
}

/* ==================== HEADER WRAPPING PREVENTION (1500px and below) ==================== */
@media (max-width: 1700px) {
    /* Show toggle buttons when header starts to wrap */
    .header-menu-toggle {
        display: flex !important;
    }
    
    .toolbar-toggle {
        display: flex !important;
    }
    
    /* Header buttons slide out from right */
    .header-buttons-container {
        position: fixed;
        top: 60px;
        right: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-medium);
        border-radius: 12px 0 0 12px;
        padding: 16px;
        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        max-width: 220px;
        min-width: 180px;
    }
    
    .header-buttons-container.expanded {
        transform: translateX(0);
    }
    
    .header-buttons-container button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    
    .header-buttons-container .model-selector select {
        width: 100%;
    }
    
    /* Force canvas toolbar to show so toggle button is visible */
    .canvas-toolbar:has(#formatting-container:not(:empty)) {
        display: flex !important;
    }
    
    /* Toolbar group (tag buttons) collapses by default on small screens */
    #formatting-container {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        width: 100%;
    }
    
    #formatting-container.expanded {
        max-height: 200px !important;
        opacity: 1 !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .canvas-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Inline toolbar toggle appears on right edge */
    #inline-toolbar-toggle {
        display: flex !important;
    }
    
    /* Parent container becomes relative for absolute positioning */
    .context-slider-container {
        position: relative !important;
        flex-wrap: wrap !important;
    }
    
    /* Inline toolbar (markdown + right group) collapses by default and expands BELOW */
    #inline-toolbar-container {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        width: 100%;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        padding: 0 12px;
        z-index: 10;
        margin-left: 0 !important;
        flex-wrap: wrap !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        gap: 8px;
    }

    #inline-toolbar-container.expanded {
        max-height: 500px !important;
        min-height: fit-content !important;
        opacity: 1 !important;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 12px;
    }
    
    /* Make child groups wrap properly */
    #inline-toolbar-container .inline-toolbar-md,
    #inline-toolbar-container .inline-toolbar-right {
        flex-wrap: wrap !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
    
    /* Make entire controls row more compact */
    .controls-row:has(#max-tokens-slider) {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    
    /* Slider controls: more inline and compact */
    .controls-row:has(#max-tokens-slider) > div:first-child {
        flex-wrap: wrap !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }
    
    /* Reduce label size */
    .controls-row:has(#max-tokens-slider) > div:first-child > span:first-child {
        font-size: 11px !important;
    }
    
    /* Make number input smaller */
    #max-tokens-input {
        width: 50px !important;
        font-size: 11px !important;
        padding: 3px 4px !important;
    }
    
    /* Make tokens label smaller */
    .controls-row:has(#max-tokens-slider) > div:first-child > span:nth-child(4) {
        font-size: 10px !important;
    }
    
    /* Words estimate on same line but smaller */
    #max-words-estimate {
        font-size: 10px !important;
        white-space: nowrap !important;
        margin-left: 4px !important;
    }
    
    /* Force explanation text to go below entire slider section but more compact */
    .controls-row:has(#max-tokens-slider) > div:last-child {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 8px !important;
    }
    
    /* Make explanation text smaller and more compact */
    .controls-row:has(#max-tokens-slider) > div:last-child p {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }
    
    /* Expand model dropdown in side menu */
    .header-buttons-container .model-selector {
        width: 100% !important;
    }
    
    .header-buttons-container .model-selector select {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Reduce spacing between canvas sections */
    .canvas-controls {
        padding: 10px 12px !important;
        gap: 4px !important;
    }
    
    /* Reduce margin on Max Output row */
    .controls-row:has(#max-tokens-slider) {
        margin-top: 0px !important;
    }
    
    /* Allow buttons to wrap naturally with minimal gap */
    .canvas-controls .controls-row:first-child {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 0px !important;
        min-height: 0px !important;
    }
    
    .canvas-controls .button-group {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    /* Make sure utils-container doesn't take space when hidden */
    .utils-container {
        max-height: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }
    
    /* Only show when expanded */
    .utils-container[style*="pointer-events: auto"] {
        display: flex !important;
        max-height: none !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
    }
    
    .canvas-controls .ai-btn {
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    .utils-container .utils-btn {
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    /* File Explorer responsiveness */
    .folder-explorer-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    
    .folder-explorer-title {
        flex: 0 0 auto !important;
        min-width: fit-content;
    }
    
    .folder-explorer-search {
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }
    
    .folder-explorer-search input {
        width: 100% !important;
        max-width: 200px !important;
    }
    
    .folder-explorer-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    /* Smaller buttons in file explorer */
    .folder-explorer-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    #folder-sort-select {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    /* Document Viewer / Text Editor responsiveness */
    .document-viewer-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    
    .document-viewer-title {
        flex: 0 0 auto !important;
        min-width: fit-content;
    }
    
    .document-viewer-search {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
    
    .document-viewer-search input {
        width: 100% !important;
        max-width: 180px !important;
    }
    
    .document-viewer-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    /* Smaller buttons in document viewer */
    .doc-viewer-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    /* Canvas Search - Show icon, hide inline */
    #canvas-search-toggle {
        display: block !important;
    }
    
    #canvas-search-inline {
        display: none !important;
    }
}

/* ==================== LAPTOP (1200px - 1365px) ==================== */
@media (min-width: 1200px) and (max-width: 1365px) {
    .main-panels {
        grid-template-columns: minmax(240px, 19%) 1fr minmax(280px, 21%);
    }
    .app-header {
        height: 56px;
    }
    #unified-token-display {
        font-size: 10px;
    }
    .canvas-editor {
        font-size: 15px;
    }
}

/* ==================== SMALL LAPTOP/TABLET (992px - 1199px) ==================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-panels {
        grid-template-columns: minmax(220px, 18%) 1fr minmax(260px, 20%);
    }
    .app-header {
        height: 52px;
        padding: 8px 12px;
    }
    .header-left img {
        width: 32px !important;
        height: 32px !important;
    }
    #unified-token-display {
        font-size: 9px;
    }
    .canvas-editor {
        font-size: 14px;
    }
}

/* ==================== TABLET (768px - 991px) ==================== */
@media (min-width: 768px) and (max-width: 991px) {
    .main-panels {
        grid-template-columns: minmax(200px, 16%) 1fr minmax(240px, 19%);
    }
    .app-header {
        min-height: 48px;
        padding: 8px 10px;
    }
    .header-left img {
        width: 28px !important;
        height: 28px !important;
    }
    .budget-bar {
        height: 36px;
    }
    .canvas-editor {
        font-size: 14px;
        padding: 12px;
    }
    .folder-explorer-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ==================== MOBILE (576px - 767px) ==================== */
@media (min-width: 576px) and (max-width: 767px) {
    .main-panels {
        grid-template-columns: 1fr;
    }
    .left-panel, .right-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1000;
        width: 80%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .right-panel {
        right: 0;
        transform: translateX(100%);
    }
    .app-header {
        min-height: 44px;
        padding: 6px 8px;
    }
    #unified-token-display {
        display: none;
    }
    .canvas-editor {
        font-size: 13px;
    }
}

/* ==================== SMALL MOBILE (< 576px) ==================== */
@media (max-width: 575px) {
    .main-panels {
        grid-template-columns: 1fr;
    }
    .left-panel, .right-panel {
        position: fixed;
        inset: 0;
        z-index: 1001;
        transform: translateX(-100%);
    }
    .right-panel {
        transform: translateX(100%);
    }
    .app-header {
        min-height: 40px;
        padding: 4px 6px;
    }
    .canvas-editor {
        font-size: 12px;
    }
}

/* ==================== SQUARE ASPECT RATIO (1:1) ==================== */
@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .main-panels {
        grid-template-columns: minmax(220px, 18%) 1fr minmax(260px, 20%);
    }
    .app-header, .budget-bar, .panel-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .canvas-editor {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* ==================== ULTRAWIDE (21:9+) ==================== */
@media (min-aspect-ratio: 21/9) {
    /* On ultrawide screens allow the app to span the full viewport instead of being centered
       which can cause the canvas textarea to be constrained to the middle with empty space
       on the right. Make the container and canvas full-width. */
    .app-container {
        max-width: none;
        width: 100%;
        margin: 0;
    }
    .main-panels {
        grid-template-columns: minmax(300px, 450px) 1fr minmax(350px, 500px);
    }
    .canvas-editor {
        font-size: 18px;
        /* Allow the textarea to stretch to the full available width instead of being
           centered with a fixed max-width which caused the canvas to stop in the middle
           on ultrawide monitors. */
        max-width: none;
        width: 100%;
        margin: 0;
    }
}

/* ==================== TOUCH DEVICES ==================== */
@media (hover: none) and (pointer: coarse) {
    .secondary-btn, .ai-btn, .toolbar-btn, .icon-btn {
        min-height: 44px;
        min-width: 44px;
    }
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    .app-header {
        height: 36px;
    }
    .budget-bar {
        display: none;
    }
    .panel-header {
        height: 32px;
    }
}

/* ==================== DYNAMIC VIEWPORT ==================== */
.app-container {
    height: 100dvh;
}

/* ==================== SAFE AREAS ==================== */
@supports (padding: env(safe-area-inset-left)) {
    .app-header, .budget-bar {
        padding-left: max(var(--space-lg), env(safe-area-inset-left));
        padding-right: max(var(--space-lg), env(safe-area-inset-right));
    }
}