:root {
    --bg: #080b1d;
    --surface: #11162f;
    --surface-2: #171e3d;
    --border: #29315e;
    --text: #f5f7ff;
    --muted: #9ba6d0;
    --blue: #1b83ff;
    --purple: #9d2dff;
    --danger: #ff5574;
    --success: #38d89d;
    --radius: 18px;
    --shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html {
    color-scheme: dark;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 15% -10%, rgba(28, 104, 255, .24), transparent 30rem),
        radial-gradient(circle at 95% 10%, rgba(157, 45, 255, .16), transparent 26rem),
        var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-bottom: 88px;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    background: #0c1129;
    padding: 13px 14px;
    outline: none;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(27, 131, 255, .15);
}

textarea { resize: vertical; }

label {
    display: grid;
    gap: 7px;
    color: #cbd2f3;
    font-size: .92rem;
    font-weight: 650;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 7vw, 2.65rem); }
h2 { font-size: 1.25rem; }

.muted { color: var(--muted); }
.error-text { color: #ff9aaf; }
.stack { display: grid; gap: 15px; }

.card {
    border: 1px solid rgba(72, 86, 146, .4);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(22, 29, 61, .97), rgba(13, 18, 43, .97));
    box-shadow: var(--shadow);
}

.primary-button, .secondary-button, .danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    padding: 0 18px;
    font-weight: 800;
}

.primary-button {
    color: white;
    background: linear-gradient(115deg, var(--blue), var(--purple));
    box-shadow: 0 10px 24px rgba(70, 80, 255, .22);
}

.primary-button.compact { min-height: 38px; padding-inline: 16px; }
.secondary-button { color: white; background: var(--surface-2); border: 1px solid var(--border); }
.danger-button { color: white; background: rgba(255, 85, 116, .16); border: 1px solid rgba(255, 85, 116, .45); }
.full-width { width: 100%; }

.avatar {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 2px solid rgba(113, 126, 206, .35);
}
.avatar-sm { width: 34px; height: 34px; }
.avatar-lg { width: 70px; height: 70px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 65px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(70, 82, 139, .38);
    background: rgba(7, 10, 26, .88);
    backdrop-filter: blur(18px);
}

.brand img {
    display: block;
    width: 72px;
    height: 50px;
    object-fit: cover;
    object-position: center 68%;
    border-radius: 10px;
}

.top-search input { min-height: 40px; padding-block: 9px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 1.2rem;
}

.bottom-nav {
    position: fixed;
    z-index: 200;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    min-height: 64px;
    border: 1px solid rgba(76, 89, 151, .55);
    border-radius: 20px;
    padding: 5px 8px;
    background: rgba(11, 15, 37, .94);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
    backdrop-filter: blur(20px);
}

.bottom-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 52px;
    color: var(--muted);
}

.bottom-nav a span { font-size: 1.28rem; }
.bottom-nav a small { font-size: .69rem; }
.bottom-nav a.active { color: #6facff; }

.create-button {
    width: 49px;
    height: 49px;
    justify-self: center;
    border: 0;
    border-radius: 17px;
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    font-size: 1.9rem;
    line-height: 1;
    box-shadow: 0 8px 25px rgba(88, 56, 255, .38);
}

.flash {
    position: fixed;
    z-index: 999;
    top: 76px;
    left: 50%;
    width: min(92vw, 560px);
    transform: translateX(-50%);
    padding: 13px 16px;
    border-radius: 13px;
    color: white;
    box-shadow: var(--shadow);
    transition: opacity .3s, transform .3s;
}

.flash-success { background: #157554; }
.flash-error { background: #9c3048; }
.flash.hide { opacity: 0; transform: translate(-50%, -15px); pointer-events: none; }

.auth-page {
    min-height: 100vh;
    display: grid;
    align-items: center;
    gap: 24px;
    width: min(1080px, 92vw);
    margin: auto;
    padding: 32px 0;
}

.auth-brand { text-align: center; }
.auth-brand img { width: min(430px, 86vw); }
.auth-brand p {
    margin: -28px 0 0;
    color: #b8c1e8;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .82rem;
}

.auth-card {
    width: min(100%, 480px);
    justify-self: center;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(15, 20, 46, .92);
    box-shadow: var(--shadow);
}

.auth-card h1 { margin-bottom: 7px; }
.auth-switch { margin: 22px 0 0; text-align: center; color: var(--muted); }
.auth-switch a { color: #7fbbff; font-weight: 800; }

.app-shell {
    width: min(1380px, 100%);
    margin: auto;
    padding: 16px 12px;
}

.feed-column {
    width: min(100%, 680px);
    margin: auto;
    display: grid;
    gap: 15px;
}

.desktop-sidebar, .desktop-right { display: none; }

.composer { padding: 14px; }
.composer-row { display: flex; gap: 11px; align-items: center; }
.composer-prompt {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--muted);
    background: #0c1129;
    padding-inline: 17px;
    text-align: left;
}

.composer-form { display: none; margin-top: 14px; }
.composer-form.open { display: grid; gap: 12px; }
.composer-controls {
    display: grid;
    grid-template-columns: 1fr 112px auto;
    gap: 9px;
    align-items: center;
}

.upload-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 39px;
    color: #bcd1ff;
    cursor: pointer;
}
.upload-control input { display: none; }
.upload-control.standalone {
    width: 100%;
    justify-content: center;
    border: 1px dashed var(--border);
    border-radius: 13px;
    padding: 13px;
}

.image-preview { position: relative; overflow: hidden; border-radius: 15px; }
.image-preview img { width: 100%; max-height: 420px; object-fit: contain; background: #050714; }
.image-preview button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: white;
    background: rgba(0,0,0,.7);
    font-size: 1.4rem;
}

.post-card { overflow: hidden; }
.post-header { display: flex; gap: 11px; align-items: center; padding: 15px; }
.post-author { font-weight: 850; }
.post-meta { margin-top: 3px; color: var(--muted); font-size: .79rem; }
.post-body { padding: 0 15px 15px; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.post-image {
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    background: #050715;
}

.post-counts {
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    color: var(--muted);
    font-size: .86rem;
}

.post-counts button {
    border: 0;
    color: inherit;
    background: transparent;
}

.post-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(63, 75, 127, .45);
    border-bottom: 1px solid rgba(63, 75, 127, .45);
    padding: 5px 8px;
}

.post-actions button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font-weight: 750;
}

.post-actions button:hover { background: rgba(112, 126, 195, .1); }
.post-actions button.active { color: #7cb9ff; }

.comments-section { padding: 13px 15px 16px; }
.comments-list { display: grid; gap: 10px; margin-bottom: 12px; }
.comment-item { display: flex; align-items: flex-start; gap: 9px; }
.comment-bubble {
    min-width: 0;
    padding: 9px 12px;
    border-radius: 4px 15px 15px 15px;
    background: var(--surface-2);
}
.comment-bubble a { font-size: .87rem; font-weight: 850; }
.comment-bubble p { margin: 3px 0; line-height: 1.4; overflow-wrap: anywhere; }
.comment-bubble small { color: var(--muted); }

.comment-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.comment-form input { min-height: 39px; padding-block: 8px; border-radius: 20px; }
.comment-form button {
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: #1c72dc;
    padding-inline: 13px;
    font-weight: 800;
}

.empty-state { padding: 34px 20px; text-align: center; }
.large-symbol { margin-bottom: 12px; font-size: 3rem; }

.narrow-page, .profile-page {
    width: min(760px, calc(100% - 24px));
    margin: 0 auto;
    padding: 24px 0;
}

.page-heading { margin-bottom: 16px; }
.page-heading h1 { margin-bottom: 5px; }
.page-heading p { color: var(--muted); }

.page-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 13px;
    margin-bottom: 15px;
}

.people-grid { display: grid; gap: 12px; }
.person-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 15px;
}
.person-card .secondary-button { grid-column: 1 / -1; }
.person-card p { margin-bottom: 3px; }

