/* ===========================================================================
   SOCHOUSE — Stylesheet (Clean Canonical)
   =========================================================================== */

:root {
    color-scheme: dark;

    --bg: #0a0c10;
    --bg-elevated: #0f1218;
    --bg-hover: rgba(255, 255, 255, 0.03);

    --border: #1c2129;
    --border-strong: #262e3e;

    --text: #eef2f8;
    --text-muted: #8b95a9;
    --text-dim: #5a6478;
    --text-faint: #3a4252;

    --accent: #5b8def;
    --accent-hover: #7ba4f5;
    --accent-soft: rgba(91, 141, 239, 0.12);

    --like: #f91880;
    --like-soft: rgba(249, 24, 128, 0.1);

    --danger: #f4212e;
    --danger-soft: rgba(244, 33, 46, 0.1);

    --verified: #1d9bf0;
    --gold: #d4af7a;
    --gold-soft: rgba(212, 175, 122, 0.12);

    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

/* ============================== RESET ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.008em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e242e; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a3240; }
::selection { background: rgba(91, 141, 239, 0.35); color: var(--text); }

/* ============================== LAYOUT ============================== */
.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.content { flex: 1; padding: 0 16px; }

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
}
.brand { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.22em; color: var(--text); }
.brand:hover, .brand:focus-visible { color: var(--accent); }

/* ============================== CARDS / ALERTS ============================== */
.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 28px 24px; margin-bottom: 16px; }
.auth-card { max-width: 440px; margin: 32px auto 0; width: 100%; }
.eyebrow { margin: 0 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
h1 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.lede { margin: 0 0 22px; max-width: 62ch; font-size: 0.94rem; line-height: 1.55; color: var(--text-muted); }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.4;
    border: 1px solid transparent;
    animation: alert-in 200ms ease;
}
@keyframes alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.alert-success { background: rgba(30, 90, 60, 0.15); border-color: rgba(60, 150, 100, 0.3); color: #86efac; }
.alert-error { background: rgba(120, 30, 40, 0.15); border-color: rgba(200, 60, 70, 0.3); color: #fca5a5; }

/* ============================== FORMS ============================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="password"],
.field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #05070a;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.field textarea { resize: vertical; min-height: 84px; font-family: inherit; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #0a0d12;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-help { margin: 3px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-dim); }
.field-error { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.4; color: #f87171; }

.input-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #05070a;
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-prefix > span {
    display: flex;
    align-items: center;
    padding: 0 4px 0 16px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    user-select: none;
}
.input-prefix > input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 16px 12px 4px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}
.input-prefix-disabled { opacity: 0.55; cursor: not-allowed; }

.input-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #05070a;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a9' d='M1.41 0 6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.input-select:focus { outline: none; border-color: var(--accent); background-color: #0a0d12; box-shadow: 0 0 0 3px var(--accent-soft); }
.input-select option { background: var(--bg-elevated); color: var(--text); }

.field input[type="file"] { padding: 8px 0; border: none; background: transparent; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; }
.field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* ============================== BUTTONS ============================== */
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, transform 100ms ease;
}
.button:hover, .button:focus-visible { background: var(--accent-hover); outline: none; }
.button:active { transform: scale(0.98); }

.button-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 140ms ease, background-color 140ms ease;
}
.button-link:hover, .button-link:focus-visible { color: var(--text); background: var(--bg-hover); }

.button-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.button-danger:hover, .button-danger:focus-visible { background: var(--danger); color: #ffffff; }

/* ============================== FEED HEADER + TABS ============================== */
.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 4px 12px;
}
.feed-title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.feed-header-actions { display: flex; align-items: center; gap: 8px; }

.feed-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}
.feed-icon-btn:hover, .feed-icon-btn:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; }

.feed-icon-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
}
.feed-icon-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-icon-avatar-active {
    padding: 2px;
    background: linear-gradient(#0f1218, #0f1218) padding-box, linear-gradient(135deg, #5b8def, #a855f7, #f43f5e) border-box;
    border: 2px solid transparent;
    width: 32px;
    height: 32px;
}
.feed-icon-avatar-active img { border-radius: 50%; }

.feed-compose-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, transform 100ms ease;
}
.feed-compose-btn:hover, .feed-compose-btn:focus-visible { background: var(--accent-hover); outline: none; }
.feed-compose-btn:active { transform: scale(0.97); }
.feed-compose-btn svg { display: block; }

.feed-subtitle { margin: -4px 4px 12px; font-size: 0.86rem; color: var(--text-dim); line-height: 1.4; }

.feed-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; margin-top: 2px; }
.feed-tab {
    position: relative;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 140ms ease;
    letter-spacing: -0.005em;
}
.feed-tab:hover, .feed-tab:focus-visible { color: var(--text); background: var(--bg-hover); }
.feed-tab-active { color: var(--text); }
.feed-tab-active::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.feed-header-compact { justify-content: flex-end; padding: 0 4px 0; min-height: 0; height: auto; margin: 0; }
.feed-header-compact:empty { display: none; }
.feed-tabs:has(.feed-tab:only-child) { justify-content: flex-start; }

/* ============================== POST LIST + CARD ============================== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.post-card {
    position: relative;
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    text-align: left;
    overflow: hidden;
}
.post-card:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

.post-card h1,
.post-card h2,
.post-card h3,
.post-card h4,
.post-card p { margin: 0; padding: 0; }

.post-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}
.post-card-overlay:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.post-layout {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.post-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    align-self: start;
    justify-self: start;
    flex-shrink: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
}

.post-avatar:hover, .post-avatar:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--accent);
    outline: none;
}

a.post-avatar.post-avatar-has-story {
    padding: 2px;
    background: linear-gradient(135deg, #5b8def 0%, #a855f7 50%, #f43f5e 100%);
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
a.post-avatar.post-avatar-has-story img {
    border-radius: 50%;
    background: #0f1218;
    border: 2px solid #0f1218;
    box-sizing: border-box;
}
a.post-avatar.post-avatar-has-story .post-avatar-initial {
    background: #0f1218;
    border-radius: 50%;
    border: 2px solid #0f1218;
    box-sizing: border-box;
}

.post-content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    text-align: left;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    padding-top: 1px;
}

.post-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.011em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.post-author:hover, .post-author:focus-visible { color: var(--accent); }
.post-author-name { overflow: hidden; text-overflow: ellipsis; }
.post-author .verified-badge { width: 14px; height: 14px; flex-shrink: 0; }

.post-username-sep { color: var(--text-faint); font-size: 0.85rem; user-select: none; }

.post-username {
    color: var(--text-dim);
    font-size: 0.865rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40ch;
}
.post-username:hover, .post-username:focus-visible { color: var(--accent); }

.post-time { color: var(--text-dim); font-size: 0.865rem; white-space: nowrap; }

.post-body {
    margin-top: 4px;
    font-size: 0.975rem;
    line-height: 1.5;
    color: var(--text);
    letter-spacing: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-align: left;
}

.post-media {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: #05070a;
    max-width: 100%;
}
.post-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.post-poll { margin-top: 10px; max-width: 100%; }

.post-edited { margin-top: 8px; font-size: 0.74rem; color: var(--text-faint); font-style: italic; }

.post-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 0; border: none; width: 100%; }
.post-action-form { display: contents; }

.post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 36px;
    min-height: 34px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
    transition: color 140ms ease, background-color 140ms ease;
}
.post-action:hover, .post-action:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.post-action svg { display: block; flex-shrink: 0; }
.post-action span { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.post-action-active { color: var(--like); }
.post-action-active:hover, .post-action-active:focus-visible { color: var(--like); background: var(--like-soft); }
.post-action-active svg { fill: currentColor; }
.post-action-danger:hover, .post-action-danger:focus-visible { color: var(--danger); background: var(--danger-soft); }

.post-action-reposted { color: #22c55e; }
.post-action-reposted:hover, .post-action-reposted:focus-visible {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}
.post-action-reposted svg { stroke: #22c55e; }

.post-action-static { cursor: default; pointer-events: none; }

/* ============================== POST CAROUSEL ============================== */
.post-card-carousel { position: relative; }
.post-card-carousel:hover { background: var(--bg-elevated); }

.post-meta-carousel-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: rgba(139, 149, 169, 0.15);
    border: 1px solid rgba(139, 149, 169, 0.25);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: middle;
    margin-left: 2px;
    flex-shrink: 0;
}
.post-meta-carousel-badge svg { display: block; flex-shrink: 0; }

.post-carousel {
    position: relative;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: #05070a;
    max-width: 100%;
}

.post-carousel-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.post-carousel-track::-webkit-scrollbar { display: none; }

.post-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.post-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
    pointer-events: none;
}

.post-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color 160ms ease, transform 160ms ease;
}
.post-carousel-dot.is-active { background: #ffffff; transform: scale(1.15); }

.post-carousel-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.02em;
}

.post-detail-carousel { position: relative; }
.post-detail-carousel .post-carousel {
    margin-left: 60px;
    margin-right: 0;
    border-radius: var(--radius-sm);
}

.post-detail-badge-carousel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: rgba(139, 149, 169, 0.15);
    border: 1px solid rgba(139, 149, 169, 0.25);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
}
.post-detail-badge-carousel svg { display: block; flex-shrink: 0; }

/* ============================== POST DETAIL ============================== */
.post-detail {
    padding: 20px 24px 16px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    position: relative;
}
.post-detail .post-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }

.post-detail .post-card-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-weight: 700;
    overflow: hidden;
}
.post-detail .post-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-detail .post-card-meta { display: block; }

.post-detail .post-card-name { display: flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 700; margin-bottom: 1px; color: var(--text); flex-wrap: wrap; }
.post-detail .post-card-name a { color: var(--text); }
.post-detail .post-card-handle { display: flex; font-size: 0.88rem; color: var(--text-dim); }

.post-detail-body {
    margin: 12px 0 4px;
    padding-left: 60px;
    font-size: 1.08rem;
    line-height: 1.5;
    letter-spacing: -0.012em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.post-detail-body p { margin: 0; }

.post-detail-image { margin: 8px 0 4px 60px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: #05070a; }
.post-detail-image img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover; }
.post-detail > .poll { margin-left: 60px; }
.post-detail-time { margin: 10px 0 4px 60px; font-size: 0.8rem; color: var(--text-dim); }

.post-detail .post-card-actions {
    padding: 10px 0 0 60px;
    margin: 10px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
}

.post-card-actions .post-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}
.post-card-actions .post-action-btn:hover { color: var(--accent); background: var(--accent-soft); }
.post-card-actions .post-action-btn svg { display: block; flex-shrink: 0; }
.post-card-actions .post-action-active { color: var(--like); }
.post-card-actions .post-action-active svg { fill: currentColor; }
.post-card-actions .post-action-right { margin-left: auto; }

/* ============================== COMMENTS ============================== */
#comments { padding: 20px 24px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border); margin-top: 12px; }
#comments > .eyebrow { margin-bottom: 14px; font-size: 0.72rem; }

.comment-form { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.comment-form .field { margin-bottom: 10px; }
.comment-form textarea { min-height: 52px; padding: 12px 16px; border-radius: var(--radius-sm); background: #05070a; font-size: 0.94rem; }
.comment-form .actions { margin: 0; padding: 0; justify-content: flex-end; border: none; }
.comment-form .button { padding: 8px 20px; font-size: 0.85rem; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 700;
    flex-shrink: 0;
    text-decoration: none;
    border: none;
    padding: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.comment-avatar:hover, .comment-avatar:focus-visible { transform: scale(1.04); box-shadow: 0 0 0 2px var(--accent); outline: none; }
.comment-avatar-btn { cursor: pointer; }

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

.comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-bottom: 2px; font-size: 0.86rem; line-height: 1.3; }
.comment-author { font-weight: 700; font-size: 0.9rem; }
.comment-author:hover, .comment-author:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.comment-handle, .comment-time { color: var(--text-dim); font-size: 0.82rem; }
.comment-content { margin: 2px 0 0; font-size: 0.94rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.comment-delete-form { margin: 6px 0 0; }
.comment-delete-btn { padding: 3px 10px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-dim); font-size: 0.75rem; font-weight: 500; cursor: pointer; }
.comment-delete-btn:hover, .comment-delete-btn:focus-visible { color: var(--danger); background: var(--danger-soft); outline: none; }

/* ============================== POLL ============================== */
.poll { margin: 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #05070a; }
.poll-question { margin: 0 0 12px; font-size: 0.94rem; font-weight: 700; line-height: 1.35; }
.poll-form { display: flex; flex-direction: column; gap: 8px; }

.poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}
.poll-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.poll-option input[type="radio"] { accent-color: var(--accent); margin: 0; cursor: pointer; }
.poll-form .button { align-self: flex-start; margin-top: 4px; padding: 8px 20px; font-size: 0.83rem; }
.poll-results { display: flex; flex-direction: column; gap: 8px; }

.poll-option-result {
    position: relative;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    overflow: hidden;
}
.poll-option-voted { border-color: var(--accent); background: var(--accent-soft); }
.poll-option-bar { position: absolute; top: 0; left: 0; height: 100%; background: rgba(91, 141, 239, 0.18); transition: width 300ms ease; z-index: 1; }
.poll-option-content { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9rem; }
.poll-option-percent { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.83rem; }
.poll-meta { margin: 10px 0 0; font-size: 0.76rem; color: var(--text-dim); }

/* ============================== PAGINATION ============================== */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 20px 0 8px; }

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 140ms ease;
}
.pagination-link:hover, .pagination-link:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; }
.pagination-current { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.pagination-disabled { opacity: 0.35; pointer-events: none; }
.pagination-ellipsis { padding: 8px 4px; color: var(--text-faint); font-size: 0.85rem; }

/* ============================== PROFILE ============================== */
.profile-page {
    max-width: 640px;
    margin: 0 auto 24px;

    --profile-color: #5b8def;
    --profile-color-light: #7ba4f5;
    --profile-color-lighter: #b3cdfb;
    --profile-color-dark: #3d69c5;
    --profile-color-darker: #2a4a92;
    --profile-color-soft: rgba(91, 141, 239, 0.14);
    --profile-color-glow: rgba(91, 141, 239, 0.32);
    --profile-color-wash: rgba(91, 141, 239, 0.08);
}

.profile-hero { position: relative; margin-bottom: 20px; }

.profile-cover {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: visible;
    background: linear-gradient(
        160deg,
        var(--profile-color-light) 0%,
        var(--profile-color) 55%,
        var(--profile-color-dark) 100%
    );
    isolation: isolate;
}

.profile-cover-fallback {
    background:
        radial-gradient(90% 120% at 20% 15%, var(--profile-color-lighter) 0%, transparent 55%),
        radial-gradient(70% 100% at 85% 70%, var(--profile-color-light) 0%, transparent 50%),
        linear-gradient(
            160deg,
            var(--profile-color-light) 0%,
            var(--profile-color) 50%,
            var(--profile-color-dark) 100%
        );
}

.profile-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    border-radius: 16px;
}

