/* ======================================
   Dashboard
   ====================================== */

.dashboard * {
    box-sizing: border-box;
}

:root {
    --select-hue: 213.05;
    --select-saturation: 74.22%;
    --select-lightness: 55.88%;
    --select-color: hsl(var(--select-hue), var(--select-saturation), var(--select-lightness));
    /* Selection surfaces: a quiet accent wash + hairline ring instead of a
       solid accent fill, so icons and labels keep their natural colors. */
    --select-tint-weak: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.05);
    --select-tint: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.1);
    --select-tint-strong: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.2);
    --select-ring: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.4);

    --dashboard-text: #444;
    --dashboard-border: #e0e0e0;
    --dashboard-background: #ffffff;
    --dashboard-hover: #e8e8e8;
    --dashboard-icon: #999;
    --dashboard-sidebar-background: #f5f5f5;

    --dashboard-text-primary: #1e293b;
    --dashboard-text-secondary: #666;
    --dashboard-text-tertiary: #888;
    --dashboard-text-heading: #333;
    --dashboard-text-card-title: #1a1a1a;
    --dashboard-text-username: #414b62;
    --dashboard-text-hint: #64748b;
    --dashboard-text-muted: #94a3b8;

    --dashboard-card-background: #ffffff;
    --dashboard-content-background: #fcfcfd;
    --dashboard-card-gradient-start: #f8fafc;
    --dashboard-card-gradient-end: #e2e8f0;
    --dashboard-avatar-background: #ddd;
    --dashboard-input-background: rgb(245, 247, 249);

    --dashboard-link: #5271ff;
    --dashboard-link-hover: #3d5bd9;

    --dashboard-warning-icon: #ffbb00;
    --dashboard-warning-background: #fef3c7;
    --dashboard-warning-border: #f59e0b;
    --dashboard-warning-text: #92400e;
    --dashboard-warning-hover-bg: #fde68a;
    --dashboard-warning-hover-border: #d97706;
    --dashboard-warning-hover-text: #78350f;

    /* Advisory notices (trial ending, renewal scheduled). Deliberately not the
       warning ramp — nothing is wrong, so amber overstates it. */
    --dashboard-notice-background: #eff6ff;
    --dashboard-notice-border: #bfdbfe;
    --dashboard-notice-text: #1d4ed8;

    --dashboard-success-background: #e6ffed;
    --dashboard-success-border: #08bf4e;
    --dashboard-success-text: #03933a;

    --dashboard-danger-text: #dc2626;
    --dashboard-danger-background: #fef2f2;
    --dashboard-danger-border: #fecaca;
    --dashboard-error-text: #dc2626;

    --dashboard-icon-blue-start: #3b82f6;
    --dashboard-icon-blue-end: #2563eb;
    --dashboard-icon-blue-shadow: rgba(59, 130, 246, 0.3);
    --dashboard-icon-green-start: #10b981;
    --dashboard-icon-green-end: #059669;
    --dashboard-icon-green-shadow: rgba(16, 185, 129, 0.3);

    /* TabHome bento: solid surfaces aligned with header icon accents (no gradients) */
    --dashboard-bento-welcome-avatar-border: #e8e4df;
    --dashboard-bento-welcome-avatar-shadow: rgba(41, 37, 36, 0.1);
    --dashboard-bento-apps-icon-bg: #2563eb;
    --dashboard-bento-apps-icon-shadow: rgba(37, 99, 235, 0.22);
    --dashboard-bento-apps-surface: #eff6ff;
    --dashboard-bento-apps-header-bg: #dbeafe;
    /* Indigo (cool blue-violet; avoids lavender/violet-50 that reads pink on screen) */
    --dashboard-bento-usage-icon-bg: #4f46e5;
    --dashboard-bento-usage-icon-shadow: rgba(79, 70, 229, 0.22);
    --dashboard-bento-usage-surface: #eef2ff;
    --dashboard-bento-usage-header-bg: #e0e7ff;
    --dashboard-bento-usage-bar-fill: #ea580c;
    /* Emerald (matches the green icon accent used elsewhere) */
    --dashboard-bento-desktop-icon-bg: #059669;
    --dashboard-bento-desktop-icon-shadow: rgba(5, 150, 105, 0.22);
    --dashboard-bento-desktop-surface: #ecfdf5;
    --dashboard-bento-desktop-header-bg: #d1fae5;

    --dashboard-shadow-subtle: rgba(0, 0, 0, 0.04);
    --dashboard-shadow-light: rgba(0, 0, 0, 0.06);
    --dashboard-shadow-medium: rgba(0, 0, 0, 0.1);
    --dashboard-shadow-overlay: rgba(0, 0, 0, 0.5);
    --dashboard-scrim: rgba(15, 18, 24, 0.42);
    --dashboard-drawer-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 24px 0 64px rgba(0, 0, 0, 0.24);

    --dashboard-gradient-indigo: rgba(99, 102, 241, 0.08);
    --dashboard-gradient-purple: rgba(168, 85, 247, 0.06);
    --dashboard-gradient-pink: rgba(236, 72, 153, 0.04);
    --dashboard-gradient-green: rgba(34, 197, 94, 0.05);
    --dashboard-gradient-blue: rgba(59, 130, 246, 0.05);

    --dashboard-usage-bar-background: #e5e7eb;
    --dashboard-usage-bar-start: #f59e0b;
    --dashboard-usage-bar-end: #f97316;

    --dashboard-legacy-bar-start: #dbe3ef;
    --dashboard-legacy-bar-mid: #c2ccdc;

    /* App folders (My Apps): the icon's container, the well that opens under a
       drag about to make one, and the scrim + card of an opened folder. All
       translucent, so they read as a layer over the grid rather than a slab. */
    --dashboard-folder-surface: rgba(118, 130, 152, 0.16);
    --dashboard-folder-border: rgba(15, 23, 42, 0.07);
    --dashboard-folder-well: rgba(118, 130, 152, 0.32);
    --dashboard-folder-scrim: rgba(244, 246, 250, 0.55);
    --dashboard-folder-panel: rgba(255, 255, 255, 0.78);
}

body {
    min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: var(--dashboard-border);
        --primary-color-icon: invert(1);
        --primary-color-sidebar-item: #e8e8e8;

        /* Alpha tints need a little more presence over dark surfaces */
        --select-tint-weak: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.08);
        --select-tint: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.16);
        --select-tint-strong: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.28);
        --select-ring: hsla(var(--select-hue), var(--select-saturation), var(--select-lightness), 0.5);

        --dashboard-text: #d4d4d4;
        --dashboard-border: #3d3d3d;
        --dashboard-background: #1e1e1e;
        --dashboard-hover: #2a2a2a;
        --dashboard-icon: #888;
        --dashboard-sidebar-background: #252525;

        --dashboard-text-primary: #e2e8f0;
        --dashboard-text-secondary: #a1a1aa;
        --dashboard-text-tertiary: #71717a;
        --dashboard-text-heading: #f4f4f5;
        --dashboard-text-card-title: #fafafa;
        --dashboard-text-username: #c4cad6;
        --dashboard-text-hint: #94a3b8;
        --dashboard-text-muted: #64748b;

        --dashboard-card-background: #262626;
        --dashboard-content-background: #1e1e1e;
        --dashboard-card-gradient-start: #2a2a2a;
        --dashboard-card-gradient-end: #1f1f1f;
        --dashboard-avatar-background: #3f3f3f;
        --dashboard-input-background: #2d2d2d;

        --dashboard-link: #6b8cff;
        --dashboard-link-hover: #8aa4ff;

        --dashboard-warning-icon: #fbbf24;
        --dashboard-warning-background: #422006;
        --dashboard-warning-border: #b45309;
        --dashboard-warning-text: #fcd34d;
        --dashboard-warning-hover-bg: #4a2608;
        --dashboard-warning-hover-border: #d97706;
        --dashboard-warning-hover-text: #fde68a;

        /* Muted slate-blue rather than the amber ramp, which glares on a dark
           surface. Low-chroma fill, visible-but-quiet border, legible text. */
        --dashboard-notice-background: #17202f;
        --dashboard-notice-border: #2f4058;
        --dashboard-notice-text: #a8c4e8;

        --dashboard-success-background: #052e16;
        --dashboard-success-border: #16a34a;
        --dashboard-success-text: #4ade80;

        --dashboard-danger-text: #f87171;
        --dashboard-danger-background: #2a1515;
        --dashboard-danger-border: #7f1d1d;
        --dashboard-error-text: #f87171;

        --dashboard-icon-blue-start: #60a5fa;
        --dashboard-icon-blue-end: #3b82f6;
        --dashboard-icon-blue-shadow: rgba(96, 165, 250, 0.25);
        --dashboard-icon-green-start: #34d399;
        --dashboard-icon-green-end: #10b981;
        --dashboard-icon-green-shadow: rgba(52, 211, 153, 0.25);

        --dashboard-bento-welcome-avatar-border: #44403c;
        --dashboard-bento-welcome-avatar-shadow: rgba(0, 0, 0, 0.35);
        --dashboard-bento-apps-icon-bg: #3b82f6;
        --dashboard-bento-apps-icon-shadow: rgba(59, 130, 246, 0.28);
        --dashboard-bento-apps-surface: #1a2332;
        --dashboard-bento-apps-header-bg: #1e2d42;
        --dashboard-bento-usage-icon-bg: #6366f1;
        --dashboard-bento-usage-icon-shadow: rgba(99, 102, 241, 0.32);
        --dashboard-bento-usage-surface: #1c1d2e;
        --dashboard-bento-usage-header-bg: #252a42;
        --dashboard-bento-usage-bar-fill: #fb923c;
        --dashboard-bento-desktop-icon-bg: #10b981;
        --dashboard-bento-desktop-icon-shadow: rgba(16, 185, 129, 0.32);
        --dashboard-bento-desktop-surface: #16241f;
        --dashboard-bento-desktop-header-bg: #172e26;

        --dashboard-shadow-subtle: rgba(0, 0, 0, 0.2);
        --dashboard-shadow-light: rgba(0, 0, 0, 0.3);
        --dashboard-shadow-medium: rgba(0, 0, 0, 0.4);
        --dashboard-shadow-overlay: rgba(0, 0, 0, 0.7);
        --dashboard-scrim: rgba(0, 0, 0, 0.6);
        --dashboard-drawer-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 24px 0 64px rgba(0, 0, 0, 0.55);

        --dashboard-gradient-indigo: rgba(99, 102, 241, 0.15);
        --dashboard-gradient-purple: rgba(168, 85, 247, 0.12);
        --dashboard-gradient-pink: rgba(236, 72, 153, 0.08);
        --dashboard-gradient-green: rgba(34, 197, 94, 0.1);
        --dashboard-gradient-blue: rgba(59, 130, 246, 0.1);

        --dashboard-usage-bar-background: #3f3f46;
        --dashboard-usage-bar-start: #fbbf24;
        --dashboard-usage-bar-end: #fb923c;

        --dashboard-legacy-bar-start: #3f3f46;
        --dashboard-legacy-bar-mid: #52525b;

        --dashboard-folder-surface: rgba(255, 255, 255, 0.13);
        --dashboard-folder-border: rgba(255, 255, 255, 0.09);
        --dashboard-folder-well: rgba(255, 255, 255, 0.24);
        --dashboard-folder-scrim: rgba(9, 9, 11, 0.55);
        --dashboard-folder-panel: rgba(46, 46, 50, 0.82);
    }
}

.dashboard {
    display: flex;
    height: 100%;
    background: var(--dashboard-background);
}

.dashboard-sidebar {
    width: 250px;
    min-width: 200px;
    background: var(--dashboard-sidebar-background);
    border-right: 1px solid var(--dashboard-border);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease;
}

/* Sidebar header with logo and collapse toggle */
.dashboard-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 10px 5px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--dashboard-border);
    margin-bottom: 10px;
}

.dashboard-sidebar-logo {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: var(--dashboard-text);
}

.dashboard-sidebar-logo img {
    height: 24px;
    width: auto;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.dashboard-sidebar-logo .dashboard-sidebar-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .dashboard-sidebar-logo .dashboard-sidebar-logo-light {
        display: none;
    }
    .dashboard-sidebar-logo .dashboard-sidebar-logo-dark {
        display: inline;
    }
}

.dashboard-sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dashboard-text-muted);
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.dashboard-sidebar-collapse-toggle img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
    .dashboard-sidebar-collapse-toggle img {
        filter: invert(1);
    }
}

.dashboard-sidebar-collapse-toggle .sidebar-toggle-open {
    display: none;
}

.dashboard-sidebar-collapse-toggle:hover {
    background: var(--dashboard-hover);
    color: var(--dashboard-text);
}

/* Collapsed sidebar state */
.dashboard-sidebar.collapsed {
    width: 50px;
    min-width: 50px;
    padding: 16px 6px;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-header {
    justify-content: center;
    padding: 4px 0 12px;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-logo {
    display: none;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-collapse-toggle .sidebar-toggle-close {
    display: none;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-collapse-toggle .sidebar-toggle-open {
    display: block;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
    overflow: hidden;
    font-size: 0;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-item svg {
    flex-shrink: 0;
}

.dashboard-sidebar.collapsed .dashboard-sidebar-separator {
    margin: 8px 4px;
}

.dashboard-sidebar.collapsed .dashboard-user-options {
    padding-top: 8px;
}

.dashboard-sidebar.collapsed .dashboard-user-btn {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

.dashboard-sidebar.collapsed .dashboard-user-name,
.dashboard-sidebar.collapsed .dashboard-user-chevron {
    display: none;
}

/* Tooltip for collapsed sidebar */
.dashboard-sidebar-tooltip {
    position: fixed;
    padding: 4px 10px;
    background: var(--dashboard-sidebar-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--dashboard-text);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dashboard-sidebar-tooltip.visible {
    opacity: 1;
}

/* Mobile drawer close button — hidden on desktop, where the collapse toggle
   occupies the same header slot */
.dashboard-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--dashboard-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s, color 0.15s;
}

.dashboard-sidebar-close svg {
    width: 20px;
    height: 20px;
}

.dashboard-sidebar-close:active {
    background: var(--dashboard-hover);
    color: var(--dashboard-text);
}

/* Hide desktop collapse toggle on mobile; show the drawer close button */
@media (max-width: 768px) {
    .dashboard-sidebar-collapse-toggle {
        display: none;
    }

    .dashboard-sidebar-close {
        display: inline-flex;
    }
}

.dashboard-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-sidebar-separator {
    border: none;
    border-top: 1px solid var(--dashboard-border);
    margin: 8px 16px;
    flex-shrink: 0;
}

.dashboard-sidebar-item {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dashboard-text);
    text-decoration: none;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.dashboard-sidebar-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (hover: hover) {
    .dashboard-sidebar-item:hover {
        background: var(--dashboard-hover);
    }
}

.dashboard-sidebar-item.active {
    background: var(--dashboard-border);
    font-weight: 500;
}

/* Keyboard focus on the sidebar's controls: swap the UA's default blue
   ring for the dashboard's own selection ring, hugging the control's
   rounded corners from the inside. :focus-visible only, so a mouse click
   (which also focuses these) never paints it. */
.dashboard-sidebar-item:focus-visible,
.dashboard-user-btn:focus-visible,
.dashboard-sidebar-toggle:focus-visible,
.dashboard-sidebar-collapse-toggle:focus-visible,
.dashboard-sidebar-close:focus-visible {
    outline: 2px solid var(--select-ring);
    outline-offset: -2px;
}

/* User options button at bottom of sidebar */
.dashboard-user-options {
    border-top: 1px solid var(--dashboard-border);
    padding-top: 12px;
    margin-top: 8px;
}

.dashboard-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
    overflow: hidden !important;
}

@media (hover: hover) {
    .dashboard-user-btn:hover {
        background: var(--dashboard-hover);
    }
}

.dashboard-user-btn.has-open-contextmenu {
    background: var(--dashboard-hover);
    overflow: hidden !important;
}

.dashboard-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--dashboard-avatar-background);
    flex-shrink: 0;
}

.dashboard-user-name {
    flex: 1;
    font-size: 14px;
    color: var(--dashboard-text-heading);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-user-chevron {
    width: 16px;
    height: 16px;
    color: var(--dashboard-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.1s ease;
}

.dashboard-user-chevron.open {
    transform: rotate(180deg);
}

.dashboard-content {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--dashboard-content-background);
}

.dashboard-section {
    display: none;
}

.dashboard-section.active {
    display: block;
}

.dashboard-section h2 {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--dashboard-text-heading);
}

.dashboard-section p {
    font-size: 14px;
}

.dashboard-section-usage {
    max-width: 600px;
    margin: 0 auto;
}

.dashboard #storage-used-percent {
  
}

@media (prefers-color-scheme: dark) {
    .usage-table-fade-overlay {
        background: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0.85) 40%, rgba(30, 30, 30, 1) 100%);
    }

    .dashboard-section-billing .billing-card {
        background: var(--dashboard-card-background);
    }

    .dashboard-section-billing .billing-card h1 {
        color: var(--dashboard-text);
    }

    .dashboard-section-billing .billing-card p {
        color: var(--dashboard-text-secondary);
    }

    .dashboard-section-billing .billing-empty, .dashboard-section-billing .billing-error, .dashboard-section-billing .billing-loading {
        color: var(--dashboard-text-muted);
    }
}