.profile-page { display: grid; gap: 15px; }
.profile-hero { overflow: hidden; padding-bottom: 20px; }
.cover-placeholder {
    height: 170px;
    background:
        radial-gradient(circle at 70% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(120deg, #0c67ff, #7a22ff 58%, #111541);
}

.profile-main {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 0 19px;
    margin-top: -48px;
}

/* Only the avatar overlaps the cover. The account name remains below it. */
.profile-heading {
    min-width: 0;
    padding-top: 56px;
}

.profile-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #11162f;
    background: #151d42;
}

.profile-heading h1 { margin: 0; font-size: 1.7rem; }
.profile-heading p { margin: 4px 0 8px; color: var(--muted); }
.profile-bio, .profile-hero > .muted { margin: 15px 20px 0; }
.profile-editor { padding: 18px; }
.profile-posts { display: grid; gap: 12px; }
.profile-posts > h2 { margin: 4px 2px 0; }
.simple-post { overflow: hidden; padding-top: 14px; }
.simple-post .post-meta { padding: 0 15px 10px; }
.simple-post .post-counts { padding-bottom: 12px; }

.menu-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    margin-bottom: 15px;
}
.menu-profile h1 { margin: 0 0 5px; font-size: 1.25rem; }
.menu-profile a { color: #7ebaff; }

.menu-list { margin-bottom: 15px; overflow: hidden; }
.menu-list a, .menu-list button {
    width: 100%;
    min-height: 57px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(70, 83, 139, .35);
    color: var(--text);
    background: transparent;
    padding: 0 17px;
    text-align: left;
}
.menu-list > :last-child { border-bottom: 0; }
.menu-list span { color: var(--muted); font-size: 1.5rem; }

.compact-card { padding: 17px; }
.right-logo { width: 100%; max-height: 180px; object-fit: contain; }

@media (min-width: 760px) {
    .auth-page { grid-template-columns: 1.05fr .95fr; }
    .auth-brand p { margin-top: -38px; }
    .bottom-nav { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
}

@media (min-width: 1100px) {
    body { padding-bottom: 20px; }
    .bottom-nav { display: none; }
    .topbar { padding-inline: 28px; }
    .app-shell {
        display: grid;
        grid-template-columns: 240px minmax(0, 680px) 290px;
        gap: 22px;
        padding-top: 22px;
    }
    .feed-column { width: 100%; }
    .desktop-sidebar, .desktop-right { display: block; position: sticky; top: 87px; align-self: start; }
    .desktop-sidebar { display: grid; gap: 5px; }
    .desktop-sidebar > a {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 11px;
        border-radius: 13px;
        padding: 0 12px;
        color: #cbd2f2;
        font-weight: 750;
    }
    .desktop-sidebar > a:hover { background: rgba(83, 98, 164, .13); }
    .sidebar-profile { margin-bottom: 8px; }
    .narrow-page, .profile-page { padding-top: 32px; }
}

@media (max-width: 520px) {
    .top-search { display: none; }
    .topbar { grid-template-columns: 1fr auto; }
    .composer-controls { grid-template-columns: 1fr auto; }
    .composer-controls select { grid-column: 1 / -1; grid-row: 2; }
    .post-actions button { font-size: .8rem; }
    .auth-card { padding: 21px 17px; }
}


/* SEE Phase 2 */
.grow{flex:1;min-width:0}.badge-anchor{position:relative}.nav-badge{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:10px;background:#ff4f75;color:white;font-size:.65rem;font-weight:900;padding:0 4px}.ghost-icon,.ghost-button{border:0;background:transparent;color:var(--muted);padding:8px;border-radius:10px}.ghost-button{border:1px solid var(--border)}.status-pill,.unread-pill,.request-label{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;background:rgba(53,132,255,.16);color:#8fc3ff;font-size:.78rem;font-weight:800}.unread-pill{min-width:27px;background:linear-gradient(120deg,var(--blue),var(--purple));color:white}.suggestion-note{color:#8fc3ff}.person-actions,.profile-actions{display:flex;flex-wrap:wrap;gap:8px}.person-card .person-actions{grid-column:1/-1}.primary-button.compact,.secondary-button.compact,.danger-button.compact{min-height:36px;padding:0 13px}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inline-checks{display:flex;flex-wrap:wrap;gap:18px}.inline-checks label{display:flex;align-items:center;gap:8px}.inline-checks input{width:auto}.profile-cover{display:block;width:100%;height:220px;object-fit:cover}.profile-stats{display:flex;gap:20px;flex-wrap:wrap;margin:15px 20px 0;color:var(--muted)}.profile-stats strong{color:var(--text)}.profile-actions{padding:18px 20px 0}.profile-tabs{display:flex;overflow:hidden}.profile-tabs a{flex:1;text-align:center;padding:15px;border-bottom:3px solid transparent}.profile-tabs a.active{color:#76b5ff;border-color:var(--blue)}.multi-image-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.multi-image-preview img{width:100%;height:170px;object-fit:cover;border-radius:12px}.post-media-grid{display:grid;gap:2px;background:#050715}.post-media-grid.count-2{grid-template-columns:repeat(2,1fr)}.post-media-grid.count-3,.post-media-grid.count-4{grid-template-columns:repeat(2,1fr)}.post-media-grid.count-3 img:first-child{grid-row:span 2;height:100%}.post-media-grid .post-image{height:100%;min-height:210px;object-fit:cover}.load-more-comments{border:0;background:transparent;color:#78b7ff;font-weight:800;padding:5px 0 12px}.list-section{margin-top:24px}.list-section>h2{display:flex;align-items:center;gap:9px}.gallery-uploader{padding:18px;margin-bottom:16px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery-item{overflow:hidden}.gallery-open{display:block;width:100%;border:0;padding:0;background:#050715}.gallery-open img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.gallery-caption{padding:10px}.gallery-caption p{margin-bottom:4px}.gallery-caption small{color:var(--muted)}.danger-link{border:0;background:transparent;color:#ff7c94;padding:5px 0}.gallery-empty{grid-column:1/-1}.photo-lightbox{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.9);padding:20px}.photo-lightbox[hidden]{display:none}.photo-lightbox img{max-width:95vw;max-height:90vh;object-fit:contain}.photo-lightbox button{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem}.conversation-list,.notification-list{display:grid;gap:10px}.conversation-row,.notification-row{display:flex;align-items:center;gap:13px;padding:14px}.conversation-row p,.notification-row p{margin:4px 0;color:#d8def7}.conversation-row small,.notification-row small{color:var(--muted)}.message-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}.chat-page{width:min(840px,calc(100% - 20px));margin:0 auto;padding:14px 0;position:relative}.chat-header{display:flex;align-items:center;gap:12px;padding:12px 14px;position:sticky;top:75px;z-index:20}.chat-header>a:first-child{font-size:2rem}.chat-header small{display:block;color:var(--muted)}.message-request-banner{padding:15px;margin-top:10px}.message-request-banner div{display:flex;gap:8px;flex-wrap:wrap}.message-stream{margin-top:10px;padding:15px;min-height:430px;max-height:calc(100vh - 280px);overflow-y:auto;display:flex;flex-direction:column;gap:10px}.message-bubble{display:flex;flex-direction:column;max-width:78%}.message-bubble.mine{align-self:flex-end;align-items:flex-end}.message-bubble.theirs{align-self:flex-start}.message-content{padding:10px 12px;border-radius:16px;background:var(--surface-2);overflow:hidden}.message-bubble.mine .message-content{background:linear-gradient(130deg,#167ce8,#7232db)}.message-content p{margin:0;white-space:pre-wrap}.message-content img{display:block;max-width:min(320px,65vw);max-height:360px;object-fit:contain;border-radius:10px;margin-bottom:6px}.message-content small{display:block;margin-top:5px;color:rgba(255,255,255,.7);font-size:.7rem}.message-tools{display:flex;gap:9px;padding:3px 5px}.message-tools button{border:0;background:transparent;color:var(--muted);font-size:.7rem}.chat-composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:end;padding:10px;margin-top:10px;position:sticky;bottom:85px}.chat-composer textarea{min-height:42px;max-height:120px;resize:none}.chat-photo-button{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);cursor:pointer}.chat-photo-button input{display:none}.chat-hint{text-align:center;color:var(--muted);font-size:.8rem}.conversation-menu{position:absolute;top:74px;right:0;z-index:30;padding:8px;width:230px}.conversation-menu button{width:100%;border:0;background:transparent;color:var(--text);padding:12px;text-align:left}.admin-body{padding-bottom:20px}.admin-topbar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 24px;background:#0b0f25;border-bottom:1px solid var(--border)}.admin-topbar nav{display:flex;gap:14px;flex-wrap:wrap}.admin-shell{width:min(1240px,calc(100% - 28px));margin:0 auto;padding:28px 0}.admin-heading{margin-bottom:18px}.admin-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.admin-metrics article{padding:16px}.admin-metrics span{display:block;color:var(--muted)}.admin-metrics strong{font-size:2rem}.admin-panel{padding:17px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);vertical-align:top}td small{display:block;color:var(--muted);margin-top:3px}.admin-actions{display:grid;grid-template-columns:150px minmax(150px,1fr) auto;gap:7px}.admin-login-page{max-width:950px}
@media(max-width:760px){.profile-heading{padding-top:52px}.two-column{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.profile-cover{height:160px}.chat-page{width:100%;padding:0 8px}.chat-header{top:65px}.message-stream{max-height:calc(100vh - 300px);min-height:360px}.chat-composer{bottom:82px}.admin-topbar{align-items:flex-start;flex-direction:column}.admin-topbar nav{font-size:.85rem}.admin-metrics{grid-template-columns:repeat(2,1fr)}.admin-actions{grid-template-columns:1fr}.post-media-grid .post-image{min-height:160px}}
@media(max-width:440px){.gallery-grid{grid-template-columns:1fr 1fr}.message-bubble{max-width:88%}.post-media-grid .post-image{min-height:130px}}

/* SEE Phase 2 coherence fixes */
[hidden]{display:none!important}.grow{flex:1;min-width:0}.wide-page{width:min(1100px,calc(100% - 24px));margin:0 auto;padding:24px 0}.page-heading.message-page-heading,.wide-page>.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.section-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.mini-person{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid rgba(70,83,139,.3)}.mini-person:last-of-type{border-bottom:0}.mini-person small{display:block;color:var(--muted);margin-top:2px}.mini-add{border:0;border-radius:10px;background:rgba(30,130,255,.16);color:#8fc3ff;padding:7px 10px;font-weight:800}.text-link{display:inline-block;margin-top:12px;color:#81baff;font-weight:800}.post-menu-link{color:var(--muted);font-size:1.35rem;padding:4px 8px}.upload-control small{color:var(--muted);font-weight:500}.multi-image-preview:empty{display:none}.post-media-grid a{display:block;min-width:0;overflow:hidden}.post-media-grid.count-1{grid-template-columns:1fr}.post-media-grid.count-1 .post-image{max-height:650px;object-fit:contain}.profile-meta{margin:12px 20px 0}.profile-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check-row{display:flex;align-items:center;gap:9px}.check-row input{width:auto}.gallery-item>a{display:block;background:#050715}.gallery-item>a img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.gallery-info{padding:10px;display:grid;gap:5px}.gallery-info small{color:var(--muted)}.gallery-info form{margin:0}.post-photo-grid .gallery-info{min-height:auto}.person-bio{margin:4px 0;color:#d4daf3}.messages-page{width:min(820px,calc(100% - 24px));margin:0 auto;padding:24px 0}.message-section{margin-top:24px}.message-section>h2{display:flex;align-items:center;gap:8px}.section-count,.request-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(65,129,255,.16);color:#90c3ff;padding:4px 9px;font-size:.75rem}.conversation-title{display:flex;justify-content:space-between;gap:12px;align-items:center}.conversation-title small{white-space:nowrap}.conversation-row.unread{border-color:rgba(54,136,255,.7);background:linear-gradient(145deg,rgba(25,40,83,.98),rgba(13,18,43,.98))}.conversation-unread{min-width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(120deg,var(--blue),var(--purple));font-size:.72rem}.avatar-wrap{position:relative}.online-dot{position:absolute;right:2px;bottom:3px;width:13px;height:13px;border-radius:50%;background:#39d98a;border:3px solid var(--surface)}.empty-chat{margin:auto;text-align:center;color:var(--muted);padding:30px}.empty-chat small{display:block;margin-top:6px}.back-button{font-size:2rem;line-height:1;padding:0 5px}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.chat-upload-preview{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:rgba(54,70,130,.18)}.chat-upload-preview img{width:64px;height:64px;object-fit:cover;border-radius:10px}.chat-upload-preview small{color:var(--muted)}.message-reply-preview{border-left:3px solid rgba(255,255,255,.55);padding:5px 8px;margin-bottom:7px;background:rgba(0,0,0,.16);border-radius:5px;color:rgba(255,255,255,.8);font-size:.78rem}.message-loading{text-align:center;margin:auto}.notification-row.unread{border-color:rgba(64,139,255,.7)}.unread-dot{width:10px;height:10px;border-radius:50%;background:#3796ff;flex:0 0 auto}.report-card{padding:18px}.bottom-badge{top:2px;right:12px}.admin-brand{display:flex;align-items:center;gap:9px}.admin-brand img{width:36px;height:36px;border-radius:9px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading a{color:#83bcff}.status-chip{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:800}.status-active{background:rgba(56,216,157,.15);color:#6ee8b8}.status-suspended{background:rgba(255,183,77,.16);color:#ffc46d}.status-banned{background:rgba(255,85,116,.16);color:#ff91a6}.admin-actions input,.admin-actions select{min-height:38px;padding:8px 10px}.admin-panel table a:hover{color:#82baff}
@media(max-width:760px){.profile-upload-grid{grid-template-columns:1fr}.page-heading.message-page-heading,.wide-page>.page-heading{align-items:flex-start}.message-page-heading .primary-button{width:100%}.messages-page{padding-top:18px}.wide-page{padding-top:18px}.gallery-item>a img{aspect-ratio:1/1}.conversation-title{align-items:flex-start}.conversation-row{padding:12px}.request-chip{display:none}}

/* See 2.1: reliable header notifications, chat alerts, and sound settings */
.icon-button svg {
    width: 22px;
    height: 22px;
    display: block;
}

.header-popover-wrap {
    position: relative;
}

.header-popover {
    position: absolute;
    z-index: 500;
    top: calc(100% + 12px);
    right: 0;
    width: min(380px, calc(100vw - 20px));
    overflow: hidden;
    border: 1px solid rgba(80, 96, 164, .58);
    border-radius: 18px;
    background: rgba(11, 15, 37, .98);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .55);
    backdrop-filter: blur(22px);
}

.header-popover-heading {
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(73, 87, 148, .42);
}

.header-popover-heading h2 {
    margin: 0 0 2px;
    font-size: 1.08rem;
}

.header-popover-heading small,
.header-popover-item small,
.popover-status {
    color: var(--muted);
}

.popover-text-button {
    border: 0;
    color: #83bcff;
    background: transparent;
    padding: 7px;
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.header-popover-list {
    max-height: min(430px, 62vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.header-popover-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 68px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(64, 77, 132, .3);
    background: transparent;
}

.header-popover-item:hover,
.header-popover-item:focus-visible {
    background: rgba(77, 94, 164, .14);
}

.header-popover-item.unread {
    background: rgba(29, 113, 226, .1);
}

.header-popover-item p {
    margin: 1px 0 4px;
    color: #e3e8ff;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

.header-popover-item.chat-item p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #cbd3f3;
    font-size: .86rem;
}

.popover-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.popover-item-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-item-title small {
    flex: 0 0 auto;
    font-size: .7rem;
}

.popover-request-label {
    display: inline-block;
    margin-top: 2px;
    color: #91c4ff !important;
    font-weight: 800;
}

.popover-status {
    margin: 0;
    padding: 24px 15px;
    text-align: center;
}

.header-popover-footer {
    min-height: 47px;
    display: grid;
    place-items: center;
    border-top: 1px solid rgba(73, 87, 148, .42);
    color: #87beff;
    font-weight: 800;
}

.menu-setting-row {
    width: 100%;
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 17px;
    border-bottom: 1px solid rgba(70, 83, 139, .35);
    color: var(--text);
    cursor: pointer;
}

.menu-setting-copy {
    display: grid;
    gap: 3px;
}

.menu-setting-copy small {
    color: var(--muted);
    font-weight: 500;
}

.menu-setting-row input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--blue);
}

@media (max-width: 620px) {
    .header-popover {
        position: fixed;
        top: 70px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .header-popover-list {
        max-height: min(430px, 58vh);
    }
}

/* Phase 2.2 media reliability */
.media-missing {
    min-height: 170px;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--muted);
    background:
        radial-gradient(circle at 50% 20%, rgba(69, 91, 174, .18), transparent 48%),
        #080b1d;
    border: 1px dashed rgba(110, 128, 203, .38);
    text-align: center;
    font-weight: 700;
}

.gallery-item .media-missing {
    min-height: 210px;
    border: 0;
    border-bottom: 1px solid rgba(70, 83, 139, .35);
}

.media-recovery-notice {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    border-color: rgba(255, 188, 86, .48);
    background: rgba(92, 61, 13, .28);
}

.media-recovery-notice span {
    color: #d8c79e;
    line-height: 1.45;
}

/* Phase 2.3: reactions, owner controls, post editing, and account logout */
.account-avatar-button {
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
}
.account-popover { width: min(310px, calc(100vw - 24px)); }
.account-popover-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid rgba(70, 83, 139, .38);
}
.account-popover-user div { display: grid; gap: 2px; min-width: 0; }
.account-popover-user small { color: var(--muted); }
.account-popover-link,
.account-logout-form button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(70, 83, 139, .28);
    color: var(--text);
    background: transparent;
    padding: 0 15px;
    text-align: left;
    font-weight: 700;
}
.account-popover-link:hover,
.account-logout-form button:hover { background: rgba(92, 108, 184, .13); }
.account-logout-form { margin: 0; }
.account-logout-form button { color: #ff91a8; border-bottom: 0; }
.inline-form { display: inline-flex; margin: 0; }

.post-owner-menu { position: relative; }
.post-menu-link {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    font-size: 1.25rem;
}
.post-menu-link:hover { background: rgba(101, 116, 190, .14); }
.post-owner-menu-panel {
    position: absolute;
    z-index: 30;
    top: 42px;
    right: 0;
    width: 170px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #11172f;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}
.post-owner-menu-panel a,
.post-owner-menu-panel button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    border: 0;
    color: var(--text);
    background: transparent;
    padding: 0 14px;
    text-align: left;
}
.post-owner-menu-panel a:hover,
.post-owner-menu-panel button:hover { background: rgba(103, 118, 196, .14); }
.post-owner-menu-panel form { margin: 0; }
.post-owner-menu-panel form button { color: #ff91a8; }

.reaction-count-copy { display: inline-flex; align-items: center; gap: 4px; }
.reaction-action-wrap {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: stretch;
}
.post-actions .reaction-main,
.post-actions .reaction-picker-toggle {
    min-height: 42px;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-weight: 750;
}
.post-actions .reaction-main { border-radius: 10px 0 0 10px; padding: 0 4px 0 8px; }
.post-actions .reaction-picker-toggle { border-radius: 0 10px 10px 0; padding: 0; }
.post-actions .reaction-main:hover,
.post-actions .reaction-picker-toggle:hover { background: rgba(112, 126, 195, .1); }
.reaction-main.active { color: #72b5ff; }
.reaction-main.reaction-love { color: #ff6385; }
.reaction-main.reaction-haha,
.reaction-main.reaction-wow,
.reaction-main.reaction-sad { color: #ffd36a; }
.reaction-main.reaction-angry { color: #ff8a5b; }
.reaction-picker {
    position: absolute;
    z-index: 40;
    left: 0;
    bottom: calc(100% + 8px);
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #11172f;
    box-shadow: 0 18px 42px rgba(0,0,0,.48);
}
.reaction-picker button {
    width: 48px;
    min-height: 55px;
    display: grid;
    place-items: center;
    gap: 1px;
    border: 0;
    border-radius: 13px;
    color: var(--text);
    background: transparent;
    font-size: 1.55rem;
    transition: transform .15s, background .15s;
}
.reaction-picker button:hover,
.reaction-picker button:focus-visible { transform: translateY(-4px) scale(1.08); background: rgba(113, 127, 205, .15); }
.reaction-picker small { font-size: .62rem; color: var(--muted); }

.comment-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.comment-owner-actions { display: flex; gap: 8px; }
.comment-owner-actions button {
    border: 0;
    color: #a8b7ef;
    background: transparent;
    padding: 0;
    font-size: .72rem;
}
.comment-owner-actions button:last-child { color: #ff91a8; }
.comment-edit-form { display: grid; gap: 8px; margin-top: 7px; }
.comment-edit-form textarea { min-height: 84px; }
.comment-edit-controls { display: flex; justify-content: flex-end; gap: 8px; }

.post-editor-card { padding: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.edit-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.edit-media-item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #0a0e23;
}
.edit-media-item img,
.edit-media-item .media-missing { width: 100%; height: 180px; object-fit: cover; }
.edit-media-item > span:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    font-size: .82rem;
}
.edit-media-item input { width: auto; }
.simple-post-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 15px 10px;
}
.simple-post-heading .post-meta { padding: 0; }
.simple-post-controls { display: flex; align-items: center; gap: 10px; }
.simple-post-controls a,
.simple-post-controls button {
    border: 0;
    color: #8fc1ff;
    background: transparent;
    padding: 0;
    font-size: .82rem;
}
.simple-post-controls form { margin: 0; }
.simple-post-controls button { color: #ff91a8; }

@media (max-width: 560px) {
    .reaction-picker { left: -5px; gap: 1px; padding: 5px; }
    .reaction-picker button { width: 42px; font-size: 1.35rem; }
    .reaction-picker small { display: none; }
    .edit-media-grid { grid-template-columns: 1fr; }
    .edit-media-item img,
    .edit-media-item .media-missing { height: 220px; }
}

/* --------------------------------------------------------------------------
   SEE PHASE 3 — rich media, interactive profile posts, and customization
   -------------------------------------------------------------------------- */
.composer-media-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 4px 0;
}
.composer-media-tabs button {
    min-height: 37px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: #0c1129;
    padding: 0 13px;
    font-size: .86rem;
    font-weight: 750;
}
.composer-media-tabs button.active {
    color: white;
    border-color: rgba(74, 145, 255, .8);
    background: linear-gradient(115deg, rgba(27, 131, 255, .32), rgba(157, 45, 255, .28));
}
.composer-media-panel {
    padding: 12px;
    border: 1px solid rgba(67, 81, 140, .45);
    border-radius: 15px;
    background: rgba(7, 11, 30, .55);
}
.composer-form .composer-controls {
    grid-template-columns: minmax(130px, 1fr) auto;
}
.single-media-preview {
    margin-top: 12px;
    overflow: hidden;
    border-radius: 14px;
    background: #050714;
}
.single-media-preview img,
.single-media-preview video {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
}

.post-video {
    display: block;
    width: 100%;
    max-height: 680px;
    background: #03040d;
}
.post-gif { image-rendering: auto; }
.post-embed-card {
    border-top: 1px solid rgba(69, 83, 141, .38);
    border-bottom: 1px solid rgba(69, 83, 141, .38);
    background: rgba(5, 8, 24, .78);
}
.post-embed-placeholder {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 16px;
}
.post-embed-placeholder strong,
.post-embed-placeholder small { display: block; }
.post-embed-placeholder small { margin-top: 4px; color: var(--muted); }
.embed-provider-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    font-size: 1.65rem;
}
.post-embed-frame iframe {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
    background: #000;
}
.embed-source-link {
    display: block;
    padding: 9px 15px 12px;
    color: #8fc2ff;
    font-size: .82rem;
    text-align: right;
}

.comment-content-wrap { min-width: 0; flex: 1; }
.comment-reaction-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 3px 2px 0 8px;
}
.comment-reaction-wrap { position: relative; display: inline-flex; align-items: center; }
.comment-reaction-main,
.comment-reaction-picker-toggle {
    min-height: 27px;
    border: 0;
    color: var(--muted);
    background: transparent;
    padding: 0 5px;
    font-size: .76rem;
    font-weight: 750;
}
.comment-reaction-main.active { color: #82bdff; }
.comment-reaction-picker {
    position: absolute;
    z-index: 50;
    left: 0;
    bottom: 31px;
    display: flex;
    gap: 4px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #111735;
    box-shadow: var(--shadow);
}
.comment-reaction-picker button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.18rem;
}
.comment-reaction-picker button:hover { background: rgba(113, 128, 200, .18); }
.comment-reaction-total { color: var(--muted); font-size: .76rem; }
.comment-owner-actions a { color: inherit; }

.profile-background-layer,
.profile-background-overlay {
    position: fixed;
    z-index: 0;
    inset: 65px 0 0;
    pointer-events: none;
}
.profile-background-layer {
    background-color: var(--bg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--profile-bg-blur, 0px));
    transform: scale(1.025);
}
.profile-background-overlay {
    z-index: 1;
    background: rgba(4, 7, 20, var(--profile-overlay, .48));
}
body.profile-view .topbar,
body.profile-view .bottom-nav { z-index: 100; }
body.profile-view .profile-page {
    position: relative;
    z-index: 2;
}
body.profile-view .profile-page.profile-has-background .card {
    background: rgba(14, 19, 45, var(--profile-card-opacity, .92));
    backdrop-filter: blur(12px);
}
.profile-posts .post-card { width: 100%; }

.profile-music-dock {
    position: fixed;
    z-index: 190;
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(290px, calc(100vw - 28px));
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(105, 123, 202, .58);
    border-radius: 18px;
    background: rgba(10, 14, 34, .94);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px);
}
.profile-music-engine {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: .001;
    pointer-events: none;
}
.profile-music-engine iframe {
    width: 200px !important;
    height: 200px !important;
    border: 0;
}
.profile-music-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #bcd9ff;
    background: rgba(43, 113, 235, .18);
    font-size: 1.05rem;
}
.profile-music-dock.is-playing .profile-music-mark {
    animation: profileMusicPulse 1.25s ease-in-out infinite;
}
.profile-music-control {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(90, 105, 177, .6);
    border-radius: 12px;
    color: var(--text);
    background: rgba(29, 37, 78, .92);
    line-height: 1;
}
.profile-music-control:hover { background: rgba(46, 58, 116, .96); }
.profile-music-control:disabled { opacity: .48; cursor: wait; }
.profile-music-play {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--blue), var(--purple));
}
.profile-music-play:hover { background: linear-gradient(135deg, var(--blue), var(--purple)); filter: brightness(1.08); }
.profile-music-volume {
    min-width: 78px;
    flex: 1 1 110px;
    display: flex;
    align-items: center;
}
.profile-music-volume input[type="range"] {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    accent-color: #5da7ff;
    cursor: pointer;
}
.profile-music-volume input:disabled { opacity: .5; cursor: wait; }
.profile-music-dock.has-error { opacity: .72; }
@keyframes profileMusicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.settings-page {
    width: min(900px, calc(100% - 24px));
    margin: 0 auto;
    padding: 25px 0;
}
.settings-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 15px;
}
.settings-tile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    min-height: 115px;
    padding: 17px;
}
.settings-tile > span { font-size: 1.75rem; }
.settings-tile h2 { margin-bottom: 4px; }
.settings-tile p { margin: 0; color: var(--muted); line-height: 1.45; }
.settings-tile > b { color: var(--muted); font-size: 1.6rem; }
.settings-panel { padding: 19px; }
.settings-fieldset {
    display: grid;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 14px;
}
.settings-fieldset legend { padding: 0 7px; color: #dce2ff; font-weight: 800; }
.settings-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.appearance-preview {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #070a1c;
}
.appearance-preview-bg,
.appearance-preview-overlay {
    position: absolute;
    inset: 0;
}
.appearance-preview-bg { background-position: center; background-size: cover; }
.appearance-preview-overlay { background: rgba(4, 7, 20, .48); }
.appearance-preview-card {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 83px;
    padding: 14px;
    border: 1px solid rgba(104, 119, 192, .55);
    border-radius: 16px;
    background: #11162f;
}
.appearance-preview-card strong,
.appearance-preview-card small { display: block; }
.appearance-preview-card small { margin-top: 3px; color: var(--muted); }
.music-settings-preview iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    border: 0;
    border-radius: 15px;
    background: #000;
}
.settings-danger-zone {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.current-embed-editor {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.current-embed-editor a { color: #8fc2ff; overflow-wrap: anywhere; }
.edit-media-item video { width: 100%; max-height: 240px; background: #000; }

@media (max-width: 700px) {
    .settings-grid { grid-template-columns: 1fr; }
    .settings-control-grid { grid-template-columns: 1fr; }
    .settings-heading,
    .post-embed-placeholder { align-items: flex-start; flex-wrap: wrap; }
    .post-embed-placeholder .primary-button { width: 100%; }
    .post-embed-frame iframe { min-height: 520px; }
}
.chat-enter-help {
    display: block;
    margin: -5px 12px 10px;
    color: var(--muted);
    font-size: .75rem;
    text-align: right;
}
body.reduce-profile-animation .profile-background-layer[data-background-media-type="gif"] {
    display: none;
}


@media (min-width: 1100px) {
    .profile-music-dock {
        right: 24px;
        bottom: 24px;
    }
}

@media (max-width: 420px) {
    .profile-music-dock {
        right: 10px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        width: calc(100vw - 20px);
        gap: 6px;
        padding: 7px 8px;
    }
    .profile-music-mark { width: 28px; height: 28px; }
    .profile-music-control { width: 34px; height: 34px; }
    .profile-music-volume { min-width: 64px; }
}

/* Phase 3.2: client-side image optimization and storage usage */
.image-optimization-status {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin-top: 6px;
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
}
.image-optimization-status[data-state="working"] { color: #9fc6ff; }
.image-optimization-status[data-state="success"] { color: #72ddb0; }
.image-optimization-status[data-state="error"] { color: #ff9bb0; }
.upload-control { flex-wrap: wrap; }
.storage-panel { display: grid; gap: 12px; margin-bottom: 16px; }
.storage-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.storage-panel-heading h2 { margin-bottom: 4px; }
.storage-panel-heading p { margin: 0; color: var(--muted); }
.storage-panel-heading > strong { white-space: nowrap; color: #dce6ff; }
.storage-meter { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(99, 115, 179, .22); }
.storage-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple)); transition: width .25s ease; }
@media (max-width: 560px) {
    .storage-panel-heading { display: grid; }
    .storage-panel-heading > strong { white-space: normal; }
}

/* SEE PHASE 4 — GROUPS, GROUP CHATS, AND CENTERED MEDIA VIEWER */
.split-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.section-tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 18px;padding:5px;border:1px solid var(--border);border-radius:16px;background:rgba(12,17,41,.78)}.section-tabs a{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:10px 14px;border-radius:11px;color:var(--muted);font-weight:800}.section-tabs a.active{color:#fff;background:linear-gradient(120deg,rgba(25,125,237,.52),rgba(116,50,219,.52))}.section-tabs span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.72rem}.group-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.group-list-card{overflow:hidden}.group-card-cover{display:block;height:130px;background:linear-gradient(120deg,#135ec7,#6529a9)}.group-card-cover img{width:100%;height:100%;object-fit:cover}.group-card-body{display:flex;align-items:center;gap:12px;padding:13px}.group-card-body p{margin:3px 0 0;color:var(--muted);font-size:.84rem}.group-avatar{width:56px;height:56px;border-radius:16px;object-fit:cover;border:2px solid rgba(255,255,255,.16);background:#171e3d}.role-chip{padding:5px 8px;border-radius:999px;background:rgba(45,133,255,.16);color:#8fc3ff;font-size:.72rem;font-weight:850}.invitation-row,.member-management-row{display:flex;align-items:center;gap:13px;padding:14px}.invitation-row p,.member-management-row p{margin:3px 0 0;color:var(--muted)}.stack-list{display:grid;gap:10px}.form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.group-page{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:18px 0}.group-hero{overflow:hidden}.group-cover{height:270px;background:linear-gradient(120deg,#125ed1,#6d28ad)}.group-cover.has-cover{background:#080b1d}.group-cover img,.cover-lightbox-button{display:block;width:100%;height:100%}.cover-lightbox-button{border:0;padding:0;background:transparent}.group-cover img{object-fit:cover}.group-identity{display:flex;align-items:flex-end;gap:16px;padding:0 22px 20px;margin-top:-58px}.group-profile-button,.profile-avatar-button,.chat-header-image,.group-profile-button{border:0;padding:0;background:transparent}.group-profile-large{width:124px;height:124px;border-radius:28px;object-fit:cover;border:6px solid #11162f;background:#171e3d}.group-identity h1{margin:0 0 4px}.group-identity p{margin:0;color:var(--muted)}.group-hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.group-profile-tabs{margin-top:12px}.group-content-layout{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:18px;align-items:start}.group-sidebar{display:grid;gap:14px;position:sticky;top:82px}.member-avatar-stack{display:flex;flex-wrap:wrap;gap:7px}.post-group-context{font-size:.78rem;color:var(--muted)}.post-group-context a{color:#86bcff;font-weight:800}.announcement-banner,.pending-post-banner{padding:8px 14px;font-size:.79rem;font-weight:850;background:rgba(255,190,70,.13);color:#ffd17d;border-bottom:1px solid rgba(255,190,70,.2)}.pending-post-banner{background:rgba(73,138,255,.13);color:#96c7ff}.announcement-post{border-color:rgba(255,190,70,.45)}.post-image-button,.message-image-button{display:block;width:100%;border:0;padding:0;background:#050715}.post-image-button img{display:block;width:100%}.interaction-hint{margin:10px 0 0;color:var(--muted);text-align:center}.group-media-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.group-media-grid button{border:0;padding:0;background:#050715;border-radius:13px;overflow:hidden}.group-media-grid img,.group-media-grid video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:13px}.group-about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}.about-list{display:grid;gap:10px}.about-list>div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border);padding:9px 0}.about-list dt{color:var(--muted)}.group-rule{padding:10px 0;border-bottom:1px solid var(--border)}.group-rule p{margin:5px 0 0;color:var(--muted)}.member-directory{padding:18px}.rule-management-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.rule-management-row p{margin:4px 0 0;color:var(--muted)}.danger-zone{border-color:rgba(255,85,116,.45)}.member-actions{position:relative}.member-actions summary{cursor:pointer;color:#8fc3ff}.member-actions>div{position:absolute;right:0;top:28px;z-index:30;width:230px;padding:9px;border:1px solid var(--border);border-radius:13px;background:#11162f;box-shadow:var(--shadow)}.member-actions form{display:grid;gap:6px;margin-bottom:6px}.member-actions button{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:8px}.member-picker{border:1px solid var(--border);border-radius:15px;padding:12px}.member-picker legend{padding:0 7px;font-weight:800}.member-picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:420px;overflow:auto}.member-pick-row{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid rgba(76,89,151,.35);border-radius:12px}.member-pick-row input{width:auto}.member-pick-row small{display:block;color:var(--muted)}.group-chat-dot{position:absolute;right:-3px;bottom:-2px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#7738d9;border:2px solid #11162f;font-style:normal;font-size:.7rem}.chat-info-hero{display:flex;align-items:center;gap:16px;padding:18px;margin-bottom:15px}.chat-info-hero h1{margin:0 0 4px}.chat-info-hero p{margin:0;color:var(--muted)}.chat-composer{grid-template-columns:auto auto minmax(0,1fr) auto}.chat-upload-preview video{width:130px;max-height:100px;border-radius:10px}.message-video{display:block;max-width:min(420px,68vw);max-height:420px;border-radius:10px;margin-bottom:6px}.message-image-button{border-radius:10px;overflow:hidden;margin-bottom:6px}.group-message-sender{display:flex;align-items:center;gap:7px;margin:0 4px 3px}.group-message-sender strong{font-size:.77rem;color:#a9cfff}.system-message{align-self:center;max-width:85%;padding:6px 10px;border-radius:999px;background:rgba(100,114,173,.16);color:var(--muted);font-size:.74rem;text-align:center}.settings-media-preview{display:block;width:100%;height:180px;object-fit:cover;border-radius:14px;margin:9px 0}.group-avatar-preview{width:120px;height:120px}.cover-lightbox-button,.profile-avatar-button{cursor:zoom-in}.profile-avatar-button{margin-left:0;align-self:flex-end}.lightbox-trigger,[data-lightbox-src]{cursor:zoom-in}.see-lightbox{position:fixed;z-index:2000;inset:0;display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;background:rgba(0,0,0,.92);padding:20px}.see-lightbox[hidden]{display:none}.see-lightbox figure{margin:0;min-width:0;display:grid;place-items:center;gap:10px}.see-lightbox img{display:block;max-width:min(1100px,88vw);max-height:82vh;object-fit:contain;border-radius:8px}.see-lightbox figcaption{width:min(900px,88vw);display:flex;justify-content:space-between;gap:12px;color:#fff}.see-lightbox figcaption small{color:#b9bfd8}.see-lightbox-close,.see-lightbox-nav{border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.13);font-size:2rem}.see-lightbox-close{position:absolute;right:18px;top:18px;width:46px;height:46px}.see-lightbox-nav{width:52px;height:52px;justify-self:center}.lightbox-open{overflow:hidden}.cover-lightbox-button{display:block}.profile-cover{pointer-events:none}.profile-avatar-button .profile-avatar{display:block}.group-tabs::-webkit-scrollbar,.section-tabs::-webkit-scrollbar{height:4px}.group-tabs::-webkit-scrollbar-thumb,.section-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}.admin-group-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover}
@media(max-width:900px){.group-content-layout{grid-template-columns:1fr}.group-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.group-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.group-about-grid{grid-template-columns:1fr}}
@media(max-width:760px){.group-card-grid{grid-template-columns:1fr}.form-two{grid-template-columns:1fr}.group-cover{height:180px}.group-identity{align-items:center;flex-wrap:wrap;margin-top:-42px;padding:0 14px 16px}.group-profile-large{width:96px;height:96px;border-radius:23px}.group-hero-actions{width:100%}.group-hero-actions>*{flex:1}.group-sidebar{grid-template-columns:1fr}.group-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.member-picker-list{grid-template-columns:1fr}.chat-composer{grid-template-columns:auto auto minmax(0,1fr)}.chat-composer>button[type=submit]{grid-column:3}.see-lightbox{grid-template-columns:42px minmax(0,1fr) 42px;padding:10px}.see-lightbox img{max-width:92vw;max-height:78vh}.see-lightbox-nav{width:40px;height:40px}.see-lightbox figcaption{width:90vw}.chat-info-hero{align-items:flex-start;flex-wrap:wrap}}

/* Phase 4 centered media viewer zoom controls */
.see-lightbox-image-stage {
    width: min(92vw, 1180px);
    height: min(78vh, 820px);
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
}
.see-lightbox-image-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center;
    transition: transform .16s ease;
}
.see-lightbox.is-zoomed .see-lightbox-image-stage img { cursor: zoom-out; }
.see-lightbox-zoom {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background: rgba(7,10,26,.82);
    backdrop-filter: blur(12px);
}
.see-lightbox-zoom button {
    min-width: 42px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    color: white;
    background: rgba(255,255,255,.1);
}
.see-lightbox.has-image-error .see-lightbox-image-stage::after {
    content: 'Image unavailable';
    color: white;
}
.plain-media-button,
.group-card-cover > button {
    border: 0;
    padding: 0;
    background: transparent;
}
.group-card-cover > button { width: 100%; height: 100%; display: block; }
.conversation-menu-label {
    display: block;
    padding: 8px 12px 4px;
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.chat-reply-compose {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    background: rgba(57,94,180,.14);
}
.chat-reply-compose[hidden] { display: none; }
.chat-reply-compose small,
.chat-reply-compose strong { display: block; }
.chat-reply-compose button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    background: var(--surface-2);
}


/* Manual refresh feedback for group conversations */
[data-message-refresh].is-refreshing {
    animation: see-room-refresh .7s linear infinite;
}

@keyframes see-room-refresh {
    to { transform: rotate(360deg); }
}


/* Phase 4.2: keep static and animated profile covers inside one fixed frame. */
.profile-hero {
    position: relative;
}

.profile-cover-frame {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 20%, rgba(255,255,255,.22), transparent 18%),
        linear-gradient(120deg, #0c67ff, #7a22ff 58%, #111541);
    isolation: isolate;
}

.profile-cover-frame > .cover-lightbox-button,
.profile-cover-frame > .cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
}

.profile-cover-frame > .cover-lightbox-button {
    position: relative;
    inset: auto;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #080b1d;
}

.profile-cover-frame .profile-cover {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.profile-cover-frame .cover-placeholder {
    height: 100%;
}

.profile-main,
.profile-bio,
.profile-meta,
.profile-actions,
.profile-tabs {
    position: relative;
    z-index: 2;
}

.profile-main {
    margin-top: -48px;
}

@media (max-width: 760px) {
    .profile-cover-frame {
        height: 160px;
    }
}

/* Phase 4.3: TikTok videos stay inside See as a centered vertical player. */
.tiktok-inline-card .post-embed-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 560px;
    padding: 10px;
    background: #000;
}

.tiktok-inline-card .post-embed-frame[hidden] {
    display: none;
}

.tiktok-inline-card .post-embed-frame iframe {
    width: min(100%, 430px);
    height: min(78vh, 760px);
    min-height: 560px;
    border-radius: 14px;
    background: #000;
}

.tiktok-inline-card .post-embed-placeholder {
    min-height: 150px;
}

@media (max-width: 700px) {
    .tiktok-inline-card .post-embed-frame {
        min-height: 520px;
        padding: 0;
    }

    .tiktok-inline-card .post-embed-frame iframe {
        width: 100%;
        height: min(76vh, 720px);
        min-height: 520px;
        border-radius: 0;
    }
}


/* Phase 4.4: inline YouTube, Facebook, Streamable, and TikTok players. */
.youtube-inline-card .post-embed-frame,
.streamable-inline-card .post-embed-frame,
.facebook-inline-card:not(.facebook-reel-card) .post-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    background: #000;
}
.youtube-inline-card .post-embed-frame[hidden],
.streamable-inline-card .post-embed-frame[hidden],
.facebook-inline-card .post-embed-frame[hidden] {
    display: none;
}
.youtube-inline-card .post-embed-frame iframe,
.streamable-inline-card .post-embed-frame iframe,
.facebook-inline-card:not(.facebook-reel-card) .post-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}
.facebook-reel-card .post-embed-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 560px;
    padding: 10px;
    background: #000;
}
.facebook-reel-card .post-embed-frame[hidden] { display: none; }
.facebook-reel-card .post-embed-frame iframe {
    width: min(100%, 430px);
    height: min(78vh, 760px);
    min-height: 560px;
    border: 0;
    border-radius: 14px;
    background: #000;
}

