/* ============================================================
   Mylo — Metro / WP7 stylesheet (polished pass)
   Drop-in replacement: every original class name is preserved.
   Changes are grouped and commented; search "POLISH:" to audit.
   ============================================================ */

@font-face {
    font-family: 'Frutiger';
    src: url('https://cinemint.online/static/fonts/Frutiger.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* POLISH: no invisible-text flash on slow mobile networks */
}

@font-face {
    font-family: 'Frutiger';
    src: url('https://cinemint.online/static/fonts/Frutiger_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Mapped to classic WP7 Cyan accent to keep variable functionality intact */
    --gplus-red: #1BA1E2;
    --gplus-red-hover: #1686bd;

    /* POLISH: light mode is now slightly translucent so the wallpaper
       reads in BOTH themes (previously only dark mode showed it). */
    --gplus-bg: rgba(255, 255, 255, 0.88);
    --gplus-card-bg: rgba(255, 255, 255, 0.90);
    --gplus-text: #000000;
    --gplus-text-secondary: #595959;
    /* POLISH: was #666 — now passes WCAG AA on white */
    --gplus-border: #CCCCCC;
    --gplus-sidebar-bg: rgba(255, 255, 255, 0.94);
    --gplus-sidebar-hover: #E6E6E6;
    --gplus-input-bg: #F2F2F2;

    /* POLISH: shared knobs so mobile can tune them in one place */
    --metro-blur: 14px;
    --focus-ring: 2px solid var(--gplus-red);
}

/* POLISH: single consolidated dark-mode block (the original had two
   competing body.dark-mode blocks; the second silently overrode the first). */
body.dark-mode {
    --gplus-bg: rgba(0, 0, 0, 0.85);
    --gplus-card-bg: rgba(20, 20, 20, 0.70);
    --gplus-text: #FFFFFF;
    --gplus-text-secondary: #A6A6A6;
    --gplus-border: #333333;
    --gplus-sidebar-bg: rgba(10, 10, 10, 0.80);
    --gplus-sidebar-hover: #1A1A1A;
    --gplus-input-bg: rgba(40, 40, 40, 0.60);
}

/* ============================================================
   Custom Modern Scrollbars (Metro/Accent matched)
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gplus-text-secondary) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gplus-text-secondary);
    border-radius: 0;
    /* Square edges for the Metro feel */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gplus-red);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   Global Layout & Resets
   ============================================================ */

html {
    scrollbar-gutter: stable;
    /* POLISH: `clip` prevents horizontal spill from the turnstile animation
       WITHOUT creating a scroll container — `overflow: hidden` on ancestors
       is what was breaking position:sticky (the mobile topbar). The first
       line is a fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    /* POLISH: stop iOS landscape font inflation */
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    /* POLISH: kill the grey tap flash */
}

img,
video {
    max-width: 100%;
    /* POLISH: media can never force horizontal scroll */
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

button,
a,
.tab,
.nav-item,
.channel-item,
.poll-option {
    touch-action: manipulation;
    /* POLISH: removes double-tap zoom delay on controls */
}

/* POLISH: visible keyboard focus, Metro-styled (square, accent) —
   only for keyboard users, so mouse/touch stays clean. */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

::selection {
    background: var(--gplus-red);
    color: #fff;
}

:root {
    accent-color: var(--gplus-red);
    /* POLISH: native checkboxes/selects match theme */
}

body {
    font-family: 'Frutiger', 'Segoe UI', Arial, sans-serif;
    background-color: var(--gplus-bg);
    color: var(--gplus-text);
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--gplus-red);
    text-decoration: none;
}

/* ============================================================
   Background wallpaper layer
   ============================================================ */

/* 1. Grain texture in dark mode */
body.dark-mode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Blurred background layer — sits behind everything.
   POLISH: restored the actual blur. The -10px overscan + calc(+20px)
   sizing only exists to hide blur edge-bleed, but no filter was ever
   applied, so the wallpaper rendered sharp. translateZ(0) promotes it
   to its own compositor layer so the blur is paid once, not per-scroll. */
body::after {
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-image: var(--body-bg-image, none);
    background-size: cover;
    background-position: center center;
    filter: blur(10px);
    transform: translateZ(0);
    z-index: -2;
    pointer-events: none;
}

/* Tile mode: no blur, no overscale */
body.bg-tile::after {
    background-size: auto;
    background-repeat: repeat;
    filter: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   Frosted surfaces
   POLISH: consolidated into one place. On desktop, chrome (sidebar,
   topbar, modals, overlays) gets the frosted treatment. Feed cards
   deliberately do NOT backdrop-blur — dozens of stacked blur regions
   was the single biggest scroll-jank source on mobile. Cards instead
   use their (slightly more opaque) rgba fill, which reads nearly
   identically over the already-blurred wallpaper.
   ============================================================ */

.sidebar,
.topbar,
.search-overlay,
.modal,
.mention-menu,
.channel-rail {
    backdrop-filter: blur(var(--metro-blur));
    -webkit-backdrop-filter: blur(var(--metro-blur));
}

/* POLISH: fallback for browsers without backdrop-filter —
   go more opaque so text stays legible over the wallpaper. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.dark-mode {
        --gplus-card-bg: rgba(15, 15, 15, 0.96);
        --gplus-sidebar-bg: rgba(8, 8, 8, 0.97);
    }

    :root {
        --gplus-card-bg: rgba(255, 255, 255, 0.97);
        --gplus-sidebar-bg: rgba(255, 255, 255, 0.98);
    }
}

body .sidebar {
    background-color: var(--gplus-sidebar-bg);
}

body.dark-mode .topbar {
    background-color: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid rgba(51, 51, 51, 0.5);
}

body.dark-mode .card {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   App layout
   ============================================================ */

.app-container {
    display: flex;
    min-height: 100dvh;
    /* POLISH: dvh — vh misbehaves behind mobile URL bars */
    overflow-x: clip;
}

.sidebar {
    width: 256px;
    background-color: var(--gplus-sidebar-bg);
    border-right: 2px solid var(--gplus-border);
    position: fixed;
    height: 100dvh;
    transition: transform 0.3s;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.main-content {
    flex: 1;
    margin-left: 256px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: clip;
    /* Contains the Turnstile animation overflow */
}

.material-symbols-outlined {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: min(300px, 84vw);
        /* POLISH: a touch wider, but never edge-to-edge */
        padding-left: env(safe-area-inset-left);
        will-change: transform;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    #menu-btn-mobile {
        display: flex !important;
    }
}

.topbar {
    display: none;
    height: 56px;
    /* POLISH: 64 → 56; reclaims vertical space on phones */
    background-color: var(--gplus-card-bg);
    border-bottom: 2px solid var(--gplus-border);
    align-items: center;
    padding: 0 8px;
    padding-top: env(safe-area-inset-top);
    /* POLISH: notch/Dynamic-Island clearance */
    position: sticky;
    top: 0;
    z-index: 50;
}

@media (max-width: 768px) {
    .topbar {
        display: flex;
    }
}

.search-bar {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-bar input {
    width: 100%;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 0;
    background-color: var(--gplus-input-bg);
    padding: 0 16px 0 44px;
    color: var(--gplus-text);
    font-size: 16px;
    /* POLISH: <16px inputs trigger iOS auto-zoom on focus */
    outline: none;
}

.search-bar input:focus {
    border-color: var(--gplus-red);
    background-color: var(--gplus-card-bg);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 8px;
    color: var(--gplus-text-secondary);
}

.sidebar-header {
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    /* POLISH: notch clearance */
    border-bottom: 2px solid var(--gplus-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
}

body.dark-mode .logo img {
    filter: invert(1);
}

body.dark-mode a {
    color: #4FC3F7;
}

body.dark-mode .post-content a,
body.dark-mode .msg-text a {
    color: #4FC3F7;
    font-weight: bold;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background-color: var(--gplus-red);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    min-height: 48px;
    /* POLISH: guaranteed touch target */
    padding: 12px 24px;
    color: var(--gplus-text-secondary);
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    gap: 16px;
    border-left: 6px solid transparent;
    position: relative;
    user-select: none;
}

.nav-item.active {
    color: var(--gplus-text);
    border-left-color: var(--gplus-red);
    background-color: var(--gplus-sidebar-hover);
}

.nav-badge {
    margin-left: auto;
    background: var(--gplus-red);
    color: #fff;
    border-radius: 0;
    font-size: 11px;
    padding: 2px 8px;
    min-width: 18px;
    text-align: center;
    font-weight: bold;
}

.sidebar-footer {
    border-top: 2px solid var(--gplus-border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.feed-container,
.wide-container {
    max-width: 600px;
    margin: 16px auto;
    width: 100%;
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.wide-container {
    max-width: 900px;
}

@media (max-width: 480px) {

    .feed-container,
    .wide-container {
        margin: 8px auto;
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
}

.dm-layout {
    display: flex;
    height: 100dvh;
}

@media (max-width: 768px) {
    .dm-layout {
        height: calc(100dvh - 56px - env(safe-area-inset-top));
    }
}

.dm-layout .chat-main {
    flex: 1;
}

.search-overlay {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    background: var(--gplus-card-bg);
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    box-shadow: none;
    z-index: 200;
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* POLISH: don't chain scroll to the page */
}

/* ============================================================
   Cards & posts
   ============================================================ */

.card {
    background-color: var(--gplus-card-bg);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 16px;
    overflow: hidden;
    border: 2px solid var(--gplus-border);
}

@media (max-width: 480px) {
    .card {
        margin-bottom: 10px;
    }
}

.card-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 0;
    object-fit: cover;
    background-color: var(--gplus-input-bg);
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: bold;
    color: var(--gplus-text);
    cursor: pointer;
}

.user-handle {
    color: var(--gplus-text-secondary);
    font-size: 13px;
}

.post-content {
    padding: 0 16px 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    /* POLISH: long unbroken URLs can't blow the layout */
}

.post-content a {
    color: var(--gplus-red);
}

.post-content code {
    background: var(--gplus-input-bg);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.9em;
}

.spoiler {
    background: var(--gplus-text);
    color: transparent;
    border-radius: 0;
    cursor: pointer;
}

.spoiler.revealed {
    background: var(--gplus-input-bg);
    color: var(--gplus-text);
}

.post-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 8px;
    padding: 0 16px 16px;
}

.post-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    background-color: var(--gplus-input-bg);
    cursor: pointer;
    border-radius: 0;
}

.post-images.single {
    grid-template-columns: 1fr;
}

.post-images.single img {
    aspect-ratio: 16/9;
}

.post-images.single video {
    width: 100%;
    max-height: 70dvh;
    object-fit: contain;
    background-color: var(--gplus-input-bg);
}

.reshare-box {
    margin: 0 16px 16px;
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    padding: 12px;
}

.card-actions {
    display: flex;
    justify-content: space-around;
    padding: 8px 8px;
    border-top: 2px solid var(--gplus-border);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gplus-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    min-height: 44px;
    /* POLISH: touch target */
    border-radius: 0;
    font-size: 14px;
}

.action-btn.active {
    color: var(--gplus-red);
}

/* ============================================================
   Compose
   ============================================================ */

.compose-box {
    padding: 16px;
    display: flex;
    gap: 12px;
}

.compose-input {
    flex: 1;
    background-color: var(--gplus-input-bg);
    border: 2px solid transparent;
    border-radius: 0;
    padding: 12px 16px;
    color: var(--gplus-text);
    font-size: 16px;
    /* POLISH: iOS zoom fix (was 14px) */
    outline: none;
    resize: none;
    min-height: 44px;
    font-family: inherit;
}

.compose-input:focus {
    border-color: var(--gplus-red);
    background-color: var(--gplus-card-bg);
}

.compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px 16px;
    gap: 8px;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    background-color: var(--gplus-text);
    color: var(--gplus-bg);
    border: 2px solid transparent;
    padding: 8px 16px;
    min-height: 40px;
    /* POLISH: consistent height, comfortable to tap */
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    text-transform: lowercase;
    user-select: none;
}

/* POLISH: --gplus-bg is now translucent; button text must stay solid */
.btn {
    color: #fff;
}

body:not(.dark-mode) .btn {
    background-color: #000;
}

body.dark-mode .btn {
    background-color: #fff;
    color: #000;
}

body.dark-mode .btn:hover,
.btn:hover {
    background-color: var(--gplus-red);
    color: #fff;
}

.btn:disabled {
    background-color: var(--gplus-border);
    color: var(--gplus-text-secondary);
    cursor: not-allowed;
}

.btn-outline {
    background-color: transparent !important;
    color: var(--gplus-text) !important;
    border: 2px solid var(--gplus-text);
}

.btn-outline:hover {
    background-color: var(--gplus-text) !important;
    color: var(--gplus-bg) !important;
}

.btn-danger {
    background-color: #E51400 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: #B00020 !important;
}

.btn-sm {
    padding: 5px 12px;
    min-height: 34px;
    font-size: 13px;
}

/* WP7 App Bar style FAB */
.fab {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    /* POLISH: clears home indicator */
    right: calc(24px + env(safe-area-inset-right));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--gplus-card-bg);
    color: var(--gplus-text);
    border: 2px solid var(--gplus-text);
    cursor: pointer;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 90;
    transition: all 0.2s;
    backdrop-filter: blur(var(--metro-blur));
    -webkit-backdrop-filter: blur(var(--metro-blur));
}

/* ============================================================
   Profile
   ============================================================ */

.profile-header {
    background-color: var(--gplus-card-bg);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 16px;
    border: 2px solid var(--gplus-border);
}

.banner {
    height: 200px;
    background-color: var(--gplus-input-bg);
    background-size: cover;
    background-position: center;
}

@media (max-width: 480px) {
    .banner {
        height: 130px;
        /* POLISH: proportionate on small screens */
    }
}

.profile-info {
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-top: -50px;
    flex-wrap: wrap;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 0;
    border: 4px solid var(--gplus-card-bg);
    object-fit: cover;
    background-color: var(--gplus-input-bg);
}

.profile-details {
    flex: 1;
    margin-bottom: 8px;
    min-width: 160px;
}

.profile-name {
    font-size: clamp(24px, 6vw, 32px);
    /* POLISH: fluid type, no wrap-crush on phones */
    font-weight: normal;
    text-transform: lowercase;
    overflow-wrap: anywhere;
}

.profile-stats {
    color: var(--gplus-text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.stat-link {
    cursor: pointer;
}

.stat-link:hover {
    color: var(--gplus-red);
}

/* ============================================================
   Comments
   ============================================================ */

.comment-section {
    padding: 16px;
    border-top: 2px solid var(--gplus-border);
    background-color: var(--gplus-card-bg);
}

.comment {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0;
    object-fit: cover;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-box {
    background-color: var(--gplus-input-bg);
    padding: 12px;
    border-radius: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* ============================================================
   Auth
   ============================================================ */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    /* POLISH: was 100vh — jumped behind mobile URL bar */
    background-color: var(--gplus-bg);
    background-size: cover;
    background-position: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.auth-card {
    background-color: var(--gplus-card-bg);
    padding: 40px;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 400px;
    border: 2px solid var(--gplus-border);
    backdrop-filter: blur(var(--metro-blur));
    -webkit-backdrop-filter: blur(var(--metro-blur));
}

@media (max-width: 480px) {
    .auth-card {
        padding: 24px 20px;
    }
}

.auth-title {
    text-align: left;
    margin-bottom: 24px;
    color: var(--gplus-text);
    font-weight: normal;
    font-size: 32px;
    text-transform: lowercase;
}

.form-group {
    margin-bottom: 16px;
}

.form-input {
    width: 100%;
    padding: 12px;
    min-height: 44px;
    /* POLISH: touch target */
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    background-color: var(--gplus-card-bg);
    color: var(--gplus-text);
    font-size: 16px;
    /* POLISH: iOS zoom fix (was 14px) */
    outline: none;
    font-family: inherit;
}

.form-input:focus {
    border-color: var(--gplus-red);
}

textarea.form-input {
    resize: vertical;
}

select.form-input {
    border-radius: 0;
    cursor: pointer;
}

.link-btn {
    background: none;
    border: none;
    color: var(--gplus-text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    /* POLISH: a little more tap area without moving layout */
    font-family: inherit;
    text-transform: lowercase;
}

.link-btn:hover {
    color: var(--gplus-red);
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gplus-text-secondary);
    padding: 8px;
    min-width: 40px;
    /* POLISH: real touch targets for every icon button */
    min-height: 40px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    border: 4px solid var(--gplus-border);
    border-top-color: var(--gplus-red);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   Settings
   ============================================================ */

.settings-row {
    padding: 16px;
    border-bottom: 2px solid var(--gplus-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-row:last-child {
    border-bottom: none;
    /* POLISH: no doubled rule against the card border */
}

/* WP7 Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    /* POLISH: slightly larger for touch */
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: .2s;
    border-radius: 0;
    border: 2px solid var(--gplus-text);
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--gplus-text);
    transition: .2s;
    border-radius: 0;
}

input:checked+.slider {
    background-color: var(--gplus-red);
    border-color: var(--gplus-red);
}

input:checked+.slider:before {
    background-color: #fff;
    transform: translateX(24px);
}

/* Keyboard focus on the hidden checkbox lights up the slider */
.toggle-switch input:focus-visible+.slider {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.mention {
    color: var(--gplus-red);
    font-weight: bold;
    cursor: pointer;
}

.channel-link {
    color: var(--gplus-red);
    font-weight: bold;
}

/* ============================================================
   Polls
   ============================================================ */

.poll-option {
    padding: 14px 16px;
    min-height: 48px;
    /* POLISH: touch target */
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.poll-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--gplus-red);
    opacity: 0.2;
    z-index: 0;
    transition: width .3s;
}

.poll-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Modal — bottom sheet on phones, centered dialog on desktop
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal {
    background: var(--gplus-card-bg);
    border-radius: 0;
    width: 100%;
    max-width: 480px;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 2px solid var(--gplus-border);
    box-shadow: none;
}

.modal-wide {
    max-width: 640px;
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 2px solid var(--gplus-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--gplus-card-bg);
    z-index: 2;
}

.modal-header h2,
.modal-header h3 {
    font-weight: normal;
    text-transform: lowercase;
    font-size: 28px;
}

.modal-body {
    padding: 24px;
}

/* POLISH: on phones, modals become full-width bottom sheets —
   easier one-handed reach, keyboard-friendly, native-feeling. */
@media (max-width: 600px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        max-width: 100%;
        max-height: 92dvh;
        border-left: none;
        border-right: none;
        border-bottom: none;
        animation: metro-sheet-up 0.28s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-header h2,
    .modal-header h3 {
        font-size: 24px;
    }

    .modal-body {
        padding: 16px;
    }
}

@keyframes metro-sheet-up {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    /* POLISH: notch clearance */
    right: max(16px, env(safe-area-inset-right));
    color: #fff;
}

/* Toasts */
.toast-wrap {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    /* POLISH: clears notch/status bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 0 16px;
    pointer-events: none;
    /* POLISH: toasts never block taps beneath them */
}

.toast {
    background: var(--gplus-red);
    color: #FFF;
    padding: 14px 20px;
    border-radius: 0;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    box-shadow: none;
    animation: toastin .2s ease;
}

.toast.error {
    background: #E51400;
}

@keyframes toastin {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Tabs
   ============================================================ */

.tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
    padding: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    cursor: pointer;
    font-weight: normal;
    color: var(--gplus-text-secondary);
    white-space: nowrap;
    font-size: 28px;
    text-transform: lowercase;
    letter-spacing: -0.5px;
    line-height: 1;
    padding: 8px 12px;
    flex-shrink: 0;
    user-select: none;
    transition: color 0.2s ease;
    text-shadow: none;
}

.tab.active {
    color: var(--gplus-text);
}

@media (max-width: 480px) {
    .tabs {
        justify-content: flex-start;
        /* POLISH: centered + overflow hides first tab */
        gap: 20px;
        padding: 12px 4px;
        margin-bottom: 16px;
    }

    .tab {
        font-size: 22px;
    }
}

/* ============================================================
   Chat
   ============================================================ */

.chat-layout {
    display: flex;
    height: 100dvh;
}

@media (max-width: 768px) {
    .chat-layout {
        height: calc(100dvh - 56px - env(safe-area-inset-top));
    }
}

.channel-rail {
    width: 240px;
    border-right: 2px solid var(--gplus-border);
    background: var(--gplus-card-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.channel-rail-header {
    padding: 14px 16px;
    border-bottom: 2px solid var(--gplus-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.channel-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
}

.folder-label {
    padding: 16px 16px 8px;
    font-size: 14px;
    text-transform: lowercase;
    color: var(--gplus-text-secondary);
    font-weight: normal;
}

.channel-item {
    padding: 12px 16px;
    min-height: 44px;
    /* POLISH: touch target */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--gplus-text-secondary);
    border-left: 6px solid transparent;
    user-select: none;
}

.channel-item.active {
    color: var(--gplus-text);
    border-left-color: var(--gplus-red);
    background: var(--gplus-sidebar-hover);
}

.channel-item .unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: var(--gplus-red);
    margin-left: auto;
    flex-shrink: 0;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 2px solid var(--gplus-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gplus-card-bg);
}

.chat-header .title {
    font-weight: normal;
    font-size: 22px;
    text-transform: lowercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* POLISH: long channel names truncate cleanly */
}

.chat-header .desc {
    font-size: 13px;
    color: var(--gplus-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-toggle {
    display: none !important;
}

.messages-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* POLISH: chat scroll never yanks the page */
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
}

body.dark-mode .messages-scroll {
    background: rgba(0, 0, 0, 0.85);
}

.msg {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 0;
    position: relative;
    border: 2px solid transparent;
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-body {
    flex: 1;
    min-width: 0;
}

.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.msg-author {
    font-weight: bold;
    cursor: pointer;
}

.msg-time {
    font-size: 12px;
    color: var(--gplus-text-secondary);
}

.msg-text {
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.msg-text code {
    background: var(--gplus-input-bg);
    padding: 2px 6px;
    border-radius: 0;
}

.msg-system {
    text-align: center;
    color: var(--gplus-text-secondary);
    font-size: 13px;
    padding: 8px;
    text-transform: lowercase;
}

.msg-reply-ref {
    font-size: 12px;
    color: var(--gplus-text-secondary);
    border-left: 4px solid var(--gplus-border);
    padding-left: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-attach-img {
    max-width: min(320px, 100%);
    /* POLISH: never wider than the bubble on phones */
    max-height: 320px;
    border-radius: 0;
    margin-top: 8px;
    cursor: pointer;
    border: 2px solid var(--gplus-border);
}

.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--gplus-input-bg);
    border-radius: 0;
    font-size: 14px;
    border: 2px solid var(--gplus-border);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.msg-tools {
    position: absolute;
    top: -12px;
    right: 12px;
    opacity: 0;
    pointer-events: none;
    /* POLISH: invisible buttons were still tappable — real
                             mis-tap bug on touch; now they only activate when shown */
    transition: opacity .15s;
    background: var(--gplus-card-bg);
    border: 2px solid var(--gplus-text);
    border-radius: 0;
    display: flex;
    gap: 4px;
    padding: 4px;
    z-index: 5;
}

.msg-tools button {
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
}

/* POLISH: clamp emoji-react popovers inside the viewport on phones */
.msg>.card {
    max-width: calc(100vw - 48px);
}

.reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    padding: 6px 12px;
    /* POLISH: comfortable to tap */
    font-size: 14px;
    cursor: pointer;
    background: var(--gplus-card-bg);
    user-select: none;
}

.reaction-chip.me {
    border-color: var(--gplus-red);
    background: var(--gplus-input-bg);
}

.pinned-flag {
    font-size: 12px;
    color: var(--gplus-red);
    font-weight: bold;
    text-transform: uppercase;
}

.composer {
    border-top: 2px solid var(--gplus-border);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    /* POLISH: home indicator */
    background: var(--gplus-card-bg);
}

.composer-reply {
    font-size: 13px;
    color: var(--gplus-text-secondary);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.composer-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.composer-input {
    flex: 1;
    background: var(--gplus-input-bg);
    border: 2px solid transparent;
    border-radius: 0;
    padding: 12px 16px;
    min-height: 44px;
    color: var(--gplus-text);
    outline: none;
    resize: none;
    max-height: 140px;
    font-family: inherit;
    font-size: 16px;
    /* POLISH: iOS zoom fix (was 15px) */
    line-height: 1.4;
}

.composer-input:focus {
    border-color: var(--gplus-red);
    background: var(--gplus-card-bg);
}

@media (max-width: 480px) {
    .composer {
        padding: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* POLISH: on narrow phones, hide the attach/GIF buttons' extra padding
       and tighten the row so the input keeps usable width */
    .composer-row {
        gap: 4px;
    }

    .composer-row .icon-btn {
        min-width: 40px;
        padding: 8px 4px;
    }
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gif-grid img {
    width: 100%;
    border-radius: 0;
    cursor: pointer;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--gplus-input-bg);
}

/* ============================================================
   Lists
   ============================================================ */

.list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 2px solid var(--gplus-border);
}

.list-row:last-child {
    border-bottom: none;
}

@media (max-width: 480px) {
    .list-row {
        gap: 10px;
        padding: 12px;
        flex-wrap: wrap;
        /* POLISH: member rows with 3 buttons wrap instead of clip */
    }
}

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 12px;
}

.list-header h2 {
    font-size: clamp(28px, 8vw, 42px);
    /* POLISH: fluid — 42px overflowed on phones */
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: -1px;
    text-shadow: none;
}

body.dark-mode .list-header h2 {
    text-shadow: none;
}

.card.list-row {
    cursor: pointer;
    margin-bottom: 8px;
    user-select: none;
}

.emoji-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.emoji-bar button {
    font-size: 24px;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    /* POLISH: emoji are prime mis-tap targets */
    min-height: 44px;
    border-radius: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gplus-input-bg);
    border-radius: 0;
    padding: 6px 12px;
    font-size: 14px;
    margin: 4px;
    border: 2px solid transparent;
    max-width: 100%;
    overflow: hidden;
}

.chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gplus-text-secondary);
    padding: 4px 8px;
}

.empty-state {
    padding: 64px 40px;
    text-align: center;
    color: var(--gplus-text-secondary);
    font-size: 20px;
    text-transform: lowercase;
}

@media (max-width: 480px) {
    .empty-state {
        padding: 40px 20px;
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .channel-rail {
        position: fixed;
        left: 0;
        top: calc(56px + env(safe-area-inset-top));
        bottom: 0;
        width: min(280px, 82vw);
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s;
        will-change: transform;
        border-right-width: 4px;
        /* POLISH: reads as a distinct layer without shadows */
    }

    .channel-rail.open {
        transform: translateX(0);
    }

    .rail-toggle {
        display: flex !important;
    }
}

.card-section-title {
    padding: 16px 16px 8px;
    font-weight: bold;
    font-size: 14px;
    text-transform: lowercase;
    letter-spacing: .02em;
    color: var(--gplus-text-secondary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.auth-msg {
    margin-bottom: 24px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 0;
    font-size: 16px;
}

.auth-msg.error {
    color: #fff;
    background: #E51400;
}

.auth-msg.info {
    color: var(--gplus-text);
    background: var(--gplus-input-bg);
    border: 2px solid var(--gplus-border);
}

.auth-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 90;
    display: none;
}

@media (max-width: 768px) {
    .sidebar-scrim {
        display: block;
        animation: scrim-in .2s ease;
        /* POLISH: fade rather than pop */
    }
}

@keyframes scrim-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.msg-text pre {
    background: var(--gplus-input-bg);
    padding: 12px 16px;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0;
    border: 2px solid var(--gplus-border);
    max-width: 100%;
}

.msg-text pre code {
    background: none;
    padding: 0;
    border: none;
}

.yt-embed {
    margin-top: 12px;
    border-radius: 0;
    overflow: hidden;
    max-width: min(400px, 100%);
    /* POLISH: fits phone bubbles */
    border: 2px solid var(--gplus-border);
}

.yt-embed iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: block;
}

.link-preview {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 2px solid var(--gplus-border);
    border-radius: 0;
    margin-top: 12px;
    cursor: pointer;
}

.link-preview-thumb {
    width: 96px;
    height: 96px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .link-preview {
        gap: 10px;
        padding: 10px;
    }

    .link-preview-thumb {
        width: 64px;
        height: 64px;
    }
}

.link-preview-info {
    flex: 1;
    min-width: 0;
}

.link-preview-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.link-preview-desc {
    font-size: 14px;
    color: var(--gplus-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

body.dark-mode .tab {
    text-shadow: none;
}

.card.list-row.has-unread {
    border-color: var(--gplus-red);
    background: var(--gplus-sidebar-hover);
}

.card.list-row.has-unread .user-name {
    color: var(--gplus-text);
    font-weight: bold;
}

.circle-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gplus-red);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    min-width: 24px;
    text-align: center;
    margin-left: 8px;
    border-radius: 0;
}

.circle-unread-badge:empty {
    min-width: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 0;
}

.tabs-compact {
    gap: 0;
    padding: 0;
    margin-bottom: 16px;
    justify-content: flex-start;
}

.tabs-compact .tab {
    font-size: 16px;
    padding: 12px 16px;
    min-height: 44px;
    flex: 1;
    text-align: center;
    border-bottom: 4px solid transparent;
    letter-spacing: 0;
}

.tabs-compact .tab.active {
    border-bottom-color: var(--gplus-red);
    color: var(--gplus-red);
}

/* ============================================================
   Hover states — POLISH: all wrapped in (hover: hover) so touch
   devices don't get "sticky" hover highlights that linger after
   a tap until the next touch somewhere else.
   ============================================================ */

@media (hover: hover) {
    .nav-item:hover {
        background-color: var(--gplus-sidebar-hover);
        color: var(--gplus-text);
    }

    .action-btn:hover {
        background-color: var(--gplus-sidebar-hover);
        color: var(--gplus-text);
    }

    .icon-btn:hover {
        background-color: var(--gplus-sidebar-hover);
        color: var(--gplus-text);
    }

    .fab:hover {
        background-color: var(--gplus-text);
        color: var(--gplus-card-bg);
    }

    .channel-item:hover {
        background: var(--gplus-sidebar-hover);
        color: var(--gplus-text);
    }

    .poll-option:hover {
        border-color: var(--gplus-text);
    }

    .card.list-row:hover {
        background: var(--gplus-sidebar-hover);
        border-color: var(--gplus-text);
    }

    .link-preview:hover {
        background: var(--gplus-sidebar-hover);
        border-color: var(--gplus-text);
    }

    .chip:hover {
        border-color: var(--gplus-border);
    }

    .emoji-bar button:hover {
        background: var(--gplus-sidebar-hover);
        border-color: var(--gplus-border);
    }

    .msg:hover {
        background: var(--gplus-sidebar-hover);
        border-color: var(--gplus-border);
    }

    .msg:hover .msg-tools {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Keyboard users can reach message tools too (tab into them) */
.msg:focus-within .msg-tools {
    opacity: 1;
    pointer-events: auto;
}

/* POLISH: touch devices have no hover — message actions (react, reply,
   pin, edit, delete) were completely unreachable on phones. Tools are
   now always visible as a compact, quiet chip in the gap above each
   message; spacing below is widened so it never covers the previous
   message's text. */
@media (hover: none) {
    .messages-scroll {
        gap: 18px;
        padding-top: 24px;
    }

    .msg-tools {
        opacity: 1;
        pointer-events: auto;
        top: -16px;
        right: 4px;
        border-color: var(--gplus-border);
        gap: 0;
        padding: 2px;
    }

    .msg-tools button {
        min-width: 36px;
        min-height: 36px;
        padding: 4px;
    }
}

/* ============================================================
   WP7 (Metro) UI Animations & Transforms
   ============================================================ */

/* 1. The "Tilt" Effect */
.btn:active,
.action-btn:active,
.icon-btn:active,
.tab:active,
.card.list-row:active,
.channel-item:active,
.poll-option:active,
.nav-item:active,
.reaction-chip:active {
    transform: perspective(400px) scale(0.96) rotateX(-2deg);
    transition: transform 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.btn,
.action-btn,
.icon-btn,
.tab,
.card.list-row,
.channel-item,
.poll-option,
.nav-item,
.reaction-chip {
    transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* 2. Turnstile / Fly-in Page Transitions */
@keyframes metro-page-in {
    0% {
        transform: perspective(800px) rotateY(-15deg) translateX(30px);
        opacity: 0;
    }

    100% {
        transform: perspective(800px) rotateY(0deg) translateX(0);
        opacity: 1;
    }
}

.page-transition {
    animation: metro-page-in 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    transform-origin: left center;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 3. Staggered List Animations */
@keyframes metro-slide-up {
    0% {
        transform: translateY(30px) perspective(400px) rotateX(10deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.metro-stagger>* {
    opacity: 0;
    animation: metro-slide-up 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.metro-stagger>*:nth-child(1) {
    animation-delay: 0.05s;
}

.metro-stagger>*:nth-child(2) {
    animation-delay: 0.10s;
}

.metro-stagger>*:nth-child(3) {
    animation-delay: 0.15s;
}

.metro-stagger>*:nth-child(4) {
    animation-delay: 0.20s;
}

.metro-stagger>*:nth-child(5) {
    animation-delay: 0.25s;
}

.metro-stagger>*:nth-child(6) {
    animation-delay: 0.30s;
}

.metro-stagger>*:nth-child(n+7) {
    animation-delay: 0.35s;
}

/* 4. Modal Pop-in (desktop; phones use the sheet slide above) */
.modal,
.emoji-bar {
    animation: metro-pop 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes metro-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* POLISH: honor the OS "reduce motion" setting — turnstile, tilt,
   stagger, and sheet animations all collapse to instant states. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    .metro-stagger>* {
        opacity: 1;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   Mention autocomplete
   ============================================================ */

.mention-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.mention-wrap>input,
.mention-wrap>textarea {
    flex: 1;
    width: 100%;
}

.mention-menu {
    max-height: min(240px, 40dvh);
    /* POLISH: fits above the phone keyboard */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--gplus-card-bg);
    border: 2px solid var(--gplus-text);
    z-index: 4000;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 48px;
    /* POLISH: touch target */
    cursor: pointer;
    border-left: 6px solid transparent;
}

.mention-item:hover,
.mention-item.active {
    background: var(--gplus-sidebar-hover);
    border-left-color: var(--gplus-red);
}

.mention-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 0;
    background: var(--gplus-input-bg);
    flex-shrink: 0;
}

.mention-meta {
    min-width: 0;
}

.mention-name {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-handle {
    font-size: 12px;
    color: var(--gplus-text-secondary);
}

.mention-empty {
    padding: 12px;
    color: var(--gplus-text-secondary);
    font-size: 13px;
    text-transform: lowercase;
}

body.dark-mode .mention-menu {
    background-color: rgba(15, 15, 15, 0.97);
}

body.dark-mode .channel-rail {
    background-color: rgba(15, 15, 15, 0.92);
}