.profile-cover-fade {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.88) 0%,
        rgba(10, 12, 16, 0.72) 22%,
        rgba(10, 12, 16, 0.44) 50%,
        rgba(10, 12, 16, 0.16) 78%,
        rgba(10, 12, 16, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.profile-cover-action {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-follow-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.profile-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(10, 12, 16, 0.65);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.profile-icon-btn svg { display: block; }
.profile-icon-btn:hover, .profile-icon-btn:focus-visible {
    background: rgba(10, 12, 16, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}
.profile-icon-btn:active { transform: scale(0.94); }

.profile-icon-btn-follow {
    background: var(--profile-color);
    border-color: var(--profile-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.profile-icon-btn-follow:hover, .profile-icon-btn-follow:focus-visible {
    background: var(--profile-color-dark);
    border-color: var(--profile-color-dark);
}

.profile-icon-btn-following {
    background: rgba(10, 12, 16, 0.65);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}
.profile-icon-btn-following:hover, .profile-icon-btn-following:focus-visible {
    background: var(--danger);
    border-color: var(--danger);
}

.profile-icon-btn-logout {
    color: #ffffff;
}
.profile-icon-btn-logout:hover, .profile-icon-btn-logout:focus-visible {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #ffffff;
}

.profile-cover-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 22px;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 20;
    isolation: isolate;
}

.profile-avatar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--profile-color);
    font-size: 1.85rem;
    font-weight: 700;
    overflow: hidden;
    text-decoration: none;
    box-shadow:
        0 0 0 3px rgba(10, 12, 16, 0.9),
        0 0 0 4.5px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.profile-avatar-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; }
.profile-avatar-btn { border: none; padding: 0; cursor: pointer; }
.profile-avatar:hover, .profile-avatar:focus-visible { transform: scale(1.03); outline: none; }

.profile-avatar.profile-avatar-has-story {
    padding: 3px;
    background: linear-gradient(135deg, #5b8def 0%, #a855f7 50%, #f43f5e 100%);
    box-shadow:
        0 0 0 3px rgba(10, 12, 16, 0.9),
        0 0 0 4.5px rgba(255, 255, 255, 0.18);
}
.profile-avatar.profile-avatar-has-story img,
.profile-avatar.profile-avatar-has-story .profile-avatar-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    object-fit: cover;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
}

.profile-cover-info { min-width: 0; flex: 1; padding-bottom: 4px; }

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    letter-spacing: 0;
    color: #ffffff;
}

.profile-name {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.profile-name-row .verified-badge {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.profile-pronouns {
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.profile-username {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Profile note bubble */
.profile-note-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    right: auto;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(15, 18, 24, 0.94);
    color: var(--text);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    max-width: min(220px, calc(100vw - 80px));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(91, 141, 239, 0.2);
    user-select: none;
    transition: background-color 160ms ease, transform 160ms ease;
    animation: note-pop 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-note-bubble:hover,
.profile-note-bubble:focus-visible {
    background: rgba(20, 24, 32, 0.98);
    outline: none;
    transform: translateY(-2px);
}

.profile-note-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-note-tail {
    position: absolute;
    top: 100%;
    left: 22px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(15, 18, 24, 0.94);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08));
}

@keyframes note-pop {
    from { opacity: 0; transform: translateY(4px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.profile-note-add {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid rgba(10, 12, 16, 0.9);
    border-radius: 50%;
    background: var(--profile-color, #5b8def);
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 6px 16px -4px rgba(91, 141, 239, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 160ms ease, background-color 160ms ease;
    outline: none;
}
.profile-note-add:hover,
.profile-note-add:focus-visible { transform: scale(1.08); outline: none; }
.profile-note-add:active { transform: scale(0.9); }
.profile-note-add svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Profile body */
.profile-body { padding: 0 20px; }

.profile-bio {
    margin: 0;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--profile-color);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.profile-spotify {
    margin: 16px 0 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #05070a;
}
.profile-spotify iframe { display: block; width: 100%; height: 80px; border: none; }

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    margin: 20px 0 0;
    padding: 0;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.profile-stat-number {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.profile-stat-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

a.profile-stat:hover .profile-stat-number,
a.profile-stat:focus-visible .profile-stat-number {
    color: var(--profile-color);
    outline: none;
}

.profile-joined { margin: 10px 0 0; font-size: 0.8125rem; color: var(--text-dim); line-height: 1.4; }

/* ============================== COUPLE ============================== */
.profile-couple {
    margin: 20px 0 0;
    padding: 12px 14px 14px;
    border-radius: 14px;
    background: #15110b;
    border: 1px solid rgba(212, 175, 122, 0.28);
}

.profile-couple-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.profile-couple-label > span:not(.profile-couple-ornament) { white-space: nowrap; text-indent: 0.18em; }
.profile-couple-label::before,
.profile-couple-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 122, 0.4), transparent);
}
.profile-couple-ornament { font-size: 0.75rem; color: rgba(212, 175, 122, 0.8); line-height: 1; }

.profile-couple-partner {
    display: block;
    position: relative;
    width: 100%;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 122, 0.35);
    background: linear-gradient(135deg, #d9b884 0%, #b8935f 50%, #8b6f47 100%);
    text-decoration: none;
    color: inherit;
    transition: border-color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-couple-partner:hover, .profile-couple-partner:focus-visible {
    border-color: rgba(212, 175, 122, 0.6);
    outline: none;
    transform: translateY(-1px);
}

.profile-couple-cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #d9b884 0%, #b8935f 50%, #8b6f47 100%);
}
.profile-couple-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-couple-cover-fallback {
    background:
        radial-gradient(80% 120% at 20% 20%, rgba(255, 233, 200, 0.55) 0%, transparent 60%),
        radial-gradient(70% 100% at 85% 60%, rgba(200, 165, 120, 0.6) 0%, transparent 55%),
        linear-gradient(135deg, #d9b884 0%, #b8935f 50%, #8b6f47 100%);
}
.profile-couple-cover-fallback::after {
    content: '❖';
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.15rem;
    color: rgba(255, 245, 225, 0.55);
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(80, 50, 20, 0.4);
}
.profile-couple-cover-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.95) 0%,
        rgba(10, 12, 16, 0.82) 25%,
        rgba(10, 12, 16, 0.5) 55%,
        rgba(10, 12, 16, 0.15) 82%,
        rgba(10, 12, 16, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.profile-couple-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    z-index: 2;
}
.profile-couple-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a3a24, #2a1f12);
    color: #e8cfa0;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-mono);
    box-shadow: 0 0 0 2px rgba(10, 12, 16, 0.95), 0 0 0 3.5px rgba(212, 175, 122, 0.75);
    box-sizing: border-box;
}
.profile-couple-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.profile-couple-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.profile-couple-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.011em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.profile-couple-name .verified-badge { width: 13px; height: 13px; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.profile-couple-handle {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ============================== CONTENT SWITCHER + SLIDER ============================== */
.profile-content-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 24px 0 8px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    position: relative;
}

.profile-content-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
}
.profile-content-tab svg { display: block; }
.profile-content-tab:hover, .profile-content-tab:focus-visible {
    color: var(--text);
    background: var(--bg-hover);
    outline: none;
}
.profile-content-tab.is-active {
    color: var(--profile-color);
    background: var(--profile-color-soft);
}
.profile-content-tab.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--profile-color);
    box-shadow: 0 0 8px var(--profile-color-glow);
}

.profile-content-slider {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 0;
    border-radius: var(--radius);
}
.profile-content-slider::-webkit-scrollbar { display: none; }

.profile-content-panel {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    padding-bottom: 8px;
}
.profile-content-panel .post-list { border-radius: var(--radius); overflow: hidden; }
.profile-content-panel .empty-state { margin: 0; }

/* ============================== CAROUSEL GRID ============================== */
.carousel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.carousel-grid-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #05070a;
    text-decoration: none;
    color: inherit;
    transition: transform 160ms ease;
}
.carousel-grid-item:hover, .carousel-grid-item:focus-visible { outline: none; transform: scale(0.99); z-index: 2; }
.carousel-grid-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 160ms ease; }
.carousel-grid-item:hover img { opacity: 0.85; }
.carousel-grid-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
    background: linear-gradient(135deg, #1a1f2b 0%, #0f1218 100%);
    overflow: hidden;
}
.carousel-grid-count {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px 3px 5px;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.carousel-grid-count svg { display: block; flex-shrink: 0; }

/* ============================== FOLLOWS LIST ============================== */
.follows-header { display: flex; align-items: center; gap: 14px; padding: 16px 4px 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.follows-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
}
.follows-back:hover, .follows-back:focus-visible { color: var(--text); background: var(--bg-hover); outline: none; }
.follows-header-text { display: flex; flex-direction: column; min-width: 0; }
.follows-header-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.follows-header-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-dim); }

.user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--bg-hover); }

.user-row-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    padding: 0;
}
.user-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-row-avatar.character-avatar-btn:hover, .user-row-avatar.character-avatar-btn:focus-visible { transform: scale(1.04); box-shadow: 0 0 0 2px var(--accent); outline: none; }
.user-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-row-name { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 0.94rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-name:hover, .user-row-name:focus-visible { color: var(--accent); }
.user-row-name .verified-badge { width: 14px; height: 14px; }
.user-row-handle { color: var(--text-dim); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-handle:hover { color: var(--accent); }
.user-row-action { flex-shrink: 0; }

.viewer-time {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 500;
    white-space: nowrap;
}

.follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.follow-btn-follow { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.follow-btn-follow:hover, .follow-btn-follow:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); outline: none; }
.follow-btn-following { background: transparent; color: var(--text); border-color: var(--border-strong); }
.follow-btn-following:hover, .follow-btn-following:focus-visible { border-color: var(--danger); color: var(--danger); outline: none; background: var(--danger-soft); }

.profile-card .follow-btn-follow {
    background: var(--profile-color);
    border-color: var(--profile-color);
}
.profile-card .follow-btn-follow:hover,
.profile-card .follow-btn-follow:focus-visible {
    background: var(--profile-color-dark);
    border-color: var(--profile-color-dark);
}

.profile-follow-form, .user-row-form { display: inline-flex; margin: 0; padding: 0; }

/* ============================== SEARCH ============================== */
.search-page { padding: 8px 0 16px; }
.search-form { margin: 0 0 20px; }

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0 12px;
}
.search-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-input-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; margin-right: 8px; }
.search-input { flex: 1; min-width: 0; padding: 12px 0; border: none; background: transparent; color: var(--text); font-size: 0.95rem; outline: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-dim); flex-shrink: 0; text-decoration: none; }
.search-clear:hover, .search-clear:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; }

.search-empty { text-align: center; padding: 48px 24px; color: var(--text-dim); }
.search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-faint);
    margin-bottom: 20px;
}
.search-empty-title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--text); }
.search-empty-help { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.search-result-count { margin: 0 4px 12px; font-size: 0.82rem; color: var(--text-dim); font-weight: 500; }

.user-item { border-bottom: 1px solid var(--border); }
.user-item:last-child { border-bottom: none; }
.user-item-link { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; color: inherit; }
.user-item-link:hover, .user-item-link:focus-visible { background: var(--bg-hover); outline: none; }

.user-item-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.user-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-item-name { display: inline-flex; align-items: center; gap: 4px; font-size: 0.95rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-item-name .verified-badge { width: 14px; height: 14px; }
.user-item-handle { font-size: 0.85rem; color: var(--text-dim); margin-top: 1px; }

/* ============================== VERIFIED BADGE ============================== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--verified);
    transform: translateY(1px);
}
.verified-badge svg { display: block; width: 100%; height: 100%; }
.profile-cover-text .verified-badge { width: 20px; height: 20px; }

/* ============================== AVATAR LIGHTBOX ============================== */
dialog.avatar-modal { border: none; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
dialog.avatar-modal:not([open]) { display: none; }
dialog.avatar-modal::backdrop { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog.avatar-modal > img {
    display: block;
    width: min(78vw, 440px);
    height: min(78vw, 440px);
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent);
    animation: avatar-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes avatar-in {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================== EMPTY STATE / MISC ============================== */
.empty-state { padding: 48px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; margin: 0 0 16px; }
.empty-state p { margin: 0 0 6px; font-size: 0.95rem; color: var(--text-muted); }
.empty-state p:first-child { font-size: 1.05rem; color: var(--text); font-weight: 600; }

.footer {
    border-top: 1px solid var(--border);
    padding: 20px 20px 0;
    margin-top: 32px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
}
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 20px; }
.content > .card:first-child { margin-top: 24px; }

/* ============================== STORY BAR ============================== */
.story-bar {
    display: flex;
    gap: 14px;
    padding: 12px 4px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0;
}
.story-bar::-webkit-scrollbar { display: none; }

.story-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    scroll-snap-align: start;
    width: 92px;
    max-width: 92px;
}

.story-avatar {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1f2b;
    color: var(--accent);
    font-size: 1.7rem;
    font-weight: 700;
    overflow: hidden;
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.story-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.story-avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #2a3142, #1a1f2b); color: var(--accent); font-weight: 700; }

.story-avatar-active {
    padding: 3px;
    background:
        linear-gradient(#0f1218, #0f1218) padding-box,
        linear-gradient(135deg, #5b8def 0%, #a855f7 50%, #f43f5e 100%) border-box;
    border: 3px solid transparent;
    box-sizing: border-box;
}
.story-avatar-active img { border-radius: 50%; }

.story-avatar-seen {
    padding: 3px;
    background:
        linear-gradient(#0f1218, #0f1218) padding-box,
        linear-gradient(135deg, #2a3240 0%, #1a1f2b 100%) border-box;
    border: 3px solid transparent;
    box-sizing: border-box;
}
.story-avatar-seen img { border-radius: 50%; }

.story-avatar-add { background: transparent; border: 2px dashed var(--border-strong); color: var(--text-dim); }
.story-item:hover .story-avatar, .story-item:focus-visible .story-avatar { transform: scale(1.06); }
.story-item:focus-visible { outline: none; }
.story-item:focus-visible .story-avatar { box-shadow: 0 0 0 2px var(--accent); }

.story-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    letter-spacing: -0.005em;
    font-weight: 600;
}
.story-bar-empty { font-size: 0.85rem; color: var(--text-dim); margin: 0; padding: 12px 0; }

/* ============================== STORY VIEWER ============================== */
html.story-viewer-html { height: 100%; height: 100dvh; overflow: hidden; }
html.story-viewer-html, body.story-viewer-body {
    margin: 0;
    padding: 0;
    background: #000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    -webkit-user-select: none;
    user-select: none;
}
.story-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    touch-action: pan-y;
}
.story-progress {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    display: flex;
    gap: 3px;
    z-index: 10;
    pointer-events: none;
}
.story-progress-seg { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.story-progress-done { background: rgba(255, 255, 255, 0.9); }

.story-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(24px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px));
    position: relative;
    z-index: 30;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    flex-shrink: 0;
}
.story-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.story-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
}
.story-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-header-text { display: flex; flex-direction: column; min-width: 0; }
.story-header-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.story-header-name .verified-badge { width: 13px; height: 13px; }
.story-header-time { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); }

.story-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.story-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.story-icon-btn:hover, .story-icon-btn:focus-visible { background: rgba(0, 0, 0, 0.7); outline: none; }
.story-icon-btn:active { transform: scale(0.92); }
.story-delete-form { margin: 0; padding: 0; display: inline-flex; }

/* Story like button (in header) */
.story-like-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.story-like-btn-header {
    color: #ffffff;
    transition: color 200ms ease, transform 160ms ease, background-color 200ms ease;
}
.story-like-btn-header svg {
    display: block;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), fill 200ms ease;
}
.story-like-btn-header.is-liked {
    color: #ff4d6d;
    background: rgba(255, 77, 109, 0.22);
}
.story-like-btn-header.is-liked svg {
    fill: currentColor;
    transform: scale(1.1);
}
.story-like-btn-header.is-animating svg {
    animation: story-like-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story-like-btn-header:active {
    transform: scale(0.9);
}

@keyframes story-like-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5); }
    70%  { transform: scale(0.85); }
    100% { transform: scale(1.1); }
}

.story-content { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.story-image-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Story caption — full width ala Snapchat */
.story-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16%;
    width: 100%;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.005em;
    padding: 14px 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    pointer-events: none;
    margin: 0;
}