/* Phase 4.4: centered media viewer for portrait and landscape images. */
.see-lightbox {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-rows: minmax(0, 1fr);
    justify-items: center;
    overflow: hidden;
}
.see-lightbox figure {
    width: 100%;
    height: calc(100dvh - 40px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
}
.see-lightbox-image-stage {
    width: min(100%, 1180px);
    height: 100%;
    max-height: calc(100dvh - 104px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin-inline: auto;
}
.see-lightbox.is-zoomed .see-lightbox-image-stage {
    overflow: auto;
}
.see-lightbox-image-stage img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
.see-lightbox figcaption {
    width: min(100%, 900px);
    max-width: calc(100vw - 170px);
}

@media (max-width: 760px) {
    .facebook-reel-card .post-embed-frame {
        min-height: 520px;
        padding: 0;
    }
    .facebook-reel-card .post-embed-frame iframe {
        width: 100%;
        height: min(76vh, 720px);
        min-height: 520px;
        border-radius: 0;
    }
    .see-lightbox {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }
    .see-lightbox-nav {
        display: none !important;
    }
    .see-lightbox figure {
        width: 100%;
        height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-width: 0;
    }
    .see-lightbox-image-stage {
        width: 100%;
        max-width: 100%;
        height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: none;
        border-radius: 8px;
        overflow: hidden;
    }
    .see-lightbox.is-zoomed .see-lightbox-image-stage {
        overflow: auto;
    }
    .see-lightbox-image-stage img {
        max-width: 100%;
        max-height: 100%;
    }
    .see-lightbox figcaption {
        width: 100%;
        max-width: 100%;
        padding-inline: 6px;
    }
    .see-lightbox-close {
        right: max(10px, env(safe-area-inset-right));
        top: max(10px, env(safe-area-inset-top));
    }
    .see-lightbox-zoom {
        bottom: max(10px, env(safe-area-inset-bottom));
    }
}


/* Phase 4.5: exact desktop fitting for portrait photos. */
@media (min-width: 761px) {
    .see-lightbox figure {
        max-width: calc(100vw - 168px);
    }

    .see-lightbox-image-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, 1180px);
        height: calc(100dvh - 112px);
        max-height: calc(100dvh - 112px);
        padding: 4px;
        box-sizing: border-box;
    }

    .see-lightbox-image-stage img {
        flex: 0 0 auto;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }

    .see-lightbox.is-portrait-media .see-lightbox-image-stage img {
        width: auto;
    }
}


/* --------------------------------------------------------------------------
   SEE PHASE 4.6 — smart composer, Watch, and video viewer
   -------------------------------------------------------------------------- */
