/* Shared responsive shell. Keep this after the theme styles so new desktop
   features cannot accidentally turn the phone drawer back into a page column. */
/* The desktop nav lives inside the "More" <details> so a phone can collapse it.
   `display: contents` used to flatten it back into the topbar row, but Chrome
   now lays details content out in its own block box (::details-content), which
   left the nav buttons stacked above and below the bar. Both the details and
   its panel are plain flex rows instead, and the pseudo-element is dissolved
   where the engine supports it. */
.topbar-more,
.topbar-more-panel {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.topbar-more::details-content { display: contents; }
.topbar-more > summary,
.mobile-nav-head { display: none; }
.topbar-more > summary { list-style: none; }
.topbar-more > summary::-webkit-details-marker { display: none; }
.topbar-actions { min-width: 0; }

@media (max-width: 920px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-size: 14px; }
    .dashboard-root { min-height: 100dvh; }
    .dashboard-root .app-sidebar {
        background: var(--bg);
        position: fixed;
        inset: 0 auto 0 0;
        width: min(336px, calc(100vw - 32px));
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        padding: 0 12px max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: none;
    }
    .mobile-nav-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 64px;
        padding-top: env(safe-area-inset-top);
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
        font-size: 14px;
        font-weight: 700;
    }
    .mobile-nav-head .icon-btn { min-width: 44px; min-height: 44px; }
    .app-sidebar .nav-link { min-height: 44px; padding: 10px 12px; font-size: 14px; }
    .app-sidebar .nav-group-toggle { min-height: 44px; }
    .app-sidebar .nav-server-name { font-size: 14px; }
    .app-sidebar .nav-server-id { max-width: 100%; }
    .app-sidebar .nav-menu { overflow: visible; max-height: none; }
    .app-sidebar .nav-menu::after { display: none; }
    .app-main {
        --main-pad: 16px;
        padding: 20px max(var(--main-pad), env(safe-area-inset-right)) max(96px, env(safe-area-inset-bottom)) max(var(--main-pad), env(safe-area-inset-left));
        min-height: calc(100dvh - 64px);
    }
    .app-main :is(.grid, .flex) > * { min-width: 0; }
    /* Reset desktop column spans as well as the column count. Otherwise CSS
       creates invisible implicit columns and a form still leaks off-screen. */
    .app-main .grid > [class*="col-span-"] { grid-column: auto; }
    .app-main :is(h1, h2, h3, p, label, .label, .module-copy, .badge) { overflow-wrap: anywhere; }
    .app-main h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.025em; }
    .app-main :is(.field, .select, input[type="search"], .channel-combo-search),
    .modal-backdrop :is(input, textarea, select),
    .nxpal :is(input, textarea),
    .nxchat :is(input, textarea) { font-size: 16px; }
    :is(.app-main, .modal-backdrop) :is(.field, .select) { min-height: 44px; min-width: 0; max-width: 100%; }
    :is(.app-main, .modal-backdrop) :is(.btn, .icon-btn) { min-height: 44px; white-space: normal; }
    :is(.app-main, .modal-backdrop) .icon-btn { min-width: 44px; }
    .app-main :is(.channel-combo-toggle, .channel-combo-option, .server-chip, .firstrun-go) { min-height: 44px; }
    .channel-combobox { min-width: 0; }
    .channel-combo-menu { max-width: 100%; }
    .app-main > .mb-8 > .flex { flex-wrap: wrap; }
    .app-main > .mb-8 > .flex > .btn { flex: 1 1 auto; }
    .app-main :is(.panel, .panel-strong)[class*="p-"] { padding: 16px; }
    .app-main .table-wrap { max-width: 100%; }
    .table-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .table-wrap .data-table { font-size: 14px; }
    .server-search-box { flex-wrap: wrap; }
    .server-search-box .field { flex: 1 1 150px; width: auto; }
    .server-search-box .badge { margin-inline-start: auto; }
    .server-state-chips { gap: 6px; flex-wrap: wrap; }
    .server-card > .flex:first-child { flex-wrap: wrap; }
    .server-card > .flex:first-child > .min-w-0 { flex: 1 1 180px; }
    .server-card :is(img, .h-14) { flex-shrink: 0; }
    .module-actions > .flex { width: 100%; }
    .module-card { padding: 16px; gap: 12px; }
    .module-desc { font-size: 14px; }
    .modal-backdrop,
    .nx-modal-backdrop,
    .nx-tplm-overlay {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        overflow-y: auto;
    }
    .modal-backdrop > :is(form, div),
    .nx-modal,
    .nx-tplm-panel {
        width: 100%;
        min-width: 0;
        max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 12px;
    }
    .modal-backdrop .grid { grid-template-columns: minmax(0, 1fr); }
    .modal-backdrop .grid > [class*="col-span-"] { grid-column: auto; }
    #toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
    .nxchat { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
    .nxchat-panel { max-width: calc(100vw - 32px); max-height: calc(var(--mobile-viewport-height, 100dvh) - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .nxchat-close, .nxchat-mute { min-width: 44px; min-height: 44px; }

}

@media (max-width: 560px) {
    .has-guild .topbar .brand-link { display: none; }
    .topbar, .topbar.topbar-floating { gap: 4px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
    .topbar .guild-switcher-btn { gap: 6px; }
    .topbar .guild-switcher-btn > svg { flex-shrink: 0; }
    .topbar .guild-switcher-name { font-size: 13px; }
    .app-main { --main-pad: 14px; }
    .app-main :is(.product-filter-grid, .invoice-filter-panel) { grid-template-columns: minmax(0, 1fr); }
    .app-main :is(.product-filter-actions, .invoice-filter-actions) { flex-wrap: wrap; }
    .app-main :is(.product-filter-actions, .invoice-filter-actions) > .btn { flex: 1 1 100%; }
    .module-actions .btn { flex: 1 1 auto; }
    .module-actions .btn-primary { flex-basis: 100%; }
    .modal-backdrop > :is(form, div) { padding: 16px; }

}

@media (min-width: 600px) and (max-width: 920px) {
    .app-main #serverGrid,
    .app-main .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

}

@media (pointer: coarse) {
    :is(.btn, .icon-btn, .nav-link, .server-chip, .channel-combo-option) { touch-action: manipulation; }
    .field, .select { font-size: 16px; }
    .emoji-picker-item { min-height: 44px; }

}

@media (prefers-reduced-motion: reduce) {
    .dashboard-root .app-sidebar,
    .dashboard-root .sidebar-backdrop { transition: none; }

}

@media (max-width: 920px) {
    .app-main .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .overview-stat-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .overview-stat-card .truncate { white-space: normal; font-size: 11px; letter-spacing: .02em; }
    .overview-stat-card:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .overview-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .overview-quick-actions .btn { padding: 10px; justify-content: flex-start; font-size: 13px; }
    .channel-combo-toggle { min-width: 44px; }

}

/* A record reads vertically on a phone. Retain the real table and headers for
   assistive technology; labels are supplied from those headers by mobile-layout. */
@media (max-width: 600px) {
    .table-wrap .mobile-card-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
    .mobile-card-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .mobile-card-table tbody { display: block; width: 100%; }
    .mobile-card-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 12px; border-bottom: 1px solid var(--line); }
    .mobile-card-table tbody tr:last-child { border-bottom: 0; }
    .mobile-card-table tbody td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: start; overflow-wrap: anywhere; }
    .mobile-card-table tbody td:first-child,
    .mobile-card-table tbody td:last-child,
    .mobile-card-table tbody td[colspan] { grid-column: 1 / -1; }
    .mobile-card-table tbody td::before { content: attr(data-mobile-label); display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
    .mobile-card-table tbody td[colspan]::before { display: none; }
    .mobile-card-table tbody td > :is(div, p, a, span) { max-width: 100%; }
    .mobile-card-table tbody td:last-child .flex { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
    .mobile-card-table .badge { white-space: normal; }

}

/* Compact navigation starts before the desktop header runs out of room. */
@media (max-width: 1180px) {
    .topbar,
    .topbar.topbar-floating {
        gap: 8px;
        flex-wrap: nowrap;
        min-height: 64px;
        height: auto;
        padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    }
    .topbar-actions { gap: 4px; flex: 0 0 auto; }
    /* Guild pages run out of room first; the links stay in the account menu. */
    .has-guild .app-switch { display: none; }
    .no-guild .topbar > .topbar-spacer { flex: 1; }
    .topbar-search{ display: none; }
    .topbar .topbar-search-btn { display: inline-flex; }
    .topbar-search-btn span,
    .topbar .user-copy,
    .profile-menu-chevron { display: none; }
    .topbar .brand-link { flex: 0 0 auto; min-width: 0; padding: 0; }
    .topbar .brand-mark { flex: 0 0 auto; }
    .topbar .brand-text { font-size: 16px; }
    .topbar .guild-switcher { flex: 1 1 auto; min-width: 0; }
    .topbar .guild-switcher-btn { width: 100%; max-width: 240px; min-width: 0; }
    .topbar .guild-switcher-name { display: block; min-width: 0; text-align: start; }
    .has-guild .topbar-spacer { display: none; }
    .topbar .nav-hamburger,
    .topbar .icon-btn,
    .topbar .profile-menu-btn,
    .topbar .topbar-search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 10px;
        flex: 0 0 auto;
    }
    .topbar .profile-menu-btn { max-width: none; }
    .topbar .topbar-search-btn { animation: none; opacity: 1; }
    .topbar .guild-switcher-btn { min-height: 44px; padding: 8px; }
    .topbar .topbar-search-btn span { display: none; }
    .app-switch { display: none; }
    .topbar-more { display: block; }
    .topbar-more:not([open]) > .topbar-more-panel { display: none; }
    .topbar-more[open] > summary { background: var(--surface-2); border-color: var(--brand); }
    .topbar-more-panel,
    .topbar .profile-menu-panel,
    .topbar .theme-menu-panel,
    .topbar .guild-switcher-menu {
        position: fixed;
        inset: auto 12px auto auto;
        top: var(--mobile-menu-top, 72px);
        width: min(360px, calc(100vw - 24px));
        min-width: 0;
        max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-menu-top, 72px) - 12px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px;
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: none;
        z-index: 85;
    }
    .topbar-more-panel { display: flex; flex-direction: column; gap: 4px; }
    /* Collapsed, the nav is a list, and the two grouped menus become headed
       blocks rather than dropdowns - mobile-layout.js opens them for this. */
    .topbar-more-panel .topnav { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
    .topbar-more-panel .topnav-link {
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        border-bottom: 0;
        font-size: 15px;
    }
    .topbar-more-panel .topnav-link.is-active { background: var(--hover); }
    .topbar-more-panel .topnav-group { width: 100%; }
    .topbar-more-panel .topnav-group > summary { pointer-events: none; }
    .topbar-more-panel .topnav-caret { display: none; }
    .topbar-more-panel .topnav-menu {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 0 4px;
        border: 0;
        background: none;
        box-shadow: none;
        animation: none;
    }
    .topbar-more-panel .topnav-menu a { min-height: 44px; padding-inline-start: 22px; }
    .topbar-more-panel .topnav-menu-head { display: none; }
    .profile-menu-action,
    .guild-switcher-item,
    .langsw-menu a { min-height: 44px; }

}


.dashboard-root { grid-template-columns: minmax(0, 1fr); }
.app-main #serverGrid .server-card { align-items: stretch; }
.app-main #serverGrid .server-card > * { min-width: 0; max-width: 100%; }
@media (min-width: 921px) and (max-width: 1180px) {
    .dashboard-root { grid-template-rows: 64px 1fr; }
    .app-sidebar, .app-rightbar { top: 64px; height: calc(100dvh - 64px); }
    .topbar .nav-hamburger { display: none; }
    .has-guild .topbar .brand-link { min-width: 0; }

}
@media (max-width: 560px) {
    .has-guild .topbar .brand-link { display: none; }

}
@media (max-width: 920px) {
    .analytics-consent-banner {
        bottom: max(12px, env(safe-area-inset-bottom));
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: none;
        background: var(--bg);
        border-color: var(--line);
        backdrop-filter: none;
    }
    .analytics-consent-banner p { color: var(--text); font-size: 13px; }
    .analytics-consent-banner button { min-height: 44px; }
    .analytics-consent-reject { background: var(--surface-2); color: var(--text); border: 1px solid var(--line) !important; }
    .analytics-consent-accept { background: var(--brand); }

}

@media (max-width: 920px) {
    .modal-backdrop, .nx-modal-backdrop, .nx-tplm-overlay, .nxpal {
        top: var(--mobile-viewport-top, 0px);
        bottom: auto;
        height: var(--mobile-viewport-height, 100dvh);
    }
    .nxpal-panel {
        margin-top: max(12px, env(safe-area-inset-top));
        max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px - env(safe-area-inset-top));
        border-radius: 12px;
    }
    .nxpal-row { min-height: 44px; }

}

body.mobile-drawer-open .nxchat { visibility: hidden; pointer-events: none; }
@media (max-width: 920px) {
    .wz.wz { top: var(--mobile-viewport-top, 0px); bottom: auto; height: var(--mobile-viewport-height, 100dvh); }
    .wz .wz-card { max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px); border-radius: 12px; }
    .wz :is(.wz-x, .wz-cta, .wz-back, .wz-skip) { min-height: 44px; }
    .wz .wz-x { min-width: 44px; }
    .wz :is(input, select, textarea) { font-size: 16px; }

}

@media (max-width: 920px) {
    /* WebKit can retain inherited hidden visibility in sticky drawer children
       after the parent opens. Set it on the drawer sections explicitly. */
    .dashboard-root.sidebar-open .app-sidebar * { visibility: visible; }

}

/* The emoji picker is taller than a phone in landscape once coarse-pointer tap
   targets and a wrapped tab row are added, so it is capped to the visual
   viewport (which also shrinks when the on-screen keyboard opens) and the grid
   takes the scrolling instead of the page. */
@media (max-width: 920px), (pointer: coarse) {
    .emoji-picker {
        display: flex;
        flex-direction: column;
        max-height: calc(var(--mobile-viewport-height, 100vh) - 24px);
    }
    .emoji-picker-grid {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

}

@media (max-width: 920px) {
    /* The chat launcher is fixed over the bottom-right corner, so the page ends
       above it instead of under it. */
    .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    /* Tabs wrap onto a second row on a phone; without a cap the last row's tabs
       stretch to fill the width and stop lining up with the row above. */
    .emoji-picker-tab { flex: 0 0 auto; width: 2.25rem; }

}