.story-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 48px 28px; text-align: center; color: #fff; }
.story-text p {
    margin: 0;
    font-size: clamp(1.35rem, 5.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    max-width: 620px;
    word-wrap: break-word;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.story-nav {
    position: absolute;
    top: calc(76px + env(safe-area-inset-top, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 38%;
    z-index: 5;
    cursor: pointer;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

.story-footer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px calc(16px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 30;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.story-viewers,
.story-likers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 160ms ease, transform 160ms ease;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.story-viewers:hover,
.story-viewers:focus-visible,
.story-likers:hover,
.story-likers:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    outline: none;
    transform: scale(1.04);
}
.story-likers {
    color: #ff4d6d;
    border-color: rgba(255, 77, 109, 0.35);
    background: rgba(255, 77, 109, 0.15);
    padding: 7px 12px;
}
.story-likers:hover,
.story-likers:focus-visible {
    background: rgba(255, 77, 109, 0.28);
}
.story-likers svg { fill: currentColor; display: block; }
.story-viewers svg { display: block; flex-shrink: 0; }

.story-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(20px);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 20;
}
.story-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================== BOTTOM NAV ============================== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-inner { display: flex; align-items: stretch; justify-content: space-around; max-width: 640px; margin: 0 auto; height: 62px; }
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    min-width: 0;
}
.bottom-nav-item:hover, .bottom-nav-item:focus-visible { color: var(--text-muted); outline: none; }
.bottom-nav-item.is-active { color: var(--accent); }
.bottom-nav-item.is-active .bottom-nav-icon svg { stroke-width: 2.4; }
.bottom-nav-item.is-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
}
.bottom-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.bottom-nav-icon svg { width: 22px; height: 22px; }
.bottom-nav-label { font-size: 0.68rem; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav-form { flex: 1; display: flex; margin: 0; padding: 0; min-width: 0; }
.bottom-nav-form .bottom-nav-item { width: 100%; }

.bottom-nav-item-search { flex: 0 0 auto; width: 64px; min-width: 64px; position: relative; padding: 0; margin: 0 4px; align-self: center; overflow: visible; }
.bottom-nav-item-search .bottom-nav-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b8def 0%, #a855f7 100%);
    color: #ffffff;
    border: 3px solid #0a0c10;
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.4), 0 6px 20px rgba(91, 141, 239, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bottom-nav-item-search .bottom-nav-icon svg { width: 24px; height: 24px; stroke-width: 2.4; display: block; }
.bottom-nav-item-search:hover .bottom-nav-icon, .bottom-nav-item-search:focus-visible .bottom-nav-icon { transform: translateY(-16px) scale(1.06); }
.bottom-nav-item-search.is-active .bottom-nav-icon { background: linear-gradient(135deg, #7ba4f5 0%, #c084fc 100%); }
.bottom-nav-item-search .bottom-nav-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    pointer-events: none;
}
.bottom-nav-item-search.is-active .bottom-nav-label { color: var(--accent); }
.bottom-nav-item-search.is-active::after { display: none; }

/* ============================== FAB ============================== */
.fab-wrap {
    position: fixed;
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b8def 0%, #a855f7 100%);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(91, 141, 239, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fab:hover, .fab:focus-visible { transform: scale(1.06); outline: none; }
.fab:active { transform: scale(0.96); }
.fab-icon-plus { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.fab.is-open .fab-icon-plus { transform: rotate(45deg); }

.fab-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; animation: fab-menu-in 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.fab-menu[hidden] { display: none; }
@keyframes fab-menu-in {
    from { opacity: 0; transform: translateY(10px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.fab-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    text-decoration: none;
}
.fab-menu-item:hover, .fab-menu-item:focus-visible { border-color: var(--accent); background: var(--bg-hover); outline: none; }
.fab-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #ffffff; flex-shrink: 0; }
.fab-menu-icon-story { background: linear-gradient(135deg, #f43f5e 0%, #a855f7 100%); }
.fab-menu-icon-carousel { background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); }
.fab-menu-icon-post { background: linear-gradient(135deg, #5b8def 0%, #22d3ee 100%); }
.fab-menu-icon-note { background: linear-gradient(135deg, #eab308 0%, #f97316 100%); }
.fab-menu-label { padding-right: 4px; }
.fab-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 85; }
.fab-backdrop[hidden] { display: none; }

/* ============================== COMPOSER MODAL ============================== */
.composer-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483647;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.composer-form { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.composer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 2;
}
.composer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.composer-close:hover, .composer-close:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; }
.composer-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.composer-submit {
    padding: 9px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.composer-submit:hover, .composer-submit:focus-visible { background: var(--accent-hover); outline: none; }
.composer-submit[disabled] { opacity: 0.4; cursor: not-allowed; }
.composer-body { flex: 1; padding: 16px; }
.composer-textarea {
    width: 100%;
    min-height: 120px;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    outline: none;
}
.composer-textarea::placeholder { color: var(--text-faint); }
.composer-help { margin: 4px 0 16px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.composer-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}
.composer-file-label:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.composer-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    margin: 4px 0 16px;
}
.composer-checkbox:hover { border-color: var(--accent); color: var(--accent); }
.composer-checkbox input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.composer-poll { padding: 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: #05070a; margin-top: 8px; }
.composer-field-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.composer-input {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.92rem;
    box-sizing: border-box;
    outline: none;
}
.composer-input::placeholder { color: var(--text-faint); }
.composer-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-poll-option { display: flex; gap: 8px; margin-top: 8px; }
.composer-poll-option .composer-input { flex: 1; min-width: 0; }
.composer-poll-remove {
    width: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.composer-poll-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.composer-poll-add {
    margin-top: 10px;
    padding: 9px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}
.composer-poll-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.composer-errors { padding: 12px 16px; background: rgba(120, 30, 40, 0.12); border-bottom: 1px solid rgba(200, 60, 70, 0.25); }
.composer-errors p { margin: 2px 0; font-size: 0.82rem; color: #fca5a5; }
.composer-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.composer-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    user-select: none;
}
.composer-tab:hover { border-color: var(--text-dim); }
.composer-tab input { accent-color: var(--accent); margin: 0; }
.composer-tab:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ============================== CAROUSEL COMPOSER ============================== */
.carousel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(236, 72, 153, 0.05) 100%);
}
.carousel-head-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(168, 85, 247, 0.5);
}
.carousel-head-text { min-width: 0; }
.carousel-head-title { margin: 0; font-size: 0.94rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.carousel-head-help { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-dim); line-height: 1.35; }
.carousel-dropzone {
    display: block;
    border: 2px dashed var(--border-strong);
    border-radius: 14px;
    padding: 28px 20px;
    background: #05070a;
    text-align: center;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, transform 160ms ease;
    user-select: none;
}
.carousel-dropzone:hover, .carousel-dropzone:focus-within { border-color: #a855f7; background: rgba(168, 85, 247, 0.05); }
.carousel-dropzone.is-dragover { border-color: #a855f7; background: rgba(168, 85, 247, 0.1); transform: scale(0.995); }
.carousel-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-dim); pointer-events: none; }
.carousel-dropzone svg { color: #a855f7; margin-bottom: 4px; }
.carousel-dropzone-label { font-size: 0.94rem; font-weight: 600; color: var(--text); }
.carousel-dropzone-help { font-size: 0.78rem; color: var(--text-dim); }
.carousel-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; margin-bottom: 6px; }
.carousel-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #05070a; border: 1px solid var(--border-strong); }
.carousel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-thumb-index {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.carousel-counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.carousel-reset {
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}
.carousel-reset:hover, .carousel-reset:focus-visible { border-color: var(--danger); color: var(--danger); outline: none; }

/* ============================== THEME COLOR PICKER ============================== */
.theme-picker { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #05070a; }
.theme-picker-preview { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.12); transition: background 200ms ease; }
.theme-picker-preview-shine {
    position: absolute;
    top: 6px;
    left: 10px;
    right: 10px;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
}
.theme-picker-inputs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.theme-picker-inputs input[type="color"] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
}
.theme-picker-inputs input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.theme-picker-inputs input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.theme-picker-inputs input[type="color"]::-moz-color-swatch { border: none; border-radius: 8px; }
.theme-picker-hex { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elevated); height: 48px; }
.theme-picker-hex-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); user-select: none; flex-shrink: 0; }
.theme-picker-hex input[type="text"] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: lowercase; outline: none; }
.theme-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.theme-preset {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.theme-preset:hover, .theme-preset:focus-visible { transform: scale(1.1); outline: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.theme-preset-active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px #ffffff; }

/* ============================== STORY COMPOSER (preview & color) ============================== */
.story-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6b21a8 0%, #4c1d95 100%);
    overflow: hidden;
    text-align: center;
}
.story-preview-text {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    transition: color 200ms ease;
}
.story-color-wrap { margin: 4px 0 16px; }
.story-color-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.story-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    position: relative;
}
.story-color-swatch:hover, .story-color-swatch:focus-visible {
    transform: scale(1.1);
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.story-color-swatch.is-active {
    border-color: #ffffff;
    box-shadow:
        0 0 0 2px var(--bg-elevated),
        0 0 0 3px #ffffff;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .masthead { padding: 12px 16px; }
    .masthead .brand { font-size: 1.05rem; letter-spacing: 0.18em; }
    .content { padding: 0 12px; }
    .card { padding: 22px 18px 20px; border-radius: 14px; }
    .auth-card { margin-top: 16px; padding: 24px 20px 20px; }
    h1 { font-size: 1.2rem; }

    .feed-header { padding: 16px 2px 10px; }
    .feed-title { font-size: 1.2rem; }
    .feed-compose-btn { padding: 8px 14px; font-size: 0.82rem; }
    .feed-subtitle { margin: -4px 2px 10px; font-size: 0.82rem; }

    .post-card { padding: 12px 14px; }
    .post-layout { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
    .post-avatar { width: 40px; height: 40px; font-size: 0.92rem; }
    .post-author { font-size: 0.92rem; }
    .post-username, .post-time { font-size: 0.82rem; }
    .post-body { font-size: 0.94rem; }
    .post-media img { max-height: 380px; }

    .post-detail { padding: 16px 16px 12px; }
    .post-detail-body, .post-detail-image, .post-detail-time, .post-detail > .poll, .post-detail .post-card-actions { padding-left: 0; margin-left: 0; }
    .post-detail-carousel .post-carousel { margin-left: 0; }

    #comments { padding: 16px 16px 14px; }
    .comment-item { gap: 10px; padding: 12px 0; }
    .comment-avatar { width: 34px; height: 34px; font-size: 0.85rem; }
    .comment-content { font-size: 0.92rem; }

    .profile-cover { height: 260px; }
    .profile-cover-body { padding: 18px 18px 20px; gap: 14px; }
    .profile-body { padding: 0 16px; }

    .actions { flex-direction: column; align-items: stretch; }
    .actions .button, .actions .button-link { justify-content: center; text-align: center; }

    dialog.avatar-modal > img { width: 80vw; height: 80vw; }

    .story-bar { gap: 12px; padding: 12px 2px 4px; }
    .story-item { width: 82px; max-width: 82px; }
    .story-avatar { width: 78px; height: 78px; font-size: 1.5rem; }
    .story-label { font-size: 0.72rem; max-width: 82px; }

    .story-header-avatar { width: 34px; height: 34px; font-size: 0.85rem; }
    .story-header-name { font-size: 0.88rem; }
    .story-text { padding: 40px 22px; }

    .story-caption {
        bottom: 14%;
        font-size: 1rem;
        padding: 12px 20px;
    }

    .post-list { gap: 10px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .page { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .content { padding: 0 8px; }
    .masthead { padding: 12px 14px; }
    .masthead .brand { font-size: 1rem; letter-spacing: 0.16em; }

    .feed-header { padding: 14px 2px 8px; gap: 8px; }
    .feed-title { font-size: 1.15rem; }
    .feed-compose-btn { padding: 7px 12px; font-size: 0.8rem; gap: 4px; }
    .feed-subtitle { margin: -4px 2px 8px; font-size: 0.8rem; }
    .feed-tab { padding: 10px 16px; font-size: 0.85rem; }
    .feed-tab-active::after { left: 16px; right: 16px; }

    .post-list { border-radius: 0; }
    .post-card { padding: 12px 12px; border-radius: 12px; }
    .post-layout { grid-template-columns: 36px minmax(0, 1fr); column-gap: 9px; }
    .post-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
    .post-author { font-size: 0.9rem; }
    .post-author .verified-badge { width: 13px; height: 13px; }
    .post-username, .post-time { font-size: 0.78rem; }
    .post-body { font-size: 0.93rem; }
    .post-media { border-radius: 10px; }
    .post-media img { max-height: 340px; }
    .post-actions { gap: 2px; margin-top: 8px; }
    .post-action { min-width: 32px; min-height: 32px; padding: 0 8px; font-size: 0.74rem; gap: 3px; }
    .post-action svg { width: 16px; height: 16px; }
    .post-action span { font-size: 0.72rem; }

    .alert { padding: 10px 14px; font-size: 0.84rem; margin-bottom: 12px; }
    .empty-state { padding: 32px 16px; }

    .profile-cover { height: 240px; }
    .profile-cover-action { top: 14px; right: 14px; gap: 6px; }
    .profile-icon-btn { width: 36px; height: 36px; }
    .profile-cover-body { padding: 16px 16px 18px; gap: 12px; }
    .profile-avatar {
        width: 76px;
        height: 76px;
        font-size: 1.65rem;
        box-shadow:
            0 0 0 2.5px rgba(10, 12, 16, 0.9),
            0 0 0 4px rgba(255, 255, 255, 0.18);
    }
    .profile-avatar.profile-avatar-has-story {
        box-shadow:
            0 0 0 2.5px rgba(10, 12, 16, 0.9),
            0 0 0 4px rgba(255, 255, 255, 0.18);
    }
    .profile-name { font-size: 1.25rem; }
    .profile-pronouns { font-size: 0.75rem; }
    .profile-username { font-size: 0.8125rem; }
    .profile-bio { font-size: 0.9375rem; padding-left: 14px; }
    .profile-stats { gap: 10px 12px; margin-top: 18px; }
    .profile-stat-number { font-size: 1.0625rem; }
    .profile-stat-label { font-size: 0.6875rem; }

    .profile-note-add {
        width: 34px;
        height: 34px;
        top: -9px;
        right: -9px;
    }
    .profile-note-add svg { width: 16px; height: 16px; }
    .profile-note-bubble {
        bottom: calc(100% + 10px);
        max-width: min(180px, calc(100vw - 100px));
        font-size: 0.78rem;
        padding: 8px 13px;
    }
    .profile-note-tail { left: 20px; }

    .profile-content-tabs { margin-top: 20px; border-radius: 12px; padding: 3px; }
    .profile-content-tab { padding: 10px 6px; }
    .profile-content-tab svg { width: 20px; height: 20px; }

    .post-carousel-track { border-radius: 10px; }
    .post-carousel-slide img { max-height: 400px; }
    .post-carousel-dots { bottom: 8px; padding: 4px 8px; gap: 5px; }
    .post-carousel-dot { width: 5px; height: 5px; }
    .post-carousel-counter { top: 8px; right: 8px; padding: 3px 8px; font-size: 0.68rem; }
    .post-meta-carousel-badge { padding: 2px 6px 2px 5px; font-size: 0.6rem; }
    .post-detail-badge-carousel { padding: 2px 8px 2px 6px; font-size: 0.62rem; }

    .carousel-grid { gap: 2px; border-radius: 12px; }
    .carousel-grid-count { top: 4px; right: 4px; padding: 2px 6px 2px 4px; font-size: 0.64rem; }

    .carousel-head { padding: 12px 14px; gap: 10px; }
    .carousel-head-icon { width: 38px; height: 38px; }
    .carousel-head-title { font-size: 0.88rem; }
    .carousel-head-help { font-size: 0.76rem; }
    .carousel-dropzone { padding: 22px 16px; border-radius: 12px; }
    .carousel-dropzone-label { font-size: 0.88rem; }
    .carousel-preview { gap: 6px; }
    .carousel-thumb-index { top: 5px; left: 5px; min-width: 20px; height: 20px; font-size: 0.68rem; }

    .user-row, .user-item-link { padding: 10px 14px; gap: 10px; }
    .user-row-avatar, .user-item-avatar { width: 40px; height: 40px; font-size: 0.92rem; }
    .follow-btn { padding: 6px 14px; font-size: 0.8rem; }

    .bottom-nav-inner { height: 58px; }
    .bottom-nav-label { font-size: 0.64rem; }
    .bottom-nav-icon svg { width: 20px; height: 20px; }
    .bottom-nav-item-search { width: 58px; min-width: 58px; }
    .bottom-nav-item-search .bottom-nav-icon { width: 50px; height: 50px; border-width: 2.5px; }
    .bottom-nav-item-search .bottom-nav-icon svg { width: 22px; height: 22px; }
    .bottom-nav-item-search .bottom-nav-label { font-size: 0.58rem; bottom: -4px; }

    .fab { width: 52px; height: 52px; }
    .fab-wrap { right: 14px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

    .story-bar { gap: 11px; padding: 12px 2px 2px; }
    .story-item { width: 76px; max-width: 76px; }
    .story-avatar { width: 72px; height: 72px; font-size: 1.35rem; }
    .story-label { font-size: 0.7rem; max-width: 76px; }

    .story-text p { font-size: clamp(1.25rem, 6.5vw, 2rem); }
    .story-icon-btn { width: 36px; height: 36px; }

    .story-caption {
        bottom: 12%;
        font-size: 0.95rem;
        padding: 11px 18px;
        line-height: 1.45;
    }

    .story-viewers,
    .story-likers {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .profile-couple { padding: 11px 13px 13px; }
    .profile-couple-label { margin-bottom: 9px; letter-spacing: 0.16em; }
    .profile-couple-partner { height: 88px; }
    .profile-couple-cover-fallback::after { font-size: 1rem; top: 12px; right: 16px; }
    .profile-couple-body { padding: 9px 11px; gap: 9px; }
    .profile-couple-avatar { width: 40px; height: 40px; font-size: 0.88rem; }
    .profile-couple-name { font-size: 0.8125rem; }
    .profile-couple-handle { font-size: 0.6875rem; }

    .search-empty { padding: 40px 16px; }
    dialog.avatar-modal > img { width: 85vw; height: 85vw; }

    .theme-picker { padding: 10px; gap: 10px; }
    .theme-picker-preview { width: 54px; height: 54px; }
    .theme-picker-inputs input[type="color"] { width: 42px; height: 42px; }
    .theme-picker-hex { height: 42px; padding: 0 10px; }
    .theme-picker-hex input[type="text"] { font-size: 0.88rem; }
    .theme-preset { width: 30px; height: 30px; }
}

@media (max-width: 360px) {
    .content { padding: 0 6px; }
    .post-card { padding: 10px 10px; }
    .post-layout { grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; }
    .post-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
    .post-author { font-size: 0.86rem; }
    .post-username, .post-time { font-size: 0.74rem; }
    .post-body { font-size: 0.9rem; }
    .post-action svg { width: 15px; height: 15px; }

    .profile-cover { height: 220px; }
    .profile-cover-action { top: 12px; right: 12px; }
    .profile-icon-btn { width: 34px; height: 34px; }
    .profile-cover-body { padding: 14px 14px 16px; gap: 11px; }
    .profile-avatar { width: 68px; height: 68px; font-size: 1.5rem; }
    .profile-name { font-size: 1.1875rem; }
    .profile-name-row .verified-badge { width: 14px; height: 14px; }
    .profile-body { padding: 0 14px; }

    .profile-content-tab svg { width: 18px; height: 18px; }
    .profile-note-bubble { max-width: 150px; font-size: 0.75rem; }

    .carousel-grid { grid-template-columns: repeat(2, 1fr); }
    .carousel-preview { grid-template-columns: repeat(2, 1fr); }

    .story-bar { gap: 10px; }
    .story-item { width: 70px; max-width: 70px; }
    .story-avatar { width: 66px; height: 66px; font-size: 1.2rem; }
    .story-label { font-size: 0.66rem; max-width: 70px; }

    .profile-couple-partner { height: 84px; }
    .profile-couple-cover-fallback::after { font-size: 0.95rem; top: 11px; right: 13px; }
    .profile-couple-body { padding: 8px 10px; gap: 8px; }
    .profile-couple-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.82rem;
        box-shadow: 0 0 0 2px rgba(10, 12, 16, 0.95), 0 0 0 3px rgba(212, 175, 122, 0.75);
    }
    .profile-couple-name { font-size: 0.78rem; }
    .profile-couple-handle { font-size: 0.65rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .story-header { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px; }
    .story-progress { top: calc(4px + env(safe-area-inset-top, 0px)); }
    .story-text { padding: 24px 20px; }
    .story-text p { font-size: clamp(1.1rem, 4vh, 1.8rem); }
}
/* ===========================================================
   PROFILE EDIT PAGE — redesign
   =========================================================== */

.profile-edit-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0 40px;
    --edit-color: #5b8def;
}

/* --- Header --- */
.edit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    margin: 0 -8px 16px;
    padding-left: 12px;
    padding-right: 12px;
}

.edit-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
    flex-shrink: 0;
}
.edit-back:hover,
.edit-back:focus-visible {
    background: var(--bg-hover);
    color: var(--text);
    outline: none;
}

.edit-title {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.edit-header-spacer { width: 38px; flex-shrink: 0; }

/* --- Card / Section --- */
.edit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 12px;
}

.edit-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 20px;
    position: relative;
}

.edit-card-media {
    padding: 0;
    overflow: visible;
    position: relative;
}

.edit-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.edit-section-title svg { display: block; flex-shrink: 0; }

/* --- Media section (cover + avatar) --- */
.edit-cover-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    margin-bottom: 48px;
}

.edit-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edit-cover-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 100% at 30% 30%, var(--edit-color) 0%, transparent 60%),
        linear-gradient(135deg, #2a3142, #1a1f2b);
    opacity: 0.85;
}

.edit-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.65) 0%,
        rgba(10, 12, 16, 0) 50%
    );
    pointer-events: none;
}

.edit-cover-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: rgba(10, 12, 16, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background-color 140ms ease, transform 120ms ease;
    z-index: 3;
}
.edit-cover-btn:hover,
.edit-cover-btn:focus-visible {
    background: rgba(10, 12, 16, 0.9);
    outline: none;
    transform: scale(1.02);
}
.edit-cover-btn svg { display: block; }

.edit-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: -60px 0 22px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.edit-avatar-wrap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    padding: 4px;
    background: var(--bg-elevated);
    border-radius: 50%;
}

.edit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--edit-color);
    font-size: 2.2rem;
    font-weight: 700;
    border: 3px solid var(--bg-elevated);
    box-shadow: 0 0 0 1.5px var(--border-strong);
    box-sizing: border-box;
}
.edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.edit-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
}