.smart-composer-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.smart-media-menu-wrap { position:relative; }
.smart-media-menu { position:absolute; z-index:45; top:calc(100% + 7px); left:0; min-width:190px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#10162f; box-shadow:var(--shadow); }
.smart-media-menu button { width:100%; min-height:45px; display:flex; align-items:center; gap:9px; border:0; border-bottom:1px solid rgba(70,83,139,.35); color:var(--text); background:transparent; padding:0 14px; text-align:left; }
.smart-media-menu button:hover { background:rgba(90,110,185,.14); }
.smart-link-preview { overflow:hidden; border:1px solid rgba(72,88,151,.55); border-radius:16px; background:#050714; }
.smart-link-preview > img { display:block; width:100%; max-height:440px; object-fit:contain; }
.smart-link-label { padding:9px 12px; color:#b9c7f4; font-size:.84rem; background:#10162f; }
.smart-embed-preview { width:100%; margin:auto; background:#000; }
.smart-embed-preview iframe { display:block; width:100%; height:100%; border:0; }
.text-button { border:0; color:#8fc1ff; background:transparent; padding:10px 0 0; }

.post-video-shell,.post-embed-card,.watch-embed,.watch-direct-video { position:relative; overflow:hidden; background:#000; }
.video-mode-portrait { width:min(100%,380px); margin-inline:auto; aspect-ratio:9/16; }
.video-mode-landscape,.video-mode-auto { width:100%; aspect-ratio:16/9; }
.post-video-shell .post-video,.watch-direct-video video { width:100%; height:100%; max-height:none; object-fit:contain; }
.post-embed-frame { width:100%; height:100%; }
.post-embed-frame iframe { width:100%; height:100%; min-height:0; }
.video-expand-button { position:absolute; z-index:8; top:10px; right:10px; width:39px; height:39px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:12px; color:#fff; background:rgba(0,0,0,.64); font-size:1.1rem; }

.see-video-viewer { position:fixed; z-index:1300; inset:0; display:grid; place-items:center; padding:58px 18px 22px; background:rgba(0,0,0,.94); }
.see-video-viewer[hidden] { display:none; }
.see-video-viewer-stage { display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden; }
.see-video-viewer-stage video,.see-video-viewer-stage iframe { display:block; max-width:100%; max-height:100%; border:0; background:#000; }
.see-video-viewer[data-video-mode="portrait"] .see-video-viewer-stage video,
.see-video-viewer[data-video-mode="portrait"] .see-video-viewer-stage iframe { width:min(92vw,430px); height:min(calc(100dvh - 90px),764px); aspect-ratio:9/16; }
.see-video-viewer[data-video-mode="landscape"] .see-video-viewer-stage video,
.see-video-viewer[data-video-mode="landscape"] .see-video-viewer-stage iframe,
.see-video-viewer[data-video-mode="auto"] .see-video-viewer-stage video,
.see-video-viewer[data-video-mode="auto"] .see-video-viewer-stage iframe { width:min(94vw,1200px); height:auto; max-height:calc(100dvh - 90px); aspect-ratio:16/9; }
.see-video-viewer-close { position:absolute; z-index:2; top:max(12px,env(safe-area-inset-top)); right:14px; width:46px; height:46px; border:0; border-radius:50%; color:#fff; background:rgba(40,45,65,.9); font-size:1.8rem; }
body.video-viewer-open { overflow:hidden; }

.watch-page-body { padding-bottom:0; overflow:hidden; }
.watch-page { width:min(1180px,100%); margin:auto; }
.watch-page-heading { height:76px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 18px; }
.watch-page-heading h1 { margin:0; font-size:1.45rem; }
.watch-page-heading p { margin:3px 0 0; color:var(--muted); font-size:.82rem; }
.watch-stream { height:calc(100dvh - 141px); overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none; }
.watch-stream::-webkit-scrollbar { display:none; }
.watch-item { position:relative; min-height:calc(100dvh - 141px); display:flex; flex-direction:column; justify-content:center; scroll-snap-align:start; scroll-snap-stop:always; padding:10px 16px 18px; }
.watch-video-stage { position:relative; width:min(100%,900px); height:min(calc(100dvh - 245px),760px); margin:auto; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:20px; background:#000; }
.watch-video-stage .video-mode-portrait { height:100%; width:auto; max-width:100%; }
.watch-video-stage .video-mode-landscape,.watch-video-stage .video-mode-auto { width:100%; height:auto; max-height:100%; }
.watch-video-stage iframe,.watch-video-stage video { width:100%; height:100%; object-fit:contain; border:0; }
.watch-overlay-copy { position:absolute; z-index:5; left:0; right:0; bottom:0; padding:56px 16px 15px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.82)); pointer-events:none; }
.watch-overlay-copy a { pointer-events:auto; }
.watch-overlay-copy > a { display:flex; align-items:center; gap:9px; }
.watch-overlay-copy p { max-width:680px; margin:9px 0 0; }
.watch-actions { width:min(100%,900px); min-height:55px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:7px 4px; }
.watch-actions > button { border:0; color:var(--text); background:transparent; }
.watch-reaction-total { margin-left:auto; color:var(--muted); }
.watch-comments { position:absolute; z-index:20; right:16px; bottom:76px; width:min(430px,calc(100% - 32px)); max-height:62%; overflow:auto; border:1px solid var(--border); border-radius:18px; background:rgba(12,17,41,.98); box-shadow:var(--shadow); }
.watch-empty { min-height:60vh; display:grid; place-content:center; text-align:center; }

.bottom-nav { grid-template-columns:repeat(5,1fr); }

@media (max-width:760px) {
  .watch-page-heading { height:58px; padding:7px 12px; }
  .watch-page-heading p,.watch-page-heading .secondary-button { display:none; }
  .watch-stream { height:calc(100dvh - 132px); }
  .watch-item { min-height:calc(100dvh - 132px); padding:0 0 8px; }
  .watch-video-stage { width:100%; height:calc(100dvh - 205px); border-radius:0; }
  .watch-actions { padding:5px 10px; }
  .watch-comments { position:fixed; left:8px; right:8px; bottom:80px; width:auto; max-height:55dvh; }
  .video-mode-portrait { width:min(100%,360px); }
  .smart-composer-tools > small { width:100%; }
  .bottom-nav a small { font-size:.61rem; }
}


/* --------------------------------------------------------------------------
   SEE PHASE 4.7 — corrected external orientation and true fullscreen video
   -------------------------------------------------------------------------- */
.see-video-viewer {
    position: fixed;
    z-index: 3000;
    inset: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.see-video-viewer[hidden] {
    display: none;
}

.see-video-viewer-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}

.see-video-viewer-stage video,
.see-video-viewer-stage iframe {
    display: block;
    border: 0;
    background: #000;
}

.see-video-viewer-stage .see-expanded-direct-video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.see-video-viewer[data-video-mode="portrait"] .see-expanded-embed {
    width: min(100dvw, calc(100dvh * 0.5625));
    height: 100dvh;
    max-width: 100dvw;
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
}

.see-video-viewer[data-video-mode="landscape"] .see-expanded-embed {
    width: 100dvw;
    height: min(100dvh, calc(100dvw * 0.5625));
    max-width: 100dvw;
    max-height: 100dvh;
    aspect-ratio: 16 / 9;
}

.see-video-viewer-close {
    position: absolute;
    z-index: 5;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,.72);
    font-size: 1.9rem;
}

.see-video-viewer:fullscreen,
.see-video-viewer:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
}

body.video-viewer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.current-embed-editor {
    display: grid;
    gap: 12px;
}

.current-embed-editor > a {
    color: #8fc1ff;
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   SEE PHASE 4.8 — Reels can be wide; reliable Android fullscreen control
   -------------------------------------------------------------------------- */
.post-embed-frame,
.post-embed-frame iframe {
    position: relative;
    z-index: 1;
}

.video-expand-button {
    z-index: 70;
    gap: 7px;
    touch-action: manipulation;
    pointer-events: auto;
}

.video-expand-label {
    display: none;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.smart-video-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid rgba(72,88,151,.45);
    background: #10162f;
}
.smart-video-layout > span { color: #c7d1f7; font-size: .85rem; font-weight: 800; }
.smart-video-layout select { width: min(230px, 58%); min-height: 38px; padding-block: 7px; }

@media (max-width: 760px) {
    .post-video-shell .video-expand-button,
    .post-embed-card .video-expand-button,
    .watch-direct-video .video-expand-button,
    .watch-embed .video-expand-button {
        top: auto;
        right: 10px;
        bottom: 10px;
        width: auto;
        min-width: 116px;
        height: 44px;
        padding: 0 14px;
        border-radius: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(4,7,18,.9);
        box-shadow: 0 8px 22px rgba(0,0,0,.42);
    }
    .video-expand-label { display: inline; }
    .see-video-viewer-close {
        width: 52px;
        height: 52px;
        font-size: 2rem;
    }
}


/* --------------------------------------------------------------------------
   SEE PHASE 4.9 — Android download page
   -------------------------------------------------------------------------- */
.download-app-body {
    min-height: 100vh;
}

.download-public-nav {
    width: min(1120px, calc(100% - 28px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.download-public-nav > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-public-brand img {
    display: block;
    width: 78px;
    height: 54px;
    object-fit: cover;
    object-position: center 68%;
}

.download-app-page {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
    padding: 30px 0 50px;
}

.download-app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 34px;
    align-items: center;
    padding: clamp(24px, 4vw, 48px);
    overflow: hidden;
}

.download-app-copy {
    min-width: 0;
}

.download-app-icon-wrap {
    width: 92px;
    height: 92px;
    padding: 8px;
    margin-bottom: 18px;
    border: 1px solid rgba(105, 122, 198, .48);
    border-radius: 25px;
    background: #050713;
}

.download-app-icon-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 19px;
    object-fit: cover;
}

.download-app-eyebrow {
    margin-bottom: 8px;
    color: #80baff;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .16em;
}

.download-app-copy h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 5vw, 3.8rem);
}

.download-app-lead {
    max-width: 610px;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.download-apk-button {
    min-height: 54px;
    gap: 10px;
    padding-inline: 24px;
}

.download-apk-button span {
    font-size: 1.35rem;
}

.download-app-file {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .9rem;
}

.download-app-security {
    max-width: 620px;
    margin-top: 25px;
    padding: 15px 17px;
    border: 1px solid rgba(73, 95, 165, .55);
    border-radius: 15px;
    background: rgba(9, 14, 39, .7);
}

.download-app-security p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.download-qr-panel {
    text-align: center;
}

.download-qr-card {
    width: min(100%, 350px);
    margin: 0 auto 18px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
}

.download-qr-card img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.download-qr-panel h2 {
    margin-bottom: 8px;
}

.download-qr-panel p {
    max-width: 400px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.55;
}

.download-app-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.download-instructions,
.download-file-details {
    padding: 23px;
}

.download-instructions ol {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding-left: 23px;
    color: #dfe4ff;
    line-height: 1.5;
}

.download-file-details dl {
    display: grid;
    gap: 0;
    margin: 15px 0;
}

.download-file-details dl > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(69, 82, 138, .35);
}

.download-file-details dt {
    color: var(--muted);
}

.download-file-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.download-file-details details {
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #0c1129;
}

.download-file-details summary {
    cursor: pointer;
    font-weight: 750;
}

.download-file-details code {
    display: block;
    margin-top: 8px;
    padding: 11px;
    border-radius: 10px;
    background: #060817;
    color: #bcd1ff;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: .78rem;
}

.download-app-back {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.auth-download-link {
    margin: 14px 0 0;
    text-align: center;
}

.auth-download-link a {
    color: #83bdff;
    font-weight: 800;
}

@media (max-width: 760px) {
    .download-public-nav {
        min-height: 64px;
    }

    .download-public-nav .secondary-button {
        display: none;
    }

    .download-app-page {
        width: min(100% - 18px, 680px);
        padding-top: 12px;
    }

    .download-app-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 22px 17px;
    }

    .download-app-copy {
        text-align: center;
    }

    .download-app-icon-wrap {
        margin-inline: auto;
    }

    .download-app-lead,
    .download-app-security {
        margin-inline: auto;
    }

    .download-apk-button {
        width: 100%;
    }

    .download-qr-panel {
        order: 2;
    }

    .download-qr-card {
        width: min(88vw, 310px);
    }

    .download-app-details {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   SEE PHASE 5.0 — Facebook-style floating desktop message windows
   -------------------------------------------------------------------------- */
.desktop-message-dock {
    position: fixed;
    z-index: 1250;
    right: 18px;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    max-width: calc(100vw - 36px);
    pointer-events: none;
}

.desktop-message-window {
    width: 330px;
    height: 455px;
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 1px solid #344077;
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #101735;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .52);
    pointer-events: auto;
    transition: width .18s ease, height .18s ease, border-radius .18s ease;
}

.desktop-message-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 7px 8px;
    border-bottom: 1px solid #2d386a;
    background: #151e43;
}

.desktop-message-header > .avatar {
    cursor: pointer;
}

.desktop-message-title,
.desktop-message-refresh,
.desktop-message-minimize,
.desktop-message-close {
    border: 0;
    color: #edf1ff;
    background: transparent;
}

.desktop-message-title {
    min-width: 0;
    padding: 7px 4px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.desktop-message-refresh,
.desktop-message-minimize,
.desktop-message-close,
.desktop-message-open {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #b8c8ff;
}

.desktop-message-refresh:hover,
.desktop-message-minimize:hover,
.desktop-message-close:hover,
.desktop-message-open:hover {
    background: rgba(92, 118, 215, .22);
}

.desktop-message-refresh.is-refreshing {
    animation: see-room-refresh .7s linear infinite;
}

.desktop-message-unread {
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 5px;
    border-radius: 999px;
    color: #fff;
    background: #3e7cff;
    font-size: .72rem;
}

.desktop-message-stream {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 12px 10px 16px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.desktop-message-empty,
.desktop-message-access-error,
.desktop-message-blocked {
    margin: auto;
    padding: 15px;
    color: var(--muted);
    text-align: center;
    line-height: 1.45;
}

.desktop-message-system {
    align-self: center;
    max-width: 88%;
    padding: 6px 9px;
    border-radius: 999px;
    color: #aab4d9;
    background: #0a0f28;
    text-align: center;
    font-size: .76rem;
}

.desktop-message-bubble {
    max-width: 82%;
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 15px;
    overflow-wrap: anywhere;
}

.desktop-message-bubble.mine {
    align-self: flex-end;
    color: #fff;
    background: linear-gradient(135deg, #146eff, #8537ff);
    border-bottom-right-radius: 5px;
}

.desktop-message-bubble.theirs {
    align-self: flex-start;
    color: #edf1ff;
    background: #222d56;
    border-bottom-left-radius: 5px;
}

.desktop-message-bubble p {
    margin: 0;
    white-space: pre-wrap;
}

.desktop-message-bubble video,
.desktop-message-photo img {
    display: block;
    width: 100%;
    max-height: 210px;
    border-radius: 10px;
    object-fit: contain;
    background: #050713;
}

.desktop-message-photo {
    border: 0;
    padding: 0;
    background: transparent;
}

.desktop-message-time {
    color: rgba(229, 234, 255, .7);
    font-size: .67rem;
}

.desktop-message-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
}

.avatar-xs {
    width: 23px;
    height: 23px;
}

.desktop-message-reply {
    padding: 5px 7px;
    border-left: 3px solid rgba(255,255,255,.45);
    color: rgba(240,243,255,.8);
    background: rgba(3,7,22,.22);
}

.desktop-message-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid #2b3667;
    color: #b8c7f7;
    background: #0c122c;
    font-size: .75rem;
}

.desktop-message-attachment button {
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 1.05rem;
}

.desktop-message-form {
    display: grid;
    grid-template-columns: 34px 34px minmax(0, 1fr) 38px;
    align-items: end;
    gap: 5px;
    padding: 8px;
    border-top: 1px solid #2d386a;
    background: #121a3a;
}

.desktop-message-form textarea {
    width: 100%;
    max-height: 96px;
    min-height: 38px;
    resize: none;
    padding: 9px 11px;
    border-radius: 18px;
}

.desktop-message-attach {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: #9fc2ff;
    background: #202b55;
    cursor: pointer;
}

.desktop-message-attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.desktop-message-send {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1877ff, #8e35ff);
}

.desktop-message-window.is-minimized {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border-bottom: 1px solid #344077;
    margin-bottom: 12px;
}

.desktop-message-window.is-minimized .desktop-message-header {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 7px;
    border: 0;
    border-radius: 50%;
}

.desktop-message-window.is-minimized .desktop-message-header > .avatar {
    width: 42px;
    height: 42px;
}

.desktop-message-window.is-minimized .desktop-message-title,
.desktop-message-window.is-minimized .desktop-message-refresh,
.desktop-message-window.is-minimized .desktop-message-open,
.desktop-message-window.is-minimized .desktop-message-minimize,
.desktop-message-window.is-minimized .desktop-message-close,
.desktop-message-window.is-minimized .desktop-message-stream,
.desktop-message-window.is-minimized .desktop-message-attachment,
.desktop-message-window.is-minimized .desktop-message-blocked,
.desktop-message-window.is-minimized .desktop-message-form {
    display: none !important;
}

.desktop-message-window.is-minimized .desktop-message-unread {
    position: absolute;
    top: -3px;
    right: -3px;
}

.desktop-message-window.has-unread .desktop-message-header {
    box-shadow: inset 0 3px 0 #4384ff;
}

.desktop-message-window.incoming-pulse {
    animation: desktop-message-pulse .6s ease 2;
}

@keyframes desktop-message-pulse {
    50% { transform: translateY(-7px); }
}

.member-management-row .danger-link {
    color: #ff8ca0;
}

@media (max-width: 960px) {
    .desktop-message-dock {
        display: none !important;
    }
}

/* ========================================================================== 
   SEE PHASE 5.2 — Social experience, accessibility, messaging, onboarding
   ========================================================================== */

/* Light theme */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f6ff;
    --surface: #ffffff;
    --surface-2: #eef2ff;
    --border: #cfd7ef;
    --text: #161b2e;
    --muted: #68718e;
    --shadow: 0 16px 38px rgba(38, 52, 91, .12);
    background: var(--bg);
}
html[data-theme="light"] body {
    background:
        radial-gradient(circle at 10% -10%, rgba(38, 125, 255, .12), transparent 30rem),
        radial-gradient(circle at 95% 5%, rgba(157, 45, 255, .08), transparent 25rem),
        var(--bg);
}
html[data-theme="light"] .card {
    border-color: rgba(155, 168, 207, .48);
    background: rgba(255, 255, 255, .96);
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    color: var(--text);
    background: #fff;
}
html[data-theme="light"] label,
html[data-theme="light"] .conversation-row p,
html[data-theme="light"] .notification-row p,
html[data-theme="light"] .person-bio {
    color: #38415e;
}
html[data-theme="light"] .topbar {
    border-color: rgba(158, 171, 211, .55);
    background: rgba(255, 255, 255, .9);
}
html[data-theme="light"] .bottom-nav {
    border-color: rgba(144, 159, 206, .65);
    background: rgba(255,255,255,.95);
    box-shadow: 0 16px 38px rgba(42,55,94,.18);
}
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .chat-photo-button,
html[data-theme="light"] .desktop-message-attach {
    color: #27314f;
    background: #edf1fc;
}
html[data-theme="light"] .header-popover,
html[data-theme="light"] .account-popover,
html[data-theme="light"] .conversation-menu {
    color: var(--text);
    background: #fff;
    border-color: var(--border);
}
html[data-theme="light"] .post-media-grid,
html[data-theme="light"] .gallery-open,
html[data-theme="light"] .gallery-item > a {
    background: #e9edf7;
}
html[data-theme="light"] .comment-bubble,
html[data-theme="light"] .message-bubble.theirs .message-content {
    color: #202742;
    background: #edf1fb;
}
html[data-theme="light"] .comment-bubble small,
html[data-theme="light"] .message-bubble.theirs .message-content small {
    color: #6e7897;
}
html[data-theme="light"] .desktop-message-window {
    border-color: #b8c3e5;
    background: #fff;
    box-shadow: 0 18px 42px rgba(28,42,78,.22);
}
html[data-theme="light"] .desktop-message-header,
html[data-theme="light"] .desktop-message-form {
    color: #17203b;
    background: #f5f7ff;
    border-color: #d4dcf1;
}
html[data-theme="light"] .desktop-message-title,
html[data-theme="light"] .desktop-message-refresh,
html[data-theme="light"] .desktop-message-minimize,
html[data-theme="light"] .desktop-message-close,
html[data-theme="light"] .desktop-message-delete {
    color: #273250;
}
html[data-theme="light"] .desktop-message-bubble.theirs {
    color: #202742;
    background: #edf1fb;
}
html[data-theme="light"] .desktop-message-stream {
    background: #fff;
}
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] .admin-mobile-topbar {
    background: #fff;
    border-color: #d6def1;
}

/* Live people search */
.top-search-wrap { position: relative; min-width: 0; }
.live-search-results {
    position: absolute;
    z-index: 500;
    top: calc(100% + 8px);
    left: 0;
    width: min(520px, 86vw);
    max-height: min(560px, 70vh);
    overflow-y: auto;
    padding: 8px;
}
.live-search-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
}
.live-search-person:hover { background: rgba(74, 112, 215, .13); }
.live-search-person div { display: grid; min-width: 0; }
.live-search-person strong,
.live-search-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-search-person small { color: var(--muted); }
.live-search-all { display: block; padding: 11px; color: #78b8ff; font-weight: 800; text-align: center; }
.live-search-empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; }

/* Threaded comments */
.comments-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.comment-thread { display: grid; gap: 3px; }
.comment-reply-item { margin-left: 42px; }
.comment-reply-item .avatar { width: 29px; height: 29px; }
.comment-replies-list { display: grid; gap: 8px; margin-top: 7px; }
.comment-replies-toggle,
.comment-reply-button {
    border: 0;
    color: #80baff;
    background: transparent;
    font-size: .76rem;
    font-weight: 800;
}
.comment-replies-toggle { margin: 5px 0 0 4px; text-align: left; }
.comment-reply-mention { color: #84baff; }
.comment-reply-compose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 11px;
    border-radius: 12px;
    color: var(--muted);
    background: rgba(61, 92, 179, .13);
}
.comment-reply-compose button { border:0; color:var(--text); background:transparent; font-size:1.2rem; }
.comment-reaction-bar { flex-wrap: wrap; }
.comment-reaction-total { margin-left: auto; }

/* Voice clips */
.post-voice-clip,
.message-voice-clip {
    display: flex;
    align-items: center;
    gap: 11px;
    width: min(100%, 520px);
    padding: 14px;
    background: linear-gradient(145deg, rgba(38,96,196,.18), rgba(133,50,210,.13));
}
.post-voice-clip { margin: 0; min-height: 96px; }
.post-voice-clip > span,
.message-voice-clip > span { font-size: 1.7rem; }
.post-voice-clip > div { min-width:0; flex:1; }
.post-voice-clip audio,
.message-voice-clip audio,
.desktop-message-audio { width: 100%; max-width: 100%; }
.voice-record-button,
.voice-chat-button {
    border: 1px solid rgba(104,132,224,.5);
    color: var(--text);
    background: var(--surface-2);
}
.voice-record-button { min-height: 44px; border-radius: 13px; padding: 0 15px; font-weight: 800; }
.voice-record-button.is-recording,
.voice-chat-button.is-recording,
.desktop-message-voice.is-recording { color:#fff; background:#d73557; animation: voice-pulse .8s ease infinite alternate; }
.voice-record-status { color: var(--muted); font-size:.85rem; }
.voice-record-preview audio { width:100%; }
@keyframes voice-pulse { to { box-shadow: 0 0 0 7px rgba(255,70,105,.14); } }

/* Chat reactions */
.message-content { position: relative; overflow: visible; }
.message-reaction-summary {
    position: absolute;
    right: 7px;
    bottom: -13px;
    min-width: 28px;
    padding: 3px 7px;
    border: 1px solid rgba(110,126,192,.45);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    font-size: .72rem;
}
.message-reaction-picker {
    position: absolute;
    z-index: 30;
    left: 10px;
    bottom: calc(100% + 5px);
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.message-reaction-picker button { width:33px; height:33px; border:0; border-radius:50%; background:transparent; font-size:1.15rem; }
.message-reaction-picker button:hover,
.message-reaction-picker button.active { background:rgba(62,124,255,.18); transform:scale(1.12); }
.message-bubble { position: relative; margin-bottom: 8px; }
.message-tools { padding-top: 8px; }

/* Chat composer with photo, video and voice controls */
.chat-composer {
    grid-template-columns: 42px 42px 42px minmax(0,1fr) auto;
}
.chat-reply-compose,
.chat-upload-preview,
.chat-enter-help { grid-column: 1 / -1; }
.chat-upload-preview audio { width:min(100%,400px); }

/* Desktop right-side chat heads */
.desktop-chat-head-rail {
    position: fixed;
    z-index: 1260;
    right: 12px;
    top: 82px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    pointer-events: none;
}
.desktop-chat-head-rail .desktop-message-window { pointer-events:auto; }
.desktop-message-window.is-minimized { margin:0; }
.desktop-message-window.is-minimized .desktop-message-header { position:relative; }
.desktop-message-delete {
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    color:#b8c8ff;
    background:transparent;
}
.desktop-message-delete:hover { background:rgba(255,85,116,.16); color:#ff91a6; }
.desktop-message-header { grid-template-columns:36px minmax(0,1fr) auto auto auto auto auto auto; }
.desktop-message-form { grid-template-columns:34px minmax(0,1fr) 38px; }
.desktop-message-react { align-self:flex-start; border:0; color:rgba(230,235,255,.8); background:transparent; font-size:.7rem; }
.desktop-message-bubble { position:relative; }
.desktop-message-reaction-picker { left:0; bottom:26px; }

/* About, preferences and onboarding */
.about-page,
.settings-page,
.onboarding-page { width:min(980px,calc(100% - 24px)); margin:0 auto; padding:24px 0; }
.about-hero,
.settings-panel,
.onboarding-card { padding: clamp(18px,4vw,34px); }
.about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.about-detail { display:grid; grid-template-columns:38px minmax(0,1fr); gap:11px; align-items:start; padding:15px; }
.about-detail span { font-size:1.3rem; }
.about-detail small { display:block; color:var(--muted); margin-bottom:3px; }
.profile-about-preview { margin:15px 20px 0; padding:15px; }
.profile-about-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.profile-about-preview-grid p { margin:0; color:var(--muted); }
.settings-fieldset { border:1px solid var(--border); border-radius:15px; padding:15px; }
.settings-fieldset legend { padding:0 7px; font-weight:850; }
.theme-choice { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:10px; }
.theme-choice input { width:auto; }
.onboarding-card { max-width:720px; margin:0 auto; }
.onboarding-header { display:flex; align-items:center; gap:15px; }
.onboarding-header img { width:76px; height:76px; border-radius:20px; }
.onboarding-header p { color:#80baff; font-size:.76rem; font-weight:900; letter-spacing:.12em; }
.onboarding-progress { height:8px; margin:20px 0; border-radius:999px; overflow:hidden; background:var(--surface-2); }
.onboarding-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--purple)); }
.onboarding-upload { min-height:130px; display:grid; place-items:center; padding:20px; border:2px dashed var(--border); border-radius:18px; text-align:center; }
.onboarding-skip-all { margin-top:18px; text-align:center; }
.onboarding-skip-all button { border:0; color:var(--muted); background:transparent; }

/* Redesigned administration */
.admin-layout { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); }
.admin-sidebar {
    position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:22px;
    padding:20px 16px; border-right:1px solid var(--border); background:rgba(8,12,31,.96);
}
.admin-brand { padding:8px; }
.admin-brand img { width:48px; height:48px; }
.admin-brand small { display:block; color:var(--muted); margin-top:2px; }
.admin-sidebar nav { display:grid; gap:5px; }
.admin-sidebar nav a,
.admin-sidebar-bottom a { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; color:var(--muted); }
.admin-sidebar nav a.active,
.admin-sidebar nav a:hover { color:var(--text); background:rgba(58,110,230,.17); }
.admin-sidebar-bottom { margin-top:auto; display:grid; gap:4px; }
.admin-workspace { min-width:0; }
.admin-mobile-topbar { display:none; }
.admin-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.admin-heading p { color:var(--muted); }
.admin-eyebrow { color:#80baff!important; font-size:.76rem; font-weight:900; letter-spacing:.14em; }
.admin-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-metric-card { display:flex; align-items:center; gap:13px; padding:18px; }
.admin-metric-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(52,115,239,.16); font-size:1.25rem; }
.admin-metric-card small { display:block; color:var(--muted); }
.admin-metric-card strong { display:block; margin-top:3px; font-size:1.8rem; }
.admin-dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.admin-activity-panel { grid-column:1/-1; }
.admin-report-list,
.admin-recent-users,
.admin-activity-list { display:grid; gap:8px; }
.admin-report-list > a,
.admin-recent-users article,
.admin-activity-list article { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid rgba(89,102,154,.28); }
.admin-report-type { padding:5px 8px; border-radius:999px; color:#ff9bad; background:rgba(255,73,108,.13); font-size:.72rem; font-weight:850; }
.admin-empty-success { display:grid; place-items:center; padding:28px; color:var(--muted); }
.admin-empty-success span { font-size:2rem; color:var(--success); }
.admin-report-preview { overflow:hidden; }
.admin-report-preview .post-card { margin:0; box-shadow:none; }

@media (max-width: 960px) {
    .desktop-chat-head-rail { display:none!important; }
    .admin-layout { display:block; }
    .admin-sidebar { display:none; }
    .admin-mobile-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); }
    .admin-mobile-topbar img { width:34px; height:34px; border-radius:10px; vertical-align:middle; margin-right:7px; }
    .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-dashboard-grid { grid-template-columns:1fr; }
    .admin-activity-panel { grid-column:auto; }
}
@media (max-width: 700px) {
    .top-search-wrap { min-width:0; }
    .top-search input { font-size:.86rem; }
    .live-search-results { position:fixed; top:65px; left:8px; right:8px; width:auto; }
    .comment-reply-item { margin-left:26px; }
    .about-grid,
    .profile-about-preview-grid { grid-template-columns:1fr; }
    .chat-composer { grid-template-columns:38px 38px 38px minmax(0,1fr) auto; }
    .admin-heading { align-items:flex-start; flex-direction:column; }
}


/* Phase 5.2 finishing styles: actual About/admin templates and minimized controls */
.desktop-message-window.is-minimized .desktop-message-delete {
    display: none !important;
}

.group-audio-item,
.post-audio-player,
.admin-post-preview audio {
    width: 100%;
}

.group-audio-item {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.about-profile-page {
    width: min(900px, calc(100% - 24px));
    margin: 0 auto;
    padding: 24px 0;
}

.about-profile-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.about-profile-heading > div {
    min-width: 0;
}

.about-profile-heading p {
    margin: 3px 0 0;
    color: var(--muted);
}

.about-profile-card {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.about-detail-row {
    display: grid;
    grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(89, 102, 154, .28);
}

.about-detail-row:last-child {
    border-bottom: 0;
}

.about-detail-row > span {
    color: var(--muted);
    font-weight: 750;
}

.about-detail-row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.about-settings-form {
    gap: 0;
}

.about-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    gap: 12px;
    align-items: end;
    padding: 15px 0;
    border-bottom: 1px solid rgba(89, 102, 154, .28);
}

.about-edit-row:last-of-type {
    border-bottom: 0;
}

.admin-two-column,
.admin-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 16px;
    align-items: start;
}

.admin-compose-card,
.admin-target-preview,
.report-context-card {
    padding: 22px;
}

.admin-user-focus {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
}

.admin-user-focus small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.admin-notification-history {
    display: grid;
    gap: 0;
}

.admin-notification-history article {
    padding: 14px 0;
    border-bottom: 1px solid rgba(89, 102, 154, .28);
}

.admin-notification-history article:last-child {
    border-bottom: 0;
}

.admin-notification-history p {
    margin: 6px 0;
    color: var(--text);
    white-space: pre-wrap;
}

.admin-notification-history small {
    color: var(--muted);
}

.admin-filter-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 0 14px;
    scrollbar-width: thin;
}

.admin-filter-tabs a {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-weight: 800;
}

.admin-filter-tabs a.active,
.admin-filter-tabs a:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--blue), var(--purple));
}

.admin-detail-list {
    display: grid;
    gap: 0;
    margin: 14px 0 20px;
}

.admin-detail-list > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(89, 102, 154, .28);
}

