/* Dedicated phone shell for the web app and Capacitor builds. */
@media (max-width: 820px), (max-width: 1200px) and (max-height: 700px) and (orientation: landscape) {
    :root {
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-right: env(safe-area-inset-right, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-safe-left: env(safe-area-inset-left, 0px);
        --mobile-topbar-height: calc(108px + var(--mobile-safe-top) + var(--public-demo-topbar-extra, 0px));
    }
    html.platform-android {
        --mobile-safe-top: max(env(safe-area-inset-top, 0px), 24px);
        --mobile-safe-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    }


    html,
    body {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    body {
        padding: 0 !important;
        background-color: var(--canvas);
        -webkit-text-size-adjust: 100%;
    }

    .view.active > * + * { margin-top: 22px !important; }
    .animal-rack-position.occupied { touch-action: none; }
    .plant-rack-position.occupied { touch-action: none; }
    :is(.animal-rack-board,.plant-rack-board) { touch-action: pan-x; }
    :is([data-housing-item],[data-cold-storage-box],[data-door-reagent],[data-room-tab],[data-cold-storage-rack-handle],#reagentTable [data-reagent-catalog]) {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .app-shell,
    .app-stage,
    main,
    .view,
    .view.active,
    .panel,
    .module-toolbar,
    .page-heading,
    .dashboard-hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .app-shell,
    .app-stage {
        min-height: 100dvh;
    }

    .topbar,
    html.native-app .topbar {
        top: 0;
        right: 0;
        left: 0;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) minmax(92px, auto);
        grid-template-rows: 52px 44px;
        gap: 4px 8px;
        height: var(--mobile-topbar-height);
        padding: var(--mobile-safe-top) max(10px, var(--mobile-safe-right)) 8px max(10px, var(--mobile-safe-left));
        background: color-mix(in srgb, var(--surface) 96%, var(--acid) 4%) !important;
        border: 0;
        box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(38, 51, 44, .07);
        backdrop-filter: none;
    }

    :root:has(.topbar .public-demo-banner:not([hidden])) { --public-demo-topbar-extra: 40px; }
    .topbar:has(.public-demo-banner:not([hidden])) { grid-template-rows: 52px 44px 36px; }
    .topbar .public-demo-banner {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: end;
        align-self: center;
        min-width: 0;
        max-width: 100%;
    }
    .topbar .public-demo-banner > span { min-width: 0; white-space: normal; line-height: 1.15; }

    .menu-toggle {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        display: block;
        width: 44px;
        height: 44px;
        padding: 9px;
        border-radius: 13px;
    }

    .breadcrumb {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
    }

    .breadcrumb strong {
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb span,
    .breadcrumb i {
        display: none;
    }

    .top-actions {
        grid-column: 3;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
        max-width: 48vw;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .top-actions::-webkit-scrollbar { display: none; }
    .top-actions .desktop-download-button,
    .top-actions .background-toggle { display: none !important; }
    .top-actions .sync-control {
        flex: 0 0 42px;
        min-width: 42px;
        width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 13px;
    }
    .top-actions .sync-control span { display: none !important; }
    .top-actions .icon-button {
        display: grid !important;
        flex: 0 0 42px;
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px;
    }
    .top-actions .workspace-mode-toggle,
    .topbar .language-dock {
        position: static;
        flex: 0 0 auto;
        inset: auto;
        margin: 0;
    }
    .top-actions .workspace-mode-toggle { min-height: 42px; }
    .topbar .language-dock { padding: 2px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-dark); box-shadow: none; }
    .topbar .language-dock button { min-height: 42px; border-radius: 13px; }

    .global-search {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        width: 100% !important;
        height: 42px;
        margin: 0;
        padding: 0 13px;
        background: color-mix(in srgb, var(--surface-2) 82%, white 18%) !important;
        border: 1px solid var(--line-dark) !important;
        border-radius: 14px !important;
    }
    .global-search input {
        display: block !important;
        min-width: 0;
        padding: 0 8px;
        font-size: 16px;
    }
    .global-search kbd { display: none; }

    .app-boot-screen,
    html.native-app .app-boot-screen {
        grid-template: 1fr / 1fr;
        place-items: center;
        padding: 0;
    }
    .app-boot-screen .boot-brand,
    html.native-app .app-boot-screen .boot-brand { place-self: center; margin: 0; }

    main,
    html.native-app main {
        min-height: 100dvh;
        padding: calc(var(--mobile-topbar-height) + 12px) max(10px, var(--mobile-safe-right)) calc(32px + var(--mobile-safe-bottom)) max(10px, var(--mobile-safe-left));
    }

    .sidebar,
    html.native-app .sidebar {
        top: 0;
        bottom: 0;
        width: min(88vw, 340px);
        min-height: 100dvh;
        padding: var(--mobile-safe-top) 0 var(--mobile-safe-bottom);
        border-radius: 0 22px 22px 0;
        transform: translateX(-100%);
        transition: transform .24s ease;
        box-shadow: 18px 0 52px rgba(5, 12, 9, .3);
    }
    .brand-lockup { min-height: 76px; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .nav-item { min-height: 54px; padding-inline: 18px !important; }
    .sidebar-foot { padding-bottom: max(18px, var(--mobile-safe-bottom)); }
    .mobile-scrim { width: 100vw; height: 100dvh; }

    .dashboard-hero,
    .page-heading,
    .dashboard-hero:is(.dashboard-hero),
    .page-heading:is(.page-heading) {
        min-height: 154px;
        gap: 14px;
        margin: 0;
        padding: 20px 18px !important;
        overflow: hidden;
        border-radius: 18px;
    }
    .view > .page-heading + *,
    .view > .dashboard-hero + * { margin-top: 18px; }
    .dashboard-hero h1,
    .page-heading h1 { font-size: clamp(30px, 9vw, 42px); }
    .page-heading.technical-heading > div:first-child,
    body:is(.background-all-lives, .background-black-current) .page-heading.technical-heading > div:first-child {
        width: min(76%, 520px);
        max-width: min(76%, 520px);
    }
    .story-quote { display: none; }
    .heading-visual,
    .hero-atmosphere { max-width: 56% !important; opacity: .18 !important; pointer-events: none; }
    .page-heading .button,
    .page-heading .heading-actions { min-height: 44px; }

    .dashboard-grid,
    .metrics-grid,
    .mini-metrics,
    .record-grid,
    .protocol-grid,
    .cell-culture-grid,
    .bio-folder-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .panel,
    .metric-card,
    .mini-metric,
    .record-card,
    .protocol-card,
    .cell-culture-card,
    .experiment-inline-result {
        border-radius: 16px;
    }

    .module-toolbar,
    .module-toolbar.in-panel {
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    .module-toolbar > *,
    .module-toolbar.in-panel > *,
    .biology-toolbar-actions,
    .bioinfo-toolbar-actions {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .module-toolbar .button,
    .biology-toolbar-actions .button { min-height: 44px; }

    .record-card,
    .protocol-card,
    .cell-culture-card {
        position: relative;
        min-height: 0;
        padding: 16px;
        text-align: left;
        touch-action: manipulation;
    }
    .record-card { padding-right: 40px; }
    .record-card::before {
        content: "›";
        position: absolute;
        top: 50%;
        right: 14px;
        color: var(--muted);
        font-size: 28px;
        transform: translateY(-50%);
    }
    .record-card h2,
    .protocol-card h2,
    .cell-culture-card h3 { font-size: 18px; }
    .record-card > p,
    .protocol-card > p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .record-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-row { grid-template-columns: 42px minmax(0, 1fr) auto; }

    .table-scroll,
    .animal-rack-board,
    .plant-rack-board,
    .freezer-box-tabs,
    .workspace-directory,
    .filter-tabs,
    .bioinfo-subpage-tabs,
    .bio-project-action-strip,
    .month-panel,
    .embedded-lineage-pan,
    .lineage-map,
    .plate-map-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { width: max-content; min-width: 720px; }
    .data-table th,
    .data-table td { white-space: nowrap; }
    .animal-rack-grid,
    .plant-rack-grid,
    .cryo-matrix,
    .plate-map { flex-shrink: 0; }

    .bio-file-browser { padding: 14px 10px; overflow: hidden; }
    .bio-file-breadcrumb { overflow-x: auto; white-space: nowrap; }
    .bio-folder-grid { justify-items: center; gap: 14px !important; }
    .bio-folder-card { width: min(200px, 74vw); max-width: 200px; }

    .search-overlay {
        align-items: stretch;
        padding: 0;
    }
    .search-dialog {
        display: flex;
        flex-direction: column;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding-top: var(--mobile-safe-top);
        border-radius: 0;
    }
    .search-dialog > header { min-height: 64px; padding: 10px 14px; }
    .dialog-search { min-height: 48px; margin: 0 14px 8px; }
    .dialog-search input { font-size: 16px; }
    .search-results { max-height: none; flex: 1; }
    .search-result { grid-template-columns: 58px minmax(0, 1fr) 24px; min-height: 68px; }

    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) {
        inset: 0 !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) > :is(form, article) {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: none;
        min-width: 0;
        overflow: hidden;
        background: var(--surface);
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) header {
        position: relative;
        z-index: 4;
        flex: 0 0 auto;
        min-height: calc(66px + var(--mobile-safe-top));
        padding: calc(10px + var(--mobile-safe-top)) 70px 10px 16px !important;
        background: var(--surface) !important;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 5px 18px rgba(39, 51, 44, .06);
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) header > div {
        min-width: 0;
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) h2 {
        margin-top: 3px;
        font-size: clamp(21px, 6vw, 27px);
        line-height: 1.2;
    }
    .dialog-close,
    .close-button,
    .notification-close,
    .assistant-drawer-head > button {
        display: grid;
        place-items: center;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        padding: 0;
        border: 2px solid var(--line-dark) !important;
        border-radius: 50% !important;
        font-size: 28px !important;
        font-weight: 700;
        line-height: 1;
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) .dialog-close {
        position: absolute;
        top: calc(var(--mobile-safe-top) + 10px);
        right: max(12px, var(--mobile-safe-right));
        z-index: 6;
    }
    :is(.form-grid, .sync-transfer-panel, .record-detail-body, .protocol-detail-body, .experiment-detail-body, .experiment-run-body, .freezer-scan-body) {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-wrap: anywhere;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .form-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .form-field.full { grid-column: auto; }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) :is(.form-field, form, article) :is(input, select, textarea) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 48px;
        font-size: 16px !important;
    }
    dialog input[type="date"],
    dialog input[type="time"] { min-width: 0; }
    .record-detail-grid,
    .experiment-detail-fields,
    .scan-workspace { grid-template-columns: minmax(0, 1fr) !important; }
    :is(.form-field, .record-detail-grid, .record-detail-section, .experiment-detail-fields, .experiment-usage-section, .experiment-result-section, .experiment-history-section, .scan-workspace) { min-width: 0; max-width: 100%; }
    .record-detail-hero { min-height: 110px; padding: 16px; }
    .record-detail-section { padding: 14px; }

    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) footer {
        position: relative;
        z-index: 4;
        flex: 0 0 auto;
        align-items: stretch;
        gap: 9px;
        padding: 10px max(14px, var(--mobile-safe-right)) max(10px, var(--mobile-safe-bottom)) max(14px, var(--mobile-safe-left)) !important;
        background: var(--surface) !important;
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(39, 51, 44, .06);
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) footer > div,
    .record-detail-actions,
    .run-footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }
    :is(.entry-dialog, .sync-dialog, .record-detail-dialog, .protocol-detail-dialog, .experiment-detail-dialog, .experiment-run-dialog, .freezer-scan-dialog) footer > span { display: none; }
    dialog footer .button { min-height: 46px; padding-inline: 12px; }

    :is(.delete-confirm-dialog, .clear-workspace-dialog, .end-day-dialog) {
        width: calc(100vw - 24px);
        max-width: 440px;
        max-height: calc(100dvh - 24px);
        margin: auto;
        padding: 0;
        border-radius: 22px;
    }
    :is(.delete-confirm-dialog, .clear-workspace-dialog, .end-day-dialog) > article {
        max-height: calc(100dvh - 24px);
        padding: 24px 18px max(18px, var(--mobile-safe-bottom));
        overflow-y: auto;
    }

    .notification-panel {
        top: var(--mobile-topbar-height);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - var(--mobile-topbar-height) - 8px);
        border-radius: 18px 18px 0 0;
    }

    .assistant-character-trigger {
        right: max(14px, var(--mobile-safe-right));
        bottom: max(14px, var(--mobile-safe-bottom));
        width: 68px;
        height: 68px;
        padding: 0;
        overflow: hidden;
        background: color-mix(in srgb, var(--surface) 86%, var(--acid) 14%);
        border: 2px solid var(--acid-strong);
        border-radius: 50%;
        box-shadow: 0 12px 30px rgba(20, 31, 25, .24), 0 0 0 4px color-mix(in srgb, var(--surface) 72%, transparent);
        animation: none;
    }
    .assistant-character-trigger::before,
    .assistant-character-label { display: none; }
    .assistant-character-trigger img {
        inset: -8% -26% auto auto;
        width: 152%;
        height: 152%;
        object-fit: contain;
        object-position: 50% 0;
        filter: none;
    }
    .assistant-character-trigger:hover,
    .assistant-character-trigger:focus-visible { transform: none; }

    .assistant-drawer {
        width: 100vw;
        max-width: 100vw;
        padding-top: var(--mobile-safe-top);
        border: 0;
    }
    .assistant-drawer-head { min-height: 70px; padding: 10px 12px; }
    .assistant-messages { padding: 14px; }
    .assistant-message { max-width: 94%; }
    .assistant-compose { padding: 10px 12px max(10px, var(--mobile-safe-bottom)); }

    .button,
    button,
    [role="button"] { touch-action: manipulation; }
}

@media (max-width: 390px) {
    :root { --mobile-topbar-height: calc(106px + var(--mobile-safe-top) + var(--public-demo-topbar-extra, 0px)); }
    .topbar,
    html.native-app .topbar { grid-template-columns: 42px minmax(0, 1fr) minmax(84px, auto); padding-inline: 8px; }
    .top-actions { max-width: 45vw; }
    .dashboard-hero,
    .page-heading { padding: 18px 15px !important; border-radius: 15px; }
    .page-heading.technical-heading > div:first-child,
    body:is(.background-all-lives, .background-black-current) .page-heading.technical-heading > div:first-child { width: 82%; max-width: 82%; }
}

@media (max-width: 1200px) and (max-height: 700px) and (orientation: landscape) {
    :root { --mobile-topbar-height: calc(58px + var(--mobile-safe-top) + var(--public-demo-topbar-extra, 0px)); }
    .topbar,
    html.native-app .topbar {
        grid-template-columns: 44px minmax(100px, .55fr) minmax(160px, 1fr) auto;
        grid-template-rows: 50px;
        height: var(--mobile-topbar-height);
        padding-bottom: 4px;
    }
    .breadcrumb { grid-column: 2; }
    .global-search { grid-column: 3; grid-row: 1; height: 40px; }
    .top-actions { grid-column: 4; max-width: 34vw; }
    .topbar:has(.public-demo-banner:not([hidden])) { grid-template-rows: 50px 36px; }
    .topbar .public-demo-banner { grid-row: 2; }
    .dashboard-hero,
    .page-heading {
        min-height: 118px;
        padding-block: 14px !important;
    }
    .assistant-character-trigger { width: 60px; height: 60px; }
    .assistant-drawer-head { min-height: 58px; }
}

@media (max-width: 700px) {
    .cold-storage-tabs-row { align-items: stretch; gap: 7px; }
    .cold-storage-tabs { touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .cold-storage-tab { scroll-snap-align: start; }
    .cold-storage-tabs-row > .button { width: auto; padding-inline: 10px; white-space: nowrap; }
    .cold-storage-tab { flex-basis: min(72vw, 250px); }
    .cold-storage-overview { padding: 11px; }
    .cold-storage-overview > header { align-items: flex-start; flex-direction: column; }
    .cold-storage-overview > header .button { width: 100%; }
    .cold-storage-apparatus { grid-template-columns: 1fr; gap: 10px; }
    .cold-storage-device { min-height: 310px; }
    .cold-storage-device.has-reagent-door { grid-template-columns: minmax(0, 1.25fr) minmax(116px, .75fr); gap: 6px; min-height: 360px; padding-right: 12px; padding-left: 12px; }
    .cold-storage-side-door > header { align-items: center; padding: 6px; }
    .cold-storage-side-door-grid { gap: 4px; padding: 4px; }
    .reagent-door-shelf { gap: 3px; padding: 4px; }
    .reagent-door-free-area { min-height: 58px; }
    .reagent-door-bottle { width: 43px; min-height: 50px; padding: 2px; }
    .reagent-door-bottle .reagent-bottle-visual { width: 23px; height: 32px; }
    .reagent-door-bottle .reagent-bottle-name { font-size: 6px; }
    .reagent-door-bottle small { display: none; }
    .cold-storage-reagent-tray { padding: 8px; }
    .reagent-door-source { grid-template-columns: 30px minmax(86px, 130px); min-height: 54px; }
    .cold-storage-device[data-device-kind="ln2"] { min-height: 330px; padding-right: 28px; padding-left: 28px; }
    .cold-storage-racks.vertical,
    .cold-storage-map > .cold-storage-racks.vertical { grid-template-columns: repeat(var(--rack-count), minmax(160px, 1fr)); }
    .cold-storage-rack-handle { min-height: 44px; padding-inline: 10px; }
    .cold-storage-rack-destinations { right: max(8px, var(--mobile-safe-right)); bottom: max(8px, var(--mobile-safe-bottom)); width: calc(100vw - max(16px, var(--mobile-safe-left) + var(--mobile-safe-right))); max-height: 38dvh; }
    .cold-storage-rack-destinations > div { grid-template-columns: 1fr; }
    .cold-storage-device-level-slots .cold-storage-slot { min-height: 52px; }
    .cold-storage-level-panel { padding: 10px; }
    .cold-storage-level-panel > header { align-items: flex-start; flex-direction: column; gap: 3px; }
    .cold-storage-level-actions { width: 100%; }
    .cold-storage-level-actions .button { flex: 1 1 0; }
    .cold-storage-map { grid-auto-columns: minmax(108px, 1fr); }
    .freezer-manager-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .freezer-manager-actions .button { width: 100%; }
    .result-date-accordion { margin: 10px; }
    .result-date-accordion > summary { grid-template-columns: minmax(84px, 1fr) auto 16px; padding: 0 10px; }
}

@media (max-width: 820px), (max-width: 1200px) and (max-height: 700px) and (orientation: landscape) {
    .top-actions {
        max-width: none !important;
        overflow: visible !important;
    }
    .top-actions .utility-nav-toggle {
        display: inline-grid;
        place-items: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 13px;
    }
    .top-actions .notice-button {
        flex: 0 0 42px;
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px;
    }
    .top-actions .utility-nav {
        position: fixed;
        top: calc(var(--mobile-topbar-height) + 6px);
        right: max(8px, var(--mobile-safe-right));
        left: auto;
        z-index: 1700;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: min(240px, calc(100vw - 16px));
        max-height: calc(100dvh - var(--mobile-topbar-height) - 14px);
        color: var(--ink);
        background: color-mix(in srgb, var(--surface) 96%, var(--acid) 4%);
        border: 1px solid var(--line-dark);
        box-shadow: 0 14px 34px rgba(20, 31, 25, .18);
        padding: 10px;
        overflow-y: auto;
        border-radius: 16px;
    }
    .top-actions .utility-nav[hidden] { display: none !important; }
    html.native-app .utility-nav .app-download-menu { display: none !important; }
    .top-actions .utility-nav .app-download-menu { width: 100%; }
    .top-actions .utility-nav .app-download-options {
        position: static;
        min-width: 0;
        margin-top: 6px;
        box-shadow: none;
    }
    .top-actions .utility-nav > .sync-control,
    .top-actions .utility-nav > .utility-nav-item,
    .top-actions .utility-nav > .workspace-mode-toggle {
        width: 100%;
        min-width: 0;
        height: 50px;
        min-height: 50px;
        margin: 0;
    }
    .top-actions .utility-nav .sync-control span { display: inline !important; }
    .top-actions .utility-nav .workspace-mode-toggle,
    .topbar .utility-nav .workspace-mode-toggle {
        width: 100%;
        height: 50px;
        min-height: 50px;
    }
    .top-actions .utility-nav > .sync-control,
    .top-actions .utility-nav .app-download-menu > summary,
    .top-actions .utility-nav .workspace-mode-toggle > button,
    .top-actions .utility-nav .utility-nav-item {
        display: flex !important;
        flex: 0 0 50px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        min-width: 0;
        height: 50px;
        min-height: 50px;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--ink) !important;
        font-family: var(--font-interface) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: center;
        white-space: nowrap;
        position: relative;
    }
    .top-actions .utility-nav :is(button, .utility-label) { color: var(--ink) !important; }
    .top-actions .utility-nav > .sync-control > span,
    .top-actions .utility-nav .utility-label {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        font: inherit !important;
        text-align: center;
    }
    .top-actions .utility-nav .utility-item-icon,
    .top-actions .utility-nav > .sync-control > i,
    .top-actions .utility-nav .utility-theme-icon {
        position: static;
        flex: 0 0 auto;
        order: -1;
        margin: 0;
        transform: none;
    }
    .top-actions .utility-nav .utility-theme-icon { font-size: 15px; line-height: 1; }
    .top-actions .utility-nav svg { color: currentColor; stroke: currentColor; }
    .top-actions .utility-nav #backgroundToggle,
    .top-actions .utility-nav #themeToggle {
        display: flex !important;
        flex: 0 0 50px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        font-size: 13px !important;
    }
    .top-actions .utility-nav #syncControl { background: transparent !important; }
    .top-actions .utility-nav .desktop-utility-control { display: none !important; }
    .top-actions .utility-nav span.mobile-utility-control { display: inline-flex !important; }
    .top-actions .utility-nav svg.mobile-utility-control { display: block !important; }
    .top-actions .utility-nav button.mobile-utility-control { display: flex !important; }
    .top-actions .topbar-language,
    .dark-theme .top-actions .topbar-language {
        display: inline-flex;
        width: auto;
        min-height: 0;
        padding: 2px;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid var(--line-dark);
        border-radius: 999px;
    }
    .top-actions .topbar-language > button,
    .dark-theme .top-actions .topbar-language > button {
        min-width: 68px;
        height: 38px;
        min-height: 38px;
        padding: 2px;
        color: var(--ink);
        background: transparent;
    }
    .top-actions .topbar-language > button .desktop-language-option,
    .dark-theme .top-actions .topbar-language > button .desktop-language-option {
        min-width: 26px;
        min-height: 30px;
        padding: 0 4px;
        color: var(--muted);
    }

    .top-actions .utility-nav :is(#syncControl, #workspaceModeAction, #backgroundToggle, #themeToggle, #clearWorkspaceAction) {
        display: grid !important;
        grid-template-columns: 18px max-content !important;
        grid-template-rows: 50px !important;
        place-content: center !important;
        place-items: center !important;
        column-gap: 7px !important;
        padding: 0 12px !important;
        font-family: var(--font-interface) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 16px !important;
        text-align: center !important;
    }
    .top-actions .utility-nav #syncControl > i,
    .top-actions .utility-nav #workspaceModeAction > .utility-item-icon,
    .top-actions .utility-nav #backgroundToggle > .utility-item-icon,
    .top-actions .utility-nav #themeToggle > .utility-theme-icon,
    .top-actions .utility-nav #clearWorkspaceAction > .utility-item-icon {
        position: static !important;
        inset: auto !important;
        grid-area: 1 / 1 !important;
        place-self: center !important;
        display: grid !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        line-height: 18px !important;
    }
    .top-actions .utility-nav #syncControl > span,
    .top-actions .utility-nav #workspaceModeAction > .utility-label,
    .top-actions .utility-nav #backgroundToggle > .utility-label,
    .top-actions .utility-nav #themeToggle > .utility-label,
    .top-actions .utility-nav #clearWorkspaceAction > .utility-label {
        position: static !important;
        inset: auto !important;
        grid-area: 1 / 2 !important;
        place-self: center start !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        color: var(--ink) !important;
        font-family: var(--font-interface) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 16px !important;
        text-align: left !important;
    }
    .top-actions .utility-nav #syncControl > i {
        width: 7px !important;
        height: 7px !important;
    }
    .cold-storage-device-level .cold-storage-racks,
    .cold-storage-device-level .cold-storage-racks.vertical {
        grid-template-columns: repeat(var(--device-columns), minmax(22px, 1fr));
        grid-template-rows: repeat(var(--device-rows), minmax(42px, 1fr));
        min-height: calc(var(--device-rows) * 42px);
    }
    .cold-storage-rack-position { min-height: 42px; }
    .cold-storage-device-slot { min-height: 42px; }

    .assistant-character-trigger {
        touch-action: none;
        overscroll-behavior: none;
    }
    .assistant-character-trigger img {
        inset: -1% -26% auto auto;
    }
    .assistant-drawer {
        inset: 0;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .assistant-drawer-head {
        min-height: calc(70px + var(--mobile-safe-top));
        padding: calc(10px + var(--mobile-safe-top)) max(12px, var(--mobile-safe-right)) 10px max(12px, var(--mobile-safe-left));
    }
    .assistant-messages {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .assistant-compose {
        padding-right: max(12px, var(--mobile-safe-right));
        padding-bottom: max(10px, var(--mobile-safe-bottom));
        padding-left: max(12px, var(--mobile-safe-left));
    }
    .assistant-compose textarea { font-size: 16px !important; }
}

@media (max-width: 1200px) and (max-height: 700px) and (orientation: landscape) {
    .assistant-drawer-head {
        min-height: calc(58px + var(--mobile-safe-top));
    }
}