.edit-avatar-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--edit-color);
    color: #ffffff;
    border: 3px solid var(--bg-elevated);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 160ms ease;
    pointer-events: none;
}
.edit-avatar-wrap:hover .edit-avatar-badge { transform: scale(1.1); }

.edit-media-help {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.5;
}

.edit-media-error {
    margin: 0 20px 16px;
    text-align: center;
}

/* --- Field meta (counter) --- */
.field-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.char-counter {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.char-counter.is-near-limit { color: #fbbf24; }
.char-counter.is-at-limit { color: #f87171; }

/* --- Pronoun grid (refined) --- */
.pronoun-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pronoun-option {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: #05070a;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
    position: relative;
}
.pronoun-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pronoun-option:hover {
    border-color: var(--edit-color);
    color: var(--text);
}
.pronoun-option-checked {
    border-color: var(--edit-color);
    background: color-mix(in srgb, var(--edit-color) 15%, transparent);
    color: var(--edit-color);
}

/* --- Sticky save bar --- */
.edit-save-bar {
    position: sticky;
    bottom: 76px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px -12px 0;
    padding: 12px 16px;
    background: rgba(10, 12, 16, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
}

.edit-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 140ms ease, color 140ms ease;
    flex-shrink: 0;
}
.edit-cancel:hover,
.edit-cancel:focus-visible {
    border-color: var(--text-dim);
    color: var(--text);
    outline: none;
}

.edit-save {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--edit-color);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--edit-color) 35%, transparent);
}
.edit-save:hover,
.edit-save:focus-visible {
    filter: brightness(1.1);
    outline: none;
    transform: translateY(-1px);
}
.edit-save:active { transform: scale(0.98); }
.edit-save svg { display: block; }

/* --- Dark mode color-scheme for color picker --- */
.theme-picker-inputs input[type="color"] { color-scheme: dark; }

/* --- Responsive --- */
@media (max-width: 480px) {
    .edit-form { padding: 0 10px; gap: 12px; }
    .edit-card { padding: 20px 16px; border-radius: 14px; }
    .edit-card-media { padding: 0; }
    .edit-cover-wrap { height: 170px; margin-bottom: 44px; }
    .edit-avatar-block { margin-top: -56px; padding: 0 16px; gap: 10px; }
    .edit-avatar { width: 96px; height: 96px; font-size: 2rem; }
    .edit-avatar-badge { width: 30px; height: 30px; }
    .edit-avatar-badge svg { width: 12px; height: 12px; }
    .edit-section-title { margin-bottom: 14px; }
    .edit-save-bar {
        bottom: 66px;
        padding: 10px 12px;
        margin: 6px -10px 0;
    }
    .edit-cancel { padding: 10px 16px; font-size: 0.84rem; }
    .edit-save { padding: 11px 18px; font-size: 0.86rem; gap: 6px; }
}

@media (max-width: 360px) {
    .edit-form { padding: 0 8px; }
    .edit-cover-wrap { height: 150px; margin-bottom: 40px; }
    .edit-avatar { width: 88px; height: 88px; font-size: 1.8rem; }
    .edit-save-bar { margin: 6px -8px 0; }
}
/* ===========================================================
   DYNAMIC ISLAND HEADER
   =========================================================== */

.masthead {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    width: auto;
    min-width: 168px;
    max-width: calc(100vw - 32px);
    height: 42px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transform: translateX(-50%);
    z-index: 60;

    margin: 0;
    transition:
        min-width 340ms cubic-bezier(0.16, 1, 0.3, 1),
        height 340ms cubic-bezier(0.16, 1, 0.3, 1),
        padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 240ms ease,
        box-shadow 240ms ease;

    animation: island-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: min-width, height, transform;
}

@keyframes island-in {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Brand di dalam island */
.masthead .brand,
.masthead .brand:hover,
.masthead .brand:focus-visible {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: opacity 200ms ease;
}
.masthead .brand:hover,
.masthead .brand:focus-visible {
    opacity: 0.75;
    color: #ffffff;
    outline: none;
}

/* Kompensasi karena masthead sekarang floating */
.page {
    padding-top: calc(66px + env(safe-area-inset-top, 0px));
}

/* Saat scroll → island mengecil (dynamic behavior) */
html.island-scrolled .masthead {
    min-width: 128px;
    height: 36px;
    padding: 0 18px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.55),
        0 6px 20px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.island-scrolled .masthead .brand {
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    opacity: 0.9;
}

/* Mobile */
@media (max-width: 480px) {
    .masthead {
        top: calc(8px + env(safe-area-inset-top, 0px));
        min-width: 148px;
        height: 38px;
        padding: 0 22px;
    }
    .masthead .brand,
    .masthead .brand:hover,
    .masthead .brand:focus-visible {
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        text-indent: 0.28em;
    }
    html.island-scrolled .masthead {
        min-width: 118px;
        height: 34px;
        padding: 0 16px;
    }
    html.island-scrolled .masthead .brand {
        font-size: 0.63rem;
        letter-spacing: 0.24em;
        text-indent: 0.24em;
    }
    .page {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
    }
}
/* ===========================================================
   DYNAMIC ISLAND — 3 section (DM · brand · notif)
   =========================================================== */

.masthead {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    width: auto;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    height: 46px;
    padding: 3px 6px;

    display: grid;
    grid-template-columns: 40px minmax(90px, 1fr) 40px;
    align-items: center;
    gap: 4px;

    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transform: translateX(-50%);
    z-index: 60;
    margin: 0;

    transition:
        height 340ms cubic-bezier(0.16, 1, 0.3, 1),
        min-width 340ms cubic-bezier(0.16, 1, 0.3, 1),
        padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
        grid-template-columns 340ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 240ms ease;

    animation: island-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: height, min-width, transform;
}

@keyframes island-in {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Icon button (DM & Notif) */
.island-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 140ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.island-icon:hover,
.island-icon:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.island-icon:active {
    transform: scale(0.9);
}
.island-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

/* Badge notifikasi */
.island-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f4212e;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #000000;
    box-sizing: content-box;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    animation: badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* Brand tengah */
.masthead .brand,
.masthead .brand:hover,
.masthead .brand:focus-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px 0 calc(8px + 0.28em);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: opacity 200ms ease, font-size 340ms ease, letter-spacing 340ms ease;
    outline: none;
}
.masthead .brand:hover,
.masthead .brand:focus-visible {
    opacity: 0.8;
}

/* Kompensasi padding-top halaman */
.page {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
}

/* ---------- SHRINK on scroll ---------- */
html.island-scrolled .masthead {
    height: 40px;
    min-width: 190px;
    padding: 2px 4px;
    grid-template-columns: 34px minmax(80px, 1fr) 34px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.55),
        0 6px 20px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.island-scrolled .island-icon {
    width: 34px;
    height: 34px;
}
html.island-scrolled .island-icon svg {
    width: 18px;
    height: 18px;
}
html.island-scrolled .island-icon-badge {
    min-width: 15px;
    height: 15px;
    font-size: 0.58rem;
    padding: 0 3px;
}
html.island-scrolled .masthead .brand {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    padding: 0 6px 0 calc(6px + 0.24em);
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
    .masthead {
        top: calc(8px + env(safe-area-inset-top, 0px));
        min-width: 200px;
        height: 42px;
        padding: 2px 4px;
        grid-template-columns: 36px minmax(80px, 1fr) 36px;
        gap: 2px;
    }
    .island-icon {
        width: 36px;
        height: 36px;
    }
    .island-icon svg {
        width: 18px;
        height: 18px;
    }
    .masthead .brand {
        font-size: 0.66rem;
        letter-spacing: 0.24em;
        padding: 0 6px 0 calc(6px + 0.24em);
    }
    .page {
        padding-top: calc(66px + env(safe-area-inset-top, 0px));
    }

    html.island-scrolled .masthead {
        height: 38px;
        min-width: 180px;
        grid-template-columns: 32px minmax(70px, 1fr) 32px;
    }
    html.island-scrolled .island-icon {
        width: 32px;
        height: 32px;
    }
    html.island-scrolled .island-icon svg {
        width: 16px;
        height: 16px;
    }
    html.island-scrolled .masthead .brand {
        font-size: 0.62rem;
        letter-spacing: 0.2em;
        padding: 0 4px 0 calc(4px + 0.2em);
    }
}
/* ===========================================================
   DYNAMIC ISLAND — bigger, wider, badge repositioned
   =========================================================== */

.masthead {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    width: auto;
    min-width: 320px;
    max-width: calc(100vw - 20px);
    height: 60px;
    padding: 4px 8px;

    display: grid;
    grid-template-columns: 52px minmax(120px, 1fr) 52px;
    align-items: center;
    gap: 6px;

    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 10px rgba(0, 0, 0, 0.55),
        0 10px 40px rgba(0, 0, 0, 0.45),
        0 24px 72px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transform: translateX(-50%);
    z-index: 60;
    margin: 0;

    transition:
        height 340ms cubic-bezier(0.16, 1, 0.3, 1),
        min-width 340ms cubic-bezier(0.16, 1, 0.3, 1),
        padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
        grid-template-columns 340ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 240ms ease;

    animation: island-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: height, min-width, transform;
}

@keyframes island-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.82); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- ICON BUTTON (DM & Notif) ---------- */
.island-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 140ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.island-icon:hover,
.island-icon:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.island-icon:active {
    transform: scale(0.92);
}
.island-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

/* ---------- BADGE (tidak nutupin icon) ---------- */
.island-icon-badge {
    position: absolute;
    top: -1px;
    right: -1px;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    border-radius: 999px;
    background: #f4212e;
    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: -0.01em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    /* Ring hitam biar kontras */
    border: 2.5px solid #000000;
    box-sizing: content-box;

    font-variant-numeric: tabular-nums;
    pointer-events: none;

    /* Efek glow merah halus */
    box-shadow:
        0 0 0 1px rgba(244, 33, 46, 0.5),
        0 4px 10px -2px rgba(244, 33, 46, 0.6);

    animation: badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

@keyframes badge-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ---------- BRAND TENGAH ---------- */
.masthead .brand,
.masthead .brand:hover,
.masthead .brand:focus-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 calc(12px + 0.32em);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: opacity 200ms ease, font-size 340ms ease, letter-spacing 340ms ease;
    outline: none;
}
.masthead .brand:hover,
.masthead .brand:focus-visible { opacity: 0.8; }

/* ---------- Kompensasi padding page ---------- */
.page {
    padding-top: calc(86px + env(safe-area-inset-top, 0px));
}

/* ---------- SHRINK saat scroll ---------- */
html.island-scrolled .masthead {
    height: 50px;
    min-width: 260px;
    padding: 3px 6px;
    grid-template-columns: 44px minmax(100px, 1fr) 44px;
    gap: 4px;
}
html.island-scrolled .island-icon {
    width: 44px;
    height: 44px;
}
html.island-scrolled .island-icon svg {
    width: 22px;
    height: 22px;
}
html.island-scrolled .island-icon-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.62rem;
    padding: 0 4px;
    border-width: 2px;
}
html.island-scrolled .masthead .brand {
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    padding: 0 10px 0 calc(10px + 0.28em);
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
    .masthead {
        top: calc(10px + env(safe-area-inset-top, 0px));
        min-width: 300px;
        height: 54px;
        padding: 3px 6px;
        grid-template-columns: 46px minmax(110px, 1fr) 46px;
        gap: 4px;
    }
    .island-icon {
        width: 46px;
        height: 46px;
    }
    .island-icon svg {
        width: 23px;
        height: 23px;
    }
    .island-icon-badge {
        min-width: 19px;
        height: 19px;
        font-size: 0.64rem;
        padding: 0 4px;
        border-width: 2.5px;
    }
    .masthead .brand {
        font-size: 0.86rem;
        letter-spacing: 0.28em;
        padding: 0 10px 0 calc(10px + 0.28em);
    }
    .page {
        padding-top: calc(80px + env(safe-area-inset-top, 0px));
    }

    html.island-scrolled .masthead {
        height: 46px;
        min-width: 240px;
        grid-template-columns: 40px minmax(90px, 1fr) 40px;
    }
    html.island-scrolled .island-icon {
        width: 40px;
        height: 40px;
    }
    html.island-scrolled .island-icon svg {
        width: 20px;
        height: 20px;
    }
    html.island-scrolled .island-icon-badge {
        min-width: 17px;
        height: 17px;
        font-size: 0.6rem;
        padding: 0 3px;
    }
    html.island-scrolled .masthead .brand {
        font-size: 0.76rem;
        letter-spacing: 0.24em;
        padding: 0 8px 0 calc(8px + 0.24em);
    }
}

@media (max-width: 360px) {
    .masthead {
        min-width: 280px;
        height: 52px;
        grid-template-columns: 44px minmax(100px, 1fr) 44px;
    }
    .island-icon {
        width: 44px;
        height: 44px;
    }
    .island-icon svg {
        width: 22px;
        height: 22px;
    }
    .masthead .brand {
        font-size: 0.8rem;
        letter-spacing: 0.24em;
    }
}
/* ===========================================================
   TAB "Untuk Kamu" center kalau guest + header lebih besar
   =========================================================== */

/* ---------- TAB: center kalau cuma 1 ---------- */
.feed-tabs {
    justify-content: center;
}
.feed-tabs .feed-tab {
    flex: 0 1 auto;
    min-width: 0;
}
.feed-tabs:has(.feed-tab:nth-child(2)) {
    justify-content: flex-start;
}
.feed-tabs .feed-tab:only-child {
    padding-left: 28px;
    padding-right: 28px;
    font-size: 0.98rem;
    font-weight: 700;
}
.feed-tabs .feed-tab:only-child::after {
    left: 28px;
    right: 28px;
}

@media (max-width: 480px) {
    .feed-tabs .feed-tab:only-child {
        padding-left: 22px;
        padding-right: 22px;
        font-size: 0.92rem;
    }
    .feed-tabs .feed-tab:only-child::after {
        left: 22px;
        right: 22px;
    }
}

