/* Phone browsers: match the native app (full-bleed white pages, title bar, bottom tabs). */
.mobile-tab-bar, .mobile-settings-home, .mobile-breadcrumb-back, .mobile-breadcrumb-actions, .mobile-terminal-actions, .app-splash { display: none; }

/* Launch screen like the native app: the logo eases in on the panel color, then fades out (mobile-app-shell.js).
   It stays below the status bar strip so the black strip is unchanged. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .app-splash { position: fixed; inset: env(safe-area-inset-top) 0 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--cf-panel, #fff); color: var(--cf-text, #0a0a0a); transition: opacity .32s ease, visibility 0s .32s; }
    .app-splash img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 28px rgba(72, 65, 181, .28); animation: app-splash-logo .6s cubic-bezier(.2, .8, .2, 1) both; }
    .app-splash span { font: 600 20px/1 var(--cf-font, -apple-system, sans-serif); letter-spacing: .02em; animation: app-splash-name .5s .18s ease-out both; }
    .app-splash[data-leaving] { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes app-splash-logo { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes app-splash-name { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .app-splash img, .app-splash span { animation: none; }
}

/* Touch tablets keep the desktop layout but get the same pinning: the page fills exactly the visible area (above the
   keyboard), so the browser cannot leave a blank strip at the top or hide the composer under the keyboard.
   The home-screen app draws under the status bar (black-translucent, see index.hbs); the page sits inside the safe
   area and the status bar strip stays black so its white text is readable.
   Below the strip the root shows between the page and the keyboard (behind iOS's keyboard toolbar), so it takes
   the theme's panel color to keep that toolbar light in the light theme. */
@media (hover: none) and (pointer: coarse) {
    html { height: 100%; overflow: hidden; touch-action: manipulation; background: #000 linear-gradient(#000 0 env(safe-area-inset-top), var(--cf-panel, #fff) 0); }
    html body { position: fixed; top: calc(var(--app-top, 0px) + env(safe-area-inset-top)); left: env(safe-area-inset-left); right: env(safe-area-inset-right); height: calc(var(--app-height, 100dvh) - env(safe-area-inset-top)); }
}
/* iOS home-screen apps can report 100dvh short after returning from another app; 100lvh stays the full height.
   mobile-app-shell.js normally sets --app-height, this is the fallback before it runs.
   iOS home-screen apps without a web manifest may not match (display-mode: standalone), so mobile-app-shell.js also sets data-standalone. */
@media (hover: none) and (pointer: coarse) and (display-mode: standalone) {
    /* height: 100% on html can stay short under a black-translucent status bar; size the root to the large viewport. */
    html { height: 100vh; height: 100lvh; }
    html body { height: calc(var(--app-height, 100lvh) - env(safe-area-inset-top)); }
}
@media (hover: none) and (pointer: coarse) {
    html[data-standalone] { height: 100vh; height: 100lvh; }
    html[data-standalone] body { height: calc(var(--app-height, 100lvh) - env(safe-area-inset-top)); }
}
/* Popups are fixed to the whole screen, not the page, so with the keyboard up their lower fields (and the one being
   typed in) sat under it. While it is open, fit them to the visible area above it like the page; they scroll inside
   and mobile-app-shell.js brings the focused field into view. */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    html[data-keyboard-open] .modal { top: calc(var(--app-top, 0px) + env(safe-area-inset-top)); bottom: auto; height: calc(var(--app-height, 100dvh) - env(safe-area-inset-top)); }
    html[data-keyboard-open] .modal > .modal-content { max-height: calc(100% - 16px) !important; }
    html[data-keyboard-open] dialog[open]:modal { top: calc(var(--app-top, 0px) + env(safe-area-inset-top) + 8px) !important; bottom: auto !important; margin-top: 0 !important; max-height: calc(var(--app-height, 100dvh) - env(safe-area-inset-top) - 16px) !important; }
}
/* Unfolded foldables and tablets: the user list works like the phone (cards, tap for the user detail dialog) instead of the
   wide table, whose columns squeeze into vertical text; cards flow into as many columns as fit. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    html body .users-table-container { display: none; }
    html body .users-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-content: start; }
    html body .users-card-list > .users-card-count, html body .users-card-list > .users-card-empty { grid-column: 1 / -1; }
    html body .users-card-list .user-card { margin-top: 0; min-height: 64px; }
    /* Beside the 设置 column the header is narrow: keep the title and actions on one line instead of wrapping 新建用户
       under the rest; as space runs out drop the 排序 label, then the title (the column highlights 用户), then the
       立即评分 text, like the phone header. */
    html body .users-view { container-type: inline-size; }
    html body .users-view > .view-header { flex-wrap: nowrap; gap: 12px; }
    html body .users-view .view-header-actions { flex-wrap: nowrap; gap: 8px; min-width: 0; }
    html body .users-view .view-header-actions > * { flex-shrink: 0; white-space: nowrap; }
    html body .users-sort-bar > span { display: none; }
    @container (max-width: 520px) {
        html body .users-view > .view-header { justify-content: flex-end; }
        html body .users-view > .view-header h2 { display: none; }
    }
    @container (max-width: 480px) {
        html body #usage-score-run-btn { width: 30px; padding: 0; justify-content: center; }
        html body #usage-score-run-btn .score-run-label { display: none; }
    }
}