.admin-detail-list dt {
    color: var(--muted);
    font-weight: 750;
}

.admin-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.admin-post-preview {
    display: grid;
    gap: 14px;
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}

.admin-post-preview > header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-post-preview > header small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.admin-post-preview > p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
}

.admin-post-preview > img,
.admin-post-preview > video {
    display: block;
    width: 100%;
    max-height: 520px;
    border-radius: 13px;
    object-fit: contain;
    background: #000;
}

.admin-embed-summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface);
}

.admin-embed-summary small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.admin-user-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.status-chip {
    display: inline-flex;
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    text-transform: capitalize;
    font-size: .72rem;
    font-weight: 850;
}

.status-pending {
    color: #ffd58a;
    background: rgba(255, 179, 60, .14);
}

.status-reviewed {
    color: #9fc4ff;
    background: rgba(62, 124, 255, .14);
}

.status-resolved {
    color: #93e6ba;
    background: rgba(42, 194, 113, .14);
}

.status-dismissed {
    color: var(--muted);
    background: rgba(130, 142, 180, .14);
}

@media (max-width: 780px) {
    .about-detail-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .about-edit-row {
        grid-template-columns: 1fr;
    }

    .admin-two-column,
    .admin-review-layout {
        grid-template-columns: 1fr;
    }

    .admin-detail-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* ==========================================================================
   SEE PHASE 5.2.1 — LIGHT THEME CONTRAST AND CENTERED PORTRAIT VIEWER
   ========================================================================== */

/* Light theme contrast audit */
html[data-theme="light"] .desktop-sidebar > a,
html[data-theme="light"] .desktop-sidebar > a:visited {
    color: #3a4565;
}

html[data-theme="light"] .desktop-sidebar > a:hover,
html[data-theme="light"] .desktop-sidebar > a:focus-visible {
    color: #11182c;
    background: #e3e9f8;
}

html[data-theme="light"] .desktop-sidebar .sidebar-profile strong,
html[data-theme="light"] .mini-person strong,
html[data-theme="light"] .post-author,
html[data-theme="light"] .post-body,
html[data-theme="light"] .desktop-right h2,
html[data-theme="light"] .desktop-right h3 {
    color: #171f38;
}

html[data-theme="light"] .mini-person small,
html[data-theme="light"] .post-meta,
html[data-theme="light"] .post-counts,
html[data-theme="light"] .post-actions button,
html[data-theme="light"] .composer-prompt,
html[data-theme="light"] .desktop-sidebar .muted {
    color: #626d8c;
}

html[data-theme="light"] .post-actions {
    border-color: #d8def0;
}

html[data-theme="light"] .post-actions button:hover {
    color: #17203a;
    background: #e8edf9;
}

html[data-theme="light"] .mini-add {
    color: #166cc7;
    background: #dcecff;
}

html[data-theme="light"] .mini-add:hover {
    color: #0a4e9b;
    background: #c9e1ff;
}

html[data-theme="light"] .text-link,
html[data-theme="light"] .suggestion-note,
html[data-theme="light"] .post-group-context a {
    color: #1766b5;
}

html[data-theme="light"] .upload-control {
    color: #34527d;
}

html[data-theme="light"] .section-tabs {
    background: rgba(245, 247, 255, .94);
}

html[data-theme="light"] .section-tabs a {
    color: #596580;
}

html[data-theme="light"] .section-tabs a.active {
    color: #fff;
}

/* One explicit image-viewer grid. */
.see-lightbox {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    padding: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, .97);
}

.see-lightbox > .see-lightbox-nav.previous {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

.see-lightbox > figure {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: calc(100dvh - 36px);
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: stretch;
    gap: 10px;
    overflow: hidden;
}

.see-lightbox > .see-lightbox-nav.next {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

.see-lightbox-image-stage {
    grid-row: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.see-lightbox-image-stage img,
.see-lightbox.is-portrait-media .see-lightbox-image-stage img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: auto;
    object-fit: contain;
    object-position: center;
    transform: none;
    transform-origin: center;
    border-radius: 8px;
}

.see-lightbox.is-zoomed .see-lightbox-image-stage {
    display: block;
    overflow: auto;
}

.see-lightbox.is-zoomed .see-lightbox-image-stage img {
    margin: auto;
    cursor: zoom-out;
}

.see-lightbox figcaption {
    grid-row: 2;
    width: min(100%, 960px);
    max-width: 100%;
    margin-inline: auto;
    padding: 0 6px 4px;
}

@media (max-width: 760px) {
    .see-lightbox {
        grid-template-columns: minmax(0, 1fr);
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom));
    }

    .see-lightbox > figure {
        grid-column: 1;
        height: calc(
            100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
        );
    }

    .see-lightbox-image-stage {
        height: 100%;
        padding: 4px;
    }

    .see-lightbox figcaption {
        padding-right: 54px;
    }
}


/* SEE PHASE 5.2.2 */
.post-tag-control{display:grid;gap:9px;padding:10px 0 2px}.post-tag-search-panel{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.post-tag-search-panel label{display:grid;gap:7px;font-weight:750}.post-tag-chips{display:flex;flex-wrap:wrap;gap:7px}.post-tag-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(81,139,255,.42);border-radius:999px;color:#a9ccff;background:rgba(44,104,220,.16);font-size:.82rem}.post-tag-chip button{width:20px;height:20px;border:0;border-radius:50%;color:inherit;background:rgba(255,255,255,.08)}.post-tag-line{color:var(--muted);font-size:.9rem}.post-tag-line a{color:#82baff;font-weight:800}.mention-suggestion-list{display:grid;gap:4px;max-height:260px;overflow-y:auto}.mention-suggestion{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border:0;border-radius:11px;color:var(--text);background:transparent;text-align:left}.mention-suggestion:hover,.mention-suggestion:focus-visible{background:rgba(83,119,218,.17)}.mention-suggestion span{display:grid}.mention-suggestion small{color:var(--muted)}.mention-input-wrap{position:relative;min-width:0}.mention-input-wrap textarea{width:100%}.chat-mention-suggestions{position:absolute;z-index:60;left:0;right:0;bottom:calc(100% + 7px);padding:7px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}.message-mention-link{color:#bfe0ff;font-weight:850;text-decoration:underline;text-decoration-color:rgba(191,224,255,.45)}.message-bubble.theirs .message-mention-link{color:#91c9ff}.typing-indicator{width:fit-content;max-width:calc(100% - 24px);margin:7px 0 0 12px;padding:7px 12px;color:var(--muted);font-size:.82rem;font-style:italic}.desktop-message-typing{padding:5px 11px;color:#aeb9dc;background:#0d1431;font-size:.72rem;font-style:italic}.desktop-mention-input{min-width:0}.desktop-message-form .chat-mention-suggestions{left:-70px;right:-45px}.voice-record-status{line-height:1.45}
html[data-theme="light"] .header-popover{color:#17203a;background:#fff;border-color:#cfd7ea}html[data-theme="light"] .header-popover-heading{border-color:#dce2f0}html[data-theme="light"] .header-popover-heading h2,html[data-theme="light"] .header-popover-item strong,html[data-theme="light"] .header-popover-item p{color:#18213a}html[data-theme="light"] .header-popover-heading small,html[data-theme="light"] .header-popover-item small{color:#64708e}html[data-theme="light"] .header-popover-item{color:#18213a;border-color:#e0e5f1}html[data-theme="light"] .header-popover-item:hover,html[data-theme="light"] .header-popover-item:focus-visible{background:#eef3ff}html[data-theme="light"] .header-popover-item.unread{background:#e3efff;border-color:#9fc4f5}html[data-theme="light"] .header-popover-footer{color:#125fae;background:#f7f9ff;border-color:#dce2f0}
html[data-theme="light"] .post-actions .reaction-main,html[data-theme="light"] .post-actions .reaction-picker-toggle,html[data-theme="light"] .message-tools button,html[data-theme="light"] .desktop-message-react,html[data-theme="light"] .comment-reaction-main,html[data-theme="light"] .comment-reaction-picker-toggle{color:#4d5875}html[data-theme="light"] .post-actions .reaction-main.active{color:#155fbd}html[data-theme="light"] .message-tools button:hover,html[data-theme="light"] .desktop-message-react:hover{color:#0f58ad}html[data-theme="light"] .reaction-picker,html[data-theme="light"] .message-reaction-picker,html[data-theme="light"] .comment-reaction-picker{color:#17203a;background:#fff;border-color:#cfd7ea}html[data-theme="light"] .reaction-picker small{color:#4d5875}html[data-theme="light"] .message-reaction-summary{color:#25304b;background:#f5f7fc;border-color:#cbd4e7}html[data-theme="light"] .notification-row p{color:#1b243d}html[data-theme="light"] .notification-row.unread{background:#e8f2ff}
@media(max-width:760px){.chat-composer{grid-template-columns:42px 42px 42px minmax(0,1fr) auto}.chat-mention-suggestions{position:fixed;z-index:1450;left:10px;right:10px;bottom:calc(88px + env(safe-area-inset-bottom));max-height:42vh}.typing-indicator{margin-left:8px}}


/* ==========================================================================
   SEE PHASE 5.2.5 — HOLD-TO-RECORD CHAT VOICE CLIPS
   ========================================================================== */

.voice-chat-button,
.desktop-message-voice {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: pointer;
}

.voice-chat-button.is-hold-armed,
.desktop-message-voice.is-hold-armed {
    color: #fff;
    background: #9a3850;
    transform: scale(.94);
}

.voice-chat-button.is-processing,
.desktop-message-voice.is-processing {
    color: #fff;
    background: #7045b8;
    animation: voice-pulse .8s ease infinite alternate;
}

.voice-chat-button.needs-attention,
.desktop-message-voice.needs-attention {
    animation: voice-attention .7s ease 2;
}

@keyframes voice-attention {
    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 8px rgba(67, 132, 255, .18);
    }
}

.voice-record-status[data-voice-state="recording"],
.desktop-message-voice-status[data-voice-state="recording"] {
    color: #ff718b;
    font-weight: 850;
}

.voice-record-status[data-voice-state="error"],
.desktop-message-voice-status[data-voice-state="error"] {
    color: #ff8298;
}

.desktop-message-voice-status {
    padding: 6px 10px;
    color: #aeb9dc;
    background: #0d1431;
    font-size: .72rem;
    line-height: 1.4;
}

.chat-upload-preview.has-voice-clip,
.desktop-message-attachment.has-voice-clip {
    display: block;
    width: 100%;
}

.voice-composer-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    width: 100%;
    padding: 11px;
    border: 1px solid rgba(88, 126, 224, .45);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(37, 96, 195, .17),
            rgba(132, 54, 210, .12)
        );
}