/* Dashboard Apps */

.dashboard-content.apps {
    padding: 0;
}

.dashboard-section-apps {
    margin: 0 auto;
}


.dashboard-apps-container {
    margin-top: 8px;
}

.dashboard-apps-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.dashboard-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}

.dashboard-app-card {
    width: 100%;
    transition: background-color 0.15s, transform 0.1s;
    transition: transform 0.15s ease;
}

.dashboard-app-card .start-app {
    cursor: pointer;
    width: 90px;
}
@media (hover: hover) {
    .dashboard-app-card:hover {
        background: none !important;
    }
}

@media (hover: hover) {
    .dashboard-app-card:hover .start-app, .dashboard-app-card .start-app:hover {
        background: none !important;
    }
}

.dashboard-app-card:active {
    transform: scale(0.97);
}

.dashboard-app-card .start-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-app-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    filter: drop-shadow(0px 1px 2px var(--dashboard-shadow-medium));
}

.dashboard-app-card .start-app{
    transition: transform 0.15s ease;
}
@media (hover: hover) {
    .dashboard-app-card .start-app:hover {
        transform: scale(1.05);
    }
}

.dashboard-app-title {
    font-size: 13px;
    color: var(--dashboard-text-heading);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dashboard-no-apps {
    color: var(--dashboard-text-tertiary);
    font-size: 14px;
    padding: 24px 0;
}

/* My Apps tab */

/* The Apps tab fills the content area and paginates horizontally
   (iOS-home-screen style) instead of scrolling vertically. */
.dashboard-section-apps {
    height: 100%;
}

.dashboard-tab-content.myapps-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Tile geometry, declared on the tab so BOTH the pager (which reads these
       via getComputedStyle in computeLayout, inheritance included) and the
       folder panel — a fixed overlay outside the container — lay tiles out to
       the same measurements. */
    --myapps-tile-w: 100px;
    /* icon 56 + label margin 10 + one 12px/1.3 label line (~16) */
    --myapps-tile-h: 82px;
    --myapps-gap-x: 32px;
    --myapps-gap-y: 32px;
    --myapps-dots-h: 28px;
    --myapps-icon-size: 56px;
}

.myapps-search-wrap {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.myapps-search-inner {
    position: relative;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.myapps-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--dashboard-text-tertiary);
    pointer-events: none;
}

.myapps-icon-clear {
    pointer-events: auto;
    cursor: pointer;
}

@media (hover: hover) {
    .myapps-icon-clear:hover {
        color: var(--dashboard-text-primary);
    }
}

input.myapps-search {
    /* type="search" pulls in native search-field chrome (inset bevel on
       webkit) and skips the global input[type=text] styling; strip the native
       chrome and set padding/box-sizing here so the box looks the same as it
       did as a text input. */
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    padding-right: 33px !important;
    font-size: 13px;
    border: 1px solid var(--dashboard-border);
    border-radius: 6px;
    background: var(--dashboard-input-background);
    color: var(--dashboard-text-primary);
    outline: none;
    transition: border-color 0.15s;
}

input.myapps-search:focus {
    border-color: var(--select-color);
}

input.myapps-search::placeholder {
    color: var(--dashboard-text-muted);
}

/* Hide the native search clear button — a custom .myapps-icon-clear is used. */
input.myapps-search::-webkit-search-cancel-button,
input.myapps-search::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Frozen while reorder mode is on (see TabApps._setReorderMode). */
input.myapps-search:disabled {
    opacity: 0.55;
}

/* Toggle for the touch reorder mode. Hidden by default: it only appears on
   touch-primary devices (media query below — same test as
   isTouchPrimaryDevice()) and only once there are 2+ tiles to reorder
   (.myapps-reorder-btn-available, kept in sync by renderApps). */
.myapps-reorder-btn {
    display: none;
    flex: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--dashboard-border);
    border-radius: 6px;
    background: var(--dashboard-input-background);
    color: var(--dashboard-text-primary);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
}

.myapps-reorder-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.myapps-reorder-btn.myapps-reorder-btn-active {
    background: var(--select-color);
    border-color: var(--select-color);
    color: white;
}

@media (pointer: coarse) and (hover: none) {
    .myapps-tab .myapps-reorder-btn.myapps-reorder-btn-available {
        display: inline-flex;
        align-items: center;
    }

    /* Sit the button beside the search box. With the button hidden (or on
       devices where it never shows) the lone flex child centers at the same
       360px max width the block layout gave it. */
    .myapps-tab .myapps-search-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .myapps-tab .myapps-search-inner {
        flex: 1 1 auto;
        max-width: 360px;
        margin-left: 0;
        margin-right: 0;
    }
}

.myapps-container {
    /* Pager geometry is inherited from .myapps-tab; TabApps.js reads it here
       (computeLayout) to size pages. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.myapps-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: var(--dashboard-text-tertiary);
}

.myapps-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.myapps-empty p {
    font-size: 15px;
    margin: 0;
}

/* The search's "nothing matched" line, which stands above a grid rather than
   in place of one (the add-an-app tile is still down there): it takes only the
   height it needs, and leaves the rest of the column to the pager. */
.myapps-empty-notice {
    flex: 0 0 auto;
    padding: 20px 0 18px;
}

/* iOS-style pager: pages snap horizontally, dots below, hover arrows */

.myapps-pager {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.myapps-pager-loading {
    opacity: 0;
}

.myapps-pager-scroller {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* overflow-x above forces vertical clipping too, which would shave the
       top of first-row icons when they scale up on hover; bleed the clip
       edge upward so the scaled icons stay visible. */
    margin-top: -8px;
    padding-top: 8px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}

.myapps-pager-scroller::-webkit-scrollbar {
    display: none;
}

.myapps-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(var(--myapps-cols, 1), var(--myapps-tile-w));
    grid-auto-rows: var(--myapps-tile-h);
    column-gap: var(--myapps-gap-x);
    row-gap: var(--myapps-gap-y);
    justify-content: center;
    align-content: start;
}

.myapps-pager-dots {
    flex: none;
    height: var(--myapps-dots-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.myapps-pager-dots-hidden {
    visibility: hidden;
}

/* .myapps-group-dot is the folder pager's dot (see .myapps-group-dots) —
   same look, its own class so the two pagers' click handlers can't cross. */
.myapps-pager-dot,
.myapps-group-dot {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 17px;
    height: 17px;
    padding: 5px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--dashboard-text-primary);
    background-clip: content-box;
    opacity: 0.22;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.myapps-pager-dot.active,
.myapps-group-dot.active {
    opacity: 0.85;
}

@media (hover: hover) {
    .myapps-pager-dot:not(.active):hover,
    .myapps-group-dot:not(.active):hover {
        opacity: 0.5;
    }
}

.myapps-pager-dot:focus-visible,
.myapps-group-dot:focus-visible {
    outline: 2px solid var(--select-color);
    outline-offset: -1px;
}

.myapps-pager-arrow {
    position: absolute;
    top: calc(50% - var(--myapps-dots-h) / 2);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dashboard-border);
    border-radius: 50%;
    background: var(--dashboard-card-background);
    color: var(--dashboard-text-secondary);
    box-shadow: 0 2px 8px var(--dashboard-shadow-light);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease;
    z-index: 2;
}

.myapps-pager-arrow svg {
    width: 16px;
    height: 16px;
}

.myapps-pager-arrow-prev {
    left: 0;
}

.myapps-pager-arrow-next {
    right: 0;
}

/* Arrows are a hover-only affordance for mouse users; touch swipes instead. */
@media (hover: hover) and (pointer: fine) {
    .myapps-pager:hover .myapps-pager-arrow:not(.myapps-pager-arrow-hidden),
    .myapps-pager-arrow:focus-visible:not(.myapps-pager-arrow-hidden) {
        opacity: 1;
        pointer-events: auto;
    }

    .myapps-pager-arrow:hover {
        background: var(--dashboard-hover);
        color: var(--dashboard-text-primary);
    }
}

.myapps-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100px;
    -webkit-user-select: none;
    user-select: none;
    overflow: visible !important;
}

.myapps-tile-icon {
    /* flex: none — the tile's row height only budgets one label line; without
       this, an overflowing label makes flexbox shrink the icon box, deforming
       the icon into a landscape crop. */
    flex: none;
    /* Positioning context for the reorder-mode uninstall badge. */
    position: relative;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myapps-tile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0px 0px .3px rgb(173, 173, 173));
}

.myapps-tile.has-open-contextmenu{
    overflow: visible !important;
}

.myapps-tile:hover{
    overflow: visible !important;
}

@media (hover: hover) {
    .myapps-tile:hover .myapps-tile-icon, .myapps-tile.has-open-contextmenu .myapps-tile-icon{
        transform: scale(1.08);
    }
}

/* No :active press-shrink on tiles: clicking launches the app, whose open
   morph grows the icon — a shrink-then-grow stutter reads as jank. */

/* Keyboard navigation: keyboard focus mirrors the mouse hover enlargement.
   :focus-visible only, so a mouse click doesn't pin the effect after the
   pointer moves away. */
.myapps-tile:focus {
    outline: none;
}

.myapps-tile:focus-visible .myapps-tile-icon {
    transform: scale(1.08);
}

/* Uninstall: the tile shrinks away in place, then the surviving tiles
   FLIP-slide into the closed-up grid (see showUninstallModal). Duration is
   mirrored by TILE_REMOVE_ANIM_MS in TabApps.js. */
.myapps-tile.myapps-tile-removing {
    transition: transform 0.18s ease-in, opacity 0.18s ease-in;
    transform: scale(0.5);
    opacity: 0;
    pointer-events: none;
}