/* ===========================================================
   DYNAMIC ISLAND — super size
   =========================================================== */

.masthead {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    width: auto;
    min-width: 360px;
    max-width: calc(100vw - 16px);
    height: 68px;
    padding: 5px 10px;

    display: grid;
    grid-template-columns: 56px minmax(140px, 1fr) 56px;
    align-items: center;
    gap: 8px;

    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.55),
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 28px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    transform: translateX(-50%);
    z-index: 60;
    margin: 0;

    transition:
        height 340ms cubic-bezier(0.16, 1, 0.3, 1),
        min-width 340ms cubic-bezier(0.16, 1, 0.3, 1),
        padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
        grid-template-columns 340ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 240ms ease;

    animation: island-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: height, min-width, transform;
}

@keyframes island-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.82); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Icon button */
.island-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 140ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.island-icon:hover,
.island-icon:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.island-icon:active { transform: scale(0.92); }
.island-icon svg {
    display: block;
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

/* Badge notif */
.island-icon-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f4212e;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 3px solid #000000;
    box-sizing: content-box;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(244, 33, 46, 0.55),
        0 4px 12px -2px rgba(244, 33, 46, 0.65);
    animation: badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

@keyframes badge-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Brand tengah */
.masthead .brand,
.masthead .brand:hover,
.masthead .brand:focus-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 calc(14px + 0.36em);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.36em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: opacity 200ms ease, font-size 340ms ease, letter-spacing 340ms ease;
    outline: none;
}
.masthead .brand:hover,
.masthead .brand:focus-visible { opacity: 0.8; }

/* Kompensasi page padding-top */
.page {
    padding-top: calc(98px + env(safe-area-inset-top, 0px));
}

/* Shrink on scroll */
html.island-scrolled .masthead {
    height: 56px;
    min-width: 290px;
    padding: 3px 8px;
    grid-template-columns: 48px minmax(110px, 1fr) 48px;
    gap: 5px;
}
html.island-scrolled .island-icon {
    width: 48px;
    height: 48px;
}
html.island-scrolled .island-icon svg {
    width: 24px;
    height: 24px;
}
html.island-scrolled .island-icon-badge {
    min-width: 20px;
    height: 20px;
    font-size: 0.66rem;
    padding: 0 5px;
    border-width: 2.5px;
}
html.island-scrolled .masthead .brand {
    font-size: 0.92rem;
    letter-spacing: 0.3em;
    padding: 0 11px 0 calc(11px + 0.3em);
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
    .masthead {
        top: calc(12px + env(safe-area-inset-top, 0px));
        min-width: 320px;
        height: 60px;
        padding: 4px 8px;
        grid-template-columns: 50px minmax(120px, 1fr) 50px;
        gap: 5px;
    }
    .island-icon {
        width: 50px;
        height: 50px;
    }
    .island-icon svg {
        width: 26px;
        height: 26px;
    }
    .island-icon-badge {
        min-width: 21px;
        height: 21px;
        font-size: 0.7rem;
        padding: 0 5px;
        border-width: 2.5px;
    }
    .masthead .brand {
        font-size: 0.96rem;
        letter-spacing: 0.32em;
        padding: 0 11px 0 calc(11px + 0.32em);
    }
    .page {
        padding-top: calc(88px + env(safe-area-inset-top, 0px));
    }

    html.island-scrolled .masthead {
        height: 52px;
        min-width: 260px;
        grid-template-columns: 44px minmax(100px, 1fr) 44px;
    }
    html.island-scrolled .island-icon {
        width: 44px;
        height: 44px;
    }
    html.island-scrolled .island-icon svg {
        width: 22px;
        height: 22px;
    }
    html.island-scrolled .island-icon-badge {
        min-width: 19px;
        height: 19px;
        font-size: 0.64rem;
        padding: 0 4px;
    }
    html.island-scrolled .masthead .brand {
        font-size: 0.86rem;
        letter-spacing: 0.28em;
        padding: 0 9px 0 calc(9px + 0.28em);
    }
}

@media (max-width: 360px) {
    .masthead {
        min-width: 300px;
        height: 58px;
        grid-template-columns: 48px minmax(110px, 1fr) 48px;
    }
    .island-icon {
        width: 48px;
        height: 48px;
    }
    .island-icon svg {
        width: 25px;
        height: 25px;
    }
    .masthead .brand {
        font-size: 0.92rem;
        letter-spacing: 0.3em;
    }
}
/* ===========================================================
   BOTTOM NAV SEARCH — ganti gradient jadi putih
   =========================================================== */