.voice-composer-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #247af2, #8338d9);
    font-size: 1.25rem;
}

.voice-composer-content {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.voice-composer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.voice-composer-heading small,
.voice-composer-instruction {
    color: var(--muted);
}

.voice-composer-content audio {
    width: 100%;
    min-width: 180px;
    height: 36px;
}

.voice-composer-actions {
    display: grid;
    gap: 5px;
    justify-items: end;
}

.voice-composer-actions button {
    white-space: nowrap;
}

.voice-composer-actions .danger {
    color: #ff8196;
}

.desktop-message-attachment .voice-composer-card {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px;
    border: 0;
    border-radius: 10px;
}

.desktop-message-attachment .voice-composer-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
}

.desktop-message-attachment .voice-composer-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.desktop-message-attachment .voice-composer-content audio {
    min-width: 0;
    height: 32px;
}

.desktop-message-attachment .voice-composer-instruction {
    font-size: .69rem;
}

html[data-theme="light"] .voice-composer-card {
    color: #17203a;
    background:
        linear-gradient(
            145deg,
            rgba(211, 229, 255, .92),
            rgba(234, 220, 255, .88)
        );
}

html[data-theme="light"] .desktop-message-voice-status {
    color: #596783;
    background: #f3f6fd;
}

@media (max-width: 760px) {
    .voice-composer-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .voice-composer-icon {
        width: 38px;
        height: 38px;
    }

    .voice-composer-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }

    .voice-composer-content audio {
        min-width: 0;
    }
}


/* SEE PHASE 5.2.6 — DESKTOP MIC + GROUP SETTINGS */
.chat-settings-direct{display:inline-grid;place-items:center;text-decoration:none;font-size:1rem}.voice-open-settings{display:inline-flex;margin:5px 0 0;color:#8fc2ff}.voice-chat-button.is-hold-armed,.desktop-message-voice.is-hold-armed{box-shadow:0 0 0 6px rgba(255,74,111,.16)}.conversation-menu a{display:block;width:100%;padding:12px;color:var(--text);border-radius:9px}.conversation-menu a:hover{background:rgba(83,119,218,.14)}html[data-theme="light"] .conversation-menu a{color:#17203a}html[data-theme="light"] .voice-open-settings{color:#125fae}.settings-card#add-members{scroll-margin-top:95px}
@media(max-width:760px){.chat-settings-direct{width:38px;height:38px}.chat-header{gap:7px}.chat-header .grow small{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}


/* ==========================================================================
   SEE PHASE 5.2.8 — COMPACT SINGLE-ROW ANDROID HEADER
   ========================================================================== */

.top-search-wrap {
    min-width: 0;
}

@media (max-width: 760px) {
    .topbar {
        height: 60px;
        min-height: 60px;
        grid-template-columns: 48px minmax(0, 1fr) 40px;
        grid-template-rows: 44px;
        grid-template-areas: "brand search actions";
        align-items: center;
        column-gap: 8px;
        row-gap: 0;
        padding:
            max(5px, env(safe-area-inset-top))
            9px
            5px;
        overflow: visible;
    }

    .topbar > .brand {
        grid-area: brand;
        align-self: center;
        justify-self: start;
        width: 48px;
        min-width: 48px;
        overflow: hidden;
    }

    .topbar > .brand img {
        width: 48px;
        height: 36px;
        border-radius: 8px;
        object-fit: cover;
        object-position: center 68%;
    }

    .topbar > .top-search-wrap {
        grid-area: search;
        display: block;
        width: 100%;
        min-width: 0;
        align-self: center;
    }

    /* Overrides the old max-width:520px rule that hid mobile search. */
    .topbar .top-search {
        display: block !important;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .topbar .top-search input {
        display: block;
        width: 100%;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        padding: 7px 11px;
        border-radius: 13px;
        font-size: .86rem;
        text-overflow: ellipsis;
    }

    .topbar > .top-actions {
        grid-area: actions;
        align-self: center;
        justify-self: end;
        width: 40px;
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
    }

    /* Messages already has a dedicated bottom-navigation button. */
    .top-actions .header-messages-control {
        display: none !important;
    }

    /* Account actions are already available inside the bottom Menu. */
    .top-actions .header-account-control {
        display: none !important;
    }

    .top-actions .header-notifications-control {
        display: block;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .header-notifications-control .icon-button {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(92, 108, 180, .55);
        background: var(--surface-2);
    }

    .header-notifications-control .nav-badge {
        top: -4px;
        right: -5px;
    }

    .header-notifications-control .header-popover {
        position: fixed;
        top: calc(max(5px, env(safe-area-inset-top)) + 51px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        margin: 0;
        border-radius: 17px;
    }

    .header-notifications-control .header-popover-list {
        max-height: min(430px, calc(100dvh - 125px));
    }

    .chat-header {
        top: 60px;
    }
}

@media (max-width: 380px) {
    .topbar {
        height: 56px;
        min-height: 56px;
        grid-template-columns: 43px minmax(0, 1fr) 38px;
        grid-template-rows: 40px;
        column-gap: 6px;
        padding-inline: 7px;
    }

    .topbar > .brand {
        width: 43px;
        min-width: 43px;
    }

    .topbar > .brand img {
        width: 43px;
        height: 33px;
    }

    .topbar .top-search input {
        height: 36px;
        min-height: 36px;
        padding-inline: 9px;
        font-size: .8rem;
    }

    .topbar > .top-actions,
    .top-actions .header-notifications-control,
    .header-notifications-control .icon-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .header-notifications-control .header-popover {
        top: calc(max(5px, env(safe-area-inset-top)) + 47px);
    }

    .chat-header {
        top: 56px;
    }
}


/* SEE PHASE 5.2.9 — ADMIN APK DOWNLOAD MANAGER */
.download-apk-button.is-disabled{cursor:not-allowed;opacity:.62;filter:grayscale(.18)}
.download-release-notes{margin-top:18px;padding:24px}.download-release-notes h2{margin-bottom:12px}.download-release-notes>div{color:var(--muted);line-height:1.7;white-space:normal}
.admin-apk-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;align-items:start}.admin-apk-form{display:grid;gap:22px}.admin-toggle{display:inline-flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-weight:800}.admin-toggle input{width:auto}.admin-apk-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-apk-field-grid label,.admin-apk-qr-settings>label,.admin-apk-upload{display:grid;gap:7px;font-weight:800}.admin-apk-field-grid label small,.admin-apk-upload small{color:var(--muted);font-weight:500;line-height:1.45}.admin-span-2{grid-column:1/-1}.admin-apk-qr-settings{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--border)}.admin-apk-qr-settings h2{margin-bottom:4px}.admin-apk-qr-options{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.admin-apk-qr-options label{display:flex;align-items:center;gap:9px;font-weight:700}.admin-apk-qr-options input{width:auto}.admin-apk-preview{display:grid;gap:16px;position:sticky;top:20px}.admin-apk-preview .admin-panel{text-align:center}.admin-apk-preview-icon{width:84px;height:84px;margin:4px auto 13px;padding:7px;border:1px solid var(--border);border-radius:24px;background:#050713}.admin-apk-preview-icon img{display:block;width:100%;height:100%;border-radius:18px;object-fit:cover}.admin-apk-preview h3{margin-bottom:4px;font-size:1.25rem}.admin-apk-version{margin:0 0 15px;color:var(--muted)}.admin-apk-preview-button{width:100%}.admin-apk-qr-preview{width:min(100%,290px);margin:18px auto;padding:13px;border-radius:19px;background:#fff}.admin-apk-qr-preview img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;image-rendering:pixelated}.admin-apk-preview .admin-detail-list{margin-top:4px;text-align:left}.admin-apk-help{text-align:left!important}.admin-apk-help ol{display:grid;gap:9px;margin:14px 0 0;padding-left:22px;color:var(--muted);line-height:1.5}html[data-theme="light"] .admin-apk-qr-options,html[data-theme="light"] .admin-toggle{background:#f4f7fd}
@media(max-width:980px){.admin-apk-layout{grid-template-columns:1fr}.admin-apk-preview{position:static;grid-template-columns:1fr 1fr}}
@media(max-width:680px){.admin-apk-field-grid,.admin-apk-preview{grid-template-columns:1fr}.admin-span-2{grid-column:auto}}


/* ==========================================================================
   SEE PHASE 5.3.0 — BULK OFFICIAL ADMIN NOTIFICATIONS
   ========================================================================== */

.notification-brand-avatar {
    padding: 2px;
    object-fit: contain !important;
    background: #080b1c;
    border-color: rgba(80, 125, 255, .62);
}

.admin-notify-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 18px;
    align-items: start;
}

.admin-official-notice,
.admin-official-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(74, 128, 255, .44);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(34, 95, 203, .18),
            rgba(115, 47, 203, .13)
        );
}

.admin-official-notice img,
.admin-official-preview img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 3px;
    border-radius: 14px;
    object-fit: contain;
    background: #070a18;
}

.admin-official-notice div,
.admin-official-preview div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-official-notice small,
.admin-official-preview p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.admin-target-mode {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
}

.admin-target-mode legend {
    margin-bottom: 7px;
    font-weight: 850;
}

.admin-target-mode > label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    cursor: pointer;
}

.admin-target-mode > label:has(input:checked) {
    border-color: rgba(69, 125, 255, .72);
    background: rgba(55, 105, 218, .16);
}

.admin-target-mode input {
    width: auto;
    margin-top: 3px;
}

.admin-target-mode span {
    display: grid;
    gap: 3px;
}

.admin-target-mode small {
    color: var(--muted);
}

.admin-recipient-picker {
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
}

.admin-recipient-toolbar {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-recipient-toolbar label {
    display: grid;
    gap: 6px;
    min-width: min(100%, 300px);
    font-weight: 800;
}

.admin-selected-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(76, 130, 255, .45);
    border-radius: 999px;
    color: #b8d5ff;
    background: rgba(41, 94, 198, .16);
    font-size: .78rem;
}

.admin-recipient-chip img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-recipient-chip button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: rgba(255, 255, 255, .08);
}

.admin-recipient-results {
    display: grid;
    max-height: 390px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.admin-recipient-option {
    display: grid;
    grid-template-columns: 24px 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.admin-recipient-option:last-child {
    border-bottom: 0;
}

.admin-recipient-option:hover {
    background: rgba(72, 116, 218, .12);
}

.admin-recipient-option:has(input:checked) {
    background: rgba(64, 120, 236, .18);
}

.admin-recipient-option input {
    width: auto;
}

.admin-recipient-option > span {
    display: grid;
    gap: 3px;
}

.admin-recipient-option small {
    color: var(--muted);
}

html[data-theme="light"] .admin-official-notice,
html[data-theme="light"] .admin-official-preview {
    color: #17203a;
    background:
        linear-gradient(
            145deg,
            rgba(218, 232, 255, .96),
            rgba(237, 224, 255, .9)
        );
}

html[data-theme="light"] .admin-target-mode > label,
html[data-theme="light"] .admin-recipient-picker {
    background: #f4f7fd;
}

html[data-theme="light"] .admin-recipient-chip {
    color: #17599d;
    background: #e1efff;
}

@media (max-width: 980px) {
    .admin-notify-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-recipient-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-recipient-toolbar label {
        grid-column: 1 / -1;
    }

    .admin-selected-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================\n   SEE PHASE 5.3.1 — PROFILE MARKET\n   ========================================================================== */
.market-page{width:min(1240px,calc(100% - 28px));margin:22px auto 100px;display:grid;gap:16px}.market-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px;background:radial-gradient(circle at 85% 15%,rgba(137,63,220,.3),transparent 34%),linear-gradient(145deg,rgba(28,83,190,.24),rgba(22,26,70,.92))}.market-eyebrow{margin:0 0 5px;color:#8ec4ff;font-size:.72rem;font-weight:900;letter-spacing:.15em}.market-hero h1{margin:0 0 6px;font-size:clamp(1.8rem,5vw,3rem)}.market-hero p{margin:0;color:var(--muted)}.market-wallet{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid rgba(255,214,75,.42);border-radius:16px;background:rgba(58,43,4,.36)}.market-wallet>span{font-size:1.8rem;color:#ffd84a}.market-wallet div{display:grid}.market-wallet small{color:var(--muted)}.market-wallet strong{white-space:nowrap}.market-tabs{display:flex;gap:7px;padding:8px;overflow-x:auto}.market-tabs a{white-space:nowrap;padding:9px 13px;border-radius:11px;color:var(--muted);font-weight:800}.market-tabs a.active{color:#fff;background:linear-gradient(135deg,#287af3,#7a3dde)}.market-filter{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:9px;padding:12px}.market-featured-section,.market-heading{display:grid;gap:9px}.market-featured-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,230px);gap:11px;overflow-x:auto;padding-bottom:5px}.market-featured-card{position:relative;min-height:125px;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);text-align:left}.market-featured-card img{width:100%;height:125px;object-fit:cover}.market-featured-card span{position:absolute;left:9px;right:9px;bottom:8px;padding:7px 9px;border-radius:10px;color:#fff;background:rgba(5,8,22,.72);font-weight:850}.market-heading{display:flex;align-items:end;justify-content:space-between}.market-heading h2{margin:0}.market-heading p{margin:3px 0 0;color:var(--muted)}.market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.market-card{overflow:hidden;padding:0}.market-card.is-current{outline:2px solid #48a5ff;box-shadow:0 0 0 5px rgba(72,165,255,.11)}.market-card-media{position:relative;width:100%;height:200px;padding:0;border:0;border-radius:0;background:#070a18;overflow:hidden}.market-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.market-card-media:hover img{transform:scale(1.035)}.market-preview-pill{position:absolute;left:9px;bottom:9px;padding:6px 9px;border-radius:999px;color:#fff;background:rgba(4,8,23,.78);font-size:.72rem;font-weight:850}.market-card-body{display:grid;gap:8px;padding:13px}.market-card-body>small,.market-card-body>p{margin:0;color:var(--muted)}.market-card-body h3{margin:0;font-size:1.05rem}.market-artist{color:#94c7ff!important;font-weight:700}.market-badges{display:flex;flex-wrap:wrap;gap:5px}.market-badge{padding:4px 7px;border-radius:999px;color:#cbd9ff;background:rgba(76,113,205,.2);font-size:.63rem;font-weight:900;letter-spacing:.04em}.market-badge.free{color:#6ef2ae;background:rgba(19,139,79,.22)}.market-badge.paid{color:#ffe36a;background:rgba(161,118,0,.22)}.market-badge.owned{color:#98d9ff}.market-badge.current{color:#fff;background:#277ff0}.market-badge.new{color:#ffb7ec;background:rgba(175,48,139,.22)}.market-badge.draft{color:#d4c9ff}.market-badge.hidden,.market-badge.archived{color:#ffb8c3;background:rgba(154,50,72,.2)}.market-card-stats{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.72rem}.market-preview-dialog{width:min(920px,calc(100% - 24px));max-height:90dvh;padding:0;border:1px solid var(--border);border-radius:20px;color:var(--text);background:#080d25;overflow:hidden}.market-preview-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}.market-dialog-close{position:absolute;z-index:5;right:12px;top:12px;width:38px;height:38px;border-radius:50%;color:#fff;background:rgba(0,0,0,.65)}.market-background-preview{position:relative;min-height:620px;overflow:hidden}.market-preview-bg,.market-preview-shade{position:absolute;inset:-16px}.market-preview-bg{background-position:center;background-size:cover}.market-preview-shade{z-index:1}.market-mock-profile,.market-mock-card{position:relative;z-index:2}.market-mock-profile{display:flex;align-items:center;gap:14px;margin:80px 24px 20px;padding:18px;border-radius:18px;background:rgba(12,18,44,.83)}.market-mock-profile img{width:72px;height:72px;border-radius:50%;object-fit:cover}.market-mock-profile h2,.market-mock-profile p{margin:0}.market-mock-card{margin:20px 24px;padding:24px;border-radius:18px;background:rgba(12,18,44,.83)}.market-music-preview{padding:62px 20px 24px;text-align:center}.market-youtube-frame{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:16px;background:#000}.market-youtube-frame iframe{width:100%;height:100%;border:0}.market-music-preview h2{margin:17px 0 5px}.admin-market-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.admin-market-list{display:grid}.admin-market-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.admin-market-row>img{width:78px;height:62px;border-radius:11px;object-fit:cover;background:#070a18}.admin-market-row .grow{display:grid;gap:4px}.admin-market-row small{color:var(--muted)}.admin-market-actions{display:grid;gap:6px;justify-items:end}.admin-market-actions form{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.admin-popular-list{display:grid}.admin-popular-list>div{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--border)}.admin-popular-list .grow{display:grid}.admin-popular-list small{color:var(--muted)}.admin-checklist{display:grid;gap:8px;color:var(--muted)}.admin-market-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.admin-market-live-preview{position:sticky;top:20px}.admin-category-list{display:grid;gap:10px}.admin-category-row{display:grid;grid-template-columns:1fr 1fr 120px 90px auto auto auto;gap:7px;align-items:center;padding:9px;border:1px solid var(--border);border-radius:12px}.admin-category-row input,.admin-category-row select{min-width:0}.admin-wallet-list{display:grid}.admin-wallet-list>article{display:grid;grid-template-columns:45px minmax(0,1fr) minmax(260px,auto);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.admin-wallet-list .grow{display:grid}.admin-wallet-list small{color:var(--muted)}.admin-wallet-adjust{display:grid;grid-template-columns:100px minmax(120px,1fr) auto;gap:6px}.admin-coin-log{display:grid;max-height:760px;overflow:auto}.admin-coin-log article{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid var(--border)}.admin-coin-log small{color:var(--muted)}.admin-coin-log p{margin:0}.admin-two-column{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);gap:16px;align-items:start}
html[data-theme="light"] .market-hero{background:radial-gradient(circle at 85% 15%,rgba(137,63,220,.18),transparent 34%),linear-gradient(145deg,#e5efff,#f0e5ff)}html[data-theme="light"] .market-wallet{background:#fff7d6}html[data-theme="light"] .market-preview-dialog{color:#17203a;background:#f4f7fd}html[data-theme="light"] .market-mock-profile,html[data-theme="light"] .market-mock-card{color:#fff}
@media(max-width:1080px){.market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-market-layout,.admin-market-editor-grid{grid-template-columns:1fr}.admin-market-live-preview{position:static}.admin-category-row{grid-template-columns:1fr 1fr 110px 80px auto}.admin-category-row small,.admin-category-row button{grid-column:auto}}
@media(max-width:760px){.market-page{width:min(100% - 16px,1240px);margin-top:12px}.market-hero{align-items:flex-start;flex-direction:column;padding:18px}.market-wallet{width:100%;justify-content:center}.market-filter{grid-template-columns:1fr}.market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.market-card-media{height:160px}.market-card-body{padding:10px}.market-background-preview{min-height:70dvh}.admin-two-column{grid-template-columns:1fr}.admin-category-row{grid-template-columns:1fr 1fr}.admin-category-row>*{min-width:0}.admin-wallet-list>article{grid-template-columns:45px minmax(0,1fr)}.admin-wallet-adjust{grid-column:1/-1;grid-template-columns:90px minmax(0,1fr) auto}}
@media(max-width:430px){.market-grid{grid-template-columns:1fr 1fr}.market-card-media{height:135px}.market-card-body h3{font-size:.95rem}.market-card-body>p{font-size:.78rem}.market-card-stats{display:none}.market-card-body .primary-button,.market-card-body .secondary-button{font-size:.75rem;padding-inline:7px}.market-featured-row{grid-auto-columns:170px}}


/* ==========================================================================
   SEE PHASE 5.3.2 — ADMIN PASSWORD RESET AND FORCED PASSWORD CHANGE
   ========================================================================== */

.admin-user-name-link {
    color: var(--text);
    text-decoration: none;
}

.admin-user-name-link:hover {
    color: #84bcff;
    text-decoration: underline;
}

.admin-user-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 18px;
    align-items: start;
}

.admin-user-profile-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-user-profile-summary > div {
    min-width: 0;
}

.admin-user-profile-summary h2 {
    margin-bottom: 3px;
}

.admin-user-profile-summary p {
    margin-bottom: 10px;
    color: var(--muted);
}

.status-chip.status-warning {
    color: #ffd789;
    background: rgba(204, 135, 24, .18);
}

.admin-password-reset-card {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 13px;
}

.admin-password-reset-card form {
    display: grid;
    gap: 13px;
}

.admin-reset-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 98, 124, .38);
    border-radius: 13px;
    color: var(--muted);
    background: rgba(164, 34, 63, .11);
    line-height: 1.45;
}

.admin-reset-confirmation input {
    width: auto;
    margin-top: 3px;
}

.admin-password-result {
    display: grid;
    gap: 15px;
    margin-bottom: 18px;
    padding: 18px;
    border-color: rgba(72, 157, 255, .62);
    background:
        linear-gradient(
            145deg,
            rgba(29, 89, 193, .2),
            rgba(104, 45, 194, .14)
        );
}

.admin-temporary-password {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-temporary-password code {
    flex: 1;
    min-width: 260px;
    padding: 14px 16px;
    border: 1px dashed rgba(120, 178, 255, .65);
    border-radius: 13px;
    color: #d8ecff;
    background: rgba(4, 10, 29, .55);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: .06em;
    word-break: break-all;
}

.admin-password-result ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 21px;
    color: var(--muted);
}

.password-security-page {
    width: min(680px, calc(100% - 24px));
    margin: 0 auto;
    padding: 24px 0 110px;
}

.password-security-page .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
}

.security-shield {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(40, 118, 232, .24), rgba(130, 52, 211, .22));
    font-size: 2rem;
}

