/* Native-app-inspired mobile presentation; desktop keeps its existing layout. */
.mobile-app-header, .mobile-app-tabs, .mobile-app-tools, .mobile-app-logout { display: none; }

@media (max-width: 768px) {
    body.mobile-app-ready {
        --app-accent: #667eea;
        --app-text: #333;
        background: #fff;
        color: var(--app-text);
        height: var(--mobile-app-height, 100dvh);
        max-height: none;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    }
    .mobile-app-ready > .container { min-height: 0; height: 100%; flex: 1; padding: 0; gap: 0; }
    .mobile-app-ready > .container > .header,
    .mobile-app-ready .mobile-breadcrumb,
    .mobile-app-ready .mobile-top-menu { display: none; }
    .mobile-app-ready .main-layout { flex: 1; min-height: 0; height: auto; width: 100%; gap: 0; overflow: hidden; }
    .mobile-app-header { display: flex; align-items: center; gap: 8px; min-height: 56px; flex-shrink: 0; padding: 6px 15px; border-bottom: 1px solid #e0e0e0; background: #fff; }
    .mobile-app-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-app-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--app-accent); flex-shrink: 0; cursor: pointer; }
    .mobile-app-header [hidden] { display: none; }
    .mobile-app-english-actions, .mobile-app-english-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .mobile-app-english-group .mobile-app-icon-btn { width: 36px; height: 36px; padding: 8px; color: var(--app-accent); background: transparent; }
    .mobile-app-english-group .mobile-app-icon-btn svg { width: 20px; height: 20px; }
    .mobile-app-english-group .mobile-app-english-add { color: #fff; background: var(--app-accent); }
    .mobile-app-english-group .mobile-app-english-add:active { background: #5568d3; }
    .mobile-app-english-group button:disabled { opacity: .5; cursor: not-allowed; }
    .mobile-app-create-btn { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--app-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
    .mobile-app-icon-btn svg, .mobile-app-tabs svg { width: 24px; height: 24px; }
    .mobile-app-icon-btn:active { background: #f0f0ff; }
    .mobile-app-tabs { display: flex; flex: 0 0 auto; min-height: calc(58px + env(safe-area-inset-bottom)); padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e8e8e8; z-index: 20; }
    .mobile-app-tabs button { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 48px; padding: 2px; background: transparent; color: #999; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-app-tabs button span { font-size: 11px; font-weight: 500; line-height: 1.4; }
    .mobile-app-tabs button.active { color: var(--app-accent); }
    .mobile-app-tabs button:focus-visible, .mobile-app-icon-btn:focus-visible, .mobile-app-tools button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -3px; border-radius: 8px; }
    .mobile-app-keyboard .mobile-app-tabs { display: none; }

    .mobile-app-ready .main-layout > [id$="-view"] { min-width: 0; max-width: 100%; border-radius: 0; box-shadow: none; }
    .mobile-app-ready :is(.tasks-view, .projects-view, .articles-view, .settings-view, .users-view, .albums-view, .files-view, .cron-view, .logs-view) { padding: 15px; background: #fff; }
    .mobile-app-ready :is(.tasks-view-header, .view-header) { flex-shrink: 0; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .mobile-app-ready :is(.tasks-view-header, .view-header) > h2 { display: none; }
    .mobile-app-ready .view-header-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
    .mobile-app-ready #tasks-view > .tasks-view-header,
    .mobile-app-ready #articles-view > .view-header { display: none; }
    .mobile-app-ready :is(.primary-btn, .secondary-btn) { min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 8px; box-shadow: none; }
    .mobile-app-ready .primary-btn { background: var(--app-accent); }
    .mobile-app-ready :is(input, select, textarea) { font-size: 16px; }
    .mobile-app-ready :is(.form-row > .form-group, .form-group) { min-width: 0; }
    .mobile-app-ready .tasks-view-content { padding: 0; overscroll-behavior: contain; }
    .mobile-app-ready .task-sidebar-list { padding: 0 0 12px; }
    .mobile-app-ready .task-sidebar-item { border-radius: 8px; padding: 12px; border-left-width: 3px; box-shadow: 0 1px 3px #0000000d; }
    .mobile-app-ready .task-filter-tabs { gap: 4px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
    .mobile-app-ready .task-filter-tab { min-height: 44px; white-space: nowrap; flex-shrink: 0; padding: 8px 12px; font-size: 14px; }
    .mobile-app-ready .task-search-box input { min-height: 44px; font-size: 16px; background: #f5f5f5; border-color: #eee; border-radius: 10px; }
    .mobile-app-ready .chat-layout, .mobile-app-ready .chat-wrapper { height: auto; max-height: none; flex: 1; min-height: 0; }
    .mobile-app-ready[data-app-view="chat"] .mobile-app-header { display: none; }
    .mobile-app-ready .chat-header { padding: 4px 15px; }
    .mobile-app-ready .chat-container { min-height: 0; padding: 0; box-shadow: none; }
    .mobile-app-ready .chat-messages { background: #f5f5f5; padding: 15px; border: 0; border-radius: 0; margin: 0; }
    .mobile-app-ready .message { border-radius: 12px; font-size: 15px; box-shadow: none; }
    .mobile-app-ready .message.assistant { background: #fff; }
    .mobile-app-ready .message.user { background: #667eea; color: #fff; }
    .mobile-app-ready .chat-input-area { border-top: 1px solid #eee; padding: 10px; background: #fff; }
    .mobile-app-ready .chat-input { font-size: 16px; border-radius: 20px; background: #f5f5f5; border-color: #eee; }
    .mobile-app-ready .conversation-sidebar { padding-top: calc(15px + env(safe-area-inset-top)); height: var(--mobile-app-height, 100dvh); }
    .mobile-app-ready .mobile-nav-drawer:not(.open),
    .mobile-app-ready .conversation-sidebar:not(.open),
    .mobile-app-ready .task-sidebar:not(.open) { visibility: hidden; pointer-events: none; }

    .mobile-app-ready #english-view { border: 0; border-radius: 0; }
    .mobile-app-ready #english-view .english-heading { display: none; }
    .mobile-app-ready #english-view .english-navigation { padding: 0 15px; gap: 0; flex-wrap: nowrap; }
    .mobile-app-ready #english-view .english-content { padding: 12px 15px; scrollbar-gutter: auto; }
    .mobile-app-ready #english-view .english-sections { gap: 24px; border-bottom: 0; }
    .mobile-app-ready #english-view .english-sections button { min-height: 44px; padding: 11px 4px; }
    .mobile-app-ready #english-view .english-navigation > .view-header-actions { display: none !important; }
    .mobile-app-ready #english-view .english-stats { margin-bottom: 12px; }
    .mobile-app-ready #english-view :is(.english-search, .phrase-toolbar) { margin-bottom: 12px; }
    .mobile-app-ready #english-view :is(.english-search input, .phrase-toolbar input) { min-height: 44px; font-size: 16px; background: #f5f5f5; }
    .mobile-app-ready #english-view :is(.word-card, .phrase-example) { border-radius: 8px; padding: 15px; }
    .mobile-app-ready #english-view .word-list { grid-template-columns: 1fr; }
    .mobile-app-ready .articles-content { flex-direction: column; min-height: 0; gap: 12px; }
    .mobile-app-ready .articles-sidebar { width: 100%; flex: 0 0 auto; padding: 0; max-height: 145px; overflow-y: auto; border-right: 0; }
    .mobile-app-ready .articles-sidebar-title { padding: 0 0 8px; }
    .mobile-app-ready .articles-categories { display: flex; gap: 6px; overflow-x: auto; }
    .mobile-app-ready .articles-categories .category-item { min-width: max-content; margin: 0; border-radius: 8px; padding: 10px 12px; }
    .mobile-app-ready .articles-main { min-width: 0; min-height: 0; }
    .mobile-app-ready .articles-search input { min-width: 0; font-size: 16px; }
    .mobile-app-ready .articles-list { grid-template-columns: 1fr; }
    .mobile-app-ready #settings-view { padding: 0; background: #f5f5f5; }
    .mobile-app-ready #settings-view > .view-header { display: none; }
    .mobile-app-ready .settings-content { padding: 0 0 20px; min-height: 0; }
    .mobile-app-tools { display: block; margin: 0 0 20px; }
    .mobile-app-tools h3 { margin: 20px 15px 10px; font-size: 14px; font-weight: 600; color: #999; }
    .mobile-app-tool-list { background: #fff; }
    .mobile-app-tool-list button { display: flex; align-items: center; width: 100%; min-height: 58px; padding: 14px 15px; gap: 15px; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; color: #333; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
    .mobile-app-tool-icon { width: 28px; flex: 0 0 28px; font-size: 24px; text-align: center; }
    .mobile-app-tool-arrow { margin-left: auto; color: #ccc; font-size: 24px; }
    .mobile-app-tool-list button:active { background: #f5f5f5; }
    .mobile-app-ready .settings-card { border-radius: 0; box-shadow: none; padding: 20px 15px; margin-bottom: 16px; }
    .mobile-app-ready .settings-card-title { font-size: 16px; }
    .mobile-app-logout { display: block; width: 100%; padding: 16px; min-height: 52px; border: 0; background: #fff; color: #ef4444; font: inherit; font-size: 16px; cursor: pointer; }
    .mobile-app-ready .modal { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
    .mobile-app-ready .modal .modal-content { max-height: calc(var(--mobile-app-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
    .mobile-app-ready .toast-container { top: calc(16px + env(safe-area-inset-top)); }

    body.mobile-app-login { min-height: 100dvh; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background: #f5f5f5; }
    .mobile-app-login .login-container { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
    .mobile-app-login .logo h1 { font-size: 32px; }
    .mobile-app-login .logo p { font-size: 18px; }
    .mobile-app-login .form-group input { background: #fff; border: 1px solid #e0e0e0; padding: 15px; font-size: 16px; }
}