/**
 * RE::DACT Mobile Styles
 *
 * Naprawia konflikty z editor.css
 */

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

    /* --- UKRYJ ELEMENTY DESKTOP --- */
    .shared-toolbar-trigger,
    .column-divider,
    .mode-switcher-row,
    .unified-chat,
    .news-panel {
        display: none !important;
    }

    /* --- PASEK ZAKŁADEK (Wersja1 / Notatka1) --- */
    .shared-tabs-row {
        display: flex !important;
        background: transparent !important;
        border: none !important;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
        transition: max-height 0.25s ease-out, height 0.25s ease-out, opacity 0.2s ease;
    }

    /* Ukryj pasek zakładek gdy toolbar zwinięty */
    .shared-tabs-row.collapsed {
        max-height: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    .shared-tabs-row .tabs-half {
        flex: 1;
        overflow-x: auto;
        display: flex !important;
        align-items: center;
        height: 100%;
    }

    .shared-tabs-row .editor-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 2px 4px;
        height: 100%;
        align-items: center;
    }

    /* Zakładki (Wersja1, Notatka1) - przeskalowane */
    .shared-tabs-row .editor-tab {
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 4px;
        gap: 3px;
        height: 22px;
        line-height: 1;
    }

    .shared-tabs-row .editor-tab-close {
        width: 12px;
        height: 12px;
    }

    .shared-tabs-row .editor-tab-new {
        font-size: 14px;
        padding: 3px 5px;
    }

    /* Domyślnie (widok edytora): pokaż tabs-left, ukryj tabs-right */
    .shared-tabs-row .tabs-right {
        display: none !important;
    }
    .shared-tabs-row .tabs-left {
        display: flex !important;
    }

    /* Widok notatnika (.show-chat): ukryj tabs-left, pokaż tabs-right */
    main:has(.unified-layout.show-chat) .shared-tabs-row .tabs-left {
        display: none !important;
    }
    main:has(.unified-layout.show-chat) .shared-tabs-row .tabs-right {
        display: flex !important;
    }

    /* --- LAYOUT 2 KOLUMN --- */
    .unified-layout {
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .column-editor,
    .column-chat-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: var(--color-bg-paper-main);
    }

    .column-editor {
        z-index: 2;
        opacity: 1;
        visibility: visible;
    }

    .column-chat-area {
        z-index: 1;
        opacity: 0;
        visibility: hidden;
    }

    .unified-layout.show-chat .column-editor {
        z-index: 1;
        opacity: 0;
        visibility: hidden;
    }

    .unified-layout.show-chat .column-chat-area {
        z-index: 2;
        opacity: 1;
        visibility: visible;
    }

    .notatnik-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* --- TOOLBAR ON MOBILE --- */
    /* Bubble menu + slash commands replace toolbar buttons, but keep the accent bar for toggling tabs */
    .toolbar-trigger {
        display: block !important;
        height: 8px !important;
    }

    /* Hide editor placeholder on mobile — slash commands provide guidance */
    #editorMain:empty:before {
        display: none !important;
    }

    .editor-controls.shared-controls {
        display: none !important;
    }

    /* --- VIEW GRADIENT (strzałka) --- */
    #viewGradient {
        display: flex !important;
        position: fixed;
        top: 60px;
        bottom: 60px;
        width: 44px;
        align-items: center;
        justify-content: center;
        z-index: 500;
        cursor: pointer;
    }

    #viewGradient.view-right {
        right: 0;
        background: linear-gradient(to left, rgba(var(--color-overlay-dark), 0.06), transparent);
    }

    #viewGradient.view-left {
        left: 0;
        background: linear-gradient(to right, rgba(var(--color-overlay-dark), 0.06), transparent);
    }

    #viewGradient::after {
        content: '›';
        font-size: 28px;
        color: rgba(var(--color-overlay-dark), 0.3);
    }

    #viewGradient.view-left::after {
        content: '‹';
    }

    /* Override layout.css SVG background - we use text characters on mobile */
    #viewGradient.view-gradient-switcher::after {
        background-image: none !important;
    }

    /* --- CHAT BACKDROP (blur overlay) --- */
    .chat-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px)); /* iOS 26 Liquid Glass gap fix */
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 799;
    }

    .chat-backdrop.active {
        display: block;
    }

    /* --- MOBILE CHAT DRAWER --- */
    #mobileChatDrawer {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--color-accent) !important;
        border-radius: 0;
        box-shadow: none;
        z-index: 800;
        overflow: hidden;
        transition: height 0.3s ease, max-height 0.3s ease;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #mobileChatDrawer.open {
        height: 90vh !important;
        height: 90svh !important;
        max-height: 90vh !important;
        max-height: 90svh !important;
        background: var(--color-bg-paper-main) !important;
        box-shadow: 0 -2px 10px rgba(var(--color-overlay-dark), 0.1);
        padding-bottom: 0;
        padding-top: 0;
    }

    .chat-peek-bar {
        display: flex !important;
        height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        align-items: center;
        justify-content: center;
        background: var(--color-accent);
        color: var(--color-accent-text);
        border-radius: 0;
        cursor: pointer;
        flex-shrink: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .chat-peek-content {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-accent-text);
        font-size: 14px;
    }

    /* Ukryj ::before z chat.css - zostaw tylko SVG z HTML */
    .chat-peek-content::before {
        display: none !important;
    }

    .chat-peek-content svg {
        width: 18px;
        height: 18px;
    }

    #mobileChatDrawer.open .chat-peek-bar {
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
        border-radius: 0;
        background: var(--color-bg-secondary, #f5f5f5);
        padding: 0;
    }

    #mobileChatDrawer.open .chat-peek-bar::after {
        display: none;
    }

    #mobileChatDrawer.open .chat-peek-content {
        display: none;
    }

    .mobile-mode-tabs {
        display: flex !important;
        gap: 6px;
        padding: 8px 12px;
        background: var(--color-bg-paper-main);
        border-bottom: 1px solid var(--color-border-light);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        flex-shrink: 0;
        min-height: 44px;
    }

    .mobile-mode-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .mobile-mode-btn {
        padding: 8px 14px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        background: var(--color-bg-paper-main);
        border: 1px solid #ddd;
        color: var(--color-text-secondary);
        white-space: nowrap;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        min-width: 60px;
        min-height: 32px;
        flex-shrink: 0;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-mode-btn.active {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-accent-text);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .mobile-mode-btn.active svg {
        stroke: var(--color-accent-text);
    }

    #mobileChatDrawer .chat-messages {
        flex: 1 1 auto;
        min-height: 150px;
        overflow-y: auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: var(--color-bg-paper-main);
        box-shadow: inset 0 4px 8px rgba(0,0,0,0.04);
    }

    #mobileChatDrawer .chat-message {
        position: relative;
        max-width: 85%;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    /* Show message actions on mobile */
    #mobileChatDrawer .msg-actions {
        position: absolute;
        bottom: 6px;
        right: 6px;
        display: flex;
        gap: 2px;
        opacity: 0.5;
    }

    #mobileChatDrawer .msg-action-btn {
        width: 22px;
        height: 22px;
        padding: 3px;
        background: transparent;
        border: none;
        color: rgba(var(--color-overlay-dark), 0.5);
    }

    #mobileChatDrawer .msg-action-btn svg {
        width: 14px;
        height: 14px;
    }

    #mobileChatDrawer .chat-message.user {
        background: var(--color-accent);
        color: var(--color-accent-text);
        align-self: flex-end;
    }

    #mobileChatDrawer .chat-message.assistant {
        background: var(--color-bg-secondary);
        color: var(--color-text-primary);
        align-self: flex-start;
    }

    /* Loading indicator - no frame, transparent */
    #mobileChatDrawer .chat-message.loading,
    #mobileChatDrawer .msg.loading {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 12px 0 !important;
        border-radius: 0 !important;
    }

    .mobile-chat-input {
        display: flex;
        gap: 8px;
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--color-border-light);
        background: var(--color-bg-paper-main);
        align-items: center;
        flex-shrink: 0;
    }

    /* Mobile attach container */
    .mobile-attach-container {
        position: relative;
    }

    .mobile-attach-container .attach-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: var(--color-accent);
        color: var(--color-accent-text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-attach-container .attach-btn svg {
        width: 18px;
        height: 18px;
    }

    .mobile-attach-container .attach-menu {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        background: var(--color-accent);
        border-radius: 20px;
        padding: 4px 8px;
        display: none;
        flex-direction: row;
        gap: 4px;
        z-index: 100;
    }

    .mobile-attach-container .attach-menu.open {
        display: flex;
    }

    .mobile-attach-container .attach-icon-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-accent-text);
    }

    .mobile-attach-container .attach-icon-btn:active {
        background: rgba(var(--color-overlay-light), 0.2);
    }

    .mobile-attach-container .attach-icon-btn svg {
        width: 18px;
        height: 18px;
    }

    .mobile-input-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }

    .mobile-input-wrapper input {
        flex: 1;
        padding: 10px 44px 10px 14px;
        border: 1px solid #ddd;
        border-radius: 20px;
        font-size: 14px;
        outline: none;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    }

    .mobile-voice-btn {
        position: absolute;
        right: 8px;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: var(--color-text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .mobile-voice-btn:active {
        background: rgba(var(--color-overlay-dark), 0.1);
    }

    .mobile-voice-btn.recording {
        background: white;
        color: #111;
        animation: pulse-recording 1.5s ease-in-out infinite;
    }

    .mobile-voice-btn svg {
        width: 22px;
        height: 22px;
    }

    .mobile-chat-input .send-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-accent);
        color: var(--color-accent-text);
        border: none;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* --- EDITOR --- */
    .editor {
        flex: 1;
        padding: 20px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        font-size: 16px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        overflow-y: auto;
    }

    .editor-stats {
        position: fixed;
        bottom: calc(65px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        z-index: 100;
    }

    .editor-stats .stat-box {
        display: none;
    }

    .editor-stats .stat-box:has(#wordCountMain),
    .editor-stats .stat-box:has(#wordCountNotes) {
        display: flex;
    }

    /* --- HEADER --- */
    header {
        padding: 0 14px;
    }

    /* --- SIDEBAR --- */
    .mobile-overlay {
        top: 56px;
    }

    aside {
        height: calc(100vh - 56px);
        height: calc(100svh - 56px);
        max-height: calc(100vh - 56px);
        max-height: calc(100svh - 56px);
    }

    .sidebar-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: var(--sidebar-width);
        z-index: 1001;
        padding: 14px 28px 6px 28px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 2px !important;
        /* background inherits from sidebar.css: var(--color-accent) = black */
    }

    /* Sidebar footer elements - smaller on mobile */
    .sidebar-footer .user-profile-container {
        gap: 2px;
        margin-top: 4px;
    }

    .sidebar-footer .user-profile-box {
        padding: 4px 6px;
        gap: 6px;
    }

    .sidebar-footer .user-avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .sidebar-footer .user-name-group {
        gap: 0;
    }

    .sidebar-footer .user-name {
        font-size: 11px !important;
    }

    .sidebar-footer .user-signin-hint {
        font-size: 9px !important;
    }

    .sidebar-footer .archive-btn,
    .sidebar-footer .settings-btn {
        padding: 4px !important;
    }

    .sidebar-footer .archive-btn svg,
    .sidebar-footer .settings-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .sidebar-footer .copyright-box {
        font-size: 8px !important;
        padding: 8px 0 2px 0 !important;
        margin-top: 14px !important;
        line-height: 1.4;
        text-align: center;
    }

    /* Sidebar content needs to account for fixed footer height */
    .sidebar-content {
        padding-bottom: 90px; /* Reduced space for smaller footer */
    }

    /* Mobile sidebar sections - equal distribution */
    .sidebar-section-projects {
        flex: 1;
        min-height: 80px;
        max-height: 50%;
    }

    .sidebar-section-sparks {
        flex: 1;
        min-height: 100px;
        max-height: 50%;
    }

    /* Scrollable lists inside sections */
    .sidebar-section .scrollable-list,
    .sidebar-section-sparks .sparks-list {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* --- TOAST --- */
    #toast-container {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* --- MODALS --- */
    .modal {
        top: 50%;
        left: 50%;
        right: auto;
        width: calc(100% - 28px);
        max-width: 480px;
        max-height: 80vh;
        max-height: 80svh;
        border-radius: 18px;
        transform: translate(-50%, -50%) scale(0.95);
    }

    .modal.active {
        transform: translate(-50%, -50%) scale(1);
    }

    /* Contacts modal */
    .contacts-modal {
        max-height: 80vh !important;
        max-height: 80svh !important;
        height: auto !important;
    }


    #loginModal,
    #disclaimerModal {
        background: #0a0a0a;
        border: 1px solid rgba(var(--color-overlay-light), 0.12);
        color: var(--color-accent-text);
    }

    /* --- A4 MODE OFF --- */
    .column-editor.a4-mode .editor {
        padding: 20px;
    }

    .column-editor.a4-mode .editor-workspace,
    .column-editor.a4-mode .zoom-container,
    .column-editor.a4-mode .a4-page {
        display: contents;
    }

    .column-editor.a4-mode .page-footer {
        display: none;
    }

    /* --- MOBILE EDITOR TOOLBAR (slash-command shortcuts above keyboard) --- */
    .mobile-editor-toolbar {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 44px;
        background: var(--color-bg-secondary, #f5f5f5);
        border-top: 1px solid var(--color-border-light, #e0e0e0);
        z-index: 900;
        align-items: center;
        justify-content: space-around;
        padding: 0 4px;
    }

    .mobile-editor-toolbar.visible {
        display: flex;
    }

    .mobile-editor-toolbar button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 100%;
        border: none;
        background: transparent;
        color: var(--color-text-secondary, #666);
        cursor: pointer;
        padding: 4px 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-editor-toolbar button:active {
        background: rgba(var(--color-overlay-dark, 0), 0.08);
    }

    .mobile-editor-toolbar button svg {
        width: 18px;
        height: 18px;
    }

    .mobile-editor-toolbar button span {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
    }

    .mobile-editor-toolbar button .icon-text {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }

    /* Kill mobile editor toolbar entirely — slash commands via sidebar only */
    .mobile-editor-toolbar,
    .mobile-editor-toolbar.visible {
        display: none !important;
    }

    /* === iOS AUTO-ZOOM FIX === */
    /* Don't apply to sidebar inputs (contact-name, project-name) */
    input[type="text"]:not(.contact-name):not(.project-name),
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input:not([type]):not(.contact-name):not(.project-name),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Touch target fix — visually unchanged, tap area enlarged */
    .import-icon-btn {
        width: var(--btn-touch-min);
        height: var(--btn-touch-min);
        margin-top: -10px;
        margin-bottom: -10px;
        margin-right: -10px;
    }

    /* Tabs row hidden on mobile — single editor + single note */
    .shared-tabs-row {
        display: none !important;
    }
}

/* Landscape FAB — hidden outside landscape */
.landscape-menu-fab {
    display: none;
}

/* === MOBILE LANDSCAPE — fullscreen editor === */
@media (max-height: 500px) and (orientation: landscape) {

    /* === HIDE EVERYTHING EXCEPT EDITOR === */
    header,
    .shared-tabs-row,
    .toolbar-trigger,
    #mobileChatDrawer,
    .chat-backdrop,
    .mobile-editor-toolbar,
    .mobile-editor-toolbar.visible,
    .view-gradient-switcher,
    #viewGradient,
    .column-divider {
        display: none !important;
    }

    /* === BODY — block outer scroll === */
    body {
        overflow: hidden;
    }

    /* === CONTENT WRAPPER — full height === */
    .content-wrapper {
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }

    /* === MAIN — flex column, full height === */
    main {
        height: 100vh;
        height: 100svh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* === UNIFIED LAYOUT — fill space === */
    .unified-layout {
        flex: 1;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    /* === EDITOR COLUMN — position:fixed, fullscreen ===
       Fixed intentional: breaks out of flow, guarantees 100vw/100svh
       coverage regardless of parent heights. Safe because this block
       is inside max-width:768px — desktop never sees it. */
    .column-editor {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        z-index: 100 !important;
        background: var(--color-bg-paper-main) !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Safe area padding on container — survives keyboard/viewport changes */
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    /* When show-chat active — hide editor, show chat (also fixed) */
    .unified-layout.show-chat .column-editor {
        display: none !important;
    }

    .unified-layout.show-chat .column-chat-area {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* === EDITOR — clean writing surface (safe area on parent .column-editor) === */
    .column-editor .editor {
        flex: 1 !important;
        padding: 12px 16px !important;
        padding-bottom: env(safe-area-inset-bottom, 12px) !important;
        font-size: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* === A4 MODE — disable paper in landscape === */
    .column-editor.a4-mode .editor-workspace,
    .column-editor.a4-mode .zoom-container,
    .column-editor.a4-mode .a4-page {
        display: contents !important;
    }

    .column-editor.a4-mode .page-footer {
        display: none !important;
    }

    /* === LEFT SIDEBAR — hidden, slides in on hamburger tap === */
    aside {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100svh !important;
        z-index: 200 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    aside.open {
        transform: translateX(0);
    }

    .mobile-overlay {
        top: 0 !important;
    }

    /* === RIGHT SIDEBAR — full height, above overlay === */
    .resource-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        height: 100svh !important;
        z-index: 2100 !important;
    }

    .resource-sidebar::before {
        display: none !important;
    }

    .resource-sidebar-overlay {
        z-index: 2050 !important;
    }

    /* === LANDSCAPE FAB HAMBURGER — hidden === */
    .landscape-menu-fab {
        display: none !important;
    }

    /* === SLASH DROPDOWN — respect safe area === */
    .slash-dropdown {
        left: max(0px, env(safe-area-inset-left, 0px)) !important;
        right: max(0px, env(safe-area-inset-right, 0px)) !important;
    }

    /* === STATUS BAR — respect safe area === */
    .editor-stats {
        right: max(12px, env(safe-area-inset-right, 12px)) !important;
        bottom: 4px !important;
    }
}

/* === DESKTOP (min-width: 769px) === */
@media (min-width: 769px) {

    /* Ukryj elementy mobile */
    #mobileChatDrawer,
    .chat-peek-bar,
    .mobile-mode-tabs,
    .mobile-editor-toolbar {
        display: none !important;
    }

    /* WAŻNE: .toolbar-trigger na desktop jest ukryty przez editor.css */
    /* NIE dotykaj go tutaj - editor.css go obsługuje */

    /* WAŻNE: #viewGradient ukryty na desktop */
    #viewGradient {
        display: none !important;
    }

    /* Przywróć normalne kolumny */
    .column-editor,
    .column-chat-area {
        position: relative;
        opacity: 1;
        visibility: visible;
        display: flex;
    }

    .column-divider {
        display: block;
    }

    .mode-switcher-row {
        display: flex;
    }

    .unified-chat {
        display: flex;
    }
}

/* === iOS PWA STANDALONE MODE - Safe Area Support === */
@media all and (display-mode: standalone) {
    html {
        padding-top: env(safe-area-inset-top, 0px);
        background: var(--color-bg-primary, #ffffff);
    }

    body {
        min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    header {
        position: relative;
    }

    .content-wrapper {
        min-height: calc(100vh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        min-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
}