.password-required-notice,
.password-change-card {
    margin-top: 15px;
    padding: 20px;
}

.password-required-notice {
    border-color: rgba(255, 185, 72, .48);
    background: rgba(177, 111, 18, .12);
}

.password-required-notice p {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.55;
}

.password-change-card label small {
    color: var(--muted);
    font-weight: 500;
}

.settings-back {
    margin-top: 16px;
    text-align: center;
}

html[data-theme="light"] .admin-temporary-password code {
    color: #164f8e;
    background: #eef6ff;
}

html[data-theme="light"] .admin-password-result {
    color: #17203a;
    background: linear-gradient(145deg, #e2efff, #f0e5ff);
}

html[data-theme="light"] .password-required-notice {
    background: #fff6df;
}

@media (max-width: 880px) {
    .admin-user-detail-layout {
        grid-template-columns: 1fr;
    }

    .admin-password-reset-card {
        position: static;
    }
}

@media (max-width: 560px) {
    .admin-user-profile-summary,
    .password-security-page .settings-header {
        align-items: flex-start;
    }

    .admin-user-profile-summary {
        flex-direction: column;
    }

    .security-shield {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 17px;
        font-size: 1.45rem;
    }

    .admin-temporary-password {
        display: grid;
    }

    .admin-temporary-password code {
        min-width: 0;
    }
}


/* ==========================================================================
   SEE PHASE 5.3.3 — MARKET REPAIR + VISIBLE PASSWORD RESET
   ========================================================================== */

.admin-inline-reset-form,
.admin-heading-reset-form {
    display: inline-flex;
    margin: 0;
}

.admin-user-row-actions .admin-inline-reset-form {
    align-items: center;
}

.market-setup-notice {
    width: min(760px, calc(100% - 24px));
    margin: 32px auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.market-setup-notice > img {
    width: 78px;
    height: 78px;
    padding: 5px;
    border-radius: 22px;
    object-fit: contain;
    background: #070a18;
    border: 1px solid var(--border);
}

.market-setup-notice h1 {
    margin: 4px 0 10px;
}

.market-setup-notice p {
    color: var(--muted);
    line-height: 1.6;
}

.market-setup-notice code,
.market-admin-setup code {
    overflow-wrap: anywhere;
    color: #9fc5ff;
}

.market-admin-setup {
    max-width: 760px;
}

@media (max-width: 640px) {
    .market-setup-notice {
        grid-template-columns: 1fr;
    }

    .market-setup-notice > img {
        width: 64px;
        height: 64px;
    }

    .admin-heading-reset-form,
    .admin-heading-reset-form .danger-button {
        width: 100%;
    }
}


/* ==========================================================================
   SEE PHASE 5.3.4 — FORGOT PASSWORD + ACCOUNT RECOVERY
   ========================================================================== */

.auth-forgot-password {
    display: block;
    margin-top: 2px;
    text-align: center;
    color: #82bcff;
    font-weight: 800;
}

.password-recovery-card {
    display: grid;
    gap: 17px;
}

.password-recovery-card h1 {
    margin-bottom: 2px;
}

.password-recovery-form label small {
    color: var(--muted);
}

.password-recovery-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.password-recovery-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.password-recovery-explainer article {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.password-recovery-explainer p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: .84rem;
}

.password-recovery-success,
.password-recovery-invalid {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.password-recovery-success > span,
.password-recovery-invalid > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.35rem;
    font-weight: 950;
}

.password-recovery-success > span {
    color: #a7ffdc;
    background: rgba(27, 166, 109, .22);
    border: 1px solid rgba(57, 213, 151, .45);
}

.password-recovery-invalid > span {
    color: #ffd0d9;
    background: rgba(198, 63, 91, .2);
    border: 1px solid rgba(255, 93, 126, .42);
}

.password-recovery-success p,
.password-recovery-invalid p,
.password-recovery-security-note {
    color: var(--muted);
    line-height: 1.6;
}

.password-recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.password-recovery-security-note {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(67, 112, 214, .09);
}

.admin-password-recovery-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.admin-password-recovery-summary article {
    padding: 16px;
}

.admin-password-recovery-summary small {
    display: block;
    color: var(--muted);
    margin-bottom: 5px;
}

.admin-password-recovery-summary strong {
    font-size: 1.35rem;
}

.admin-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-filter-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-2);
    font-weight: 800;
}