.myapps-tile-label {
    /* 10px, not 6: the gap between icon and label hosts the running dot,
       which needs clearance from the icon's 1.08x hover growth above it
       and from the label text below it. */
    margin-top: 10px;
    font-size: 12px;
    color: var(--dashboard-text-heading);
    text-align: center;
    line-height: 1.3;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Single line only: the 82px tile height (--myapps-tile-h) budgets icon +
       margin + exactly one label line. A second line overflows the grid row
       and gets clipped. Full names remain available via the tile tooltip. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* -- Add-an-app tile --
   The tile at the tail of the grid (see buildAddTileHtml): a dashed, empty
   app-shaped slot with a plus in it, so it reads as room for an app rather
   than as an installed one. The border takes currentColor so a single
   (theme-aware) color drives both it and the plus. */
.myapps-add-icon {
    border: 2px dashed;
    border-radius: 14px;
    color: var(--dashboard-text-tertiary);
}

.myapps-add-icon svg {
    width: 24px;
    height: 24px;
}

.myapps-add-tile .myapps-tile-label {
    color: var(--dashboard-text-secondary);
}

@media (hover: hover) {
    .myapps-add-tile:hover .myapps-add-icon {
        color: var(--select-color);
    }
}

.myapps-add-tile:focus-visible .myapps-add-icon {
    color: var(--select-color);
}

/* -- App folders --
   A folder wears the same tile skeleton as an app, with its icon slot filled
   by iOS's miniature 3x3 grid of what is inside. */

.myapps-group-icon {
    /* Overrides .myapps-tile-icon's centring flexbox: the mini-grid fills the
       slot rather than sitting in the middle of it. */
    display: block;
    /* Stated rather than left to `.dashboard *`: the drag ghost and the launch
       / minimize morph ghosts are CLONES of this box parked on <body>, outside
       that rule, where the padding below would be added to the 56px slot and
       land a 66px ghost over the 56px icon it is meant to sit on. */
    box-sizing: border-box;
    padding: 5px;
    border-radius: 14px;
    background: var(--dashboard-folder-surface);
    box-shadow: inset 0 0 0 1px var(--dashboard-folder-border);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.myapps-group-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2.5px;
    width: 100%;
    height: 100%;
}

.myapps-group-icon-grid img {
    /* min-* 0: grid items refuse to shrink past their intrinsic size
       otherwise, and a wide icon would push the mini-grid out of the slot. */
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

/* The well a drag opens under the tile it is hovering: the folder-to-be,
   growing behind the icon. Present (transparent) on every tile so it can
   animate in without a reflow; only a drag ever reveals it. */
.myapps-tile::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: calc(var(--myapps-icon-size, 56px) + 12px);
    height: calc(var(--myapps-icon-size, 56px) + 12px);
    margin-left: calc((var(--myapps-icon-size, 56px) + 12px) / -2);
    border-radius: 16px;
    background: var(--dashboard-folder-well);
    box-shadow: inset 0 0 0 1px var(--dashboard-folder-border);
    opacity: 0;
    transform: scale(0.62);
    pointer-events: none;
}

/* Pending: the well fills over the dwell the drop is waiting out
   (DRAG_MERGE_DWELL_MS in TabApps.js) — for the ordinary gesture (carry the
   icon over, stop) the fill IS the countdown, so leaving before it completes
   is an informed choice rather than a surprise. */
body.myapps-reordering .myapps-tile-merge-pending::before {
    opacity: 0.55;
    transform: scale(0.9);
    transition: opacity 460ms ease-out, transform 460ms ease-out;
}

/* Armed: the drop will make (or join) a folder. Snaps open with a little
   overshoot, and the icon settles into the well. */
body.myapps-reordering .myapps-tile-merge-armed::before {
    opacity: 1;
    transform: scale(1);
    transition: opacity 140ms ease-out, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* animation: none — reorder mode's jiggle is an animated transform and would
   otherwise win over these scales, leaving the target wobbling as if nothing
   were about to happen to it. */
body.myapps-reordering .myapps-tile.myapps-tile-merge-pending .myapps-tile-icon {
    animation: none;
    transform: scale(0.92);
}

body.myapps-reordering .myapps-tile.myapps-tile-merge-armed .myapps-tile-icon {
    animation: none;
    transform: scale(0.78);
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -- Opened folder --
   The grid recedes behind a blurred scrim and the folder grows out of its own
   icon into a card (see _animateGroupPanelOpen). Sits inside the Apps tab, so
   it travels with the dashboard window; below the uninstall modal's z-index. */
.myapps-group-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.myapps-group-backdrop {
    position: absolute;
    inset: 0;
    background: var(--dashboard-folder-scrim);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.myapps-group-open .myapps-group-backdrop {
    opacity: 1;
}

.myapps-group-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 22px 26px 26px;
    border-radius: 28px;
    background: var(--dashboard-folder-panel);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
    box-shadow:
        inset 0 0 0 1px var(--dashboard-folder-border),
        0 24px 64px var(--dashboard-shadow-medium);
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
    /* Mirrors GROUP_PANEL_OPEN_MS / GROUP_PANEL_CLOSE_MS in TabApps.js; the
       curve is the window morph's, so a folder opening and an app opening
       feel like the same gesture at two scales. */
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    will-change: transform;
}

.myapps-group-open .myapps-group-panel {
    opacity: 1;
    transform: none;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

/* The card's tabindex=-1 exists to catch clicks on its empty space (keeping
   focus inside the modal folder, where the Tab trap can see it) — a ring
   around the whole card would misread that plumbing as selection. */
.myapps-group-panel:focus {
    outline: none;
}

/* Carrying an app past the card's edge takes it out of the folder: the card
   shrinks back as if making way (see _updateEjectState). */
.myapps-group-ejecting .myapps-group-panel {
    transform: scale(0.95);
    opacity: 0.75;
}

input.myapps-group-name {
    /* style.css's input[type=text] rules match this box at the SAME
       specificity, so only what is spelled out here wins. width, padding and
       border have to be stated (twice — the focus rule below faces
       input[type=text]:focus, which sets padding 7px / border 2px): left
       unstated, the name field stretches across the whole card and its box
       grows 8px taller the moment it is clicked, shoving the folder's grid
       down. Same trap .myapps-search documents. */
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    /* Hug the name (iOS sizes the field to its text): a short name in the
       default ~20ch box floats in a hover pill far wider than the word, and
       a long one clips while the card has room. Engines without field-sizing
       keep that default box — same behavior as before, just less tailored. */
    field-sizing: content;
    min-width: 90px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--dashboard-text-heading);
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    input.myapps-group-name:hover {
        background: var(--dashboard-folder-surface);
    }
}

input.myapps-group-name:focus {
    padding: 4px 10px;
    border-width: 1px;
    border-color: var(--select-color);
    background: var(--dashboard-card-background);
}

/* The card's pager: a folder big enough to need it paginates like the grid
   outside (see _refreshGroupPanel) rather than growing a scrollbar. */
.myapps-group-panel-grid {
    /* --myapps-group-cols-max is the widest the card may get; the actual count
       is set inline by _refreshGroupPanel so a folder of three doesn't sit in
       the corner of a four-wide card. */
    --myapps-group-cols-max: 4;
    display: flex;
    /* A scroller can't be sized by the very content it clips, so the grid's
       width is spelled out for it. */
    width: calc(var(--myapps-group-cols, 4) * var(--myapps-tile-w)
        + (var(--myapps-group-cols, 4) - 1) * var(--myapps-gap-x));
    max-width: 100%;
    /* Reorder mode's uninstall badge overhangs the top corner of every tile,
       and the scroller clips whatever leaves its padding box — the top
       row's badges came out sliced flat. Hold the overhang inside the padding,
       pulled straight back out again so the resting layout is unchanged. */
    padding-top: 9px;
    margin-top: -9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}

.myapps-group-panel-grid::-webkit-scrollbar {
    display: none;
}

.myapps-group-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(var(--myapps-group-cols, 4), var(--myapps-tile-w));
    column-gap: var(--myapps-gap-x);
    row-gap: 24px;
    justify-content: center;
    align-content: start;
}

/* The folder's page dots — the grid pager's, one size down in spacing. Gone
   entirely (not just invisible) on a one-page folder: the card hugs its
   contents, and a reserved empty strip would read as a layout bug. */
.myapps-group-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -6px;
}

.myapps-group-dots-hidden {
    display: none;
}

/* Uninstall confirmation modal */
.myapps-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}
.myapps-modal {
    background: var(--dashboard-card-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 8px 32px var(--dashboard-shadow-medium);
}
.myapps-modal h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}
.myapps-modal p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--dashboard-text-secondary);
}
.myapps-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.myapps-modal-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--dashboard-border);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.myapps-modal-cancel {
    background: var(--dashboard-card-background);
    color: var(--dashboard-text-primary);
}
@media (hover: hover) {
    .myapps-modal-cancel:hover {
        background: var(--dashboard-hover);
    }
}
.myapps-modal-confirm {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}
@media (hover: hover) {
    .myapps-modal-confirm:hover {
        background: #c62828;
        border-color: #c62828;
    }
}
.myapps-modal-confirm:disabled {
    opacity: 0.6;
    cursor: default;
}

/* App feedback modal (puter.ui.showFeedbackDialog) — a from-scratch,
   theme-aware overlay in the spirit of the modals above, but used from more
   than the dashboard (the desktop app-IPC path and the standalone popup too).
   Self-contained color tokens (light default + dark override) so it themes
   correctly wherever it's mounted, independent of the dashboard variables. */
.app-feedback-overlay {
    --afb-bg: #ffffff;
    --afb-fg: #16202b;
    --afb-muted: #64748b;
    --afb-border: rgba(15, 23, 42, 0.12);
    --afb-field-bg: #ffffff;
    --afb-field-border: rgba(15, 23, 42, 0.18);
    --afb-hover: rgba(15, 23, 42, 0.05);
    --afb-scrim: rgba(0, 0, 0, 0.5);
    --afb-error: #c62828;

    position: fixed;
    inset: 0;
    /* Above app windows, the popup shell, and the drawer. */
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: var(--afb-scrim);
    opacity: 0;
    transition: opacity 0.16s ease;
    -webkit-font-smoothing: antialiased;
}
.app-feedback-overlay.app-feedback-open {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .app-feedback-overlay {
        --afb-bg: #24262c;
        --afb-fg: #e8ecf1;
        --afb-muted: #9aa7b4;
        --afb-border: rgba(255, 255, 255, 0.12);
        --afb-field-bg: #1b1d22;
        --afb-field-border: rgba(255, 255, 255, 0.16);
        --afb-hover: rgba(255, 255, 255, 0.08);
        --afb-scrim: rgba(0, 0, 0, 0.66);
        --afb-error: #ff6b81;
    }
}

.app-feedback-modal {
    width: min(440px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--afb-bg);
    color: var(--afb-fg);
    border: 1px solid var(--afb-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
    outline: none;
}
.app-feedback-open .app-feedback-modal {
    transform: none;
}

.app-feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0 20px;
}
.app-feedback-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}
.app-feedback-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--afb-muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.app-feedback-x svg {
    width: 16px;
    height: 16px;
}
@media (hover: hover) {
    .app-feedback-x:hover:not(:disabled) {
        background: var(--afb-hover);
        color: var(--afb-fg);
    }
}

.app-feedback-body {
    padding: 12px 20px 20px;
}

.app-feedback-loading {
    text-align: center;
    color: var(--afb-muted);
    padding: 28px 10px;
    font-size: 14px;
}

.app-feedback-target {
    margin-bottom: 14px;
}
.app-feedback-target-title {
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}
.app-feedback-target-name {
    font-size: 12px;
    color: var(--afb-muted);
    word-break: break-all;
    margin-top: 2px;
}

.app-feedback-c2a {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
}
.app-feedback-unavailable-message {
    margin: 8px 0 4px;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    color: var(--afb-muted);
}

.app-feedback-message {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 130px;
    resize: vertical;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: var(--afb-fg);
    background: var(--afb-field-bg);
    border: 1px solid var(--afb-field-border);
    border-radius: 8px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.app-feedback-message:focus {
    outline: none;
    border-color: #088ef0;
    box-shadow: 0 0 0 3px rgba(8, 142, 240, 0.18);
}
.app-feedback-message::placeholder {
    color: var(--afb-muted);
}

.app-feedback-counter {
    text-align: right;
    font-size: 11px;
    color: var(--afb-muted);
    margin-top: 4px;
}
.app-feedback-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--afb-muted);
}
.app-feedback-error {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--afb-error);
}

.app-feedback-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.app-feedback-btn {
    padding: 8px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid var(--afb-field-border);
    background: var(--afb-bg);
    color: var(--afb-fg);
    cursor: pointer;
    transition: background-color 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}
@media (hover: hover) {
    .app-feedback-btn:hover:not(:disabled) {
        background: var(--afb-hover);
    }
}
.app-feedback-btn-primary {
    border-color: #088ef0;
    background: linear-gradient(#34a5f8, #088ef0);
    color: #fff;
}
@media (hover: hover) {
    /* Must out-rank .app-feedback-btn:hover:not(:disabled) above, which
       would otherwise repaint the primary button with the light hover bg. */
    .app-feedback-btn.app-feedback-btn-primary:hover:not(:disabled) {
        filter: brightness(1.05);
        background: linear-gradient(#34a5f8, #088ef0);
    }
}
.app-feedback-btn-primary:disabled {
    opacity: 0.5;
    cursor: default;
    filter: none;
}
/* Cancel/X are disabled while a submit is in flight. */
.app-feedback-btn:disabled,
.app-feedback-x:disabled {
    opacity: 0.5;
    cursor: default;
}

.app-feedback-success {
    text-align: center;
    padding: 18px 10px 8px;
}
.app-feedback-success-check {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
}
.app-feedback-success-check svg {
    width: 28px;
    height: 28px;
}
.app-feedback-success-text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

/* Bottom-sheet on narrow screens. */
@media (max-width: 500px) {
    .app-feedback-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .app-feedback-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
        transform: translateY(16px);
    }
    .app-feedback-open .app-feedback-modal {
        transform: none;
    }
}

/* Add-an-app chooser (see showAddAppModal): the three ways to get an app, as
   rows in the same modal shell. min-width gives the two-line rows room without
   overflowing a narrow phone; the shell's own max-width caps the other end. */
/* Stated rather than left to `.dashboard *`: the overlay is appended to the
   dashboard WINDOW, which is outside that rule — without this, a width:100%
   child (the option rows, the request form's message box) adds its padding
   and border on top of the card's content width and hangs over the right
   edge. Width is explicit for the same reason: it is the card's real width
   only under border-box. */
.myapps-add-modal,
.myapps-add-modal * {
    box-sizing: border-box;
}
.myapps-add-modal {
    width: min(440px, calc(100vw - 32px));
    min-width: 0;
    max-width: none;
}
.myapps-add-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.myapps-add-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    text-align: left;
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    background: var(--dashboard-card-background);
    color: var(--dashboard-text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
/* The accent wash, not the grey --dashboard-hover: the row already answers
   hover with a --select-ring border, and a grey fill under an accent ring
   reads as two systems disagreeing. The weak tint keeps the icon chip's
   stronger --select-tint legible on top of it. */
@media (hover: hover) {
    .myapps-add-option:hover {
        background: var(--select-tint-weak);
        border-color: var(--select-ring);
    }
}
.myapps-add-option:focus-visible {
    outline: 2px solid var(--select-color);
    outline-offset: -1px;
}
.myapps-add-option-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--select-tint);
    color: var(--select-color);
}
.myapps-add-option-icon svg {
    width: 19px;
    height: 19px;
}
.myapps-add-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.myapps-add-option-title {
    font-size: 14px;
    font-weight: 600;
}
.myapps-add-option-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--dashboard-text-secondary);
}
.myapps-add-option-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--dashboard-text-tertiary);
}

/* The request form, one step deeper in the same card (see showAddAppModal):
   a titled header whose Back arrow returns to the options, the message, and
   the sent confirmation that replaces both. */
.myapps-add-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.myapps-add-head h3 {
    margin: 0;
}
.myapps-add-back {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pulled into the card's padding so the title, not the arrow, lines up
       with the text below it. */
    width: 26px;
    height: 26px;
    margin-left: -6px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--dashboard-text-secondary);
    cursor: pointer;
}
.myapps-add-back svg {
    width: 17px;
    height: 17px;
}
@media (hover: hover) {
    .myapps-add-back:hover {
        background: var(--dashboard-hover);
        color: var(--dashboard-text-primary);
    }
}
.myapps-add-back:focus-visible {
    outline: 2px solid var(--select-color);
    outline-offset: -1px;
}
.myapps-add-message {
    display: block;
    width: 100%;
    min-height: 130px;
    margin-bottom: 12px;
    padding: 10px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid var(--dashboard-border);
    border-radius: 6px;
    background: var(--dashboard-input-background);
    color: var(--dashboard-text-primary);
    outline: none;
    transition: border-color 0.15s;
}
.myapps-add-message:focus {
    border-color: var(--select-color);
}
.myapps-add-message::placeholder {
    color: var(--dashboard-text-muted);
}
p.myapps-add-error {
    margin: -4px 0 12px;
    font-size: 12px;
    color: var(--dashboard-error-text);
}
.myapps-add-send {
    background: var(--select-color);
    border-color: var(--select-color);
    color: #fff;
}
@media (hover: hover) {
    .myapps-add-send:not(:disabled):hover {
        filter: brightness(0.94);
    }
}
.myapps-add-send:disabled {
    opacity: 0.55;
    cursor: default;
}
.myapps-add-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px 0 6px;
    text-align: center;
}
.myapps-add-sent svg {
    width: 40px;
    height: 40px;
    color: var(--dashboard-success-text);
}
.myapps-add-sent p {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dashboard-text-secondary);
}

/* -- Item properties modal --
   Responsive, from-scratch replacement for UIWindowItemProperties in the
   Dashboard: a centered card on desktop, a bottom sheet on mobile. */
.item-props-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: var(--dashboard-shadow-overlay, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 1000;
}
.item-props-overlay.item-props-show {
    opacity: 1;
}

.item-props-modal {
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    max-height: min(600px, 85vh);
    background: var(--dashboard-card-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px var(--dashboard-shadow-medium);
    overflow: hidden;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
}
.item-props-overlay.item-props-show .item-props-modal {
    transform: scale(1);
    opacity: 1;
}

/* Header */
.item-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dashboard-border);
    flex-shrink: 0;
}
.item-props-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.item-props-title-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-props-title-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.item-props-title-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.item-props-title-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-props-title-sub {
    font-size: 12px;
    color: var(--dashboard-text-muted);
}
.item-props-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dashboard-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .item-props-close:hover {
        background: var(--dashboard-hover);
        color: var(--dashboard-text-primary);
    }
}

/* Tabs */
.item-props-tabs {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    border-bottom: 1px solid var(--dashboard-border);
    flex-shrink: 0;
}
.item-props-tab {
    padding: 11px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--dashboard-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
@media (hover: hover) {
    .item-props-tab:hover {
        color: var(--dashboard-text-primary);
    }
}
.item-props-tab.item-props-tab-active {
    color: var(--dashboard-text-primary);
    font-weight: 600;
    border-bottom-color: var(--dashboard-link);
}

/* Body */
.item-props-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 18px 16px;
}
.item-props-panel {
    display: none;
}
.item-props-panel.item-props-panel-active {
    display: block;
}