.bottom-nav-item-search .bottom-nav-icon {
    background: #ffffff;
    color: #0a0c10;
    border: 3px solid #0a0c10;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.35),
        0 6px 20px rgba(255, 255, 255, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-item-search .bottom-nav-icon svg {
    width: 24px;
    height: 24px;
    stroke: #0a0c10;
    stroke-width: 2.6;
    display: block;
}

.bottom-nav-item-search:hover .bottom-nav-icon,
.bottom-nav-item-search:focus-visible .bottom-nav-icon {
    background: #f5f7fa;
    transform: translateY(-16px) scale(1.06);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.45),
        0 8px 24px rgba(255, 255, 255, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.55);
}

.bottom-nav-item-search:active .bottom-nav-icon {
    transform: translateY(-14px) scale(0.95);
}

.bottom-nav-item-search.is-active .bottom-nav-icon {
    background: #ffffff;
    color: #0a0c10;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.5),
        0 8px 26px rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

.bottom-nav-item-search.is-active .bottom-nav-icon svg {
    stroke: #0a0c10;
}

/* Label "Cari" — tetap warna accent biar keliatan aktif */
.bottom-nav-item-search .bottom-nav-label {
    color: var(--text-dim);
}
.bottom-nav-item-search.is-active .bottom-nav-label {
    color: #ffffff;
}

/* Mobile kecil */
@media (max-width: 480px) {
    .bottom-nav-item-search .bottom-nav-icon {
        background: #ffffff;
        color: #0a0c10;
        border-width: 2.5px;
    }
    .bottom-nav-item-search .bottom-nav-icon svg {
        width: 22px;
        height: 22px;
        stroke: #0a0c10;
    }
    .bottom-nav-item-search:hover .bottom-nav-icon,
    .bottom-nav-item-search:focus-visible .bottom-nav-icon {
        background: #f5f7fa;
    }
}
/* ===========================================================
   Rapatkan jarak header (island) → tab "Untuk Kamu" di dashboard
   =========================================================== */

/* Kurangi padding-top halaman khusus dashboard */
.page {
    padding-top: calc(78px + env(safe-area-inset-top, 0px));
}

/* Hilangkan ruang kosong dari feed-header-compact */
.feed-header-compact {
    display: none;
}

/* Story bar lebih rapat ke atas */
.story-bar {
    padding-top: 6px;
    padding-bottom: 4px;
    margin-bottom: 0;
}

/* Tab "Untuk Kamu" nempel ke story bar */
.feed-tabs {
    margin-top: 0;
    margin-bottom: 8px;
    padding-top: 0;
}

/* Kalau guest (cuma 1 tab, gak ada story bar), tab lebih rapat lagi */
.content > .feed-tabs:first-child {
    margin-top: 0;
    padding-top: 4px;
}

@media (max-width: 480px) {
    .page {
        padding-top: calc(72px + env(safe-area-inset-top, 0px));
    }
    .story-bar {
        padding-top: 4px;
        padding-bottom: 2px;
    }
    .feed-tabs {
        margin-bottom: 6px;
    }
}

@media (max-width: 360px) {
    .page {
        padding-top: calc(70px + env(safe-area-inset-top, 0px));
    }
}
.profile-couple-cta {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--bg-elevated);
    text-align: center;
}
.profile-couple-cta-incoming {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.profile-couple-cta-text {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}
.profile-couple-cta-text strong {
    color: var(--text);
}
.profile-couple-hint {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg-hover);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}
/* ===========================================================
   NOTIFICATIONS PAGE
   =========================================================== */

/* Wrapper list — nempel jadi satu card */
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Item */
.notif-item {
    position: relative;
    border-bottom: 1px solid var(--border);
    transition: background-color 140ms ease;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item:hover {
    background: var(--bg-hover);
}

/* Unread item — highlight halus */
.notif-item-unread {
    background: rgba(91, 141, 239, 0.06);
}
.notif-item-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

/* Link di dalam item */
.notif-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.notif-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ---------- Avatar + icon overlay ---------- */
.notif-avatar {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.notif-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Icon badge di pojok kanan bawah avatar */
.notif-icon {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    box-sizing: border-box;
}
.notif-icon svg {
    width: 11px;
    height: 11px;
    display: block;
    stroke: currentColor;
    fill: none;
}

/* Warna icon per tipe */
.notif-icon-follow {
    background: linear-gradient(135deg, #5b8def 0%, #3b6fe0 100%);
}
.notif-icon-like {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}
.notif-icon-comment {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}
.notif-icon-repost {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.notif-icon-story_like {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}
.notif-icon-couple_request {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.notif-icon-couple_accepted {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Override stroke untuk like & story_like (pakai fill) */
.notif-icon-like svg,
.notif-icon-story_like svg {
    fill: currentColor;
    stroke: currentColor;
}

/* ---------- Body teks ---------- */
.notif-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.notif-text {
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.notif-text strong {
    color: var(--text);
    font-weight: 700;
}

.notif-preview {
    display: block;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--border-strong);
    border-radius: 4px;
    margin-top: 2px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-time {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-top: 1px;
    line-height: 1.3;
}

/* ---------- Unread dot (kanan) ---------- */
.notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    align-self: center;
    margin-left: 8px;
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
    animation: notif-dot-pulse 2s ease-in-out infinite;
}

@keyframes notif-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15); }
    50%      { box-shadow: 0 0 0 5px rgba(91, 141, 239, 0.08); }
}

/* ---------- Header "Tandai semua dibaca" ---------- */
.follows-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.follows-header form {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .notif-link {
        gap: 10px;
        padding: 12px 14px;
    }
    .notif-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.92rem;
    }
    .notif-icon {
        width: 18px;
        height: 18px;
        right: -3px;
        bottom: -3px;
    }
    .notif-icon svg {
        width: 10px;
        height: 10px;
    }
    .notif-text {
        font-size: 0.88rem;
    }
    .notif-preview {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    .notif-time {
        font-size: 0.72rem;
    }
    .notif-dot {
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 360px) {
    .notif-link {
        gap: 9px;
        padding: 11px 12px;
    }
    .notif-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .notif-text {
        font-size: 0.85rem;
    }
}
/* ===========================================================
   STORY BAR — avatar diperbesar lagi
   =========================================================== */

.story-bar {
    gap: 16px;
    padding: 14px 4px 8px;
}

.story-item {
    width: 106px;
    max-width: 106px;
    gap: 9px;
}

.story-avatar {
    width: 100px;
    height: 100px;
    font-size: 1.9rem;
}

.story-label {
    font-size: 0.8rem;
    max-width: 106px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .story-bar {
        gap: 14px;
        padding: 13px 2px 6px;
    }
    .story-item {
        width: 96px;
        max-width: 96px;
    }
    .story-avatar {
        width: 90px;
        height: 90px;
        font-size: 1.7rem;
    }
    .story-label {
        font-size: 0.76rem;
        max-width: 96px;
    }
}

@media (max-width: 480px) {
    .story-bar {
        gap: 13px;
        padding: 12px 2px 4px;
    }
    .story-item {
        width: 88px;
        max-width: 88px;
    }
    .story-avatar {
        width: 82px;
        height: 82px;
        font-size: 1.5rem;
    }
    .story-label {
        font-size: 0.72rem;
        max-width: 88px;
    }
}

@media (max-width: 360px) {
    .story-bar {
        gap: 11px;
    }
    .story-item {
        width: 82px;
        max-width: 82px;
    }
    .story-avatar {
        width: 76px;
        height: 76px;
        font-size: 1.35rem;
    }
    .story-label {
        font-size: 0.68rem;
        max-width: 82px;
    }
}
/* ===========================================================
   NOTE BUBBLE di POST CARD + NOTE VIEWER (bubble grow + blur)
   =========================================================== */

/* Card boleh "bocor" biar bubble bisa keluar */
.post-card {
    overflow: visible;
}
.post-card-carousel {
    overflow: visible;
}
.post-carousel {
    overflow: hidden;
}

/* Wrapper avatar */
.post-avatar-wrap {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: start;
    justify-self: start;
    width: 44px;
    height: 44px;
}

/* Bubble kecil di atas avatar */
.post-note-bubble {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    max-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(15, 18, 24, 0.96);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    animation: post-note-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes post-note-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.post-note-bubble:hover,
.post-note-bubble:focus-visible {
    transform: translateX(-50%) scale(1.06);
    background: rgba(20, 24, 32, 0.98);
    outline: none;
}
.post-note-bubble:active {
    transform: translateX(-50%) scale(0.94);
}

.post-note-text {
    display: block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-note-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(15, 18, 24, 0.96);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

/* ===========================================================
   NOTE VIEWER — bubble grow + blur backdrop
   =========================================================== */

.note-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483630;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.note-viewer[hidden] { display: none; }

.note-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.55);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    animation: note-viewer-fade 240ms ease both;
    cursor: pointer;
}

@keyframes note-viewer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.note-viewer-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(560px, 90vw);
    padding: 24px 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(15, 18, 24, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 80px -12px rgba(0, 0, 0, 0.8),
        0 12px 40px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: note-bubble-grow 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    z-index: 1;
}

@keyframes note-bubble-grow {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(20px);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.note-viewer-text {
    display: block;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.012em;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
}

/* Mobile */
@media (max-width: 480px) {
    .post-avatar-wrap {
        width: 40px;
        height: 40px;
    }

    .post-note-bubble {
        padding: 3px 9px;
        max-width: 130px;
        font-size: 0.66rem;
        border-radius: 10px;
    }
    .post-note-text {
        max-width: 112px;
    }

    .note-viewer {
        padding: 20px;
    }
    .note-viewer-bubble {
        padding: 20px 24px;
        border-radius: 24px;
        max-width: 92vw;
    }
    .note-viewer-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 360px) {
    .post-avatar-wrap {
        width: 36px;
        height: 36px;
    }

    .note-viewer-text {
        font-size: 1rem;
    }
}
/* ===========================================================
   NOTE BUBBLE di STORY BAR + NOTE VIEWER (grow + blur)
   =========================================================== */

/* Wrapper tiap story item — perlu relative biar bubble bisa absolute */
.story-item-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px; /* ruang kecil buat bubble kalau mepet */
    isolation: isolate;
}

/* Story item di dalam wrap gak perlu flex-shrink lagi */
.story-item-wrap .story-item {
    flex-shrink: 0;
}

/* ===== Bubble kecil di atas story avatar ===== */
.story-note-bubble {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    max-width: 130px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(15, 18, 24, 0.96);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    animation: story-note-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes story-note-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.story-note-bubble:hover,
.story-note-bubble:focus-visible {
    transform: translateX(-50%) scale(1.08);
    background: rgba(20, 24, 32, 0.98);
    outline: none;
}
.story-note-bubble:active {
    transform: translateX(-50%) scale(0.92);
}

.story-note-text {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
}

.story-note-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(15, 18, 24, 0.96);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

/* ===========================================================
   NOTE VIEWER — bubble grow + backdrop blur
   =========================================================== */

.note-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483630;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.note-viewer[hidden] { display: none; }

.note-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.5);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    animation: note-viewer-fade 240ms ease both;
    cursor: pointer;
}

@keyframes note-viewer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.note-viewer-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(560px, 90vw);
    padding: 24px 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(15, 18, 24, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 80px -12px rgba(0, 0, 0, 0.8),
        0 12px 40px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: note-bubble-grow 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    z-index: 1;
}

@keyframes note-bubble-grow {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(20px);
    }
    60% { opacity: 1; }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.note-viewer-text {
    display: block;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.012em;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
}

/* Mobile */
@media (max-width: 480px) {
    .story-note-bubble {
        padding: 4px 10px;
        max-width: 118px;
        font-size: 0.66rem;
        border-radius: 10px;
    }
    .story-note-text {
        max-width: 100px;
    }

    .note-viewer {
        padding: 20px;
    }
    .note-viewer-bubble {
        padding: 20px 24px;
        border-radius: 24px;
        max-width: 92vw;
    }
    .note-viewer-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 360px) {
    .note-viewer-text {
        font-size: 1rem;
    }
}
/* ===========================================================
   FIX: bubble note story ketutupan header island
   =========================================================== */

/* Turunkan story bar lebih jauh dari header */
.page {
    padding-top: calc(118px + env(safe-area-inset-top, 0px));
}

.story-bar {
    padding-top: 4px;
    padding-bottom: 10px;
}

/* Bubble note — posisi dan jarak dari avatar */
.story-note-bubble {
    bottom: calc(100% + 4px);
    z-index: 30;
}

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 640px) {
    .page {
        padding-top: calc(108px + env(safe-area-inset-top, 0px));
    }
    .story-bar {
        padding-top: 4px;
        padding-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .page {
        padding-top: calc(100px + env(safe-area-inset-top, 0px));
    }
    .story-bar {
        padding-top: 3px;
        padding-bottom: 7px;
    }
    .story-note-bubble {
        bottom: calc(100% + 3px);
    }
}

@media (max-width: 360px) {
    .page {
        padding-top: calc(96px + env(safe-area-inset-top, 0px));
    }
    .story-bar {
        padding-top: 3px;
        padding-bottom: 6px;
    }
}
/* ===========================================================
   FIX: kasih jarak story bar dari header island
   =========================================================== */

/* Turunkan story bar biar bubble note gak ketutupan header */
.story-bar {
    margin-top: 22px;
}

@media (max-width: 640px) {
    .story-bar {
        margin-top: 18px;
    }
}

@media (max-width: 480px) {
    .story-bar {
        margin-top: 16px;
    }
}

@media (max-width: 360px) {
    .story-bar {
        margin-top: 14px;
    }
}
/* ===========================================================
   NOTE BUBBLE di STORY BAR — pindahan dari post card
   =========================================================== */

/* Definitive: sembunyikan semua note bubble di post card */
.post-card .post-note-bubble,
.post-card .story-note-bubble,
.post-list .story-note-bubble {
    display: none !important;
}

/* Wrapper tiap story item */
.story-item-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
    isolation: isolate;
}
.story-item-wrap .story-item {
    flex-shrink: 0;
}

/* ===== Bubble note di atas avatar ===== */
.story-note-bubble {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    max-width: 130px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(15, 18, 24, 0.96);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    animation: story-note-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes story-note-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.story-note-bubble:hover,
.story-note-bubble:focus-visible {
    transform: translateX(-50%) scale(1.08);
    background: rgba(20, 24, 32, 0.98);
    outline: none;
}
.story-note-bubble:active {
    transform: translateX(-50%) scale(0.92);
}

.story-note-text {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
}

.story-note-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(15, 18, 24, 0.96);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

/* ===== Jarak story bar dari header island ===== */
.story-bar {
    margin-top: 22px;
}

/* ===== Note viewer (bubble grow + blur) ===== */
.note-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483630;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.note-viewer[hidden] { display: none; }

.note-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.5);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    animation: note-viewer-fade 240ms ease both;
    cursor: pointer;
}

@keyframes note-viewer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.note-viewer-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(560px, 90vw);
    padding: 24px 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(15, 18, 24, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 80px -12px rgba(0, 0, 0, 0.8),
        0 12px 40px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: note-bubble-grow 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    z-index: 1;
}

@keyframes note-bubble-grow {
    0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.note-viewer-text {
    display: block;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.012em;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .story-bar { margin-top: 18px; }
}
@media (max-width: 480px) {
    .story-bar { margin-top: 16px; }
    .story-note-bubble {
        padding: 4px 10px;
        max-width: 118px;
        font-size: 0.66rem;
        border-radius: 10px;
        bottom: calc(100% + 3px);
    }
    .story-note-text { max-width: 100px; }
    .note-viewer { padding: 20px; }
    .note-viewer-bubble { padding: 20px 24px; border-radius: 24px; max-width: 92vw; }
    .note-viewer-text { font-size: 1.1rem; }
}
@media (max-width: 360px) {
    .story-bar { margin-top: 14px; }
    .note-viewer-text { font-size: 1rem; }
}
/* ===========================================================
   FIX: Story bar clipping bubble note (overflow-y: hidden)
   Bubble posisinya di ATAS avatar, jadi butuh ruang di atas.
   Solusi: kasih padding-top besar biar bubble masuk area story-bar.
   =========================================================== */

.story-bar {
    /* Ruang untuk bubble note di atas avatar (bubble ~26px + tail 5px + jarak) */
    padding-top: 46px !important;
    padding-bottom: 12px !important;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-end; /* avatar duduk di bawah, bubble naik ke atas */
}

/* Wrapper tidak perlu padding-top lagi — sudah dihandle di story-bar */
.story-item-wrap {
    padding-top: 0 !important;
}

/* Bubble tetap posisinya di atas avatar */
.story-note-bubble {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    max-width: 130px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(15, 18, 24, 0.96);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    animation: story-note-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes story-note-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.story-note-bubble:hover,
.story-note-bubble:focus-visible {
    background: rgba(20, 24, 32, 0.98);
    outline: none;
}
.story-note-bubble:active {
    transform: translateX(-50%) scale(0.92);
}

.story-note-text {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
}

.story-note-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(15, 18, 24, 0.96);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .story-bar {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
    }
}
@media (max-width: 480px) {
    .story-bar {
        padding-top: 38px !important;
        padding-bottom: 8px !important;
        padding-left: 2px;
        padding-right: 2px;
    }
    .story-note-bubble {
        padding: 4px 10px;
        max-width: 118px;
        font-size: 0.66rem;
        border-radius: 10px;
    }
    .story-note-text { max-width: 100px; }
}
@media (max-width: 360px) {
    .story-bar {
        padding-top: 36px !important;
        padding-bottom: 6px !important;
    }
}
/* ===========================================================
   NOTE BUBBLE — perbesar
   =========================================================== */

.story-note-bubble {
    padding: 9px 16px;
    max-width: 200px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    border-width: 1.5px;
    box-shadow:
        0 8px 24px -6px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.story-note-text {
    max-width: 172px;
}

.story-note-tail {
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 7px;
}

/* Story bar — tambah ruang buat bubble yang lebih besar */
.story-bar {
    padding-top: 56px !important;
    padding-bottom: 14px !important;
}

/* Mobile */
@media (max-width: 640px) {
    .story-bar {
        padding-top: 50px !important;
        padding-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    .story-bar {
        padding-top: 46px !important;
        padding-bottom: 10px !important;
    }
    .story-note-bubble {
        padding: 8px 14px;
        max-width: 175px;
        font-size: 0.78rem;
        border-radius: 14px;
    }
    .story-note-text {
        max-width: 150px;
    }
    .story-note-tail {
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 6px;
    }
}

@media (max-width: 360px) {
    .story-bar {
        padding-top: 42px !important;
        padding-bottom: 8px !important;
    }
    .story-note-bubble {
        padding: 7px 12px;
        max-width: 160px;
        font-size: 0.74rem;
    }
    .story-note-text {
        max-width: 138px;
    }
}
/* ===========================================================
   NOTE BUBBLE — perbesar lagi + shake animation
   =========================================================== */

.story-note-bubble {
    padding: 12px 22px;
    max-width: 260px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.008em;
    border-width: 1.5px;
    box-shadow:
        0 10px 30px -8px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation:
        story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
        story-note-shake 3.8s ease-in-out 1s infinite;
}

.story-note-text {
    max-width: 224px;
}

.story-note-tail {
    border-left-width: 8px;
    border-right-width: 8px;
    border-top-width: 9px;
}

/* Idle shake — halus banget, kayak ada yang gerak dikit */
@keyframes story-note-shake {
    0%, 88%, 100% { transform: translateX(-50%) rotate(0deg); }
    90%           { transform: translateX(-50%) rotate(-1.4deg); }
    92%           { transform: translateX(-50%) rotate(1.4deg); }
    94%           { transform: translateX(-50%) rotate(-1deg); }
    96%           { transform: translateX(-50%) rotate(0.8deg); }
    98%           { transform: translateX(-50%) rotate(-0.4deg); }
}

/* Story bar — tambah ruang buat bubble yang lebih besar */
.story-bar {
    padding-top: 68px !important;
    padding-bottom: 16px !important;
}

/* ===== Hover: pause shake + scale dikit ===== */
.story-note-bubble:hover,
.story-note-bubble:focus-visible {
    animation:
        story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
        story-note-shake-hover 900ms ease-in-out infinite;
    background: rgba(20, 24, 32, 0.98);
    outline: none;
}

@keyframes story-note-shake-hover {
    0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1.04); }
    25%      { transform: translateX(-50%) rotate(-1.6deg) scale(1.05); }
    75%      { transform: translateX(-50%) rotate(1.6deg) scale(1.05); }
}

.story-note-bubble:active {
    transform: translateX(-50%) scale(0.94);
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .story-bar {
        padding-top: 62px !important;
        padding-bottom: 14px !important;
    }
}

@media (max-width: 480px) {
    .story-bar {
        padding-top: 56px !important;
        padding-bottom: 12px !important;
    }
    .story-note-bubble {
        padding: 10px 18px;
        max-width: 220px;
        font-size: 0.92rem;
        border-radius: 18px;
    }
    .story-note-text {
        max-width: 190px;
    }
    .story-note-tail {
        border-left-width: 6px;
        border-right-width: 6px;
        border-top-width: 7px;
    }
}

@media (max-width: 360px) {
    .story-bar {
        padding-top: 52px !important;
        padding-bottom: 10px !important;
    }
    .story-note-bubble {
        padding: 9px 15px;
        max-width: 200px;
        font-size: 0.86rem;
    }
    .story-note-text {
        max-width: 172px;
    }
}

/* ===========================================================
   Aksesibilitas: matikan shake kalau user set reduce-motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    .story-note-bubble {
        animation: story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
    .story-note-bubble:hover,
    .story-note-bubble:focus-visible {
        animation: story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
}
/* ===========================================================
   NOTE BUBBLE — anti-overlap + ellipsis + shake + like
   =========================================================== */

/* Wrapper tiap story item */
.story-item-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
    isolation: isolate;
    /* Kunci lebar — biar bubble tidak menutupi item sebelahnya */
    width: 100%;
    max-width: 100%;
}
.story-item-wrap .story-item { flex-shrink: 0; }

/* ===== Bubble: KECIL biar tidak overlap ===== */
.story-note-bubble {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;

    /* Batasi lebar absolut — kunci utama anti-overlap */
    width: max-content;
    max-width: 140px;
    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(15, 18, 24, 0.96);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    overflow: hidden;             /* jaga container tidak overflow */
    text-overflow: ellipsis;      /* fallback */
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    animation:
        story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
        story-note-shake 3.8s ease-in-out 1s infinite;
}

@keyframes story-note-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes story-note-shake {
    0%, 88%, 100% { transform: translateX(-50%) rotate(0deg); }
    90%           { transform: translateX(-50%) rotate(-1.4deg); }
    92%           { transform: translateX(-50%) rotate(1.4deg); }
    94%           { transform: translateX(-50%) rotate(-1deg); }
    96%           { transform: translateX(-50%) rotate(0.8deg); }
    98%           { transform: translateX(-50%) rotate(-0.4deg); }
}

/* ===== Teks: ellipsis WAJIB ===== */
.story-note-text {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
}

.story-note-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(15, 18, 24, 0.96);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

.story-note-bubble:hover,
.story-note-bubble:focus-visible {
    background: rgba(20, 24, 32, 0.98);
    outline: none;
    animation:
        story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
        story-note-shake-hover 900ms ease-in-out infinite;
}
@keyframes story-note-shake-hover {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25%      { transform: translateX(-50%) rotate(-1.6deg); }
    75%      { transform: translateX(-50%) rotate(1.6deg); }
}

.story-note-bubble:active {
    transform: translateX(-50%) scale(0.94);
}

/* Jarak antar story item — cegah bubble nempel */
.story-bar {
    gap: 18px;
}

/* ===========================================================
   NOTE VIEWER + LIKE (bubble grow + blur + heart)
   =========================================================== */
.note-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483630;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.note-viewer[hidden] { display: none; }

.note-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.5);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    animation: note-viewer-fade 240ms ease both;
    cursor: pointer;
}
@keyframes note-viewer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.note-viewer-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: min(560px, 90vw);
    padding: 28px 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(15, 18, 24, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 80px -12px rgba(0, 0, 0, 0.8),
        0 12px 40px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: note-bubble-grow 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    z-index: 1;
    cursor: default;
}
@keyframes note-bubble-grow {
    0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.note-viewer-text {
    display: block;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.012em;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 4px;
}

.note-viewer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.note-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.note-like-btn:hover,
.note-like-btn:focus-visible {
    background: rgba(255, 77, 109, 0.15);
    border-color: rgba(255, 77, 109, 0.4);
    color: #ff4d6d;
    outline: none;
}
.note-like-btn:active {
    transform: scale(0.94);
}
.note-like-btn.is-liked {
    background: rgba(255, 77, 109, 0.2);
    border-color: rgba(255, 77, 109, 0.55);
    color: #ff4d6d;
}
.note-like-btn svg {
    display: block;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), fill 200ms ease;
}
.note-like-btn.is-liked svg {
    fill: currentColor;
    transform: scale(1.1);
}
.note-like-btn.is-animating svg {
    animation: note-like-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes note-like-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5); }
    70%  { transform: scale(0.85); }
    100% { transform: scale(1.1); }
}
.note-like-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: inherit;
    min-width: 12px;
    text-align: center;
}

/* Mobile */
@media (max-width: 480px) {
    .story-bar {
        gap: 14px;
    }
    .story-note-bubble {
        max-width: 118px;
        font-size: 0.66rem;
        padding: 5px 9px;
        border-radius: 10px;
    }
    .story-note-tail {
        border-left-width: 4px;
        border-right-width: 4px;
        border-top-width: 5px;
    }
    .note-viewer { padding: 20px; }
    .note-viewer-bubble {
        padding: 22px 24px;
        border-radius: 24px;
        max-width: 92vw;
        gap: 14px;
    }
    .note-viewer-text { font-size: 1.1rem; }
    .note-like-btn { padding: 8px 15px; font-size: 0.85rem; }
}

@media (max-width: 360px) {
    .story-note-bubble {
        max-width: 104px;
        font-size: 0.62rem;
    }
    .note-viewer-text { font-size: 1rem; }
}