@media (max-width: 768px) {
    html { height: 100%; overflow: hidden; touch-action: manipulation; }
    /* Fill exactly the visible area (above the keyboard) so iOS cannot leave the page offset; see mobile-app-shell.js. */
    html body { position: fixed; top: calc(var(--app-top, 0px) + env(safe-area-inset-top)); left: env(safe-area-inset-left); right: env(safe-area-inset-right); height: calc(var(--app-height, 100dvh) - env(safe-area-inset-top)); background: #f5f5f5; }
    html body .container { padding: 0; }
    html body .main-layout { gap: 0; }

    /* Title bar for non-chat views; the chat view keeps its own header. */
    html body .mobile-breadcrumb { justify-content: center; min-height: 52px; margin: 0; padding: 0 16px; border-radius: 0; border-bottom: 1px solid #e0e0e0; background: #fff; box-shadow: none; }
    /* The tab bar replaces the slide-out drawer, and the title bar replaces in-page headings. */
    html body .mobile-nav-drawer, html body .mobile-nav-overlay { display: none; }
    html body .view-header h2, html body #project-audit .audit-header h2 { display: none; }
    html body .view-header:not(:has(.view-header-actions)) { display: none; }
    html body .mobile-breadcrumb-toggle, html body .mobile-breadcrumb-icon { display: none; }
    html body .mobile-breadcrumb-current { color: #333; font-size: 18px; font-weight: 700; }
    body[data-mobile-view="chat"] .mobile-breadcrumb, body[data-mobile-view="approvals"] .mobile-breadcrumb { display: none; }
    html body #approvals-view { border-radius: 0; }
    html body .approvals-panel .view-header, html body .approvals-panel .view-header h2 { display: block; }
    html body .approvals-panel { padding-top: 12px; }
    /* Back button for sub-pages: users/logs/terminal under 设置, a settings page, or an open terminal. */
    body[data-mobile-view="users"] .mobile-breadcrumb, body[data-mobile-view="audit"] .mobile-breadcrumb, body[data-mobile-view="settings"] .mobile-breadcrumb, body[data-mobile-view="terminal"] .mobile-breadcrumb { position: relative; }
    body[data-mobile-view="users"] .mobile-breadcrumb-back, body[data-mobile-view="audit"] .mobile-breadcrumb-back, body[data-mobile-view="settings"][data-settings-page] .mobile-breadcrumb-back, body[data-mobile-view="terminal"] .mobile-breadcrumb-back { display: block; position: absolute; left: 4px; bottom: 0; width: 44px; height: 52px; border: 0; background: none; color: #667eea; font-size: 32px; line-height: 48px; cursor: pointer; }

    /* The conversation list is a page, not a slide-out drawer: when open it fills the chat area above the tab bar. */
    html body .conversation-sidebar.open { position: static; flex: 1 1 auto; width: 100%; max-width: none; height: auto; min-height: 0; box-shadow: none; transition: none; }
    html body .chat-layout:has(.conversation-sidebar.open) .chat-wrapper { display: none; }
    /* The messages list shares the selected chat's composer and draft. */
    html body[data-mobile-conversation-filter="chat"] .chat-layout:has(.conversation-sidebar.open) { flex-direction: column; }
    /* Override the mobile chat page's 100% height: only the composer belongs below the list. */
    html body[data-mobile-conversation-filter="chat"] .chat-layout:has(.conversation-sidebar.open) .chat-wrapper { display: flex; flex: 0 0 auto; height: auto; min-height: 0; }
    html body[data-mobile-conversation-filter="chat"] .chat-layout:has(.conversation-sidebar.open) .chat-container { flex: 0 0 auto; }
    html body[data-mobile-conversation-filter="chat"] .chat-layout:has(.conversation-sidebar.open) .chat-container > :not(.chat-input-area) { display: none; }
    /* The composer below the 消息 list already starts new conversations, so the list header needs no 新建 button. */
    html body[data-mobile-conversation-filter="chat"] .conversation-sidebar .conversation-new-icon { display: none; }
    /* The 项目 and 员工 tabs choose the list type; a second row of type buttons would disagree with the tab bar. */
    html body .conversation-sidebar > .conversation-type-filters { display: none; }
    html body .mobile-menu-overlay, html body .mobile-menu-overlay.show { display: none; }

    /* 设置 home, laid out like the app's ProfileScreen. */
    html body #settings-view { background: #f5f6fa; }
    body[data-mobile-view="settings"]:not([data-settings-page]) .mobile-settings-home { display: block; }
    body:not([data-settings-page]) #settings-view .settings-card { display: none; }
    body[data-settings-page="account"] #settings-view .settings-card:not([data-mobile-page="account"]),
    body[data-settings-page="plugins"] #settings-view .settings-card:not([data-mobile-page="plugins"]),
    body[data-settings-page="git"] #settings-view .settings-card:not([data-mobile-page="git"]),
    body[data-settings-page="browser"] #settings-view .settings-card:not([data-mobile-page="browser"]),
    body[data-settings-page="mcp"] #settings-view .settings-card:not([data-mobile-page="mcp"]),
    body[data-settings-page="stats"] #settings-view .settings-card:not([data-mobile-page="stats"]) { display: none; }
    body[data-settings-page] #settings-view .settings-card:not([data-mobile-page="account"]) .settings-card-title { display: none; }
    html body .settings-view { padding: 0; }
    html body .settings-content { padding: 16px 16px 28px; }
    html body .settings-card { margin-bottom: 12px; padding: 16px; border-radius: 16px; box-shadow: none; }
    .mobile-settings-home button { border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-settings-user { display: flex; align-items: center; width: 100%; margin-bottom: 12px; padding: 20px 4px; background: none; text-align: left; }
    .mobile-settings-avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 64px; height: 64px; margin-right: 16px; border-radius: 50%; background: #667eea; color: #fff; font-size: 26px; font-weight: 700; }
    .mobile-settings-user-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
    .mobile-settings-name { overflow: hidden; color: #1f2937; font-size: 22px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-settings-email { margin-top: 6px; color: #6b7280; font-size: 14px; }
    .mobile-settings-chevron { color: #9ca3af; font-size: 28px; }
    .mobile-settings-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mobile-settings-tools button { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 14px; border-radius: 16px; background: #fff; color: #374151; font-size: 15px; font-weight: 500; text-align: left; }
    .mobile-settings-tools button[hidden] { display: none; }
    .mobile-settings-icon { flex-shrink: 0; width: 24px; height: 24px; }
    .mobile-settings-logout { display: block; width: 100%; min-height: 56px; margin-top: 20px; border-radius: 16px; background: #fff; color: #ef4444; font-size: 16px; font-weight: 500; }

    /* 终端, laid out like the app's TerminalScreen: icon actions in the title bar, a full-page server list,
       and a connected terminal that opens full screen with a back button. */
    body[data-mobile-view="terminal"] .mobile-breadcrumb-actions { display: flex; position: absolute; right: 8px; bottom: 0; height: 52px; align-items: center; }
    body[data-mobile-view="terminal"][data-terminal-open] .mobile-breadcrumb-actions { display: none; }
    .mobile-breadcrumb-actions button { display: flex; align-items: center; justify-content: center; width: 32px; height: 40px; padding: 0; border: 0; background: none; color: #667eea; cursor: pointer; }
    .mobile-breadcrumb-actions svg { width: 22px; height: 22px; }
    html body .terminal-view { background: #f5f5f5; }
    html body .terminal-view .view-header, html body .terminal-sidebar-header, html body .terminal-search, html body #terminal-saved-sessions { display: none !important; }
    html body .terminal-main { flex-direction: column; }
    html body .terminal-sidebar { flex: 1; width: auto; min-height: 0; overflow-y: auto; border: 0; background: #f5f5f5; }
    html body .terminal-tabs-container { flex: 1; min-height: 0; }
    body[data-terminal-open] .terminal-sidebar { display: none; }
    body:not([data-terminal-open]) .terminal-tabs-container { display: none; }
    .mobile-terminal-actions { display: block; padding: 15px 15px 0; }
    .mobile-terminal-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 15px; padding: 15px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
    .mobile-terminal-actions button[hidden] { display: none; }
    .mobile-terminal-primary { background: #667eea; color: #fff; }
    .mobile-terminal-resume { border: 1px solid #667eea !important; background: #fff; color: #667eea; }
    html body .terminal-server-list { flex: none; overflow: visible; padding: 0 0 20px; }
    /* Groups are always expanded on phones, with white server rows like the app. */
    html body .server-group { margin-bottom: 15px !important; }
    html body .server-group-header { padding: 10px 15px !important; border-radius: 0 !important; background: transparent !important; pointer-events: none; }
    html body .server-group-header > span:first-child { display: none; }
    html body .server-group-header > span:nth-child(2) { color: #666 !important; font-size: 14px !important; font-weight: 600 !important; }
    html body .server-group-header button { pointer-events: auto; width: 32px !important; height: 32px !important; }
    html body .server-group-content { display: block !important; padding-left: 0 !important; background: #fff; }
    html body .server-item { margin: 0 !important; padding: 10px 15px !important; border-bottom: 1px solid #f0f0f0; border-radius: 0 !important; background: #fff !important; }
    html body .server-item > span:first-child { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 12px !important; border-radius: 50%; background: #f0f0ff; font-size: 22px; }
    html body .server-item > div > div:first-child { color: #333 !important; font-size: 16px !important; font-weight: 500; }
    html body .server-item > div > div:last-child { margin-top: 2px; color: #666 !important; font-size: 13px !important; }
    html body .server-item button { width: 36px !important; height: 36px !important; font-size: 16px !important; opacity: 0.8 !important; }

    /* Composer: the app's single-line pill input. 16px text keeps iOS Safari from zooming on focus. */
    html body .chat-input-area { gap: 6px; padding: 8px 10px; background: #fff; border-top: 1px solid #e0e0e0; }
    html body #chat-input { min-height: 40px; max-height: 120px; padding: 9px 84px 9px 15px; border: 0; border-radius: 20px; background: #f5f5f5; font-size: 16px; line-height: 22px; }
    html body #chat-input:focus { box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.35); }
    html body .chat-input-wrapper .chat-btn { right: 4px; bottom: 4px; width: 32px; height: 32px; box-shadow: none; }
    html body .chat-input-wrapper #chat-voice-button { right: 42px; }
    html body .chat-input-wrapper .chat-btn svg { width: 18px; height: 18px; }
    html body .chat-input-wrapper .chat-image-pick { left: 4px; bottom: 4px; width: 32px; height: 32px; }
    html body .chat-input-wrapper #chat-input { padding-left: 40px; }

    html body .chat-container,
    html body .users-view,
    html body .terminal-view,
    html body .settings-view,
    html body #project-audit { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    html body .chat-header { padding-left: 8px; padding-right: 8px; }
    html body .chat-messages { background: #f5f5f5; }
    /* iOS Safari zooms into any focused field under 16px and stays zoomed after the keyboard closes. */
    html body input, html body textarea, html body select { font-size: 16px !important; }

    /* Desktop two-pane and wide-table layouts are too narrow on phones. */
    /* The user list shows app-style cards instead of the wide table. */
    html body .users-table-container { display: none; }
    html body .users-card-list { display: block; }
    html body .users-view { padding: 0 10px 20px; background: #fff; }
    html body .users-view .view-header { justify-content: flex-end; margin: 0; padding: 8px 0 0; }
    html body .users-view .users-content { margin-top: 0; }
    html body .users-view .view-header-actions { gap: 8px; }
    html body .users-view .score-run-btn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 10px; }
    html body .users-view .score-run-label { display: none; }
    html body .users-view .primary-btn { padding: 6px 12px; font-size: 14px; }

    .mobile-tab-bar { display: flex; flex-shrink: 0; border-top: 1px solid #e0e0e0; background: #fff; padding-bottom: env(safe-area-inset-bottom); }
    .mobile-tab-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 4px 0; border: 0; background: transparent; color: #6b7280; font: inherit; font-size: 11px; line-height: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-tab-icon { position: relative; display: flex; }
    .mobile-tab-bar button svg { width: 24px; height: 24px; stroke-width: 1.8; }
    .mobile-tab-badge { position: absolute; top: -4px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
    .mobile-tab-badge[hidden] { display: none; }
    .mobile-tab-bar button[aria-current="page"] { color: #667eea; }
    .mobile-tab-bar button[aria-current="page"] svg { stroke-width: 2.2; }
    html[data-keyboard-open] .mobile-tab-bar { display: none; }
    .mobile-tab-bar button:focus-visible { outline: 2px solid #667eea; outline-offset: -2px; }
}