.item-props-list {
    margin: 0;
}
.item-props-row {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dashboard-border);
}
.item-props-row:last-child {
    border-bottom: none;
}
.item-props-label {
    flex: 0 0 128px;
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    margin: 0;
}
.item-props-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--dashboard-text-primary);
    margin: 0;
    word-break: break-word;
}
.item-props-value a {
    color: var(--dashboard-link);
    text-decoration: none;
}
.item-props-value a:hover {
    text-decoration: underline;
}
.item-props-website-entry {
    margin: 0 0 6px;
}
.item-props-website-entry:last-child {
    margin-bottom: 0;
}
.item-props-disassociate {
    margin-left: 8px;
    font-size: 12px;
    color: var(--dashboard-danger-text);
    cursor: pointer;
}
.item-props-disassociate:hover {
    text-decoration: underline;
}

/* Versions */
.item-props-version-entry {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dashboard-border);
}
.item-props-version-entry:last-child {
    border-bottom: none;
}
.item-props-version-meta {
    font-size: 13px;
    color: var(--dashboard-text-primary);
}
.item-props-version-id {
    font-size: 11px;
    font-family: monospace;
    color: var(--dashboard-text-muted);
    word-break: break-all;
}
.item-props-empty {
    padding: 10px 0;
    font-size: 13px;
    color: var(--dashboard-text-muted);
}

/* Mobile: dock to the bottom as a slide-up sheet */
@media (max-width: 600px) {
    .item-props-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .item-props-modal {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        transform: translateY(24px);
    }
    .item-props-overlay.item-props-show .item-props-modal {
        transform: translateY(0);
    }
    .item-props-row {
        flex-direction: column;
        gap: 3px;
    }
    .item-props-label {
        flex-basis: auto;
    }
}

/* A tile installed by a deep-link landing, not yet arrived: rendered in
   place — layout, page count, and the wayfinding flip all see it — but held
   invisible for the intro's arrival beat to reveal (see _spliceDeepLinkApp /
   _revealArrivingTile in TabApps.js). */
.myapps-tile-installing {
    opacity: 0;
    transform: scale(0.55);
    pointer-events: none;
}

/* The arrival itself: an INSTALLATION, staged over 1400ms (mirrored by
   DEEP_LINK_INSTALL_ARRIVE_MS in TabApps.js) with the grammar users know
   from every app store:
     1. the slot opens — the folder well's own surface — and the icon
        materializes into it DIM (grayscale, translucent, slightly small):
        present, but not yet usable;
     2. a progress stroke draws clockwise around the slot (the
        .myapps-install-progress element _revealArrivingTile injects);
     3. the stroke completes and everything resolves at once — the well
        recedes, the ring dissolves outward, the icon springs to full
        color and size, and the label names what was installed.
   Every piece fills backwards so the delayed ones hold their start state
   through their delay. Only _revealArrivingTile applies the class and
   injects the ring, never under prefers-reduced-motion. */
.myapps-tile-install-arriving::before {
    animation: myapps-install-well 1400ms ease backwards;
}

.myapps-tile-install-arriving .myapps-tile-icon {
    animation: myapps-install-icon 1400ms ease backwards;
}

.myapps-tile-install-arriving .myapps-tile-label {
    animation: myapps-install-label 320ms ease 1020ms backwards;
}

/* The progress ring: the same box the folder well draws (see
   .myapps-tile::before), as a stroke. A transient element, not a pseudo —
   the tile's ::before is the well and its ::after the running dot. */
.myapps-install-progress {
    position: absolute;
    top: -6px;
    left: 50%;
    width: calc(var(--myapps-icon-size, 56px) + 12px);
    height: calc(var(--myapps-icon-size, 56px) + 12px);
    margin-left: calc((var(--myapps-icon-size, 56px) + 12px) / -2);
    pointer-events: none;
    animation: myapps-install-progress-done 360ms ease 1000ms forwards;
}

.myapps-install-progress svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.myapps-install-progress rect {
    fill: none;
    stroke: var(--select-color);
    stroke-width: 3;
    stroke-linecap: round;
    /* pathLength=100 normalizes the perimeter; the draw is a dashoffset
       sweep from fully hidden to fully drawn, starting at the top. The
       slight overshoot closes the seam at the join. */
    stroke-dasharray: 100.5;
    stroke-dashoffset: 100.5;
    animation: myapps-install-draw 830ms cubic-bezier(0.4, 0, 0.2, 1) 140ms forwards;
}

/* The slot: opens from the well's resting state (opacity 0, scale .62),
   holds while the stroke draws, recedes as the icon comes alive. */
@keyframes myapps-install-well {
    0%   { opacity: 0;   transform: scale(0.62); }
    10%  { opacity: 0.6; transform: scale(0.92); }
    70%  { opacity: 0.6; transform: scale(0.92); }
    88%  { opacity: 0;   transform: scale(1.05); }
    100% { opacity: 0;   transform: scale(1.05); }
}

/* The icon: dim and small while "installing", then alive with a spring. */
@keyframes myapps-install-icon {
    0%   { opacity: 0;    transform: scale(0.6);  filter: grayscale(1) brightness(0.9); }
    10%  { opacity: 0.45; transform: scale(0.82); filter: grayscale(1) brightness(0.9); }
    70%  { opacity: 0.45; transform: scale(0.82); filter: grayscale(1) brightness(0.9); }
    82%  { opacity: 1;    transform: scale(1.08); filter: grayscale(0) brightness(1); }
    100% { opacity: 1;    transform: none;        filter: grayscale(0) brightness(1); }
}

@keyframes myapps-install-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes myapps-install-progress-done {
    to { opacity: 0; transform: scale(1.1); }
}

@keyframes myapps-install-label {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -- Drag-to-reorder -- */

/* The tile being dragged is kept in the grid as an invisible placeholder so
   the surrounding tiles reflow into the gap; the visible piece is the ghost. */
.myapps-tile-dragging {
    visibility: hidden;
}

/* Floating clone that tracks the pointer. Lives on <body> so the scroller's
   overflow can't clip it; positioned entirely via an inline transform.
   z-index must clear every window band — the fullpage dashboard window sits
   at ~1e7 and stay-on-top windows near 1e9 (see UIWindow), and a ghost that
   loses that contest renders invisibly behind the very grid being dragged.
   Max int is safe: the ghost is transient, purely visual, pointer-events:none. */
.myapps-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 10px 20px var(--dashboard-shadow-medium));
    transition: opacity 0.16s ease;
    will-change: transform;
}

.myapps-drag-ghost .myapps-tile-icon {
    transform: none;
}

.myapps-drag-ghost-drop {
    opacity: 0;
}

/* While reordering: no text selection, and a grabbing cursor everywhere. */
body.myapps-reordering,
body.myapps-reordering * {
    cursor: grabbing !important;
    -webkit-user-select: none;
    user-select: none;
}

/* Suppress the icon hover/active scaling on the dragged page so it doesn't
   fight the FLIP transforms mid-drag. */
body.myapps-reordering .myapps-tile:hover .myapps-tile-icon,
body.myapps-reordering .myapps-tile:active .myapps-tile-icon {
    transform: none;
}

body.myapps-reordering .myapps-tile {
    touch-action: none;
}

/* -- Reorder mode (touch; see TabApps._setReorderMode) --
   touch-action must be locked down BEFORE the finger goes down — the browser
   reads it at gesture start, so the mid-drag body.myapps-reordering rule
   above can't stop a touch the scroller has already claimed. While the mode
   is on, touches that start on a tile belong to the drag logic (ones on the
   gaps still pan pages natively) and the iOS long-press callout is off. */
.myapps-reorder-mode .myapps-tile {
    touch-action: none;
    -webkit-touch-callout: none;
}

/* iOS-style uninstall badge (see buildTileHtml); rendered on every tile that
   may be uninstalled but only shown while reorder mode is on. Fixed dark
   grey / white ×, like iOS, works over any theme. */
.myapps-tile-remove {
    display: none;
    position: absolute;
    top: -7px;
    left: -7px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(58, 58, 64, 0.92);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
    touch-action: manipulation;
}

.myapps-tile-remove svg {
    width: 11px;
    height: 11px;
}

/* Pad the 22px badge out to a finger-sized target. */
.myapps-tile-remove::after {
    content: '';
    position: absolute;
    inset: -7px;
}

.myapps-reorder-mode .myapps-tile-remove {
    display: flex;
}

/* The badge overhangs the icon box's corner; the box normally clips. */
.myapps-reorder-mode .myapps-tile-icon {
    overflow: visible;
}

/* iOS-home-screen jiggle: the visible cue that tiles are draggable. Applied
   to the icon, not the tile, so it can't fight the FLIP translate transforms
   the drag logic puts on the tiles themselves. Phases are staggered by grid
   position so the tiles don't wobble in lockstep. */
@keyframes myapps-reorder-jiggle {
    0% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
    100% { transform: rotate(-1.5deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .myapps-reorder-mode .myapps-tile .myapps-tile-icon {
        animation: myapps-reorder-jiggle 0.35s ease-in-out infinite;
    }

    .myapps-reorder-mode .myapps-tile:nth-child(2n) .myapps-tile-icon {
        animation-duration: 0.33s;
        animation-delay: -0.12s;
    }

    .myapps-reorder-mode .myapps-tile:nth-child(3n) .myapps-tile-icon {
        animation-delay: -0.24s;
    }

    /* The add-an-app tile can't be dragged or uninstalled, so it has nothing
       to say in reorder mode: it sits still while the apps wobble. Last, and
       specific enough, to beat the nth-child rules above. */
    .myapps-reorder-mode .myapps-tile.myapps-add-tile .myapps-tile-icon {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .myapps-drag-ghost {
        transition: none;
    }

    /* The installation's end state (a plain visible tile) without its
       staging; the progress ring shows nothing rather than a frozen arc. */
    .myapps-tile-install-arriving::before,
    .myapps-tile-install-arriving .myapps-tile-icon,
    .myapps-tile-install-arriving .myapps-tile-label {
        animation: none;
    }

    .myapps-install-progress {
        display: none;
    }

    /* Folders still open and the well still fills — they just do it without
       the travel: the states are information, the motion is decoration. */
    .myapps-group-backdrop,
    .myapps-group-panel,
    .myapps-group-open .myapps-group-panel,
    body.myapps-reordering .myapps-tile-merge-pending::before,
    body.myapps-reordering .myapps-tile-merge-armed::before,
    body.myapps-reordering .myapps-tile.myapps-tile-merge-armed .myapps-tile-icon {
        transition: none;
    }

    .dashboard-sidebar,
    .dashboard-sidebar-scrim,
    .dashboard-sidebar-toggle {
        transition: none;
    }
}

/* Dashboard files */

.dashboard-content.files {
    padding: 0 0 0 10px;
    overflow: hidden;
}

.dashboard-tab-content.files-tab {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: unset;
    padding: 0;
    margin: 0;
}

.dashboard-tab-content.files-tab h2 {
    margin: 0 0 6px 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    letter-spacing: -0.02em;
}

.dashboard-section-files .directories {
    position: sticky;
    top: 0;
    width: 200px;
    padding: 16px 0;
}

.dashboard-section-files .directories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-section-files .directories li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    margin-right: 10px;
    padding: 3px 0px 3px 5px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--dashboard-text);
    border: 2px dashed transparent;
    transition: background-color 0.15s;
}

@media (hover: hover) {
    .dashboard-section-files .directories li:hover {
        background: var(--dashboard-hover);
    }
}

.dashboard-section-files .directories li.context-menu-active {
    background: var(--dashboard-hover);
}

.dashboard-section-files .directories li.active {
    color: var(--select-color);
    font-weight: 500;
}

.dashboard-section-files .directories li img {
    width: 35px;
    height: auto;
}

.dashboard-section-files .directories li[data-folder="Trash"] {
    position: fixed;
    bottom: 0;
    margin-bottom: 20px;
    width: 150px;
    height: 38px;
}

.dashboard-section-files .directory-contents {
    position: relative;
    width: calc(100% - 160px);
    min-height: 100vh;
    border-left: 1px solid var(--dashboard-border);
}

.dashboard-section-files .directory-contents .header {
    position: sticky;
    top: 0;
    background: var(--dashboard-background);
}

.dashboard-section-files .header .path {
    font-size: 14px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    background: linear-gradient(0deg, var(--dashboard-sidebar-background), var(--dashboard-background));
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard .path-nav-buttons {
    padding: 4px 10px 4px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-right: 5px;
    border-right: 1px dotted var(--dashboard-border);
}

.dashboard .path-btn {
    width: 28px;
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;
    background-color: transparent;
}

@media (hover: hover) {
    .dashboard .path-btn:hover {
        background-color: #EEE;
        border-color: #EEE;
    }
}

@media (prefers-color-scheme: dark) {
    .path-btn {
        filter: invert(1) hue-rotate(180deg);
    }
    @media (hover: hover) {
        /* The hover chip is light (#EEE) even in dark mode, so the icon must
           drop its dark-mode inversion to stay readable on it. */
        .path-btn:hover {
            filter: invert(0) hue-rotate(0deg);
            background-color: #EEE;
            border-color: #EEE;
        }
    }
}

.dashboard-section-files .header .path-breadcrumbs {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.dashboard-section-files .header .path-breadcrumbs:empty + .path-actions {
    display: none;
}

.dashboard-section-files .header .path-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.dashboard-section-files .header .path-action-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    /* Matches the #5c5c5c stroke of the arrow-*-thin.svg nav icons. */
    color: #5c5c5c;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .dashboard-section-files .header .path-action-btn:hover {
        background-color: #EEE;
        border-color: #EEE;
    }
}

.dashboard-section-files .header .path-btn-disabled {
    opacity: 0.1;
    pointer-events: none;
}

.dashboard-section-files .header .path-action-btn svg {
    width: 24px;
    height: 24px;
}

.dashboard-section-files .header .path .dirname {
    height: auto;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    color: var(--dashboard-text-secondary);
    cursor: pointer;
    background-color: transparent;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 6px;
}

@media (hover: hover) {
    .dashboard-section-files .header .path .dirname:hover {
        background-color: #EEE;
        border-color: #EEE;
    }
}

.dashboard-section-files .header .path .dirname.drop-target {
    color: var(--dashboard-text);
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px dashed var(--select-color);
}

.dashboard-section-files .header .path .dirname.context-menu-active {
    color: var(--dashboard-background);
    background-color: var(--select-color);
    border: 1px solid var(--select-color);
}

.dashboard-section-files .header .columns {
    display: grid;
    height: 32px;
    padding: 0 10px;
    grid-template-columns: 24px auto 4px 100px 4px 120px 4px 20px;
    align-items: center;
    margin: 1px 2px;
    color: var(--dashboard-text-secondary);
    border-bottom: 1px solid var(--dashboard-border);
    font-size: 12px;
}

.dashboard-section-files .files {
    width: 100%;
    height: calc(100vh - 124px);
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    overflow-y: auto;
    touch-action: pan-y;
}

.dashboard-section-files .row {
    display: grid;
    width: unset;
    height: 32px;
    padding: 0 10px;
    grid-template-columns: 24px auto 4px 100px 4px 120px 4px 20px;
    align-items: center;
    font-size: 13px;
    color: var(--dashboard-text);
    touch-action: pan-y;
    margin: 1px 2px;
    pointer-events: auto;
    float: unset;
    -webkit-user-select: none;
    user-select: none;
    /* Safari shows an I-beam over text regardless of user-select unless a
       cursor is set explicitly; children (item-name, size, modified) inherit. */
    cursor: default;
}

.dashboard-section-files .row.folder {
    border: 1px solid transparent;
}

@media (hover: hover) {
    .dashboard-section-files .row:hover {
        background: var(--select-tint-weak);
        border-radius: 3px;
    }
}

.dashboard-section-files .row.has-open-contextmenu:not(.selected) {
    background: var(--select-tint-weak);
    border-radius: 3px;
}

.dashboard-section-files .row.selected {
    color: var(--dashboard-text-primary);
    background-color: var(--select-tint);
    border-radius: 3px;
}

@keyframes item-added-highlight {
    from { background-color: var(--select-tint-strong); }
    to { background-color: transparent; }
}

.dashboard-section-files .row.item-newly-added {
    animation: item-added-highlight 2s ease-out;
}

.dashboard-section-files .row img {
    width: 18px;
    height: 18px;
}

.dashboard-section-files .row .item-icon,
.dashboard-section-files .header .columns .item-icon {
    padding: inherit;
    height: 100%;
    width: 100%;
    filter: none;
    margin: 0;
}

.dashboard-section-files .row .item-name-wrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.dashboard-section-files .row .item-name,
.dashboard-section-files .header .columns .item-name {
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    overflow: hidden;
    max-width: unset;
    color: currentColor !important;
    text-shadow: none;
    padding: 0 8px;
    margin: 0;
    font-size: inherit;
    font-weight: 500;
    word-break: inherit;
    line-height: 32px;
}

/* Open-file dot: marks rows whose file is open in an app window (visible or
   minimized) — the row doubles as that window's switcher (clicking it
   restores the window; see open_item.js), sibling of the Apps-tab tiles'
   running dot. Kept current by updateOpenFileDots in TabFiles.js. */
.dashboard-section-files .files-tab .files .row.file-is-open .item-name-wrapper::after {
    content: '';
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dashboard-text-tertiary, #71717a);
}

/* Grid view: the name wrapper is a block, not a flex row — center the dot
   under the (up to two-line) name, mirroring the tile dot under its icon. */
.dashboard-section-files .files-tab .files.files-grid-view .row.file-is-open .item-name-wrapper::after {
    display: block;
    margin: 4px auto 0;
}

/* On touch devices, item-name/icon/badges must not be direct event targets
   so that pointerdown's isDragHandle check can't match them and accidentally
   select items when the user is scrolling. Events pass through to the .row. */
.files-tab.touch-device .row:not(.header) .item-name,
.files-tab.touch-device .row:not(.header) .item-icon,
.files-tab.touch-device .row:not(.header) .item-badges {
    pointer-events: none;
}

.dashboard-section-files .row textarea {
    align-items: center;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 3px 8px 0 8px;
    text-align: left;
    font-weight: inherit;
    display: none;
    white-space: nowrap;
}

.dashboard-section-files .row .item-size {
    white-space: nowrap;
    overflow: hidden;
    line-height: 32px;
    text-align: left;
}

.dashboard-section-files .row .item-modified {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 32px;
    text-align: left;
}

.dashboard-section-files .row .item-more {
    color: var(--dashboard-border);
    cursor: pointer;
}

.dashboard-section-files .row .item-more svg {
    pointer-events: none;
}

@media (hover: hover) {
    .dashboard-section-files .row:hover .item-more {
        color: var(--dashboard-text);
    }

    .dashboard-section-files .row.selected:hover .item-more {
        color: var(--dashboard-text);
    }
}

/* The '⋯' button stays in its active look while the menu it opened is up
   (the pointer is on the menu by then, so :hover alone can't hold it). */
.dashboard-section-files .row .item-more.has-open-contextmenu {
    color: var(--dashboard-text);
}

.dashboard-section-files .row.selected .item-more {
    color: var(--dashboard-text-secondary);
}

/* Source rows dim while their drag is in flight */
.dashboard-section-files .row.dragging-source {
    opacity: 0.45;
}

/* --- Drag ghost ---
   A compact icon+name chip that follows the cursor (same for list and grid
   views). Multi-selections show stacked sheets behind the chip and a count
   badge on its top-right corner. Built in TabFiles.js draggable helper(). */

.files-drag-ghost {
    pointer-events: none;
    z-index: 10000;
    opacity: 0.95;
    animation: files-drag-ghost-in 120ms ease-out;
}

@keyframes files-drag-ghost-in {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .files-drag-ghost {
        animation: none;
    }
}

.files-drag-ghost-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 7px 14px 7px 9px;
    box-sizing: border-box;
    background: var(--dashboard-card-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px var(--dashboard-shadow-subtle), 0 8px 24px var(--dashboard-shadow-medium);
}

.files-drag-ghost-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
}