.admin-filter-tabs a.active {
    color: #fff;
    border-color: rgba(86, 129, 255, .65);
    background: linear-gradient(125deg, #2478e8, #7334dc);
}

.admin-filter-tabs span {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    text-align: center;
    background: rgba(255, 255, 255, .12);
    font-size: .72rem;
}

.admin-reset-request-list {
    display: grid;
}

.admin-reset-request {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(190px, auto);
    gap: 13px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.admin-reset-request:last-child {
    border-bottom: 0;
}

.admin-reset-request-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.admin-reset-request-heading small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.admin-reset-request-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

.admin-reset-request-details div {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.admin-reset-request-details dt {
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.admin-reset-request-details dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.admin-reset-request-actions {
    display: grid;
    gap: 7px;
}

.admin-reset-request-actions form {
    display: grid;
    gap: 6px;
}

.admin-reset-reject-form input {
    min-width: 190px;
}

.admin-reset-note {
    margin: 10px 0 0;
    padding: 9px 11px;
    border-left: 3px solid #ff718d;
    color: var(--muted);
    background: rgba(255, 85, 116, .08);
}

.admin-email-recovery-info {
    margin-top: 16px;
}

.status-chip.status-resolved {
    color: #9bc9ff;
    background: rgba(55, 117, 218, .18);
}

.status-chip.status-approved {
    color: #9ff0c9;
    background: rgba(36, 159, 103, .18);
}

.status-chip.status-rejected {
    color: #ffadbd;
    background: rgba(197, 57, 86, .17);
}

html[data-theme="light"] .password-recovery-explainer article,
html[data-theme="light"] .admin-reset-request-details div {
    background: #f4f7fd;
}

html[data-theme="light"] .password-recovery-security-note {
    background: #edf4ff;
}

@media (max-width: 900px) {
    .admin-reset-request {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .admin-reset-request-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
    }

    .admin-reset-request-actions form {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .password-recovery-methods,
    .password-recovery-explainer,
    .admin-password-recovery-summary,
    .admin-reset-request-details {
        grid-template-columns: 1fr;
    }

    .password-recovery-actions > *,
    .password-recovery-methods > * {
        width: 100%;
    }

    .admin-reset-request {
        grid-template-columns: 1fr;
    }

    .admin-reset-request > .avatar {
        width: 46px;
        height: 46px;
    }

    .admin-reset-request-actions,
    .admin-reset-request-actions form {
        display: grid;
        width: 100%;
    }

    .admin-reset-request-actions button,
    .admin-reset-request-actions a,
    .admin-reset-reject-form input {
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================================================
   SEE PHASE 5.3.5 — VERIFIED RECOVERY + MARKET FOREGROUND GIFS
   ========================================================================== */
.admin-nav-count{margin-left:auto;min-width:22px;padding:2px 6px;border-radius:999px;color:#fff;background:#e94268;font-size:.68rem;text-align:center}.password-recovery-waiting{display:flex;gap:14px;align-items:flex-start}.password-recovery-waiting>span{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:50%;background:rgba(70,117,220,.18);font-size:1.3rem}.recovery-request-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px}.recovery-request-summary>div{padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.recovery-request-summary dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.recovery-request-summary dd{margin:4px 0 0;overflow-wrap:anywhere;font-weight:800}.status-chip.status-verified{color:#9ff0c9;background:rgba(36,159,103,.18)}.status-chip.status-completed{color:#9bc9ff;background:rgba(55,117,218,.18)}.status-chip.status-expired{color:#d4c6df;background:rgba(91,77,108,.22)}
.profile-market-decoration{pointer-events:none;user-select:none;-webkit-user-select:none;opacity:var(--decoration-opacity,1)}.profile-header-overlay-decoration{position:absolute;inset:0;width:100%;height:100%;z-index:3}.profile-foreground-banner-decoration{position:absolute;inset:0;width:100%;height:100%;z-index:3}.profile-avatar-button{position:relative;overflow:visible}.profile-avatar-frame-decoration{position:absolute;z-index:4;left:50%;top:50%;width:145%;height:145%;transform:translate(-50%,-50%);max-width:none}.profile-avatar-button.has-market-frame{z-index:5}.profile-has-foreground .profile-main,.profile-has-foreground .profile-bio,.profile-has-foreground .profile-meta,.profile-has-foreground .profile-actions,.profile-has-foreground .profile-tabs{z-index:5}.market-mock-cover{position:absolute;inset:0 0 auto;height:220px;background:linear-gradient(120deg,#0c67ff,#7a22ff 58%,#111541);overflow:hidden}.market-mock-avatar-wrap{position:absolute;left:25px;bottom:-36px;width:76px;height:76px}.market-mock-avatar{width:76px!important;height:76px!important}.market-foreground-preview{position:absolute;pointer-events:none}.market-foreground-preview.banner,.market-foreground-preview.header_overlay{inset:0;width:100%;height:100%}.market-foreground-preview.header_overlay{z-index:4}.market-foreground-preview.avatar_frame{left:50%;top:50%;width:145%;height:145%;transform:translate(-50%,-50%);max-width:none}.market-background-preview .market-mock-profile{padding-top:235px;align-items:flex-start}.market-decoration-settings-card{margin-bottom:16px}.market-badge.foreground{color:#ffb7ec;background:rgba(175,48,139,.22)}
@media(max-width:680px){.recovery-request-summary{grid-template-columns:1fr}.profile-avatar-frame-decoration{width:138%;height:138%}.market-mock-cover{height:180px}.market-background-preview .market-mock-profile{padding-top:195px}}
@media(prefers-reduced-motion:reduce){.profile-market-decoration{animation:none!important}}


/* ==========================================================================
   SEE PHASE 5.3.6 — PASSWORD RESET REQUEST ACTION VISIBILITY
   ========================================================================== */

.admin-reset-request-expanded {
    grid-template-columns: 48px minmax(0, 1fr);
}

.admin-reset-request-actions-visible {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

.admin-reset-request-actions-visible form {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.admin-reset-request-actions-visible .admin-reset-reject-form {
    flex-wrap: wrap;
}

.admin-reset-request-actions-visible .admin-reset-reject-form input {
    width: min(270px, 100%);
    min-width: 210px;
}

.admin-owner-self-recovery-note {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(79, 135, 255, .48);
    border-radius: 12px;
    background: rgba(48, 100, 211, .13);
}

.admin-owner-self-recovery-note span {
    color: var(--muted);
    line-height: 1.5;
}

.admin-reset-permission-message {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 119, 143, .36);
    border-radius: 11px;
    color: #ffb1c0;
    background: rgba(194, 54, 82, .11);
}

.admin-reset-reviewer {
    margin-top: 12px;
}

html[data-theme="light"] .admin-owner-self-recovery-note {
    color: #18233c;
    background: #edf4ff;
}

html[data-theme="light"] .admin-reset-permission-message {
    color: #9a2c45;
    background: #fff0f3;
}

@media (max-width: 760px) {
    .admin-reset-request-actions-visible,
    .admin-reset-request-actions-visible form {
        display: grid;
        width: 100%;
    }

    .admin-reset-request-actions-visible a,
    .admin-reset-request-actions-visible button,
    .admin-reset-request-actions-visible input {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* SEE PHASE 5.3.7 — FORCE PASSWORD RESET REQUEST ACTIONS */

.admin-reset-request-expanded {
    grid-template-columns: 48px minmax(0, 1fr);
}

.admin-reset-request-actions-visible {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

.admin-reset-request-actions-visible form {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.admin-reset-request-actions-visible .admin-reset-reject-form {
    flex-wrap: wrap;
}

.admin-reset-request-actions-visible input {
    min-width: 220px;
}

.admin-reset-permission-message {
    flex: 1 1 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 119, 143, .36);
    border-radius: 11px;
    color: #ffb1c0;
    background: rgba(194, 54, 82, .11);
}

@media (max-width: 760px) {
    .admin-reset-request-actions-visible,
    .admin-reset-request-actions-visible form {
        display: grid !important;
        width: 100%;
    }

    .admin-reset-request-actions-visible a,
    .admin-reset-request-actions-visible button,
    .admin-reset-request-actions-visible input {
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================================================
   SEE PHASE 5.3.8 — RECOVERY RENDER FIX + DIRECT RESET REMOVAL
   ========================================================================== */

.admin-recovery-only-steps {
    display: grid;
    gap: 9px;
    margin: 14px 0 18px;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.5;
}

.admin-reset-request-actions-visible {
    min-height: 46px;
}

.admin-reset-request-actions-visible:empty::after {
    content: "No request action is available.";
    display: block;
    width: 100%;
    color: var(--muted);
}

.admin-reset-request-details dd {
    min-height: 1.2em;
}

@media (max-width: 680px) {
    .admin-recovery-only-steps {
        padding-left: 19px;
    }
}


/* ========================================================================== 
   SEE PHASE 5.3.9 — FULL PROFILE OVERLAY + VISIBLE PROFILE BACKGROUNDS
   ========================================================================== */

body.profile-view {
    isolation: isolate;
}

body.profile-view .profile-page.profile-has-background .card {
    background: rgba(14, 19, 45, var(--profile-card-opacity, .84));
    backdrop-filter: blur(9px) saturate(1.06);
    -webkit-backdrop-filter: blur(9px) saturate(1.06);
}

html[data-theme="light"] body.profile-view .profile-page.profile-has-background .card {
    color: #17203a;
    background: rgba(255, 255, 255, var(--profile-card-opacity, .86));
}

.profile-full-overlay {
    position: fixed;
    z-index: 80;
    inset: 65px 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    background-color: transparent;
    will-change: opacity;
    contain: paint;
}

body.profile-view .topbar,
body.profile-view .bottom-nav {
    z-index: 100;
}

body.profile-view .photo-lightbox,
body.profile-view dialog,
body.profile-view .media-lightbox,
body.profile-view .reaction-picker,
body.profile-view .comment-reaction-picker {
    z-index: 1000;
}

body.reduce-profile-animation .profile-full-overlay[data-overlay-media-type="gif"] {
    display: none;
}

.market-current-customizations {
    margin-bottom: 16px;
    padding: 16px;
}

.market-current-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.market-current-list article {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.market-current-list img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 11px;
    object-fit: cover;
    background: #070a18;
}

.market-current-list small,
.market-current-list strong {
    display: block;
}

.market-current-list small {
    color: var(--muted);
}

.market-full-profile-preview {
    min-height: min(720px, 78vh);
    overflow: hidden;
}

.market-preview-page {
    position: relative;
    z-index: 3;
    width: min(620px, calc(100% - 28px));
    margin: 24px auto;
    display: grid;
    gap: 12px;
}

.market-preview-page .market-mock-profile,
.market-preview-page .market-mock-card {
    position: relative;
    inset: auto;
    width: 100%;
    color: #fff;
    background: rgba(14, 19, 45, .82);
    backdrop-filter: blur(8px);
}

.market-preview-page .market-mock-profile {
    min-height: 260px;
    padding: 0 20px 20px;
    overflow: hidden;
}

.market-preview-page .market-mock-cover {
    position: relative;
    inset: auto;
    width: calc(100% + 40px);
    height: 150px;
    margin-left: -20px;
    background: linear-gradient(125deg, #4652a7, #242852);
}

.market-mock-profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

.market-mock-profile-main .market-mock-avatar {
    position: static;
    width: 72px !important;
    height: 72px !important;
    border: 4px solid #11162f;
}

.market-preview-page .market-mock-card {
    display: grid;
    gap: 7px;
    padding: 18px;
    min-height: 110px;
}

.market-preview-page .market-mock-card-tall {
    min-height: 170px;
}

.market-preview-full-overlay {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    background-color: transparent;
}

.admin-overlay-explainer {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(83, 132, 255, .45);
    border-radius: 13px;
    background: rgba(48, 96, 203, .12);
}

.admin-overlay-explainer p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.admin-full-profile-preview {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #51518c;
}

.admin-full-profile-preview-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #5f5aa0, #313369 58%, #141831);
}

.admin-full-profile-preview-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    width: calc(100% - 24px);
    margin: 12px;
}

.admin-preview-hero,
.admin-preview-post {
    border-radius: 13px;
    background: rgba(14, 19, 45, .82);
    backdrop-filter: blur(7px);
}

.admin-preview-hero {
    height: 170px;
}

.admin-preview-post {
    height: 100px;
}

.admin-preview-post.short {
    height: 70px;
}

.admin-preview-overlay {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
}

@media (max-width: 760px) {
    .profile-full-overlay {
        inset: 60px 0 0;
    }

    .market-current-list {
        grid-template-columns: 1fr;
    }

    .market-preview-page {
        width: calc(100% - 18px);
        margin: 12px auto;
    }
}

@media (max-width: 380px) {
    .profile-full-overlay {
        inset: 56px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-full-overlay[data-overlay-media-type="gif"] {
        display: none;
    }
}


/* ==========================================================================
   SEE PHASE 5.4.0 — GAMES HUB
   ========================================================================== */

.games-page,
.game-detail-page {
    width: min(1280px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 110px;
}

.games-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(123, 55, 224, .28), transparent 34%),
        radial-gradient(circle at 15% 90%, rgba(36, 121, 238, .24), transparent 38%),
        var(--surface);
}

.games-hero h1,
.game-detail-hero h1 {
    margin: 3px 0 8px;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.games-hero p,
.game-detail-hero p,
.games-setup-notice p {
    color: var(--muted);
    line-height: 1.6;
}

.games-eyebrow {
    margin: 0;
    color: #70b5ff !important;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.games-hero-actions,
.game-detail-actions,
.game-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.games-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 280px) auto;
    gap: 9px;
    margin: 16px 0 12px;
    padding: 12px;
}

.games-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 14px;
}

.games-tabs a {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-2);
    font-weight: 850;
}

.games-tabs a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(125deg, #247bf0, #813ce3);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.game-card {
    min-width: 0;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}

.game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(83, 134, 255, .62);
}

.game-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #080b19;
    cursor: pointer;
}

.game-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.game-card:hover .game-card-cover img {
    transform: scale(1.035);
}

.game-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(10, 15, 38, .82);
    border: 1px solid rgba(255, 255, 255, .28);
    font-weight: 900;
    backdrop-filter: blur(9px);
}

.game-card-content {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.game-card-content h2 {
    margin: 0;
    font-size: 1.08rem;
}

.game-card-content > p {
    display: -webkit-box;
    min-height: 3em;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.game-card-badges,
.game-input-tags,
.game-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.game-card-badges span,
.game-input-tags span {
    padding: 4px 7px;
    border-radius: 999px;
    color: #b8d7ff;
    background: rgba(49, 102, 216, .16);
    border: 1px solid rgba(79, 132, 246, .3);
    font-size: .68rem;
    font-weight: 850;
}

.game-card-meta {
    justify-content: space-between;
    color: var(--muted);
    font-size: .76rem;
}

.game-card-actions > * {
    flex: 1 1 120px;
}

.games-empty-state,
.games-setup-notice {
    grid-column: 1 / -1;
    padding: 26px;
    text-align: center;
}

.games-empty-state > span {
    font-size: 3rem;
}

.games-setup-notice {
    width: min(740px, 100%);
    margin: 38px auto;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 18px;
    text-align: left;
}

.games-setup-notice > img {
    width: 80px;
    height: 80px;
    padding: 5px;
    border-radius: 22px;
    object-fit: contain;
    background: #070a18;
}

.game-detail-hero {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    padding: 20px;
}

.game-detail-hero > img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 520px;
    border-radius: 17px;
    object-fit: cover;
    background: #080b19;
}

.game-instructions {
    margin-top: 16px;
    padding: 22px;
    line-height: 1.7;
}

.game-player[hidden] {
    display: none !important;
}

.game-player {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100vw;
    height: 100dvh;
    color: #fff;
    background: #050711;
}

.game-player-toolbar {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    align-items: center;
    gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    border-bottom: 1px solid rgba(119, 139, 211, .28);
    background: rgba(9, 13, 34, .96);
}

.game-player-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.game-player-title > span {
    font-size: 1.4rem;
}

.game-player-title > div {
    min-width: 0;
    display: grid;
}

.game-player-title strong,
.game-player-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-player-title small {
    color: #9faed1;
}

.game-orientation-controls,
.game-player-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.game-player-actions {
    justify-content: flex-end;
}

.game-orientation-controls button {
    padding: 8px 11px;
    border: 1px solid rgba(102, 123, 192, .55);
    border-radius: 999px;
    color: #b9c4e3;
    background: #111735;
}

.game-orientation-controls button.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(125deg, #287df0, #843ee4);
}

.game-orientation-controls button:disabled {
    opacity: .36;
    cursor: not-allowed;
}

.game-rotation-hint {
    padding: 7px 12px;
    text-align: center;
    color: #ffe3a7;
    background: #3b2a0e;
    font-size: .82rem;
}

.game-frame-wrap {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.game-frame-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

body.game-is-playing {
    overflow: hidden !important;
}

.admin-games-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 16px;
    align-items: start;
}

.admin-games-list {
    display: grid;
}

.admin-game-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.admin-game-row:last-child {
    border-bottom: 0;
}

.admin-game-row > img {
    width: 118px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    object-fit: cover;
    background: #080b19;
}

.admin-game-row > .grow {
    display: grid;
    gap: 5px;
}

.admin-game-row small {
    color: var(--muted);
}

.admin-game-actions {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.admin-game-actions form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.admin-game-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.admin-game-editor > section:first-of-type,
.admin-game-editor > section:last-of-type {
    grid-column: 1 / -1;
}

.admin-game-option-grid,
.admin-game-input-support {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-game-input-support {
    margin: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.admin-game-input-support legend {
    padding: 0 6px;
    font-weight: 850;
}

.admin-game-cover-preview {
    display: grid;
    gap: 7px;
    width: min(430px, 100%);
}

.admin-game-cover-preview img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    object-fit: cover;
}

.admin-game-cover-preview span {
    color: var(--muted);
    font-size: .78rem;
}

html[data-theme="light"] .game-card-badges span,
html[data-theme="light"] .game-input-tags span {
    color: #17599d;
    background: #e3f0ff;
}

@media (max-width: 1120px) {
    .games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-games-layout,
    .admin-game-editor {
        grid-template-columns: 1fr;
    }

    .admin-game-editor > section {
        grid-column: auto !important;
    }

    .game-player-toolbar {
        grid-template-columns: 1fr auto;
    }

    .game-orientation-controls {
        grid-column: 1 / -1;
        justify-content: center;
        order: 3;
    }
}

@media (max-width: 680px) {
    .games-page,
    .game-detail-page {
        width: min(100% - 16px, 1280px);
        padding-top: 10px;
    }

    .games-hero,
    .game-detail-hero {
        grid-template-columns: 1fr;
        display: grid;
        padding: 16px;
    }

    .games-hero-actions,
    .game-detail-actions {
        width: 100%;
    }

    .games-hero-actions > *,
    .game-detail-actions > * {
        width: 100%;
    }

    .games-filter-bar {
        grid-template-columns: 1fr;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .game-card-cover {
        aspect-ratio: 16 / 9;
    }

    .game-detail-hero > img {
        min-height: 220px;
        max-height: 340px;
    }

    .game-player-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        padding-inline: 8px;
    }

    .game-player-title small {
        display: none;
    }

    .game-player-actions .secondary-button {
        display: none;
    }

    .game-orientation-controls {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 1px;
    }

    .game-orientation-controls button {
        flex: 1 0 auto;
    }

    .admin-game-row {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .admin-game-row > img {
        width: 90px;
    }

    .admin-game-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-items: stretch;
    }

    .admin-game-actions form {
        justify-content: flex-start;
    }

    .games-setup-notice {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   SEE PHASE 5.4.2 — ANDROID TOUCH ALIGNMENT
   ========================================================================== */

.game-launch-orientation {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    font-weight: 800;
}

.game-launch-orientation > span {
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.game-launch-orientation select {
    width: 100%;
}

.game-launch-orientation small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}

.game-detail-orientation {
    width: min(420px, 100%);
}

.game-player {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: block;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}

.game-frame-wrap {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: #000;
}

.game-frame-wrap:fullscreen,
.game-frame-wrap:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    touch-action: none;
    background: #000;
}

.game-frame-wrap iframe {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    transform: none;
    transform-origin: 0 0;
    touch-action: none;
    background: #000;
}

body.game-is-playing {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

body.game-is-playing .topbar,
body.game-is-playing .bottom-nav,
body.game-is-playing .desktop-sidebar,
body.game-is-playing .desktop-chat-dock {
    visibility: hidden !important;
}

@media (max-width: 680px) {
    .game-launch-orientation {
        width: 100%;
    }
}

/* ========================================================================== 
   SEE PHASE 5.4.3 — COMPACT CHAT ACTIONS, COLLAPSIBLE CHAT HEADS, MOBILE CHAT
   ========================================================================== */

/* Keep the floating window clear of the minimized chat-head rail. */
.desktop-message-dock {
    right: 88px;
}

.desktop-chat-head-rail {
    top: 82px;
    right: 12px;
    bottom: 18px;
    justify-content: flex-end;
    gap: 8px;
}

.desktop-chat-head-rail[hidden] {
    display: none !important;
}

.desktop-chat-head-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    max-height: calc(100dvh - 190px);
    padding: 7px 5px 3px;
    overflow-y: auto;
    overflow-x: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: bottom center;
    transition: max-height .2s ease, opacity .16s ease, transform .2s ease, padding .2s ease;
    scrollbar-width: none;
    pointer-events: auto;
}

.desktop-chat-head-stack::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.desktop-chat-head-rail.is-collapsed .desktop-chat-head-stack {
    max-height: 0;
    padding-block: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
}

.desktop-chat-head-toggle {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border: 1px solid #3a4a88;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #1b79f2, #7d37dc);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
    font-size: 1.2rem;
    pointer-events: auto;
}

.desktop-chat-head-toggle:hover,
.desktop-chat-head-toggle:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .46);
}

.desktop-chat-head-toggle b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #0b1028;
    border-radius: 999px;
    color: #fff;
    background: #56678f;
    font-size: .66rem;
}

.desktop-chat-head-toggle b.has-unread {
    background: #ff4f75;
}

/* Compact three-dot actions. The controls do not consume bubble height. */
.message-bubble,
.desktop-message-bubble {
    position: relative;
    overflow: visible;
}

.message-bubble { margin-bottom: 3px; }
.message-bubble.has-message-reactions { margin-bottom: 15px; }
.desktop-message-bubble.has-message-reactions { margin-bottom: 7px; }

.message-menu-trigger {
    position: absolute;
    z-index: 34;
    top: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.message-bubble.mine > .message-menu-trigger,
.desktop-message-bubble.mine > .message-menu-trigger {
    left: -34px;
}

.message-bubble.theirs > .message-menu-trigger,
.desktop-message-bubble.theirs > .message-menu-trigger {
    right: -34px;
}

.message-bubble:hover > .message-menu-trigger,
.message-bubble:focus-within > .message-menu-trigger,
.desktop-message-bubble:hover > .message-menu-trigger,
.desktop-message-bubble:focus-within > .message-menu-trigger,
.message-menu-trigger[aria-expanded="true"] {
    opacity: 1;
}

.message-menu-trigger:hover,
.message-menu-trigger:focus-visible,
.message-menu-trigger[aria-expanded="true"] {
    color: var(--text);
    background: rgba(91, 111, 187, .2);
}

.message-action-menu {
    position: absolute;
    z-index: 55;
    top: 24px;
    min-width: 158px;
    display: grid;
    gap: 2px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}

.message-action-menu[hidden],
.message-reaction-picker[hidden] {
    display: none !important;
}

.message-bubble.mine > .message-action-menu {
    right: calc(100% + 4px);
}

.message-bubble.theirs > .message-action-menu {
    left: calc(100% + 4px);
}

.desktop-message-bubble > .message-action-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.desktop-message-bubble.mine > .message-action-menu {
    right: 0;
}

.desktop-message-bubble.theirs > .message-action-menu {
    left: 0;
}

.message-action-menu button {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    padding: 7px 10px;
    color: inherit;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}

.message-action-menu button:hover,
.message-action-menu button:focus-visible {
    background: rgba(78, 112, 216, .17);
}

.message-action-menu button.danger-link {
    color: #ff8fa5;
}

.message-action-divider {
    height: 1px;
    margin: 4px 3px;
    background: var(--border);
}

.message-reaction-picker {
    z-index: 58;
    left: 0;
    right: auto;
    bottom: calc(100% + 7px);
}

.message-bubble.mine > .message-reaction-picker,
.desktop-message-bubble.mine > .message-reaction-picker {
    right: 0;
    left: auto;
}

.desktop-message-bubble > .message-reaction-picker {
    bottom: calc(100% + 5px);
}

.desktop-message-reaction-summary {
    position: absolute;
    z-index: 20;
    bottom: -12px;
    min-width: 27px;
    padding: 2px 6px;
    border: 1px solid rgba(110, 126, 192, .5);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    font-size: .67rem;
}

.desktop-message-bubble.mine > .desktop-message-reaction-summary {
    right: 7px;
}

.desktop-message-bubble.theirs > .desktop-message-reaction-summary {
    left: 7px;
}

.message-reply-preview,
.desktop-message-reply {
    width: 100%;
    display: grid;
    gap: 2px;
    border: 0;
    border-left: 3px solid rgba(255, 255, 255, .52);
    border-radius: 7px;
    padding: 6px 8px;
    color: rgba(244, 247, 255, .86);
    background: rgba(3, 7, 22, .2);
    text-align: left;
}

.message-reply-preview strong,
.desktop-message-reply strong {
    overflow: hidden;
    color: #fff;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-reply-preview span,
.desktop-message-reply span {
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-forwarded-label,
.desktop-message-forwarded {
    display: block;
    margin-bottom: 3px;
    color: rgba(232, 237, 255, .72);
    font-size: .68rem;
    font-weight: 750;
}

.message-focus-pulse {
    animation: see-message-focus 1.5s ease;
}

@keyframes see-message-focus {
    0%, 100% { filter: none; }
    30%, 65% { filter: drop-shadow(0 0 10px rgba(78, 156, 255, .9)); }
}

/* Floating reply composer. */
.desktop-message-reply-compose {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 10px;
    color: #cbd7ff;
    background: rgba(38, 58, 116, .45);
}

.desktop-message-reply-compose[hidden] {
    display: none !important;
}

.desktop-message-reply-compose > div {
    min-width: 0;
    display: grid;
}

.desktop-message-reply-compose small {
    color: #8fbfff;
    font-size: .65rem;
}

.desktop-message-reply-compose strong {
    overflow: hidden;
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-message-reply-compose button {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: transparent;
}

.chat-composer {
    grid-template-columns: 42px 42px minmax(0, 1fr) auto;
}

.desktop-message-form {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
}

.chat-reply-compose,
.chat-upload-preview {
    grid-column: 1 / -1;
}

/* Forward picker shared by desktop and Android. */
.message-forward-dialog {
    width: min(520px, calc(100% - 24px));
    max-height: min(720px, calc(100dvh - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 19px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.message-forward-dialog::backdrop {
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(3px);
}

.message-forward-header,
.message-forward-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.message-forward-header div {
    display: grid;
    gap: 2px;
}

.message-forward-header small,
.message-forward-footer small,
.message-forward-target small {
    color: var(--muted);
}

.message-forward-header > button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    background: var(--surface-2);
    font-size: 1.2rem;
}

.message-forward-search {
    padding: 12px 14px 4px;
}

.message-forward-targets {
    min-height: 170px;
    max-height: min(470px, calc(100dvh - 245px));
    display: grid;
    align-content: start;
    gap: 4px;
    overflow-y: auto;
    padding: 8px 12px 12px;
}

.message-forward-target {
    display: grid;
    grid-template-columns: 22px 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
}

.message-forward-target:hover {
    background: rgba(72, 110, 218, .14);
}

.message-forward-target input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.message-forward-target > span {
    min-width: 0;
    display: grid;
}

.message-forward-target strong,
.message-forward-target small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-forward-footer {
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

.message-forward-empty {
    margin: auto;
    padding: 24px;
    text-align: center;
}

html[data-theme="light"] .message-action-menu,
html[data-theme="light"] .message-forward-dialog,
html[data-theme="light"] .desktop-message-reaction-summary {
    color: #17203a;
    background: #fff;
}

html[data-theme="light"] .message-reply-preview,
html[data-theme="light"] .desktop-message-reply {
    color: #37415f;
    border-left-color: #4385df;
    background: rgba(56, 112, 203, .1);
}

html[data-theme="light"] .message-reply-preview strong,
html[data-theme="light"] .desktop-message-reply strong {
    color: #17203a;
}

/* Compact message actions remain touch-friendly on phones. */
@media (max-width: 760px) {
    .message-menu-trigger {
        opacity: .78;
    }

    .message-action-menu {
        top: calc(100% + 4px);
    }

    .message-bubble.mine > .message-action-menu {
        right: 0;
        left: auto;
    }

    .message-bubble.theirs > .message-action-menu {
        right: auto;
        left: 0;
    }

    .message-reaction-picker {
        max-width: calc(100vw - 28px);
    }

    .message-forward-dialog {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 17px;
    }

    .chat-composer > button[type="submit"] {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 960px) {
    .desktop-chat-head-rail,
    .desktop-message-dock {
        display: none !important;
    }
}