/* The complete web workspace, composed for phones. No separate feature set. */
.mobile-workspace-nav { display: none; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .top-bar { position: sticky; }
    body:not(.viewer-authenticated) .mobile-workspace-nav { display: none; }
    body:not(.session-body) { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .top-bar { height: auto; min-height: 64px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; gap: 12px; flex-wrap: wrap; }
    .top-bar .brand { min-width: 0; }
    .top-bar .version-badge { display: none; }
    .top-bar-actions { width: auto; margin-left: auto; gap: 8px; }
    .user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    .main-container { padding: 16px; width: 100%; }
    .workspace-page h1 { margin: 12px 0 20px; font-size: 26px; line-height: 1.25; letter-spacing: -.6px; }
    #workspace-home h1 { font-size: 18px; color: var(--text-secondary); letter-spacing: 0; margin: 4px 0 16px; }
    .workspace-back { margin: 0; display: inline-flex; align-items: center; font-size: 13px; }
    .workspace-tiles { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
    .workspace-tile { display: grid; grid-template-columns: 28px 1fr 12px; column-gap: 12px; row-gap: 4px; min-width: 0; padding: 16px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; transform: none; }
    .workspace-tile:last-child { border-bottom: 0; }
    .workspace-tile::after { content: '›'; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--text-muted); font-size: 24px; }
    .workspace-tile:hover { transform: none; }
    .workspace-tile strong { grid-column: 2; font-size: 15px; }
    .workspace-tile > span:last-child { grid-column: 2; font-size: 12px; line-height: 1.5; }
    .workspace-mark { grid-column: 1; grid-row: 1 / 3; align-self: center; color: var(--text-secondary); }
    .connect-card, .download-links { padding: 20px; }
    .connect-card { box-shadow: none; background: var(--bg-secondary); }
    .connect-card .card-header { padding: 0 0 16px; margin: 0; border: 0; }
    .connect-card .card-header h2 { font-size: 23px; letter-spacing: -.5px; }
    .connect-card .form-group { margin-bottom: 18px; }
    .connect-card .managed-service-notice { margin-bottom: 20px; }
    .connect-card #device-id { font-size: 24px; letter-spacing: 2px; font-variant-numeric: tabular-nums; padding: 14px; }
    .connect-card #pairing-disclosure { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
    #workspace-home .form-actions { display: flex; align-items: stretch; padding: 0; gap: 10px; }
    #workspace-home .btn-connect { flex: 1; min-width: 0; }
    .connect-card .label-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
    .connect-card .label-row label { margin-bottom: 0; }
    .connect-card .auth-mode-link { font-size: 13px; }
    #workspace-home #connect-form { display: block; }
    .account-gate { padding: 24px 20px; }
    .card-header { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .workspace-page, .workspace-page .card, .workspace-group { min-width: 0; }
    .workspace-page p, .workspace-group strong { overflow-wrap: anywhere; }
    .book-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .book-filters label:first-child { grid-column: 1 / -1; }
    .book-sort { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); }
    .book-sort select { max-width: 65%; }
    .history-card { box-shadow: none; }
    .history-card .card-header { padding: 8px 16px; }
    .book-row { padding: 18px 0; gap: 14px; align-items: flex-start; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); }
    .book-row .connection-name { font-size: 16px; margin-bottom: 4px; }
    .book-row .connection-info small { color: var(--text-secondary); line-height: 1.5; margin-top: 6px; }
    .book-row-actions { width: 100%; gap: 8px; align-items: flex-start; }
    .book-row-actions > button:first-child { flex: 1; background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); font-weight: 600; }
    .book-more { flex: 0 0 auto; }
    .book-more[open] { flex: 1 0 100%; }
    .book-more summary { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 10px 14px; }
    .book-more-actions { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .book-more-actions select { width: 100%; grid-column: 1 / -1; }
    .workspace-setup { border-top: 1px solid var(--border-subtle); }
    .workspace-group { padding: 16px; gap: 10px; background: var(--bg-secondary); }
    .workspace-group strong { flex-basis: 100%; }
    .workspace-group button { flex: 1; }
    .workspace-account-actions { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
    #address-book-list { max-height: none; overflow: visible; }
    .download-links form > input:not([type=checkbox]), .download-links select { width: 100%; }
    .download-link-row > button { flex: 1 1 120px; }
    .workspace-account-actions { flex-wrap: wrap; }
    body:not(.session-body) button, body:not(.session-body) select,
    body:not(.session-body) summary, .workspace-back, .footer-link { min-height: 48px; }
    body:not(.session-body) input:not([type=checkbox]):not([type=range]),
    body:not(.session-body) select, body:not(.session-body) textarea { font-size: 16px; }
    .btn-icon, .modal-close, .toggle-pass { min-width: 48px; }
    .password-wrapper input { padding-right: 60px; }
    .modal-overlay { padding: 12px; }
    .modal { max-width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
    .mobile-workspace-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); background: var(--bg-primary); border-top: 1px solid var(--border-subtle); }
    .mobile-workspace-nav a { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; padding: 8px 2px; min-height: 58px; color: var(--text-secondary); text-decoration: none; font-size: 11px; line-height: 1.2; text-align: center; border-radius: var(--radius-sm); }
    .mobile-workspace-nav svg { width: 22px; height: 22px; }
    .mobile-workspace-nav a[aria-current] { color: var(--brand-mark); background: var(--bg-secondary); font-weight: 600; }
    .mobile-workspace-nav a:focus-visible { outline: 2px solid var(--brand-mark); outline-offset: -2px; }
    .footer { padding-bottom: 16px; flex-wrap: wrap; }
    body:not(.session-body) { scroll-padding-top: 90px; }
    body:not(.session-body) :is(input, select, textarea, button, summary) { scroll-margin-block: 100px; }
    .workspace-page h1:focus { outline: none; }

    /* Full desktop tools remain available through the expandable toolbar;
       the lower strip provides the common touch actions. */
    .session-body .status-bar { max-height: 65vh; max-height: 65dvh; overflow: auto; flex-wrap: wrap; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
    .session-body .status-bar .toolbar { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
    .session-body .toolbar > button, .session-body .toolbar > a,
    .session-body .toolbar-dropdown-btn, .session-body .toolbar select { min-height: 48px; padding: 10px 12px; }
    .session-body .toolbar-dropdown-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--session-toolbar-height, 48px) + 4px); max-width: calc(100vw - 24px); max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
    .session-body .toolbar-dropdown-menu button { min-height: 48px; white-space: normal; }
    .session-body .mobile-toolbar button { min-width: 64px; height: 56px; }
    .session-body .mobile-toolbar { display: block; }
    .session-body .mobile-fab { display: flex; }
    .session-body #session-viewport { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .session-body .mobile-toolbar button span { font-size: 11px; }
    .session-body .status-trigger { min-height: 44px; }
    .session-body .chat-panel, .session-body .trust-panel { left: 12px; right: 12px; width: auto; min-width: 0; max-height: 70vh; max-height: 70dvh; }
    .session-body .chat-panel, .session-body .trust-panel, .session-body .app-panel,
    .session-body .file-panel, .session-body .shell-panel { z-index: 1500; }
    .session-body .chat-panel, .session-body .app-panel { top: max(12px, env(safe-area-inset-top, 0px)); }
    .session-body .app-panel { max-height: calc(100dvh - 96px); }
    .session-body .app-split { flex-direction: column; }
    .session-body .app-sidebar { display: block; width: 100%; max-height: 160px; flex-shrink: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .session-body .app-panel, .session-body .chat-panel, .session-body .mobile-toolbar { background: var(--bg-secondary); border-radius: var(--radius); }
    .session-body .mobile-toolbar button { border-radius: var(--radius); background: var(--bg-card); }
    .session-body .chat-panel button, .session-body .app-panel button,
    .session-body .file-panel button, .session-body .shell-panel button { min-height: 48px; min-width: 48px; }
    .session-body input:not([type=checkbox]):not([type=range]), .session-body textarea, .session-body select { font-size: 16px; }
}