.files-drag-ghost-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
}

/* Stacked sheets behind the chip hint at additional items in the drag */
.files-drag-ghost-sheet {
    position: absolute;
    inset: 0;
    background: var(--dashboard-card-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px var(--dashboard-shadow-subtle);
}

.files-drag-ghost-sheet-1 {
    transform: translate(4px, 4px);
}

.files-drag-ghost-sheet-2 {
    transform: translate(8px, 8px);
}

.files-drag-ghost-count {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--select-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 4px var(--dashboard-shadow-medium);
}

.dashboard-section-files .row.folder.ui-droppable-hover,
.dashboard-section-files .row.folder.selected.ui-droppable-hover {
    color: var(--dashboard-text);
    background-color: rgba(59, 130, 246, 0.1);
    border: 2px dashed var(--select-color);
    border-radius: 3px;
}

/* Spring-loaded folder dwell animation */
.dashboard-section-files .row.folder.dwell-opening,
.dashboard-section-files .directories li.dwell-opening {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 100%, transparent 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    border: 2px dashed var(--select-color);
    border-radius: 3px;
    animation: dwell-fill 700ms linear forwards;
}

@keyframes dwell-fill {
    from { background-size: 0% 100%; }
    to { background-size: 100% 100%; }
}

/* Navbar controls (back/forward/up, breadcrumbs) use an outline instead of a
   border for the dwell state so the header layout doesn't shift. */
.dashboard-section-files .path-btn.dwell-opening,
.dashboard-section-files .header .path .dirname.dwell-opening {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 100%, transparent 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    outline: 2px dashed var(--select-color);
    outline-offset: -2px;
    animation: dwell-fill 700ms linear forwards;
}

/* Drag cancel zone — shown after spring-loaded folder navigation */
.drag-cancel-zone {
    position: absolute;
    bottom: 32px;
    right: 32px;
    background: #ef4444;
    color: white;
    padding: 16px 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    user-select: none;
    cursor: default;
    transition: background 0.15s, transform 0.15s;
}

.drag-cancel-zone.drag-cancel-hover {
    background: #dc2626;
    transform: scale(1.05);
}

.dashboard-section-files .directories li.ui-droppable-hover.active {
    background-color: rgba(59, 130, 246, 0.1);
    border: 2px dashed var(--select-color);
    border-radius: 4px;
}

/* Native file drop visual feedback for Dashboard */
.dashboard-section-files .files.native-drop-active {
    background-color: rgba(0, 120, 212, 0.08);
    outline: 2px dashed #0078d4;
    outline-offset: -2px;
    border-radius: 4px;
}

.dashboard-section-files .directories li.native-drop-target {
    background-color: rgba(0, 120, 212, 0.15);
    border-radius: 4px;
}

.dashboard-section-files .files .row.folder.native-drop-target {
    background-color: rgba(0, 120, 212, 0.15);
}

/* Dark mode support for native file drop */
@media (prefers-color-scheme: dark) {
    .dashboard-section-files .files.native-drop-active {
        background-color: rgba(100, 180, 255, 0.12);
        outline-color: #4da3ff;
    }

    .dashboard-section-files .directories li.native-drop-target,
    .dashboard-section-files .files .row.folder.native-drop-target {
        background-color: rgba(100, 180, 255, 0.2);
    }
}

.dashboard-section-files .files-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, var(--dashboard-sidebar-background), var(--dashboard-background));
    border-top: 1px solid var(--dashboard-border);
    height: 30px;
    font-size: 13px;
    line-height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--dashboard-text-secondary);
    z-index: 10;
}

.dashboard-section-files .files-footer-separator,
.dashboard-section-files .files-footer-selected-items {
    display: none;
}

.dashboard-section-files .files-footer-separator {
    color: var(--dashboard-text-muted);
}

/* Floating Selection Actions Bar */
.dashboard-section-files .files-selection-actions {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dashboard-card-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 20px var(--dashboard-shadow-medium),
                0 2px 8px var(--dashboard-shadow-light);
    z-index: 15;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                visibility 0.25s ease;
}

.dashboard-section-files .files-selection-actions.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    z-index: 99999999999999999;
}

.dashboard-section-files .files-selection-actions.rubberband-active {
    pointer-events: none;
}

/* The marquee is clamped to the files container but the cursor isn't;
   while a rubber-band drag is active, the chrome around the list must
   not react to the cursor passing over it (hover highlights, tooltips). */
.dashboard.rubberband-selecting .dashboard-sidebar,
.dashboard.rubberband-selecting .dashboard-section-files .directories,
.dashboard.rubberband-selecting .dashboard-section-files .directory-contents .header {
    pointer-events: none;
}

.dashboard-section-files .selection-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dashboard-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .dashboard-section-files .selection-action-btn:hover {
        background: var(--dashboard-hover);
    }
}

.dashboard-section-files .selection-action-btn:active {
    transform: scale(0.97);
}

.dashboard-section-files .selection-action-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.dashboard-section-files .selection-action-btn.restore-btn {
    color: #43a047;
}

@media (hover: hover) {
    .dashboard-section-files .selection-action-btn.restore-btn:hover {
        background: rgba(67, 160, 71, 0.1);
    }
}

.dashboard-section-files .selection-action-btn.delete-btn {
    color: #e53935;
}

@media (hover: hover) {
    .dashboard-section-files .selection-action-btn.delete-btn:hover {
        background: rgba(229, 57, 53, 0.1);
    }
}

/* Select mode button - hidden on desktop by default */
.dashboard-section-files .header .path-action-btn.select-mode-btn {
    display: none;
}

/* Done button in floating action bar - hidden by default, shown in select mode on mobile */
.dashboard-section-files .files-selection-actions .done-btn {
    display: none;
}

/* Checkbox in item rows - hidden by default */
.dashboard-section-files .files-tab .files .row .item-checkbox {
    display: none;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-section-files .files-tab .files .row .item-checkbox .checkbox-icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dashboard-border);
    border-radius: 4px;
    background: var(--dashboard-card-background);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.dashboard-section-files .files-tab .files .row.selected .item-checkbox .checkbox-icon {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
}

.dashboard-section-files .files-tab .files .row.selected .item-checkbox .checkbox-icon::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.dashboard-section-files .files-tab .files.files-list-view .row {
    display: grid;
    grid-template-columns: 24px auto 4px 100px 4px 120px 4px 20px;
    height: 32px;
    padding: 0 10px;
    align-items: center;
}

.dashboard-section-files .files-tab .files.files-list-view .row .item-icon {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border-radius: 2px;
}

.dashboard-section-files .files-tab .files.files-list-view .row .item-icon img {
    width: 18px;
    height: 18px;
    object-fit: cover;
}

.dashboard-section-files .files-tab .files.files-list-view .row .item-size,
.dashboard-section-files .files-tab .files.files-list-view .row .item-modified,
.dashboard-section-files .files-tab .files.files-list-view .row .item-more {
    display: block;
    padding: 0 10px;
}

.dashboard-section-files .files-tab .files.files-list-view .row .item-size,
.dashboard-section-files .files-tab .files.files-list-view .row .item-modified {
    color: var(--dashboard-text-tertiary);
}

.dashboard-section-files .files-tab .files.files-list-view .row.selected .item-size,
.dashboard-section-files .files-tab .files.files-list-view .row.selected .item-modified {
    color: inherit;
}

.dashboard-section-files .files-tab .files.files-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px;
    align-content: start;
    margin-bottom: 30px;
}

.dashboard-section-files .files-tab .files.files-list-view .row .item-badges {
    width: 36px;
    height: 36px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    align-items: flex-start;
}

.dashboard-section-files .files-tab .files.files-list-view .row img.item-badge {
    width: 12px !important;
    height: 12px !important;
    margin: 0 -2px;
    filter: none;
}

/* Badges live top-LEFT in grid view; the top-right corner belongs to the
   hover '⋯' button (.item-more) and they must not overlap. */
.dashboard-section-files .files-tab .files.files-grid-view .row .item-badges {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

.dashboard-section-files .files-tab .files.files-grid-view .row img.item-badge {
    width: 20px !important;
    height: 20px !important;
    margin: 5px;
    border-radius: 50%;
    background: var(--dashboard-background);
    box-shadow: 0 0 0 2px var(--dashboard-background);
    /* the desktop UI's .item-badge drop-shadow filters look muddy on the
       dashboard's flat tiles */
    filter: none;
}

.dashboard-section-files .files-tab .files.files-grid-view .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 12px;
    height: auto;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .dashboard-section-files .files-tab .files.files-grid-view .row:hover {
        background: var(--select-tint-weak);
        border-color: var(--select-tint-strong);
    }
}

/* An open context menu keeps its row in the hover state (the pointer is on
   the menu, so :hover no longer matches). Selected rows keep their own look. */
.dashboard-section-files .files-tab .files.files-grid-view .row.has-open-contextmenu:not(.selected) {
    background: var(--select-tint-weak);
    border-color: var(--select-tint-strong);
}