/* Prefers reduce motion */
@media (prefers-reduced-motion: reduce) {
    .story-note-bubble,
    .story-note-bubble:hover,
    .story-note-bubble:focus-visible {
        animation: story-note-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
}
/* ===========================================================
   FIX: gap antar story item — normalin
   =========================================================== */

.story-bar {
    gap: 8px !important;
}

.story-item-wrap {
    padding-top: 4px;
}

@media (max-width: 640px) {
    .story-bar {
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    .story-bar {
        gap: 5px !important;
    }
    .story-item-wrap {
        padding-top: 3px;
    }
}

@media (max-width: 360px) {
    .story-bar {
        gap: 4px !important;
    }
}
/* ===========================================================
   STORY BAR — rapet samping-sampingan
   =========================================================== */

.story-bar {
    gap: 2px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.story-item-wrap {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0 2px;
    padding-top: 4px;
}

.story-item {
    width: auto !important;
    max-width: none !important;
    padding: 0;
    gap: 6px;
}

.story-label {
    max-width: 100px !important;
    font-size: 0.7rem;
}

@media (max-width: 640px) {
    .story-bar {
        gap: 1px !important;
    }
    .story-item-wrap {
        padding: 0 1px;
        padding-top: 3px;
    }
    .story-label {
        max-width: 90px !important;
        font-size: 0.66rem;
    }
}

@media (max-width: 480px) {
    .story-bar {
        gap: 0 !important;
    }
    .story-item-wrap {
        padding: 0 1px;
        padding-top: 2px;
    }
    .story-label {
        max-width: 82px !important;
        font-size: 0.64rem;
    }
}

@media (max-width: 360px) {
    .story-item-wrap {
        padding: 0;
        padding-top: 2px;
    }
    .story-label {
        max-width: 76px !important;
        font-size: 0.62rem;
    }
}
/* ===========================================================
   STORY BAR — jarak normal, tidak mepet tepi
   =========================================================== */

.story-bar {
    gap: 15px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.story-item-wrap {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0;
    padding-top: 4px;
}

.story-item {
    width: auto !important;
    max-width: none !important;
    padding: 0;
    gap: 6px;
}

.story-label {
    max-width: 100px !important;
    font-size: 0.72rem;
}

@media (max-width: 640px) {
    .story-bar {
        gap: 9px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .story-label {
        max-width: 90px !important;
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .story-bar {
        gap: 12px !important;
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
    .story-label {
        max-width: 84px !important;
        font-size: 0.66rem;
    }
}

@media (max-width: 360px) {
    .story-bar {
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .story-label {
        max-width: 78px !important;
        font-size: 0.64rem;
    }
}

/* ===========================================================
   Rapatkan header → story bar
   =========================================================== */

.story-bar {
    padding-top: 40px !important;
}

@media (max-width: 640px) {
    .story-bar {
        padding-top: 36px !important;
    }
}

@media (max-width: 480px) {
    .story-bar {
        padding-top: 34px !important;
    }
}

@media (max-width: 360px) {
    .story-bar {
        padding-top: 32px !important;
    }
}
/* ===========================================================
   DM — iMessage aesthetic
   =========================================================== */

/* ===== DM List ===== */
.dm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dm-item { border-bottom: 1px solid var(--border); }
.dm-item:last-child { border-bottom: none; }
.dm-item:hover { background: var(--bg-hover); }
.dm-item-unread { background: rgba(91, 141, 239, 0.06); }

.dm-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.dm-item-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2a3142, #1a1f2b);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
}
.dm-item-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dm-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dm-item-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-item-preview {
    font-size: 0.85rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.dm-item-you { color: var(--text-faint); }

.dm-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}
.dm-item-time {
    font-size: 0.72rem;
    color: var(--text-faint);
    white-space: nowrap;
}
.dm-item-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #0b84fe;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ===========================================================
   DM CHAT — full screen iMessage
   =========================================================== */

.dm-body {
    margin: 0;
    padding: 0;
    background: #000000;
    color: #ffffff;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.dm-chat {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000000;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ===== Header ===== */
.dm-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 10;
}

.dm-chat-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #0b84fe;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 140ms ease;
}
.dm-chat-back:hover { background: rgba(11, 132, 254, 0.12); }

.dm-chat-profile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #ffffff;
    min-width: 0;
}

.dm-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #3a3a3c, #2c2c2e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}
.dm-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dm-chat-name {
    font-size: 0.76rem;
    font-weight: 600;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-chat-spacer { width: 36px; flex-shrink: 0; }

/* ===== Messages area ===== */
.dm-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.dm-messages::-webkit-scrollbar { width: 6px; }
.dm-messages::-webkit-scrollbar-track { background: transparent; }
.dm-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

/* Date separator */
.dm-date {
    display: flex;
    justify-content: center;
    margin: 12px 0 10px;
}
.dm-date > span {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 12px;
    background: transparent;
    letter-spacing: 0.01em;
}

/* Empty */
.dm-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    padding: 40px 20px;
}
.dm-empty p { margin: 0 0 6px; }
.dm-empty-hint { font-size: 0.85rem; color: rgba(255, 255, 255, 0.3); }

/* Bubble row */
.dm-bubble-row {
    display: flex;
    padding: 1px 0;
    animation: dm-bubble-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dm-bubble-row.is-mine { justify-content: flex-end; padding-right: 2px; }
.dm-bubble-row.is-theirs { justify-content: flex-start; padding-left: 2px; }

/* Grup berdekatan — kurangi spacing atasnya */
.dm-bubble-row.is-group { padding-top: 0; }

@keyframes dm-bubble-in {
    0%   { opacity: 0; transform: translateY(6px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bubble */
.dm-bubble {
    max-width: min(76%, 560px);
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 0.98rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    letter-spacing: -0.011em;
    position: relative;
}

/* Milik sendiri — biru iMessage */
.dm-bubble-row.is-mine .dm-bubble {
    background: #0b84fe;
    color: #ffffff;
    border-bottom-right-radius: 20px;
}
/* Tail efek di bubble terakhir dari grup */
.dm-bubble-row.is-mine:not(.is-group) .dm-bubble {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Lawan bicara — abu gelap */
.dm-bubble-row.is-theirs .dm-bubble {
    background: #26252a;
    color: #ffffff;
}
.dm-bubble-row.is-theirs:not(.is-group) .dm-bubble {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* Grouped bubbles — kurangi radius di sisi yang nempel */
.dm-bubble-row.is-group.is-mine .dm-bubble {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.dm-bubble-row.is-group.is-theirs .dm-bubble {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

/* ===== Composer ===== */
.dm-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.dm-composer textarea {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.35;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 140ms ease, background-color 140ms ease;
    overflow-y: auto;
    -webkit-appearance: none;
}
.dm-composer textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.dm-composer textarea:focus {
    border-color: rgba(11, 132, 254, 0.55);
    background: rgba(255, 255, 255, 0.09);
}

.dm-send {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #0b84fe;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 140ms ease, background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-send svg { display: block; }
.dm-send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: #3a3a3c;
}
.dm-send:not(:disabled):active {
    transform: scale(0.9);
}
.dm-send:not(:disabled):hover {
    background: #1284ff;
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
    .dm-bubble {
        max-width: 82%;
        font-size: 0.96rem;
        padding: 8px 13px;
    }
    .dm-chat-avatar { width: 36px; height: 36px; font-size: 0.9rem; }
    .dm-chat-name { font-size: 0.74rem; }
    .dm-item-avatar { width: 48px; height: 48px; font-size: 1rem; }
    .dm-item-name { font-size: 0.94rem; }
    .dm-item-preview { font-size: 0.82rem; }
}

/* ===== Animasi tambahan ===== */
@media (prefers-reduced-motion: reduce) {
    .dm-bubble-row { animation: none !important; }
    .dm-messages { scroll-behavior: auto; }
}
/* ===========================================================
   DM BUTTON di profile — iMessage bubble icon
   =========================================================== */

.profile-icon-btn-dm {
    background: #0b84fe;
    border-color: #0b84fe;
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 14px -4px rgba(11, 132, 254, 0.6);
}

.profile-icon-btn-dm:hover,
.profile-icon-btn-dm:focus-visible {
    background: #1284ff;
    border-color: #1284ff;
    transform: scale(1.05);
    box-shadow: 0 6px 18px -4px rgba(11, 132, 254, 0.75);
    outline: none;
}

.profile-icon-btn-dm:active {
    transform: scale(0.94);
}

.profile-icon-btn-dm svg {
    display: block;
    stroke: #ffffff;
    fill: none;
}

/* Gap antar action button */
.profile-cover-action {
    gap: 8px;
}

@media (max-width: 480px) {
    .profile-icon-btn-dm {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 360px) {
    .profile-icon-btn-dm {
        width: 34px;
        height: 34px;
    }
}
/* ===========================================================
   DM — AESTHETIC UPGRADE + READ RECEIPT + EDIT/DELETE
   =========================================================== */

/* ====== Chat header: frosted glass dark ====== */
.dm-chat-header {
    background: rgba(18, 18, 20, 0.86);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ====== Bubble layout row ====== */
.dm-bubble-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 1px 0;
    animation: dm-bubble-in 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 200ms ease;
}

.dm-bubble-row.is-mine {
    justify-content: flex-end;
    padding-right: 2px;
    padding-left: 40px;
}
.dm-bubble-row.is-theirs {
    justify-content: flex-start;
    padding-left: 2px;
    padding-right: 40px;
}

/* Bubble menu trigger (⋯) */
.dm-bubble-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, background-color 180ms ease, color 180ms ease, transform 140ms ease;
    flex-shrink: 0;
    order: -1; /* trigger muncul di kiri bubble */
    margin-bottom: 4px;
    -webkit-tap-highlight-color: transparent;
}
.dm-bubble-row.is-mine .dm-bubble-menu-trigger {
    order: -1;
}
.dm-bubble-row:hover .dm-bubble-menu-trigger,
.dm-bubble-row:focus-within .dm-bubble-menu-trigger {
    opacity: 1;
    pointer-events: auto;
}
.dm-bubble-menu-trigger:hover,
.dm-bubble-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    outline: none;
    transform: scale(1.05);
}
.dm-bubble-menu-trigger:active {
    transform: scale(0.9);
}

/* Touch device: trigger selalu ada tapi redup */
@media (hover: none) {
    .dm-bubble-menu-trigger {
        opacity: 0.35;
        pointer-events: auto;
    }
}

/* ====== Read receipt (centang biru) ====== */
.dm-read-receipt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #0b84fe; /* biru iMessage */
    margin-bottom: 4px;
    margin-left: 2px;
    animation: receipt-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dm-read-receipt svg {
    display: block;
    filter: drop-shadow(0 0 4px rgba(11, 132, 254, 0.5));
}

@keyframes receipt-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ====== Deleted message ====== */
.dm-bubble-row.is-deleted .dm-bubble {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}
.dm-bubble-deleted {
    font-style: italic;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

/* ====== Edited marker ====== */
.dm-bubble-edited {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.01em;
    font-style: italic;
}
.dm-bubble-row.is-mine .dm-bubble-edited {
    color: rgba(255, 255, 255, 0.7);
}

/* ====== Composer — lebih besar & aesthetic ====== */
.dm-composer {
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 18, 20, 0.9);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 10px;
}

.dm-composer textarea {
    min-height: 42px;
    padding: 11px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.dm-composer textarea:focus {
    border-color: rgba(11, 132, 254, 0.7);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(11, 132, 254, 0.15);
}

/* Tombol kirim — diperbesar */
.dm-send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px rgba(11, 132, 254, 0.65);
    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.dm-send:not(:disabled):hover {
    background: #1284ff;
    box-shadow: 0 6px 20px -4px rgba(11, 132, 254, 0.85);
    transform: translateY(-1px);
}
.dm-send:not(:disabled):active {
    transform: scale(0.9);
}
.dm-send svg {
    width: 24px;
    height: 24px;
}
.dm-send:disabled {
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.5;
}

/* ====== Bottom sheet actions ====== */
.dm-actions-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483620;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.dm-actions-sheet[hidden] { display: none; }

.dm-actions-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.dm-actions-sheet.is-open .dm-actions-backdrop {
    opacity: 1;
}

.dm-actions-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 12px 12px;
    padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
    background: rgba(28, 28, 30, 0.98);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
    transform: translateY(100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    box-sizing: border-box;
}
.dm-actions-sheet.is-open .dm-actions-panel {
    transform: translateY(0);
}

.dm-actions-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px auto 12px;
}

.dm-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-action-item:hover,
.dm-action-item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}
.dm-action-item svg {
    display: block;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8);
}
.dm-action-danger {
    color: #ff453a;
}
.dm-action-danger svg {
    color: #ff453a;
}

/* ====== Edit modal ====== */
.dm-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483625;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dm-edit-modal[hidden] { display: none; }

.dm-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 220ms ease;
    cursor: pointer;
}
.dm-edit-modal.is-open .dm-edit-backdrop {
    opacity: 1;
}

.dm-edit-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(28, 28, 30, 0.98);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px -12px rgba(0, 0, 0, 0.85);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
    z-index: 1;
    box-sizing: border-box;
}
.dm-edit-modal.is-open .dm-edit-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.dm-edit-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.dm-edit-panel textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.45;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 180ms ease, background-color 180ms ease;
}
.dm-edit-panel textarea:focus {
    border-color: rgba(11, 132, 254, 0.7);
    background: rgba(255, 255, 255, 0.09);
}

.dm-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.dm-edit-cancel {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-edit-cancel:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.24);
}

.dm-edit-save {
    padding: 10px 24px;
    border: none;
    border-radius: 999px;
    background: #0b84fe;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-edit-save:hover {
    background: #1284ff;
}
.dm-edit-save:active {
    transform: scale(0.96);
}
.dm-edit-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ====== Responsive ====== */
@media (max-width: 480px) {
    .dm-bubble-menu-trigger {
        width: 24px;
        height: 24px;
    }
    .dm-send {
        width: 40px;
        height: 40px;
    }
    .dm-send svg {
        width: 22px;
        height: 22px;
    }
    .dm-composer textarea {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 0.96rem;
    }
    .dm-read-receipt {
        width: 16px;
        height: 16px;
    }
    .dm-edit-panel {
        padding: 18px;
    }
}

@media (max-width: 360px) {
    .dm-send {
        width: 38px;
        height: 38px;
    }
    .dm-send svg {
        width: 20px;
        height: 20px;
    }
}

/* Prefers reduce motion */
@media (prefers-reduced-motion: reduce) {
    .dm-bubble-row,
    .dm-read-receipt,
    .dm-send {
        animation: none !important;
        transition: none !important;
    }
}
/* ===========================================================
   DM — image + voice note
   =========================================================== */

.dm-composer {
    align-items: flex-end;
}

/* Attach & mic buttons */
.dm-attach-btn,
.dm-mic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 140ms ease, transform 140ms ease, color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-attach-btn:hover,
.dm-mic-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.dm-attach-btn:active,
.dm-mic-btn:active {
    transform: scale(0.92);
}
.dm-attach-btn svg,
.dm-mic-btn svg {
    display: block;
}
.dm-mic-btn {
    background: rgba(11, 132, 254, 0.15);
    color: #0b84fe;
}
.dm-mic-btn:hover {
    background: rgba(11, 132, 254, 0.25);
    color: #1284ff;
}

/* Recording state */
.dm-recording {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 22px;
    background: rgba(255, 69, 58, 0.12);
    border: 1px solid rgba(255, 69, 58, 0.35);
    color: #ffffff;
    min-height: 42px;
}
.dm-recording[hidden] { display: none; }

.dm-recording-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff453a;
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.6);
    animation: dm-rec-pulse 1.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes dm-rec-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

.dm-recording-time {
    font-size: 0.94rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #ff453a;
}

.dm-recording-cancel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 69, 58, 0.2);
    color: #ff453a;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-recording-cancel:hover {
    background: rgba(255, 69, 58, 0.35);
}
.dm-recording-cancel:active {
    transform: scale(0.9);
}
.dm-recording-cancel svg {
    display: block;
}

/* ============ Image bubble ============ */
.dm-bubble-image {
    padding: 4px !important;
    background: transparent !important;
    max-width: min(60%, 260px);
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
}
.dm-bubble-row.is-mine .dm-bubble-image {
    background: rgba(11, 132, 254, 0.2) !important;
}
.dm-bubble-row.is-theirs .dm-bubble-image {
    background: rgba(38, 37, 42, 0.4) !important;
}

.dm-image-btn {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    max-width: 100%;
    transition: transform 160ms ease, filter 160ms ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-image-btn:hover {
    transform: scale(1.01);
    filter: brightness(1.05);
}
.dm-image-btn:active {
    transform: scale(0.98);
}
.dm-image-btn img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
}

/* Image lightbox */
.dm-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dm-image-viewer[hidden] { display: none; }

.dm-image-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 220ms ease;
    cursor: pointer;
}
.dm-image-viewer.is-open .dm-image-viewer-backdrop { opacity: 1; }

.dm-image-viewer img {
    position: relative;
    max-width: min(92vw, 900px);
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    z-index: 1;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
.dm-image-viewer.is-open img {
    transform: scale(1);
    opacity: 1;
}

/* ============ Voice note bubble ============ */
.dm-bubble-voice {
    padding: 8px 14px 8px 8px !important;
    min-width: 200px;
}
.dm-bubble-row.is-mine .dm-bubble-voice {
    background: #0b84fe !important;
}
.dm-bubble-row.is-theirs .dm-bubble-voice {
    background: #26252a !important;
}

.dm-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    max-width: 260px;
}

.dm-voice-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 140ms ease, background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    order: -1;
}
.dm-bubble-row.is-theirs .dm-voice-play {
    background: rgba(11, 132, 254, 0.85);
}
.dm-voice-play:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}
.dm-bubble-row.is-theirs .dm-voice-play:hover {
    background: #1284ff;
}
.dm-voice-play:active { transform: scale(0.92); }
.dm-voice-play svg { display: block; }

.dm-voice-wave {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    min-width: 60px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.dm-voice-wave-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
    width: 100%;
}

.dm-voice-wave-bars > span {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
    transition: background-color 200ms ease;
}

.dm-bubble-row.is-theirs .dm-voice-wave-bars > span {
    background: rgba(255, 255, 255, 0.4);
}

/* Animasi saat playing — bar memantul */
.dm-voice.is-playing .dm-voice-wave-bars > span {
    animation: dm-wave-bounce 900ms ease-in-out infinite;
    background: rgba(255, 255, 255, 0.9);
}
.dm-voice.is-playing .dm-voice-wave-bars > span:nth-child(2n) {
    animation-delay: 100ms;
}
.dm-voice.is-playing .dm-voice-wave-bars > span:nth-child(3n) {
    animation-delay: 200ms;
}
.dm-voice.is-playing .dm-voice-wave-bars > span:nth-child(4n) {
    animation-delay: 300ms;
}

@keyframes dm-wave-bounce {
    0%, 100% { transform: scaleY(0.7); }
    50%      { transform: scaleY(1.15); }
}