.dashboard-section-files .files-tab .files.files-grid-view .row.selected {
    background-color: var(--select-tint);
    border-color: var(--select-ring);
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-icon {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-icon img {
    width: 96px;
    height: 96px;
    /* override the desktop UI's 45px .item-icon img cap from style.css */
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-icon svg {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-name {
    text-align: center;
    width: 100%;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-size,
.dashboard-section-files .files-tab .files.files-grid-view .row .item-modified,
.dashboard-section-files .files-tab .files.files-grid-view .row .item-more,
.dashboard-section-files .files-tab .files.files-grid-view .row .col-spacer {
    display: none;
}

.dashboard-section-files .files-tab .files.files-grid-view .row .item-name-wrapper {
    width: 100%;
    display: block;
}

@media (hover: hover) {
    .dashboard-section-files .files-tab .files.files-grid-view .row:hover .item-more,
    .dashboard-section-files .files-tab .files.files-grid-view .row.has-open-contextmenu .item-more {
        position: absolute;
        top: 6px;
        right: 6px;
        color: var(--dashboard-text-secondary);
        background: var(--dashboard-card-background);
        border: 1px solid var(--dashboard-border);
        box-shadow: 0 1px 2px var(--dashboard-shadow-subtle);
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .dashboard-section-files .files-tab .files.files-grid-view .row .item-more:hover,
    .dashboard-section-files .files-tab .files.files-grid-view .row .item-more.has-open-contextmenu {
        color: var(--dashboard-text-primary);
        background: var(--dashboard-hover);
    }
}

/* NOTE: a rule hiding .item-more on desktop (non-touch) used to sit here, but
   it was malformed (selector list running into an @media block) and therefore
   never in effect — desktop users have always had the visible '⋯' button, and
   they use it, so repairing the rule into effect would remove a working
   affordance. Intentionally removed instead. */

.dashboard-section-files .files-tab .files.files-grid-view .row .item-name-editor {
    text-align: center;
}

/* --- Compact grid view ---
   The container carries both files-grid-view and files-grid-view-sm, so all
   grid rules above apply; this block only shrinks tile/icon/badge sizing. */

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row {
    padding: 8px;
    gap: 6px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row .item-icon {
    width: 80px;
    height: 80px;
    border-radius: 6px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row .item-icon svg {
    width: 40px;
    height: 40px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row .item-icon img {
    width: 52px;
    height: 52px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row .item-name {
    font-size: 12px;
}

.dashboard-section-files .files-tab .files.files-grid-view.files-grid-view-sm .row img.item-badge {
    width: 16px !important;
    height: 16px !important;
    margin: 3px;
}

.dashboard-section-files .files-tab.files-grid-mode .header .columns {
    display: none;
}

/* Sortable column headers */
.dashboard-section-files .header .columns .sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    justify-content: space-between;
}

@media (hover: hover) {
    .dashboard-section-files .header .columns .sortable:hover {
        color: var(--dashboard-text-heading);
    }
}

.dashboard-section-files .header .columns .sortable::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    opacity: 0.3;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}

.dashboard-section-files .header .columns .sortable.sort-asc::after {
    opacity: 1;
    border-bottom: 5px solid currentColor;
    border-top: none;
}

.dashboard-section-files .header .columns .sortable.sort-desc::after {
    opacity: 1;
    border-top: 5px solid currentColor;
    border-bottom: none;
}

/* Column resize handles */
.dashboard-section-files .header .columns .col-resize-handle {
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    position: relative;
    background: var(--dashboard-sidebar-background);
}

@media (hover: hover) {
    .dashboard-section-files .header .columns .col-resize-handle:hover {
        background: var(--dashboard-border);
    }
}

.dashboard-section-files .header .columns .col-resize-handle:active {
    background: var(--select-color);
}

.dashboard-section-files .more-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s ease;
    position: relative;
}

.dashboard-section-files .more-menu {
    position: absolute;
    min-width: 180px;
    background: var(--dashboard-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px;
}

.dashboard-section-files .more-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--dashboard-text);
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

@media (hover: hover) {
    .dashboard-section-files .more-menu .menu-item:hover {
        background: var(--dashboard-hover);
    }
}

.dashboard-section-files .more-menu .menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--dashboard-border);
    flex-shrink: 0;
}

.dashboard-section-files .more-menu .menu-item.has-submenu {
    position: relative;
}

.dashboard-section-files .more-menu .menu-item.has-submenu svg:last-child {
    margin-left: auto;
    width: 0.85rem;
    height: 0.85rem;
}

.dashboard-section-files .more-menu .menu-item.danger {
    color: #ea4335;
}

.dashboard-section-files .more-menu .menu-item.danger svg {
    color: #ea4335;
}

@media (hover: hover) {
    .dashboard-section-files .more-menu .menu-item.danger:hover {
        background: rgba(234, 67, 53, 0.1);
    }
}

.dashboard-section-files .more-menu .menu-divider {
    height: 1px;
    background: var(--dashboard-border);
    margin: 4px 0;
}

/* Mobile sidebar toggle — frosted so scrolling content reads through it,
   aligned to the 16px content gutter */
.dashboard-sidebar-toggle {
    display: none;
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 100;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Extend the tap target to ~52px without growing the button visually */
.dashboard-sidebar-toggle::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
}

.dashboard-sidebar-toggle:active {
    transform: scale(0.94);
}

/* The open drawer covers the toggle; fade it so it can't peek out from
   behind the drawer's rounded corner or catch stray taps */
.dashboard-sidebar-toggle.open {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.dashboard-sidebar-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--dashboard-text);
    border-radius: 1px;
}

@media (prefers-color-scheme: dark) {
    .dashboard-sidebar-toggle {
        background: rgba(37, 37, 37, 0.8);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

/* Scrim behind the mobile drawer */
.dashboard-sidebar-scrim {
    display: none;
}

/* Responsive: tablet and below — the sidebar becomes a modal drawer */
@media (max-width: 768px) {
    .dashboard-sidebar-header {
        padding: 2px 2px 12px 6px;
    }

    .dashboard-sidebar-toggle {
        display: flex;
    }

    .dashboard-sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: var(--dashboard-scrim);
        opacity: 0;
        pointer-events: none;
        touch-action: none;
        transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .dashboard-sidebar-scrim.open {
        opacity: 1;
        pointer-events: auto;
    }

    .dashboard-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: min(304px, calc(100vw - 56px));
        min-width: 0;
        z-index: 99;
        padding: max(16px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
        border-right: none;
        border-radius: 0 16px 16px 0;
        transform: translateX(-110%);
        visibility: hidden;
        box-shadow: var(--dashboard-drawer-shadow);
        overscroll-behavior: contain;
        /* visibility flips only after the slide-out finishes, keeping the
           closed drawer out of the tab order */
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.32s;
    }

    .dashboard-sidebar.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Mid-swipe: the drawer follows the finger, so no transitions */
    .dashboard-sidebar.dragging,
    .dashboard-sidebar-scrim.dragging {
        transition: none;
    }

    /* Roomier touch targets inside the drawer, with pressed-state feedback
       in place of hover */
    .dashboard-sidebar-item {
        padding: 12px;
        gap: 12px;
        font-size: 15px;
        margin-bottom: 2px;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard-sidebar-item svg {
        width: 20px;
        height: 20px;
    }

    .dashboard-sidebar-item:active {
        background: var(--dashboard-hover);
    }

    .dashboard-user-btn {
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard-user-btn:active {
        background: var(--dashboard-hover);
    }

    .dashboard-content {
        padding: 64px 16px 24px;
    }

    /* The Files tab keeps its own `padding: 0 0 0 10px` (higher specificity)
       so the rule above doesn't clear the fixed hamburger toggle for it. Push
       the directories column down instead, so the toggle doesn't sit on top of
       the first folder row (the column is hidden below 480px, so this only
       affects the tablet range). */
    .dashboard-section-files .directories {
        padding-top: 60px;
    }

    .myapps-search-wrap {
        padding-top: 60px;
        margin-bottom: 10px;
    }

    .dashboard-apps-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 4px;
    }

    .dashboard-app-card {
        padding: 10px 6px;
    }

    .dashboard-app-icon {
        width: 40px;
        height: 40px;
    }

    .dashboard-tab-content.myapps-tab {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        --myapps-tile-w: 72px;
        --myapps-tile-h: 74px;
        --myapps-gap-x: 12px;
        --myapps-gap-y: 30px;
        --myapps-icon-size: 52px;
    }

    /* Spread the fixed column count across the page width, iOS-style;
       --myapps-gap-x stays the minimum gap the column count is computed for. */
    .myapps-page {
        justify-content: space-between;
        column-gap: 0;
    }

    .myapps-tile {
        width: 72px;
    }

    .myapps-tile-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .myapps-group-icon {
        padding: 4px;
        border-radius: 12px;
    }

    .myapps-add-icon {
        border-radius: 12px;
    }

    .myapps-group-overlay {
        padding: 16px;
    }

    .myapps-group-panel {
        gap: 10px;
        padding: 16px 18px 20px;
        border-radius: 24px;
    }

    .myapps-group-page {
        row-gap: 18px;
    }
}

/* Three columns rather than four once four (4x72 + 3x12 + the card's padding)
   no longer fits a phone's width. */
@media (max-width: 400px) {
    .myapps-group-panel-grid {
        --myapps-group-cols-max: 3;
    }
}

/* Desktop: Make metadata wrapper transparent */
.dashboard-section-files .files-tab .files.files-list-view .row .item-metadata {
    display: contents;
}

/* Image preview popover */
.image-preview-popover {
    position: fixed;
    z-index: 9999;
    background: var(--dashboard-background);
    border: 1px solid var(--dashboard-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.image-preview-popover img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
}

.image-preview-name {
    font-size: 14px;
    color: var(--dashboard-text);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile phone optimizations */
@media (max-width: 480px) {
    .dashboard-content.files {
        padding: 0;
    }

    /* Hide directories sidebar */
    .dashboard-section-files .directories {
        display: none;
    }

    /* Full width for directory contents */
    .dashboard-section-files .directory-contents {
        width: 100%;
        border-left: none;
    }

    .dashboard-section-files .directory-contents .header {
        margin-bottom: 12px;
    }

    /* Hide column headers */
    .dashboard-section-files .header .columns {
        display: none;
    }

    /* Two-row header layout */
    .dashboard-section-files .header .path {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
    }

    .dashboard-section-files .header .path-breadcrumbs {
        order: 1;
        width: 100%;
        margin: 0 0 8px 0;
        padding-bottom: 8px;
        margin-left: 50px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        border-bottom: 1px solid var(--dashboard-border);
    }

    .dashboard-section-files .header .path-nav-buttons {
        order: 2;
        border-right: none;
        margin-right: 0;
    }

    .dashboard-section-files .header .path-actions {
        order: 3;
        margin-left: auto;
    }

    /* Two-row item layout */
    .dashboard-section-files .files-tab .files.files-list-view .row {
        display: grid;
        grid-template-columns: 48px 1fr !important;
        grid-template-rows: auto auto;
        height: auto;
        padding: 6px 10px;
        gap: 2px 8px;
    }

    /* Thumbnail spans both rows */
    .dashboard-section-files .files-tab .files.files-list-view .row .item-icon {
        grid-row: 1 / 3;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-section-files .files-tab .files.files-list-view .row .item-icon img {
        width: 40px;
        height: 40px;
    }

    /* File name on first row */
    .dashboard-section-files .files-tab .files.files-list-view .row .item-name-wrapper {
        grid-column: 2;
        grid-row: 1;
        padding-right: 40px;
    }

    .dashboard-section-files .files-tab .files.files-list-view .row .item-name {
        padding: 0;
        line-height: 24px;
    }

    /* Metadata wrapper for second row */
    .dashboard-section-files .files-tab .files.files-list-view .row .item-metadata {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: center;
        font-size: 11px;
    }

    .dashboard-section-files .files-tab .files.files-list-view .row .item-metadata .col-spacer {
        display: none;
    }

    .dashboard-section-files .files-tab .files.files-list-view .row .item-modified,
    .dashboard-section-files .files-tab .files.files-list-view .row .item-size {
        font-size: 11px;
        padding: 0;
        line-height: 24px;
        color: var(--dashboard-text-muted);        
    }

    @media (hover: hover) {
        .dashboard-section-files .files-tab .files.files-list-view .row:hover .item-modified,
        .dashboard-section-files .files-tab .files.files-list-view .row:hover .item-size,
        .dashboard-section-files .files-tab .files.files-list-view .row.selected .item-modified,
        .dashboard-section-files .files-tab .files.files-list-view .row.selected .item-size {
            /* color: var(--primary-color-sidebar-item);         */
        }
    }

    /* Bullet separator between size and modified */
    .dashboard-section-files .files-tab .files.files-list-view .row .item-size:not(:empty)::after {
        content: '•';
        margin: 0 6px;
    }

    /* Hide outer spacers */
    .dashboard-section-files .files-tab .files.files-list-view .row > .col-spacer {
        display: none;
    }

    /* Hide more button (use long-press for context menu on touch) */
    .dashboard-section-files .files-tab .files.files-list-view .row .item-more {
        position: absolute;
        right: 10px;
    }

    /* Adjust footer position - full width since sidebar is hidden */
    .dashboard-section-files .files-footer {
        left: 0;
        padding: 0;
    }

    /* Mobile: Floating selection actions - icon-only, full width */
    .dashboard-section-files .files-selection-actions {
        left: 0;
        right: 0;
        bottom: 38px;
        transform: translateX(0) translateY(100px);
        border-radius: 0;
        justify-content: center;
        padding: 10px 8px;
    }

    .dashboard-section-files .files-selection-actions.visible {
        transform: translateX(0) translateY(0);
    }

    .dashboard-section-files .selection-action-btn span {
        display: none;
    }

    .dashboard-section-files .selection-action-btn {
        padding: 9px 8px;
        border-radius: 50%;
    }

    /* Mobile: Show select mode button */
    .dashboard-section-files .header .path-action-btn.select-mode-btn {
        display: flex;
    }

    .dashboard-section-files .header .path-action-btn.select-mode-btn.active {
        background: var(--primary-color, #3b82f6);
        color: white;
        border-radius: 6px;
    }

    /* Mobile: Show checkboxes in select mode */
    .dashboard-section-files .files-tab.select-mode-active .files .row .item-checkbox {
        display: flex;
        grid-row: 1 / 3;
    }

    /* Mobile: Adjust grid for checkbox in list view */
    .dashboard-section-files .files-tab.select-mode-active .files.files-list-view .row {
        grid-template-columns: 32px 48px 1fr !important;
    }

    /* Adjust grid-column for content when checkbox is visible */
    .dashboard-section-files .files-tab.select-mode-active .files.files-list-view .row .item-icon {
        grid-column: 2;
    }

    .dashboard-section-files .files-tab.select-mode-active .files.files-list-view .row .item-name-wrapper {
        grid-column: 3;
    }

    .dashboard-section-files .files-tab.select-mode-active .files.files-list-view .row .item-metadata {
        grid-column: 3;
    }

    /* Mobile: Show Done button in floating action bar during select mode */
    .dashboard-section-files .files-tab.select-mode-active .files-selection-actions .done-btn {
        display: flex;
        background: var(--primary-color, #3b82f6);
        color: white;
        padding: 5px;
        margin-left: 8px;
    }

    /* Mobile: Grid view checkbox positioning */
    .dashboard-section-files .files-tab.select-mode-active .files.files-grid-view .row {
        position: relative;
    }

    .dashboard-section-files .files-tab.select-mode-active .files.files-grid-view .row .item-checkbox {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
    }
}

/* Full HD */
@media (min-width: 1920px) {
    .dashboard-section-home .bento-container {
        max-width: 1000px;
    }
    .dashboard-section-usage{
        max-width: 800px;
    }
}
/* 4K UHD */
@media (min-width: 2560px) {
    .dashboard-section-home .bento-container {
        max-width: 1200px;
    }
    .dashboard-section-usage{
        max-width: 900px;
    }
}

/* ============================================== */
/* Bento Box Home Dashboard                       */
/* ============================================== */

.dashboard .bento-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    padding: 8px 0;
    align-items: stretch;
}

.dashboard .bento-card {
    background: var(--dashboard-background);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--dashboard-shadow-light);
}

/* Welcome Card — uses same surface as .bento-card (no separate welcome tint) */
.dashboard .bento-welcome {
    position: relative;
    color: var(--dashboard-text-primary);
    min-height: 280px;
}

.dashboard .bento-welcome-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    box-sizing: border-box;
}

.dashboard .bento-welcome-pattern {
    display: none;
}

.dashboard .bento-welcome-content {
    position: relative;
    z-index: 1;
}

.dashboard .bento-welcome-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--dashboard-avatar-background);
    border: 3px solid var(--dashboard-bento-welcome-avatar-border);
    margin-bottom: 16px;
}

.dashboard .bento-greeting {
    font-size: 14px;
    color: var(--dashboard-text-hint);
    font-weight: 400;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 4px;
}

.dashboard .bento-username {
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dashboard-text-username);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard .bento-tagline {
    font-size: 13px;
    margin: 0;
    font-weight: 400;
}

.dashboard .bento-save-account-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    background-color: var(--dashboard-warning-background);
    border: 1px solid var(--dashboard-warning-border);
    border-radius: 8px;
    color: var(--dashboard-warning-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .dashboard .bento-save-account-warning:hover {
        background-color: var(--dashboard-warning-hover-bg);
        border-color: var(--dashboard-warning-hover-border);
        color: var(--dashboard-warning-hover-text);
    }
}

.dashboard .bento-save-account-warning svg {
    flex-shrink: 0;
    color: var(--dashboard-warning-icon);
}

@media (hover: hover) {
    .dashboard .bento-save-account-warning:hover svg {
        color: var(--dashboard-warning-hover-border);
    }
}

/* Recent Apps Card - Rectangle (surface matches blue header icon) */
.dashboard .bento-recent {
    min-height: 310px;
    display: flex;
    flex-direction: column;
}

.dashboard .bento-card-header {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard .bento-card-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dashboard-text-card-title);
    letter-spacing: -0.01em;
}

/* Fancy header with icon */
.dashboard .bento-card-fancy-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--dashboard-shadow-light);
    text-decoration: none;
    color: inherit;
}

.dashboard .bento-recent > .bento-card-fancy-header {
    background-color: var(--dashboard-bento-apps-header-bg);
}

.dashboard .bento-usage > .bento-card-fancy-header {
    background-color: var(--dashboard-bento-usage-header-bg);
}

.dashboard .bento-card-fancy-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard .bento-card-fancy-icon svg {
    width: 28px;
    height: 28px;
}

.dashboard .bento-card-fancy-icon-apps {
    background-color: var(--dashboard-bento-apps-icon-bg);
    color: #fff;
}

.dashboard .bento-card-fancy-icon-usage {
    background-color: var(--dashboard-bento-usage-icon-bg);
    color: #fff;
}

.dashboard .bento-card-fancy-icon-desktop {
    background-color: var(--dashboard-bento-desktop-icon-bg);
    color: #fff;
}

.dashboard .bento-card-fancy-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard .bento-card-fancy-text h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    letter-spacing: -0.02em;
}

.dashboard .bento-card-fancy-subtitle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--dashboard-text-hint);
}

.dashboard .bento-card-fancy-subtitle svg {
    width: 14px;
    height: 14px;
}

.dashboard .bento-view-more {
    font-size: 13px;
    color: var(--dashboard-link);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .dashboard .bento-view-more:hover {
        color: var(--dashboard-link-hover);
        text-decoration: underline;
    }
}

.dashboard .bento-recent-apps-container {
    flex: 1;
    padding: 16px 24px 24px;
}

.dashboard .bento-recent-apps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

/* Hide apps beyond 6 on smaller screens */
.dashboard .bento-recent-app:nth-child(n+7) {
    display: none;
}

/* Show all 8 apps on 4K UHD screens */
@media (min-width: 2560px) {
    .dashboard .bento-recent-apps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard .bento-recent-app:nth-child(n+7) {
        display: flex;
    }
}

.dashboard .bento-recent-app {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    transition: transform 0.15s ease;
    gap: 12px;
    width: 200px;
}

@media (hover: hover) {
    .dashboard .bento-recent-app:hover {
        transform: scale(1.02);
    }
}

.dashboard .bento-recent-app:active {
    transform: scale(0.98);
}

.dashboard .bento-recent-app-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.dashboard .bento-recent-app-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--dashboard-text);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Empty state for recent apps */
.dashboard .bento-recent-apps-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    height: 180px;
    text-align: center;
    color: var(--dashboard-icon);
}

.dashboard .bento-recent-apps-empty svg {
    width: 48px;
    height: 48px;
    stroke: var(--dashboard-border);
    margin-bottom: 16px;
}

.dashboard .bento-recent-apps-empty p {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
}

.dashboard .bento-recent-apps-empty span {
    font-size: 13px;
    color: var(--dashboard-text-tertiary);
}

/* Open Desktop bento card (full width; links to the desktop interface) */
.dashboard .bento-desktop {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background-color: var(--dashboard-bento-desktop-header-bg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease;
}

@media (hover: hover) {
    .dashboard .bento-desktop:hover {
        box-shadow:
            0 2px 4px var(--dashboard-shadow-subtle),
            0 10px 28px var(--dashboard-bento-desktop-icon-shadow);
    }

    .dashboard .bento-desktop:hover .bento-desktop-arrow {
        transform: translateX(3px);
        color: var(--dashboard-text-primary);
    }
}

.dashboard .bento-desktop-arrow {
    margin-left: auto;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--dashboard-text-hint);
    transition: transform 0.15s ease, color 0.15s ease;
}

/* Usage bento card (cool indigo surfaces; orange bars stay as progress accent) */
.dashboard .bento-usage {
    grid-column: 1 / -1;
    min-height: auto;
}

.dashboard .bento-usage-container {
    padding: 16px 24px 24px;
}

.dashboard .bento-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

/* Three even columns need real width. Below that the plan column lands around
   230px, which wraps its badge and renewal notice into a tall ribbon — so give
   the plan its own row and let the two usage meters share the next one. */
@media (max-width: 1200px) {
    .dashboard .bento-usage-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard .bento-plan-section {
        grid-column: 1 / -1;
    }
}

.dashboard .bento-usage-section {
    display: flex;
    flex-direction: column;
}

/* Your Plan section styles */
.dashboard .bento-plan-section {
    justify-content: flex-start;
}

.dashboard .bento-plan-info {
    flex-grow: 1;
}

.dashboard .bento-plan-badge {
    font-weight: 400;
}

.dashboard .bento-plan-badge.active {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dashboard-success-text);
    background: var(--dashboard-success-background);
    border: 1px solid var(--dashboard-success-border);
}

.dashboard .bento-plan-badge.past-due {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dashboard-danger-text);
    background: var(--dashboard-danger-background);
    border: 1px solid var(--dashboard-danger-border);
}

.dashboard .bento-plan-badge.trial {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dashboard-notice-text);
    background: var(--dashboard-notice-background);
    border: 1px solid var(--dashboard-notice-border);
}

.dashboard .bento-plan-warning {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--dashboard-danger-text);
    background: var(--dashboard-danger-background);
    border: 1px solid var(--dashboard-danger-border);
    font-size: 12px;
    line-height: 1.4;
}

/* Time-boxed but not broken — a trial notice reads as advisory, not as the
   red dunning banner and not as an amber warning either. */
.dashboard .bento-plan-warning.info {
    color: var(--dashboard-notice-text);
    background: var(--dashboard-notice-background);
    border-color: var(--dashboard-notice-border);
}

.dashboard .bento-plan-upgrade {
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-link);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .dashboard .bento-plan-upgrade:hover {
        color: var(--dashboard-link-hover);
        text-decoration: underline;
    }
}

.dashboard .bento-usage-section-header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 8px;
}

.dashboard .bento-usage-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
    flex-grow: 1;
}

.dashboard .bento-usage-section-values {
    font-size: 13px;
    color: var(--dashboard-text-primary);
    opacity: 0.85;
}

/* New card-based usage styles */
.dashboard .bento-usage-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard .bento-usage-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .dashboard .bento-usage-card-header:hover {
        opacity: 0.7;
    }
}

.dashboard .bento-usage-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
}

.dashboard .bento-usage-card-arrow {
    font-size: 18px;
    font-weight: 300;
    color: var(--dashboard-text-hint);
    line-height: 1;
}

.dashboard .bento-usage-card-bar-wrapper {
    width: 100%;
    height: 14px;
    background-color: var(--dashboard-usage-bar-background);
    border-radius: 7px;
    overflow: hidden;
}

.dashboard .bento-usage-card-bar {
    height: 100%;
    background-color: var(--dashboard-bento-usage-bar-fill);
    border-radius: 7px;
    width: 0;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.dashboard .bento-usage-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard .bento-usage-card-used {
    font-size: 20px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.dashboard .bento-usage-card-details {
    font-size: 14px;
    color: var(--dashboard-text-hint);
}

/* Legacy bar styles (kept for compatibility) */
.dashboard .bento-usage-bar-wrapper {
    width: 100%;
    height: 20px;
    border: 1px solid var(--dashboard-border);
    border-radius: 3px;
    background-color: var(--dashboard-card-background);
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard .bento-usage-bar {
    height: 20px;
    background-color: var(--dashboard-legacy-bar-mid);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 0;
    transition: width 0.3s ease;
}

/* Responsive bento layout */
@media (max-width: 768px) {
    .dashboard .bento-container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
    }

    .dashboard .bento-welcome {
        aspect-ratio: auto;
        min-height: 180px;
    }

    .dashboard .bento-welcome-inner {
        padding: 20px;
    }

    .dashboard .bento-username {
        font-size: 24px;
    }

    .dashboard .bento-welcome-avatar {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
        border-width: 2px;
    }

    .dashboard .bento-recent-apps-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dashboard .bento-recent-app {
        padding: 6px 0;
    }

    .dashboard .bento-recent-app-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard .bento-recent-app-title {
        font-size: 12px;
    }

    .driver-usage-header {
        flex-direction: column;
    }

    .dashboard .bento-usage-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dashboard .bento-usage-container {
        padding: 16px 20px 20px;
    }

    .dashboard .bento-usage-card-header h3 {
        font-size: 15px;
    }

    .dashboard .bento-usage-card-arrow {
        font-size: 17px;
    }

    .dashboard .bento-usage-card-used {
        font-size: 18px;
    }

    .dashboard .bento-usage-card-details {
        font-size: 13px;
    }

    .dashboard .bento-card-fancy-header {
        padding: 16px 20px;
        gap: 12px;
    }

    .dashboard .bento-desktop {
        padding: 16px 20px;
        gap: 12px;
    }

    .dashboard .bento-card-fancy-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .dashboard .bento-card-fancy-icon svg {
        width: 22px;
        height: 22px;
    }

    .dashboard .bento-card-fancy-text h2 {
        font-size: 17px;
    }

    .dashboard .bento-card-fancy-subtitle {
        font-size: 12px;
    }
}

/* ============================================== */
/* Dashboard Account Tab                          */
/* ============================================== */

.dashboard-tab-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 8px 0;
}

.dashboard-section-header {
    margin-bottom: 28px;
}

.dashboard-section-header h2 {
    margin: 0 0 6px 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    letter-spacing: -0.02em;
}

.dashboard-section-header p {
    margin: 0;
    font-size: 15px;
    color: var(--dashboard-text-hint);
}

.dashboard-card {
    background: var(--dashboard-card-background);
    border-radius: 16px;
    border: 1px solid var(--dashboard-shadow-light);
}

/* Profile card */
.dashboard-profile-card {
    padding: 32px;
    margin-bottom: 24px;
    background:
        radial-gradient(circle at 100% 0%, var(--dashboard-gradient-purple) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.04) 0%, transparent 40%),
        var(--dashboard-card-background);
}

.dashboard-profile-picture-section {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dashboard-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--dashboard-card-gradient-end);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 16px var(--dashboard-shadow-medium);
}

@media (hover: hover) {
    .dashboard-profile-avatar:hover {
        transform: scale(1.05);
    }
}

.dashboard-profile-avatar-overlay {
    position: absolute;
    inset: 0;
    background: var(--dashboard-shadow-overlay);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .dashboard-profile-avatar:hover .dashboard-profile-avatar-overlay {
        opacity: 1;
    }
}

.dashboard-profile-avatar-overlay svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-profile-info h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.dashboard-profile-info p {
    margin: 0;
    font-size: 14px;
    color: var(--dashboard-text-hint);
}

.dashboard-profile-hint {
    font-size: 12px;
    color: var(--dashboard-text-muted);
    margin-top: 4px;
}

/* Settings grid */
.dashboard-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.dashboard-settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 16px;
}

.dashboard-settings-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.dashboard-settings-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--dashboard-card-gradient-start) 0%, var(--dashboard-card-gradient-end) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-settings-card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--dashboard-text-secondary);
}

.dashboard-settings-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashboard-settings-card-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.dashboard-settings-card-info span {
    font-size: 14px;
    color: var(--dashboard-text-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-settings-card .button {
    flex-shrink: 0;
    color: var(--dashboard-text-primary);
    background: var(--dashboard-card-background);
    border-color: var(--dashboard-border);
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dashboard-settings-card .button:hover {
    background: var(--dashboard-sidebar-background);
}

.dashboard-settings-card .button:focus-visible {
    border-color: var(--select-color);
    box-shadow: 0 0 0 3px var(--select-ring);
}

.dashboard-settings-card .button:active {
    background: var(--dashboard-hover);
    border-color: var(--dashboard-border);
    color: var(--dashboard-text-primary);
    box-shadow: none;
}

/* Base .button:disabled hard-codes light greys with !important, which
   clashes with this outline style and glares in dark mode. */
.dashboard-settings-card .button:disabled {
    background: var(--dashboard-card-background) !important;
    border-color: var(--dashboard-border) !important;
    color: var(--dashboard-text-muted) !important;
    text-shadow: none !important;
}

.dashboard-settings-card-success {
    border-color: var(--dashboard-success-border);
    background: var(--dashboard-success-background);
}

.dashboard-settings-card-success .dashboard-settings-card-info span {
    color: var(--dashboard-success-text);
}

.dashboard-settings-card-warning {
    border-color: var(--dashboard-warning-border);
    background: var(--dashboard-warning-background);
}

.dashboard-settings-card-warning .dashboard-settings-card-info span {
    color: var(--dashboard-warning-text);
}

/* Toggle switch */
.dashboard-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}

.dashboard-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.dashboard-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--dashboard-border);
    transition: background-color 0.2s ease;
    border-radius: 24px;
}

.dashboard-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.dashboard-switch input:checked + .dashboard-switch-slider {
    background-color: var(--dashboard-success-border);
}

.dashboard-switch input:checked + .dashboard-switch-slider::before {
    transform: translateX(20px);
}

.dashboard-switch input:focus-visible + .dashboard-switch-slider {
    outline: 2px solid var(--select-color);
    outline-offset: 2px;
}

.dashboard-switch input:disabled + .dashboard-switch-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

.dashboard-switch.dashboard-switch-pending input + .dashboard-switch-slider {
    background-color: #b0b0b0;
}

.dashboard-switch.dashboard-switch-pending input + .dashboard-switch-slider::before {
    transform: translateX(10px);
}

/* Danger zone */
.dashboard-danger-zone {
    padding-top: 24px;
}

.dashboard-danger-zone h3 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-danger-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-danger-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 24px;
    border-color: var(--dashboard-danger-border);
    background: linear-gradient(135deg, var(--dashboard-danger-background) 0%, var(--dashboard-card-background) 100%);
}

.dashboard-danger-card-content {
    flex: 1;
    min-width: 0;
}

.dashboard-danger-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-danger-card-info strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--dashboard-danger-text);
}

.dashboard-danger-card-info span {
    font-size: 13px;
    color: var(--dashboard-text-hint);
    line-height: 1.5;
}

/* Responsive styles for Account tab */
@media (max-width: 768px) {
    .dashboard-tab-content {
        padding: 0 16px;
    }

    .dashboard-section-header h2 {
        font-size: 22px;
    }

    .dashboard-profile-card {
        padding: 24px;
    }

    .dashboard-profile-picture-section {
        flex-direction: column;
        text-align: center;
    }

    .dashboard-profile-info {
        align-items: center;
    }

    .dashboard-settings-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px 20px;
    }

    .dashboard-settings-card .button {
        width: 100%;
    }

    .dashboard-danger-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .dashboard-danger-card .button {
        width: 100%;
    }

}

/* ======================================
   Mobile Context Menu Modal
   ====================================== */

/* Backdrop - full screen overlay */
.context-menu-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dashboard-shadow-overlay, rgba(0, 0, 0, 0.5));
    z-index: 1000;
    opacity: 0;
    z-index: 9999999;
    transition: opacity 200ms ease-in-out;
    -webkit-user-select: none;
    user-select: none;
}

.context-menu-modal-backdrop.show {
    opacity: 1;
}