.dm-voice-duration {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

.dm-bubble-row.is-mine .dm-voice-duration {
    color: rgba(255, 255, 255, 0.95);
}

/* ============ Responsive ============ */
@media (max-width: 480px) {
    .dm-attach-btn,
    .dm-mic-btn {
        width: 38px;
        height: 38px;
    }
    .dm-bubble-image {
        max-width: 70%;
    }
    .dm-voice {
        min-width: 160px;
        max-width: 220px;
    }
    .dm-voice-play {
        width: 32px;
        height: 32px;
    }
    .dm-voice-wave {
        height: 26px;
    }
}

@media (max-width: 360px) {
    .dm-attach-btn,
    .dm-mic-btn {
        width: 36px;
        height: 36px;
    }
}
/* ===========================================================
   DM CSS — FINAL RESET & CLEANUP
   =========================================================== */

/* Body */
.dm-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    color: #fff !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.dm-chat {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

/* ===== Header ===== */
.dm-chat-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    background: rgba(18, 18, 20, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

.dm-chat-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #0b84fe !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}
.dm-chat-back:hover { background: rgba(11, 132, 254, 0.12) !important; }

.dm-chat-profile {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: #fff !important;
    min-width: 0 !important;
}

.dm-chat-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #3a3a3c, #2c2c2e) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.dm-chat-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.dm-chat-name {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.dm-chat-spacer { width: 36px !important; flex-shrink: 0 !important; }

/* ===== Messages area ===== */
.dm-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Date */
.dm-date {
    display: flex !important;
    justify-content: center !important;
    margin: 12px 0 10px !important;
}
.dm-date > span {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 4px 12px !important;
    letter-spacing: 0.01em !important;
}

/* Empty */
.dm-empty {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    padding: 40px 20px !important;
}
.dm-empty p { margin: 0 0 6px !important; }
.dm-empty-hint { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.3) !important; }

/* Bubble row */
.dm-bubble-row {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    padding: 1px 0 !important;
    animation: dm-bubble-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dm-bubble-row.is-mine {
    justify-content: flex-end !important;
    padding-right: 2px !important;
    padding-left: 44px !important;
}
.dm-bubble-row.is-theirs {
    justify-content: flex-start !important;
    padding-left: 2px !important;
    padding-right: 44px !important;
}
.dm-bubble-row.is-group { padding-top: 0 !important; }

@keyframes dm-bubble-in {
    0%   { opacity: 0; transform: translateY(6px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bubble */
.dm-bubble {
    max-width: min(76%, 560px) !important;
    padding: 9px 14px !important;
    border-radius: 20px !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    letter-spacing: -0.011em !important;
    position: relative !important;
}

.dm-bubble-row.is-mine .dm-bubble {
    background: #0b84fe !important;
    color: #fff !important;
}
.dm-bubble-row.is-theirs .dm-bubble {
    background: #26252a !important;
    color: #fff !important;
}

.dm-bubble-row.is-group.is-mine .dm-bubble {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.dm-bubble-row.is-group.is-theirs .dm-bubble {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

/* Deleted */
.dm-bubble-row.is-deleted .dm-bubble {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
}
.dm-bubble-deleted { font-style: italic !important; font-size: 0.88rem !important; }

/* Edited */
.dm-bubble-edited {
    display: block !important;
    margin-top: 2px !important;
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 500 !important;
    font-style: italic !important;
}
.dm-bubble-row.is-mine .dm-bubble-edited { color: rgba(255, 255, 255, 0.7) !important; }

/* Bubble menu ⋯ */
.dm-bubble-menu-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
    flex-shrink: 0 !important;
    margin-bottom: 4px !important;
}
.dm-bubble-row.is-mine .dm-bubble-menu-trigger { order: -1 !important; }
.dm-bubble-row:hover .dm-bubble-menu-trigger,
.dm-bubble-row:focus-within .dm-bubble-menu-trigger {
    opacity: 1 !important;
    pointer-events: auto !important;
}
@media (hover: none) {
    .dm-bubble-menu-trigger { opacity: 0.35 !important; pointer-events: auto !important; }
}

/* Read receipt */
.dm-read-receipt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: #0b84fe !important;
    margin-bottom: 4px !important;
    margin-left: 2px !important;
}
.dm-read-receipt svg { display: block !important; }

/* ===== COMPOSER (FINAL) ===== */
.dm-composer {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(18, 18, 20, 0.94) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.dm-composer textarea {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 120px !important;
    padding: 11px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    resize: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}
.dm-composer textarea::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
.dm-composer textarea:focus {
    border-color: rgba(11, 132, 254, 0.7) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Attach & mic & send — same size */
.dm-attach-btn,
.dm-mic-btn,
.dm-send {
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    transition: background-color 140ms ease, transform 120ms ease !important;
}

.dm-attach-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.dm-attach-btn:hover { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }

.dm-mic-btn {
    background: rgba(11, 132, 254, 0.15) !important;
    color: #0b84fe !important;
}
.dm-mic-btn:hover { background: rgba(11, 132, 254, 0.25) !important; }

.dm-send {
    background: #0b84fe !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(11, 132, 254, 0.65) !important;
}
.dm-send:not(:disabled):hover { background: #1284ff !important; }
.dm-send:active { transform: scale(0.9) !important; }
.dm-send:disabled { background: rgba(255, 255, 255, 0.08) !important; opacity: 0.5 !important; cursor: not-allowed !important; }

.dm-attach-btn svg,
.dm-mic-btn svg,
.dm-send svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}

/* Recording bar */
.dm-recording {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    background: rgba(255, 69, 58, 0.12) !important;
    border: 1px solid rgba(255, 69, 58, 0.35) !important;
    color: #fff !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
}
.dm-recording[hidden] { display: none !important; }

.dm-recording-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ff453a !important;
    animation: dm-rec-pulse 1.4s ease-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes dm-rec-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

.dm-recording-time {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: #ff453a !important;
}

.dm-recording-cancel {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 69, 58, 0.2) !important;
    color: #ff453a !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.dm-recording-cancel svg { display: block !important; }

/* Image bubble */
.dm-bubble-image {
    padding: 4px !important;
    background: rgba(11, 132, 254, 0.2) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    max-width: min(60%, 260px) !important;
}
.dm-bubble-row.is-theirs .dm-bubble-image {
    background: rgba(38, 37, 42, 0.4) !important;
}

.dm-image-btn {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    max-width: 100% !important;
}
.dm-image-btn img {
    display: block !important;
    max-width: 100% !important;
    max-height: 320px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

/* Image lightbox */
.dm-image-viewer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483640 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.dm-image-viewer[hidden] { display: none !important; }
.dm-image-viewer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    cursor: pointer !important;
}
.dm-image-viewer img {
    position: relative !important;
    max-width: min(92vw, 900px) !important;
    max-height: 92vh !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    z-index: 1 !important;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9) !important;
}

/* Voice bubble */
.dm-bubble-voice {
    padding: 8px 14px 8px 8px !important;
    min-width: 200px !important;
}
.dm-voice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 180px !important;
    max-width: 260px !important;
}
.dm-voice-play {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    order: -1 !important;
}
.dm-bubble-row.is-theirs .dm-voice-play { background: rgba(11, 132, 254, 0.85) !important; }
.dm-voice-play svg { display: block !important; }

.dm-voice-wave {
    flex: 1 1 auto !important;
    min-width: 60px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}
.dm-voice-wave-bars {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 100% !important;
    width: 100% !important;
}
.dm-voice-wave-bars > span {
    flex: 1 !important;
    min-width: 2px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
.dm-voice.is-playing .dm-voice-wave-bars > span {
    animation: dm-wave-bounce 900ms ease-in-out infinite !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.dm-voice.is-playing .dm-voice-wave-bars > span:nth-child(2n) { animation-delay: 100ms !important; }
.dm-voice.is-playing .dm-voice-wave-bars > span:nth-child(3n) { animation-delay: 200ms !important; }
@keyframes dm-wave-bounce {
    0%, 100% { transform: scaleY(0.7); }
    50%      { transform: scaleY(1.15); }
}
.dm-voice-duration {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-variant-numeric: tabular-nums !important;
    flex-shrink: 0 !important;
    min-width: 28px !important;
    text-align: right !important;
}

/* Actions sheet */
.dm-actions-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483620 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}
.dm-actions-sheet[hidden] { display: none !important; }
.dm-actions-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
}
.dm-actions-sheet.is-open .dm-actions-backdrop { opacity: 1 !important; }
.dm-actions-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 12px 12px !important;
    padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px !important;
    background: rgba(28, 28, 30, 0.98) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transform: translateY(100%) !important;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}
.dm-actions-sheet.is-open .dm-actions-panel { transform: translateY(0) !important; }
.dm-actions-handle {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 4px auto 12px !important;
}
.dm-action-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: none !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.dm-action-item:hover { background: rgba(255, 255, 255, 0.07) !important; }
.dm-action-item svg { display: block !important; flex-shrink: 0 !important; }
.dm-action-danger { color: #ff453a !important; }
.dm-action-danger svg { color: #ff453a !important; }

/* Edit modal */
.dm-edit-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483625 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.dm-edit-modal[hidden] { display: none !important; }
.dm-edit-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
    cursor: pointer !important;
}
.dm-edit-modal.is-open .dm-edit-backdrop { opacity: 1 !important; }
.dm-edit-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 440px !important;
    padding: 22px !important;
    border-radius: 22px !important;
    background: rgba(28, 28, 30, 0.98) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.9) translateY(20px) !important;
    opacity: 0 !important;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}
.dm-edit-modal.is-open .dm-edit-panel { transform: scale(1) translateY(0) !important; opacity: 1 !important; }
.dm-edit-title {
    margin: 0 0 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.dm-edit-panel textarea {
    width: 100% !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    font-family: inherit !important;
    resize: vertical !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.dm-edit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
.dm-edit-cancel {
    padding: 10px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
}
.dm-edit-save {
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #0b84fe !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
}

/* Mobile */
@media (max-width: 480px) {
    .dm-composer {
        gap: 6px !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .dm-attach-btn,
    .dm-mic-btn,
    .dm-send {
        width: 40px !important;
        height: 40px !important;
    }
    .dm-attach-btn svg,
    .dm-mic-btn svg,
    .dm-send svg {
        width: 20px !important;
        height: 20px !important;
    }
    .dm-composer textarea {
        min-height: 40px !important;
        padding: 10px 14px !important;
        font-size: 0.96rem !important;
    }
    .dm-bubble { max-width: 82% !important; font-size: 0.96rem !important; }
    .dm-bubble-image { max-width: 70% !important; }
    .dm-voice { min-width: 160px !important; max-width: 220px !important; }
    .dm-voice-play { width: 32px !important; height: 32px !important; }
    .dm-voice-wave { height: 26px !important; }
}

@media (max-width: 360px) {
    .dm-attach-btn,
    .dm-mic-btn,
    .dm-send {
        width: 38px !important;
        height: 38px !important;
    }
    .dm-attach-btn svg,
    .dm-mic-btn svg,
    .dm-send svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Prefers reduce motion */
@media (prefers-reduced-motion: reduce) {
    .dm-bubble-row, .dm-read-receipt, .dm-send { animation: none !important; }
    .dm-messages { scroll-behavior: auto !important; }
}
/* ============================================================
   PROFILE — COUPLE CTA (rule hint + soft button)
   ============================================================ */
.profile-couple-rule-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  color: #d1b370;
  font-size: 0.82rem;
  line-height: 1.5;
}
.profile-couple-rule-hint svg {
  flex-shrink: 0;
  color: #f59e0b;
  margin-top: 2px;
}
.profile-couple-rule-hint strong {
  color: #fbbf24;
}
.profile-couple-rule-warn {
  color: #f87171;
}

.profile-couple-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-couple-btn-soft {
  opacity: 0.85;
}

.profile-couple-alt {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-dim, #8b95a9);
  text-decoration: none;
}
.profile-couple-alt:hover {
  color: var(--text, #e7ecf5);
  text-decoration: underline;
}
/* ============================================================
   ONLINE / LAST SEEN
   ============================================================ */
.online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0a0c10;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: online-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.05); }
}

.dm-chat-avatar { position: relative; }

.dm-chat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
}

.dm-chat-status {
  font-size: 0.72rem;
  color: #5a6478;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-chat-status.is-online {
  color: #22c55e;
  font-weight: 600;
}
/* ============================================================
   ONLINE DOT (hijau kecil, tanpa teks)
   ============================================================ */
.online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #0a0c10;
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   DM CHAT HEADER — avatar + nama + status kecil
   ============================================================ */
.dm-chat-avatar {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.dm-chat-avatar > img,
.dm-chat-avatar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1d24;
  color: #8b95a9;
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
}

.dm-chat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
}

.dm-chat-status {
  font-size: 0.7rem;
  color: #5a6478;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.dm-chat-status.is-online {
  color: #22c55e;
  font-weight: 600;
}
/* ============================================================
   NOTE VIEWER — Author + Actions (Like + Balas)
   ============================================================ */
.note-viewer-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8b95a9;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.note-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.note-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #262e3e;
  background: transparent;
  color: #8b95a9;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.note-action-btn:hover {
  color: #e7ecf5;
  border-color: #3a4454;
  background: rgba(255, 255, 255, 0.03);
}

.note-like-btn.is-liked {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}
.note-like-btn.is-liked svg {
  fill: currentColor;
}

.note-reply-btn {
  color: #5b8def;
  border-color: rgba(91, 141, 239, 0.4);
}
.note-reply-btn:hover {
  color: #ffffff;
  background: #5b8def;
  border-color: #5b8def;
}

/* ============================================================
   STORY VIEWER — Reply button (matching icon button)
   ============================================================ */
.story-reply-btn {
  /* inherits .story-icon-btn */
}
/* ============================================================
   DM STORY REPLY CARD — Balasan story gambar
   ============================================================ */
.dm-bubble-story-reply {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: 82% !important;
  overflow: hidden;
  border-radius: 18px;
}

.dm-bubble-row.is-mine .dm-bubble-story-reply {
  border-radius: 18px 4px 18px 18px;
}

.dm-bubble-row.is-theirs .dm-bubble-story-reply {
  border-radius: 4px 18px 18px 18px;
}

.dm-story-reply {
  position: relative;
  padding: 12px 14px 10px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(91, 141, 239, 0.18) 0%,
    rgba(168, 85, 247, 0.16) 50%,
    rgba(236, 72, 153, 0.14) 100%
  );
  border: 1px solid rgba(91, 141, 239, 0.32);
  overflow: hidden;
}

.dm-bubble-row.is-mine .dm-story-reply {
  background: linear-gradient(
    135deg,
    rgba(91, 141, 239, 0.28) 0%,
    rgba(168, 85, 247, 0.22) 100%
  );
  border-color: rgba(255, 255, 255, 0.14);
}

.dm-story-reply::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
}

.dm-story-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.dm-story-reply-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  flex-shrink: 0;
}

.dm-story-reply-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.dm-story-reply-image {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
  line-height: 0;
}

.dm-story-reply-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}

.dm-story-reply-caption {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(6px);
}
/* SCHBANK */
.bank-page { padding: 16px; max-width: 720px; margin: 0 auto; }
.bank-eyebrow { font-size: .72rem; letter-spacing: .24em; color: #8b95a9; text-transform: uppercase; margin: 0 0 4px; }
.bank-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 20px; color: #eef2f8; }
.bank-card { background: #12151d; border: 1px solid #1e232e; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.bank-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #5a6478; margin: 0 0 6px; }
.bank-balance { font-size: 2rem; font-weight: 800; color: #eef2f8; margin: 0; letter-spacing: -0.02em; }
.bank-account { font-family: ui-monospace, monospace; font-size: 1.15rem; color: #eef2f8; margin: 0; letter-spacing: .06em; }
.bank-ref-row { display: flex; gap: 8px; }
.bank-ref-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #262e3e; border-radius: 10px; background: #0f1218; color: #b6c0d3; font-family: ui-monospace, monospace; font-size: .82rem; }
.bank-ref-copy { padding: 0 14px; border: 1px solid #262e3e; border-radius: 10px; background: transparent; color: #e7ecf5; font-weight: 600; cursor: pointer; }
.bank-ref-copy:hover { background: #1a1d24; }
.bank-help { font-size: .78rem; color: #5a6478; margin: 8px 0 0; }
.bank-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.bank-stat { padding: 10px 12px; background: #0f1218; border-radius: 10px; }
.bank-stat dt { font-size: .72rem; color: #5a6478; text-transform: uppercase; letter-spacing: .08em; }
.bank-stat dd { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; color: #eef2f8; }
.bank-stat-emphasis dd { color: #22c55e; }
.bank-actions { margin-top: 20px; }
.bank-tx-list { list-style: none; padding: 0; margin: 0; }
.bank-tx { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #1e232e; }
.bank-tx:last-child { border-bottom: none; }
.bank-tx-desc { margin: 0; color: #e7ecf5; font-size: .9rem; }
.bank-tx-time { margin: 2px 0 0; color: #5a6478; font-size: .75rem; }
.bank-tx-amount { font-weight: 700; }
.bank-tx-amount.is-credit { color: #22c55e; }
.bank-tx-amount.is-debit  { color: #ef4444; }

/* Referral landing */
.ref-landing-body { margin: 0; min-height: 100dvh; background: #0a0c10; color: #eef2f8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ref-landing { text-align: center; max-width: 360px; width: 100%; }
.ref-landing-eyebrow { font-size: .72rem; letter-spacing: .32em; color: #8b95a9; text-transform: uppercase; margin: 0 0 20px; }
.ref-landing-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 20px; overflow: hidden; background: #1a1d24; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #8b95a9; }
.ref-landing-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ref-landing-name { font-size: 1.4rem; margin: 0 0 4px; color: #eef2f8; }
.ref-landing-handle { color: #8b95a9; margin: 0 0 24px; font-size: .9rem; }
.ref-landing-btn { display: inline-block; padding: 12px 32px; border-radius: 999px; background: #5b8def; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; }
.ref-landing-btn:hover { background: #7ba4f5; }
.ref-landing-note { margin-top: 24px; font-size: .78rem; color: #5a6478; }