/* Modal dialog - positioned over item */
.context-menu-modal-dialog {
    position: fixed;
    background: var(--dashboard-card-background, #ffffff);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 2rem var(--dashboard-shadow-medium, rgba(0, 0, 0, 0.1));
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.context-menu-modal-backdrop.show .context-menu-modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Title shown at top of context menu (e.g. filename) */
.context-menu-modal-dialog .context-menu-title {
    padding: 10px 14px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dashboard-text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--dashboard-border, #e0e0e0);
    flex-shrink: 0;
}

/* Menu items container */
.context-menu-modal-dialog .context-menu-items {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-y: auto;
}

/* Individual menu item */
.context-menu-modal-dialog .context-menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 150ms ease-in-out;
    font-family: inherit;
}

.context-menu-modal-dialog .context-menu-item:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .context-menu-modal-dialog .context-menu-item:hover {
        background-color: var(--dashboard-hover, #e8e8e8);
    }
}

.context-menu-modal-dialog .context-menu-item:active {
    background-color: var(--dashboard-hover, #e8e8e8);
}

/* Menu item icon */
.context-menu-modal-dialog .context-menu-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.context-menu-modal-dialog .context-menu-item-icon img {
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.context-menu-modal-dialog .context-menu-item-icon svg {
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

/* Most img icons in these menus are full-color (app icons in Open With,
   file-type icons in New) and must keep their colors in dark mode — only
   monochrome dark glyphs opt in to inversion via .ctx-item-icon-monochrome. */
@media (prefers-color-scheme: dark) {
    .context-menu-modal-dialog .context-menu-item-icon img.ctx-item-icon-monochrome {
        filter: invert(1);
    }
}

@media (hover: hover) {
    .context-menu-modal-dialog .context-menu-item:hover .context-menu-item-icon img,
    .context-menu-modal-dialog .context-menu-item:hover .context-menu-item-icon svg {
        opacity: 1;
    }
}

/* Menu item label */
.context-menu-modal-dialog .context-menu-item-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dashboard-text, #444);
}

/* Separator */
.context-menu-modal-dialog .context-menu-separator {
    height: 1px;
    background-color: var(--dashboard-border, #e0e0e0);
    margin: 0.25rem 0;
}

/* Delete item - special styling */
.context-menu-modal-dialog .context-menu-item--delete .context-menu-item-label {
    color: var(--dashboard-danger-text, #dc2626);
}

.context-menu-modal-dialog .context-menu-item--delete .context-menu-item-icon img,
.context-menu-modal-dialog .context-menu-item--delete .context-menu-item-icon svg {
    opacity: 0.8;
}

/* Disabled item - inert and dimmed (mirrors the desktop context menu) */
.context-menu-modal-dialog .context-menu-item--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Submenu chevron, pushed to the trailing edge */
.context-menu-modal-dialog .context-menu-item-chevron {
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--dashboard-text-muted, #94a3b8);
    font-size: 1rem;
}

/* Desktop - transparent backdrop. Written as the exact complement of the
   mobile rules (all keyed to max-width: 768px) so that no viewport width —
   not even a fractional one from browser zoom / DPR scaling — gets desktop
   styling with the mobile dimming, or vice versa. (min-width: 769px would
   leave widths strictly between 768px and 769px uncovered.) */
@media not all and (max-width: 768px) {
    .context-menu-modal-backdrop {
        background-color: transparent;
    }
}

/* ======================================
   Files Loading Spinner
   ====================================== */

.files-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: var(--dashboard-background); */
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    opacity: 0;
    transition: opacity 2s ease-in;
}

.files-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: var(--dashboard-background);
    border-radius: 10px;
    padding: 20px;
    min-width: 120px;
}

.files-loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--dashboard-border);
    border-top: 5px solid var(--select-color);
    border-radius: 50%;
    animation: files-loading-spin 1s linear infinite;
    margin-bottom: 10px;
}

.files-loading-text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    color: var(--dashboard-text);
}

@keyframes files-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.context-menu .context-menu-item:not(.context-menu-divider) {
    display: flex;
    align-items: center;
}

.submenu-arrow {
    margin-left: auto;
}

/* Dashboard mode runs fullpage (which normally hides the minimize button
   because there's no taskbar to restore from), but here a minimized app can
   be brought back from its Apps-tab tile — so keep the button available. */
body.dashboard-mode .window-minimize-btn {
    display: inline;
}

/* Fullpage mode sizes .window-body-app to 100% because fullpage windows have
   no titlebar — but dashboard-mode app windows WITH a head still lose 29px to
   it, so compensate for those. Headless dashboard app windows
   (.window-dashboard-headless — the maximized in-page apps, whose controls
   live in the top-edge control drawer) get the full height. */
body.dashboard-mode .window:not(.window-dashboard-headless) .window-body-app {
    height: calc(100% - 29px) !important;
}

body.dashboard-mode .window-dashboard-headless .window-body-app {
    height: 100% !important;
}

/* ==========================================================================
   Dashboard app drawer — controls for headless in-page app windows. One
   glass surface flush with the top edge that MORPHS between two shapes:
   at rest a small tongue (a grabber bar peeking in from the edge);
   opened, the same surface swells into a tray carrying icon + title +
   minimize + close while the grabber bar dissolves — the open tray is
   clean glass, and a bare strip along its bottom edge stays behind as
   the dismiss hit area; shutting condenses the bar back into the
   settling tongue. Hover (mouse), tap, or keyboard focus opens it (see
   attach_dashboard_app_drawer in UIWindow.js). A child of the window element (so it shows/hides/scales
   with it), painted above the app's iframe. Dark translucent glass on
   every theme: it overlays arbitrary app content, not the dashboard's
   surfaces.

   The base rules below describe the OPEN shape; .collapsed overrides to
   the tongue. Each state carries its own transition, so opening gets a
   soft overshoot (the tongue swells past the tray and settles) while
   closing is quicker and lands without bounce.
   ========================================================================== */

.dashboard-app-drawer {
    /* The morph's two shapes. --open-w is DERIVED from the part sizes —
       the controls row is laid out with the same variables, so the open
       surface always fits its content exactly and breakpoints only
       override parts. --safe-top keeps content below a notch in
       standalone/fullscreen display modes while the surface stays flush
       with the physical edge. */
    --safe-top: env(safe-area-inset-top, 0px);
    --icon: 20px;
    --btn: 26px;
    --title-w: 150px;
    --i2t: 8px;   /* icon → title gap */
    --t2b: 6px;   /* title → buttons gap */
    --controls-h: 40px;
    /* With no visible handle when open, the tray hugs the controls row:
       --open-h leaves just enough glass below the buttons to balance the
       padding above them (plus ~2px the bottom corner radius eats
       optically). The bare dismiss strip fills exactly that leftover —
       it must never rise past the buttons' bottom edge at
       (controls-h + btn)/2, because the toggle stacks OVER the controls
       layer and would steal their clicks. */
    --strip-h: 9px;
    --open-w: calc(12px + var(--icon) + var(--i2t) + var(--title-w) + var(--t2b) + var(--btn) + 2px + var(--btn) + 10px);
    --open-h: 42px;
    --shut-w: 56px;
    --shut-h: 16px;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    width: var(--open-w);
    height: calc(var(--open-h) + var(--safe-top));
    border-radius: 0 0 16px 16px;
    background: rgba(24, 24, 28, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    transition:
        width 0.45s cubic-bezier(0.34, 1.2, 0.4, 1),
        height 0.45s cubic-bezier(0.34, 1.2, 0.4, 1),
        border-radius 0.45s ease,
        opacity 0.2s ease;
}

/* An opted-in app carries a third control (feedback) before minimize; widen
   the derived open surface by one button + its 2px gap so the trailing close
   button isn't clipped. --open-w stays derived from the same parts. */
.dashboard-app-drawer.has-feedback {
    --open-w: calc(12px + var(--icon) + var(--i2t) + var(--title-w) + var(--t2b) + var(--btn) + 2px + var(--btn) + 2px + var(--btn) + 10px);
}

.dashboard-app-drawer.collapsed {
    width: var(--shut-w);
    height: calc(var(--shut-h) + var(--safe-top));
    border-radius: 0 0 12px 12px;
    /* Subtle but findable over both light and dark app content — the
       white hairline border carries the dark-on-dark case. */
    opacity: 0.7;
    transition:
        width 0.3s cubic-bezier(0.5, 0.05, 0.25, 1),
        height 0.3s cubic-bezier(0.5, 0.05, 0.25, 1),
        border-radius 0.3s ease,
        opacity 0.2s ease 0.08s;
}

/* Clipping window for the controls. The surface itself can't be
   overflow:hidden — that would clip the toggle's invisible touch halo —
   so an inner layer inherits the rounded shape and does the clipping:
   mid-morph, the growing surface reveals the controls from the center
   outward instead of letting them spill past the glass. */
.dashboard-app-drawer-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* The controls row is a FIXED-size layer centered on the surface: it
   never reflows during the morph, the glass just grows around it. */
.dashboard-app-drawer-controls {
    position: absolute;
    top: var(--safe-top);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: var(--open-w);
    height: var(--controls-h);
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    transition:
        opacity 0.25s ease 0.1s,
        filter 0.25s ease 0.1s,
        transform 0.45s cubic-bezier(0.34, 1.2, 0.4, 1);
}

/* Shut, the controls condense out of focus — fade + blur + slight
   shrink — and visibility (flipped AFTER the morph, hence the delay;
   removing the class restores it instantly) drops the buttons out of
   the Tab order and the accessibility tree. */
.dashboard-app-drawer.collapsed .dashboard-app-drawer-controls {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%) scale(0.82);
    visibility: hidden;
    transition:
        opacity 0.12s ease,
        filter 0.12s ease,
        transform 0.3s cubic-bezier(0.5, 0.05, 0.25, 1),
        visibility 0s linear 0.3s;
}

/* The grabber toggle: fills the tongue when shut; open, it settles into
   a slim strip along the tray's bottom edge — same dismiss hit area,
   but the bar inside it hides (below), so the open tray shows no
   handle. Absolutely positioned, so its DOM position (first, for Tab
   order) doesn't affect the visuals. */
.dashboard-app-drawer-toggle {
    position: absolute;
    inset: calc(var(--safe-top) + var(--open-h) - var(--strip-h)) 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: inset 0.45s cubic-bezier(0.34, 1.2, 0.4, 1);
}

.dashboard-app-drawer.collapsed .dashboard-app-drawer-toggle {
    inset: var(--safe-top) 0 0 0;
    transition: inset 0.3s cubic-bezier(0.5, 0.05, 0.25, 1);
}

/* Invisible halo: keeps the tongue comfortably hittable and hoverable
   without costing more visual space. A pseudo-element OF the button, so
   hits on it are hits on the button — no stacking games needed. (Clicks
   it absorbs would have hit the app within ~14px of the tongue —
   acceptable dead zone.) */
.dashboard-app-drawer-toggle::after {
    content: '';
    position: absolute;
    inset: 0 -14px -14px;
}

/* Open, the bar is GONE (base = open shape): it dissolves in the first
   beat of the swell — stretching a touch as it goes, absorbed into the
   widening glass — before the controls bloom at 0.1s, one handing off
   to the other. On collapse it condenses back in: the delay below skips
   the controls' 0.12s fade-out so the bar never materializes mid-tray,
   then it fades up while riding the shrinking toggle home, landing with
   the tongue (0.14s + 0.18s ≈ the 0.3s shut morph). */
.dashboard-app-drawer-grabber {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: width 0.3s ease, background-color 0.15s ease, opacity 0.12s ease;
}

.dashboard-app-drawer.collapsed .dashboard-app-drawer-grabber {
    width: 20px;
    background: rgba(255, 255, 255, 0.78);
    opacity: 1;
    transition: width 0.3s ease, background-color 0.15s ease, opacity 0.18s ease 0.14s;
}

@media (hover: hover) {
    .dashboard-app-drawer-toggle:hover .dashboard-app-drawer-grabber {
        background: rgba(255, 255, 255, 0.95);
    }
}

.dashboard-app-drawer-icon {
    /* Sized to balance the buttons and the tray; radius stays 25% of the
       icon for the app-icon look. Square icons only — cover guards
       against a non-square one. */
    width: var(--icon);
    height: var(--icon);
    border-radius: 5px;
    object-fit: cover;
    display: block;
    flex: none;
    margin-right: var(--i2t);
}

.dashboard-app-drawer-title {
    font-size: 12px;
    font-weight: 500;
    /* Roomy enough for descenders: overflow:hidden (needed for the
       ellipsis) clips vertically too, so a line-height of 1 cut the
       tails off g/p/y. The flex container centers the taller box. */
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* FIXED title box (not a cap): every app's tray is the same width, so
       the minimize/close buttons sit at the same screen position in every
       app — they're operated by muscle memory. Left-aligned against the
       icon: the tray is asymmetric (one icon left, two buttons right), so
       a centered title lands off the tray's true center and reads as
       misaligned against the centered tongue below. Icon + title cluster
       as the identity on the left, controls cluster on the right. */
    flex: none;
    width: var(--title-w);
    text-align: left;
    margin-right: var(--t2b);
}

.dashboard-app-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn);
    height: var(--btn);
    flex: none;
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    /* The clip layer is pointer-events:none so stray clicks fall through
       to the surface; the buttons opt back in. */
    pointer-events: auto;
    transition: background-color 0.12s ease;
}

.dashboard-app-drawer-feedback,
.dashboard-app-drawer-minimize {
    margin-right: 2px;
}

.dashboard-app-drawer-btn svg {
    width: 14px;
    height: 14px;
    flex: none;
}

@media (hover: hover) {
    .dashboard-app-drawer-btn:hover {
        background-color: rgba(255, 255, 255, 0.16);
    }
}

.dashboard-app-drawer-btn:active {
    background-color: rgba(255, 255, 255, 0.26);
}

.dashboard-app-drawer-toggle:focus-visible,
.dashboard-app-drawer-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 1px;
}

/* Touch: a taller tray with 36px buttons, and a bigger tongue whose halo
   brings the effective target to ~44px. */
@media (pointer: coarse) {
    .dashboard-app-drawer {
        --btn: 36px;
        --controls-h: 48px;
        --strip-h: 8px;
        --open-h: 50px;
        --shut-w: 68px;
        --shut-h: 20px;
    }

    .dashboard-app-drawer-grabber {
        width: 28px;
        height: 4px;
    }

    .dashboard-app-drawer.collapsed .dashboard-app-drawer-grabber {
        width: 24px;
    }

    .dashboard-app-drawer-toggle::after {
        inset: 0 -16px -18px;
    }
}

/* Tight screens: identity shrinks to the icon; the controls keep their
   size — they're the part that must stay usable. Zeroing the title
   variables shrinks --open-w to match. */
@media (max-width: 500px) {
    .dashboard-app-drawer {
        --title-w: 0px;
        --t2b: 0px;
    }

    .dashboard-app-drawer-title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-app-drawer,
    .dashboard-app-drawer * {
        transition: none !important;
    }
}

/* Running dot: marks Apps-tab tiles whose app has a live window (visible or
   minimized), macOS-dock style — sits centered in the gap between the 56px
   icon and the label. Kept/removed by updateRunningDots in TabApps.js. */
.myapps-tile {
    position: relative;
}

.myapps-tile-running::after {
    content: '';
    position: absolute;
    /* 4px under the 56px icon at rest — enough that the icon's 1.08x
       hover scale (bottom edge grows ~2px downward) never touches it.
       The label sits lower to make the room (see .myapps-tile-label). */
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dashboard-text-tertiary, #71717a);
}