/* ===========================
   Design System - Dark Luxury Dating App
   Always dark. Coral/pink accents.
   =========================== */
:root {
    /* Core palette */
    --bg-primary: #0f172a;
    --bg-secondary: #162032;
    --bg-card: rgba(30, 41, 69, 0.55);
    --bg-input: rgba(255, 255, 255, 0.08);
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(255, 255, 255, 0.06);
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Accent colors */
    --coral: #f97066;
    --soft-pink: #fb7185;
    --pink-glow: rgba(251, 113, 133, 0.5);
    --rose-gold: #e8b4b8;
    --lavender-muted: #a8a0c8;
    --link-color: #fb7185;
    --btn-primary-bg: #f97066;
    --btn-primary-border: #fb7185;
    --btn-primary-hover: #fb7185;

    /* Glass morphism */
    --glass-bg: rgba(30, 41, 69, 0.55);
    --glass-border: rgba(255, 255, 255, 0.06);

    /* Alerts */
    --alert-danger-bg: rgba(239, 68, 68, 0.15);
    --alert-danger-text: #fca5a5;
    --alert-success-bg: rgba(34, 197, 94, 0.15);
    --alert-success-text: #86efac;
}

html, body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
}

h1:focus {
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

strong {
    color: var(--text-primary);
}

label {
    color: var(--text-primary);
}

a, .btn-link {
    color: var(--link-color);
}

a:hover {
    color: var(--soft-pink);
}

/* ===========================
   Buttons
   =========================== */
.btn-primary {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--coral), var(--btn-primary-border));
    border: none;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--btn-primary-hover), #db2777);
    color: var(--bg-primary);
}

.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: #fff;
}

.btn-outline-primary {
    color: var(--coral);
    border-color: var(--coral);
    background: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary.active {
    background: rgba(251, 113, 133, 0.15);
    color: var(--soft-pink);
    border-color: var(--soft-pink);
}

.btn-outline-success {
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.4);
}

.btn-outline-success:hover, .btn-outline-success.active {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: #86efac;
}

.btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.4);
}

.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: #fca5a5;
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: rgba(148, 163, 184, 0.3);
}

.btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary);
}

.btn-light {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-primary), 0 0 0 0.25rem rgba(251, 113, 133, 0.4);
}

/* Filter button group */
.btn-group .btn-primary {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--bg-primary);
}

.btn-group .btn-success {
    background: #22c55e;
    border-color: #22c55e;
}

.btn-group .btn-secondary {
    background: var(--text-muted);
    border-color: var(--text-muted);
}

/* ===========================
   Forms
   =========================== */
.form-control, .form-select {
    background-color: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 12px;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--coral);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(251, 113, 133, 0.2);
}

/* ===========================
   Cards - Glass morphism
   =========================== */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    color: var(--text-primary);
}

.card-body {
    background: transparent;
    color: var(--text-primary);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

.list-group-item {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

/* ===========================
   Alerts
   =========================== */
.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--alert-danger-text);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--alert-success-text);
}

.alert-info {
    background-color: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
}

.alert-warning {
    background-color: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.2);
    color: #fde68a;
}

/* ===========================
   Tables & Misc
   =========================== */
.table {
    color: var(--text-primary);
    border-color: var(--glass-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 16px;
}

.shadow, .shadow-sm, .shadow-lg {
    box-shadow: 0 0.5rem 1rem var(--shadow-color) !important;
}

code {
    color: var(--coral);
}

.content {
    padding-top: 1rem;
}

/* ===========================
   Validation
   =========================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #22c55e;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: #fca5a5;
}

/* ===========================
   Toast position (below mobile top nav)
   =========================== */
@media (max-width: 767.98px) {
    #toast-container {
        top: 56px !important;
        bottom: auto !important;
    }
}

/* ===========================
   Blazor system UI
   =========================== */
#blazor-error-ui {
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow-color);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #1e293b;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--coral);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--text-primary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ===========================
   Forms - Floating labels
   =========================== */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Prevent iOS zoom on input focus */
input, select, textarea {
    font-size: 16px !important;
}

/* Safe area padding for notched devices */
.page {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ===========================
   Friends Page - Glympsie v0
   =========================== */
.friends-page {
    position: relative;
    overflow: hidden;
}

.friends-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.friends-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin: 0;
}

.coral-accent {
    color: var(--coral);
}

.friends-subtitle {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Section */
.fr-section {
    margin-top: 1.25rem;
}

.fr-section-label {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-left: 4px;
}

.fr-section-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 4px;
}

.fr-connections-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Glass card */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 0.2s, border-color 0.2s;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Search */
.fr-search-card {
    padding: 1rem;
}

.fr-search-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.fr-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.fr-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.fr-search-input {
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

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

.fr-search-input:focus {
    border-color: rgba(249, 112, 102, 0.4);
    background: rgba(249, 112, 102, 0.04);
}

.fr-btn-search {
    padding: 0.7rem 1.1rem;
    background: linear-gradient(135deg, var(--coral), var(--soft-pink));
    border: none;
    border-radius: 14px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px rgba(249, 112, 102, 0.3);
}

.fr-btn-search:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.fr-btn-search:active {
    transform: scale(0.97);
}

/* Search results */
.fr-results-list {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fr-result-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    animation: fadeSlideUp 0.35s ease both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Avatars */
.fr-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}

.fr-avatar-sm {
    width: 42px;
    height: 42px;
}

.fr-avatar-md {
    width: 46px;
    height: 46px;
}

.fr-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.fr-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #22d3ee;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
}

/* Gradient avatars */
.fr-grad-a { background: linear-gradient(135deg, #667eea, #764ba2); }
.fr-grad-b { background: linear-gradient(135deg, #f093fb, #f5576c); }
.fr-grad-c { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.fr-grad-d { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #134e4a; }
.fr-grad-e { background: linear-gradient(135deg, #fa709a, #fee140); }
.fr-grad-f { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.fr-grad-g { background: linear-gradient(135deg, #ffecd2, #fcb69f); color: #444; }
.fr-grad-h { background: linear-gradient(135deg, #30cfd0, #330867); }

/* User info */
.fr-user-info {
    flex: 1;
    min-width: 0;
}

.fr-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-user-handle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Buttons */
.fr-btn-add {
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--coral);
    border-radius: 20px;
    color: var(--coral);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.fr-btn-add:hover {
    background: rgba(249, 112, 102, 0.1);
    box-shadow: 0 0 14px rgba(249, 112, 102, 0.2);
}

.fr-btn-added {
    border-color: var(--text-muted);
    color: var(--text-muted);
    cursor: default;
}

/* Badge */
.fr-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, var(--coral), var(--soft-pink));
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 2px 10px rgba(249, 112, 102, 0.4);
}

/* Pending cards */
.fr-pending-card {
    padding: 0.85rem;
    margin-bottom: 0.6rem;
}

.fr-pending-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fr-pending-actions {
    display: flex;
    gap: 0.5rem;
}

.fr-btn-accept {
    flex: 1;
    padding: 0.55rem 0;
    background: linear-gradient(135deg, var(--coral), var(--soft-pink));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(249, 112, 102, 0.25);
}

.fr-btn-accept:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.fr-btn-decline {
    flex: 1;
    padding: 0.55rem 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.fr-btn-decline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Friends list */
.fr-friends-container {
    overflow: hidden;
}

.fr-friend-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
}

.fr-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 0 0.85rem;
}

.fr-btn-remove {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-radius: 20px;
    color: #f43f5e;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0.7;
}

.fr-btn-remove:hover {
    background: rgba(244, 63, 94, 0.08);
    border-color: #f43f5e;
    opacity: 1;
}

/* Online dot - green pulse */
.text-success {
    color: #22c55e !important;
}

/* ===========================
   Chat bubbles
   =========================== */
.chat-bubble-mine {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.3), rgba(249, 112, 102, 0.2));
    color: var(--text-primary);
    border: 1px solid rgba(251, 113, 133, 0.15);
}

.chat-bubble-theirs {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.chat-bubble-translation {
    font-style: italic;
    font-size: 0.85em;
    opacity: 0.7;
    margin-top: 0.15rem;
}

.chat-read-check {
    color: var(--coral);
}

.chat-bubble-time {
    font-size: 0.75em;
    color: var(--text-muted);
}

.chat-bubble-mine .chat-bubble-time {
    color: rgba(253, 164, 175, 0.7);
}

.chat-header {
    border-bottom-color: var(--glass-border) !important;
}

.chat-input {
    border-top-color: var(--glass-border) !important;
}

/* Chat container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===========================
   Home Feed - Glympsie v0 design
   =========================== */
.feed-page {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Online friends horizontal strip */
.online-strip {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.online-strip::-webkit-scrollbar {
    display: none;
}

.online-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    flex-shrink: 0;
}

.online-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.2), rgba(251, 113, 133, 0.15));
    border: 2px solid var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--coral);
    position: relative;
}

.online-dot-ring {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid var(--bg-primary);
}

.online-avatar-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.feed-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.12), transparent);
    margin: 0.5rem 0;
}

/* Feed header */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.feed-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.online-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.online-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Filter pills */
.filter-pills {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-pill {
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover {
    border-color: rgba(148, 163, 184, 0.3);
    color: var(--text-primary);
}

.filter-pill.active {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
}

/* Feed cards */
.friend-feed {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.feed-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    transition: border-color 0.15s ease;
}

.feed-card:hover {
    border-color: rgba(148, 163, 184, 0.12);
}

.feed-card-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.feed-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.6);
    border: 2px solid rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.feed-avatar-online {
    border-color: var(--coral);
    color: var(--coral);
    background: rgba(249, 112, 102, 0.08);
}

.feed-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feed-card-info strong {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.feed-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.feed-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.feed-action-btn:hover {
    background: rgba(251, 113, 133, 0.1);
    border-color: rgba(251, 113, 133, 0.2);
    color: var(--coral);
}

.feed-action-call {
    background: rgba(249, 112, 102, 0.08);
    border-color: rgba(249, 112, 102, 0.15);
    color: var(--coral);
}

.feed-action-call:hover {
    background: rgba(249, 112, 102, 0.18);
}

.feed-action-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.feed-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #fff;
}

.feed-badge-coral {
    background: var(--coral);
}

.feed-badge-red {
    background: #ef4444;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    gap: 0.75rem;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.empty-state p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ===========================
   Video call page - MOBILE FIRST
   =========================== */
.video-call-page {
    position: fixed;
    inset: 0;
    z-index: 1060;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
}

.video-area {
    position: relative;
    background: #000;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.video-area video#remoteVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 0.95rem;
    padding: 0.5rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    z-index: 4;
}

.local-video-pip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--coral);
    z-index: 3;
}

/* PIP overlay controls */
.pip-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.pip-controls-visible {
    opacity: 1;
    pointer-events: auto;
}

.pip-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.pip-btn:active {
    transform: scale(0.9);
}

.pip-btn-active {
    background: #ef4444;
}

@media (min-width: 768px) {
    .pip-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

.call-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    z-index: 5;
    flex-wrap: wrap;
}

.call-controls .ctrl-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.call-controls .ctrl-btn.end-call {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
    opacity: 1;
}

/* Chat overlay on video */
.chat-overlay {
    position: absolute;
    left: 0.5rem;
    bottom: 150px;
    width: 60%;
    max-width: 300px;
    z-index: 4;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.15rem;
}

.chat-msg {
    text-align: left;
}

.chat-msg-text {
    display: inline-block;
    color: #fff;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.45);
    padding: 0.2rem 0.5rem;
    border-radius: 0.75rem;
    word-break: break-word;
    line-height: 1.35;
    max-width: 100%;
}

.chat-msg-translation {
    display: block;
    font-style: italic;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 1px;
}

/* Chat input bar on video */
.chat-input-bar {
    position: absolute;
    bottom: 90px;
    left: 0;
    width: 65%;
    max-width: 320px;
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    z-index: 6;
}

.chat-input-bar .form-control {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.chat-input-bar .form-control::placeholder {
    color: rgba(255,255,255,0.5);
}

.chat-input-bar .btn {
    opacity: 0.9;
}

.pre-call-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    z-index: 5;
}

.pre-call-actions .btn {
    min-height: 48px;
    min-width: 100px;
}

/* Desktop overrides for video call */
@media (min-width: 768px) {
    .video-area {
        border-radius: 12px;
    }

    .local-video-pip {
        width: 150px;
        top: 10px;
        right: 10px;
    }

    .chat-overlay {
        bottom: 145px;
    }

    .chat-input-bar {
        bottom: 85px;
    }
}

/* ===========================
   Auth pages - Glympsie v0 design
   =========================== */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
}

.auth-illustration {
    margin-bottom: 1rem;
}

.auth-illustration svg {
    opacity: 0.9;
}

.auth-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f97066, #fb7185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.auth-tagline {
    color: var(--lavender-muted);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}

.auth-field {
    margin-bottom: 1rem;
    text-align: left;
}

.auth-field label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    display: block;
}

.auth-field .form-control,
.auth-field .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-field .form-control:focus,
.auth-field .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15);
}

.auth-submit {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-switch {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--lavender-muted);
}

.auth-switch a {
    color: var(--coral);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    color: var(--soft-pink);
    text-decoration: underline;
}

/* ===========================
   Incoming call modal
   =========================== */
.incoming-call-modal {
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    width: 360px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}

.incoming-call-modal .btn {
    min-height: 48px;
    min-width: 100px;
    border-radius: 24px;
}

/* ===========================
   Responsive - Mobile
   =========================== */
@media (max-width: 767.98px) {
    .page {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .content {
        padding: 0.5rem !important;
    }

    .top-row {
        display: none;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        border-radius: 10px !important;
        margin-bottom: 0.25rem;
    }

    /* Feed cards stay horizontal on mobile */
    .feed-card {
        padding: 0.7rem 0.75rem;
    }

    .feed-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .feed-action-btn {
        width: 36px;
        height: 36px;
    }

    /* Chat full height on mobile */
    .chat-container {
        height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }

    /* Auth card full-width on mobile */
    .auth-card {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }

    h2 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.1rem;
    }
}

/* Small phones */
@media (max-width: 374px) {
    .friend-actions .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    .call-controls .ctrl-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .call-controls .ctrl-btn.end-call {
        width: 52px;
        height: 52px;
    }
}

/* ===========================
   Loading & Animations
   =========================== */
.loading-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.spinner-border {
    color: var(--coral) !important;
}

/* Toast animation */
.toast-enter {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Glow pulse for primary buttons */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 113, 133, 0.3), 0 0 40px rgba(251, 113, 133, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 113, 133, 0.5), 0 0 60px rgba(251, 113, 133, 0.2);
    }
}

.glow-button {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Floating mascot animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Wink animation */
@keyframes wink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.animate-wink {
    animation: wink 4s ease-in-out infinite;
    transform-origin: center;
}

/* Input focus glow */
.input-focus-glow:focus-within {
    box-shadow: 0 0 12px rgba(251, 113, 133, 0.15);
}

/* ===========================
   Discover Page - Glympsie v0
   =========================== */
.discover-page {
    position: relative;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Background orbs */
.disc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.disc-orb-1 {
    width: 500px;
    height: 500px;
    top: -160px;
    left: -140px;
    background: radial-gradient(circle, rgba(249, 112, 102, 0.07) 0%, transparent 60%);
}

.disc-orb-2 {
    width: 420px;
    height: 420px;
    bottom: -80px;
    right: -130px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.07) 0%, transparent 60%);
}

.disc-orb-3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(249, 112, 102, 0.04) 0%, transparent 65%);
    transition: opacity 1s ease;
}

.disc-orb-bright {
    opacity: 3;
}

/* Header */
.disc-header {
    position: relative;
    z-index: 2;
    padding: 0.5rem 0 0;
}

.disc-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.disc-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
}

.disc-compass {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(249, 112, 102, 0.5));
    animation: disc-spin-slow 20s linear infinite;
}

@keyframes disc-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.disc-subtitle {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: block;
}

/* Main content */
.disc-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    gap: 0;
}

/* Glass card */
.disc-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    animation: disc-card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: box-shadow 0.5s, border-color 0.5s;
}

.disc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.05) 0%, transparent 50%, rgba(99, 102, 241, 0.04) 100%);
    pointer-events: none;
}

@keyframes disc-card-in {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.disc-card-glow {
    box-shadow: 0 0 60px rgba(249, 112, 102, 0.12), 0 0 120px rgba(249, 112, 102, 0.06);
    border-color: rgba(249, 112, 102, 0.2);
}

/* Illustration wrap */
.disc-illus-wrap {
    position: relative;
    width: 200px;
    height: 160px;
}

/* Pulse rings */
.disc-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid var(--coral);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.disc-pulse-ring.disc-r2 {
    width: 140px;
    height: 140px;
}

.disc-pulse-ring.disc-r3 {
    width: 172px;
    height: 172px;
}

@keyframes disc-ring-pulse {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}

.disc-matching .disc-pulse-ring {
    animation: disc-ring-pulse 1.8s ease-out infinite;
}

.disc-matching .disc-pulse-ring.disc-r2 {
    animation: disc-ring-pulse 1.8s ease-out 0.4s infinite;
}

.disc-matching .disc-pulse-ring.disc-r3 {
    animation: disc-ring-pulse 1.8s ease-out 0.8s infinite;
}

/* Text area */
.disc-text {
    text-align: center;
    transition: opacity 0.4s, transform 0.4s;
}

.disc-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.disc-headline em {
    font-style: italic;
    color: var(--coral);
}

.disc-body-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* Searching label */
.disc-search-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 8px;
    animation: disc-blink 2s ease infinite;
}

@keyframes disc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Bouncing dots */
.disc-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 14px;
}

.disc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    animation: disc-dot-bounce 1.4s ease infinite;
}

.disc-dot:nth-child(2) { animation-delay: 0.2s; }
.disc-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes disc-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* CTA wrap */
.disc-cta {
    width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: disc-card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Start button - shimmer */
.disc-btn-start {
    width: 100%;
    padding: 17px 0;
    background: linear-gradient(135deg, #ff9090 0%, var(--coral) 50%, #e84545 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(249, 112, 102, 0.35), 0 2px 8px rgba(249, 112, 102, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.disc-btn-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: disc-shimmer 3s ease infinite;
}

@keyframes disc-shimmer {
    0% { left: -100%; }
    40%, 100% { left: 150%; }
}

.disc-btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(249, 112, 102, 0.45);
}

.disc-btn-start:active {
    transform: scale(0.97);
}

/* Stop button */
.disc-btn-stop {
    width: 100%;
    padding: 17px 0;
    background: transparent;
    border: 1px solid rgba(249, 112, 102, 0.4);
    border-radius: 50px;
    color: var(--coral);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.disc-btn-stop:hover {
    background: rgba(249, 112, 102, 0.07);
    border-color: var(--coral);
}

/* Hint text */
.disc-hint {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Stats row */
.disc-stats {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    animation: disc-card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.disc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.disc-stat-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.disc-stat-label {
    font-size: 0.625rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.disc-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    align-self: center;
}

/* Report option button */
.disc-report-option {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-secondary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.disc-report-option:hover {
    background: rgba(249, 112, 102, 0.08);
    border-color: rgba(249, 112, 102, 0.3);
    color: var(--text-primary);
}

/* ===========================
   Video Board
   =========================== */
.feed-tab-group {
    display: flex;
    gap: 4px;
}

.feed-tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
}

.feed-tab-active {
    background: rgba(249, 112, 102, 0.15);
    border-color: rgba(249, 112, 102, 0.3);
    color: #f97066;
}

.vb-upload-card {
    padding: 0.85rem;
    margin-bottom: 0.75rem;
}

.vb-upload-options {
    display: flex;
    gap: 0.75rem;
}

.vb-upload-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: all 200ms;
}

.vb-upload-label:hover {
    color: #f97066;
}

.vb-file-selected {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.6);
    margin-top: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vb-upload-error {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.4rem;
}

.vb-visibility-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.vb-vis-btn {
    flex: 1;
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.vb-vis-btn.vb-vis-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.vb-visibility-badge {
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}

.vb-caption-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.vb-caption-input {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
}

.vb-caption-input:focus {
    border-color: rgba(249, 112, 102, 0.4);
}

.vb-post-btn {
    padding: 0.45rem 1rem;
    background: linear-gradient(135deg, #f97066, #fb7185);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 150ms;
    white-space: nowrap;
}

.vb-post-btn:hover {
    transform: scale(1.03);
}

.vb-post-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.vb-my-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vb-my-post-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vb-my-post-info strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.vb-my-post-info span {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
}

.vb-delete-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.35rem 0.7rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms;
}

.vb-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.vb-feed {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vb-card {
    padding: 0;
    overflow: hidden;
}

.vb-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
}

.feed-avatar-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.7rem;
}

.vb-card-user {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vb-card-user strong {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vb-card-time {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.5);
}

.vb-add-friend-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 150ms;
    flex-shrink: 0;
}

.vb-add-friend-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

.vb-video-wrap {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.vb-video {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.vb-caption {
    padding: 0.5rem 0.85rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.vb-card-actions {
    padding: 0.5rem 0.85rem 0.7rem;
}

.vb-like-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.6rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 200ms;
}

.vb-like-btn:hover {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.vb-liked {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ===========================
   Chat Page - Glympsie v0
   =========================== */
.gc-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 56px - 68px);
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .gc-page {
        height: 100dvh;
    }
}

/* Header */
.gc-header {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--glass-border);
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    z-index: 10;
    position: sticky;
    top: 0;
}

.gc-back-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s;
}

.gc-back-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.gc-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.gc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 0 14px rgba(249, 112, 102, 0.25);
}

.gc-online-dot {
    position: absolute;
    bottom: 1px;
    right: 0;
    width: 11px;
    height: 11px;
    background: #34d399;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

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

.gc-header-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-header-status {
    font-size: 0.75rem;
    font-weight: 300;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.01em;
}

.gc-status-online {
    color: #34d399;
}

.gc-status-offline {
    color: var(--text-muted);
}

.gc-status-pulse {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: 50%;
    animation: gc-status-blink 2.5s ease infinite;
}

@keyframes gc-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.gc-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.gc-video-btn {
    background: rgba(249, 112, 102, 0.1);
    border: 1px solid rgba(249, 112, 102, 0.25);
    color: var(--coral);
}

.gc-video-btn:hover {
    background: rgba(249, 112, 102, 0.18);
    box-shadow: 0 0 16px rgba(249, 112, 102, 0.2);
}

.gc-clear-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.gc-clear-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.gc-clear-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Messages area */
.gc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
    min-height: 0;
}

.gc-messages::-webkit-scrollbar {
    width: 3px;
}

.gc-messages::-webkit-scrollbar-track {
    background: transparent;
}

.gc-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.gc-loading-more {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.gc-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(249, 112, 102, 0.2);
    border-top-color: #f97066;
    border-radius: 50%;
    animation: gc-spin 0.6s linear infinite;
}

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

/* Missed call bubble */
.gc-missed-call-row {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.gc-missed-call-bubble {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 20px;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 400;
}

.gc-missed-call-time {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    margin-left: 4px;
}

/* Date divider */
.gc-date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
}

.gc-date-divider::before,
.gc-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

.gc-date-label {
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Message rows */
.gc-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    animation: gc-msg-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gc-msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.gc-sent {
    justify-content: flex-end;
}

.gc-recv {
    justify-content: flex-start;
}

.gc-msg-row + .gc-msg-row {
    margin-top: 2px;
}

.gc-gap {
    margin-top: 10px;
}

.gc-msg-content {
    max-width: 80%;
}

/* Received avatar */
.gc-recv-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(249, 112, 102, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 500;
    color: #fff;
    flex-shrink: 0;
    align-self: flex-end;
}

.gc-avatar-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Bubbles */
.gc-bubble {
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gc-bubble-sent {
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.28), rgba(244, 114, 182, 0.28));
    border: 1px solid rgba(244, 114, 182, 0.3);
    border-radius: 16px 16px 4px 16px;
}

.gc-bubble-recv {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px 16px 16px 4px;
}

/* Translation */
.gc-translation {
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Meta row (timestamp + receipt + reactions) — inside bubble */
.gc-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
}

.gc-edited {
    font-size: 0.575rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.7;
}

.gc-time {
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.gc-receipt {
    display: flex;
    align-items: center;
}

/* Emoji reactions */
.gc-emoji-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: gc-fade-in 0.15s ease-out;
}

@keyframes gc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gc-emoji-picker {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 0.8rem;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(249, 112, 102, 0.2);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: gc-picker-pop 0.2s ease-out;
}

@keyframes gc-picker-pop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.gc-emoji-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.gc-emoji-option:hover,
.gc-emoji-option:active {
    background: rgba(249, 112, 102, 0.15);
    transform: scale(1.25);
}

.gc-reactions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
    margin-right: auto;
}

.gc-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    line-height: 1.1;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.gc-reaction-pill:hover {
    background: rgba(249, 112, 102, 0.12);
}

.gc-reaction-mine {
    border-color: rgba(249, 112, 102, 0.4);
    background: rgba(249, 112, 102, 0.1);
}

.gc-reaction-count {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Action menu (own messages) */
.gc-action-menu {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    padding: 0.4rem 0;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(249, 112, 102, 0.2);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: gc-picker-pop 0.2s ease-out;
}

.gc-action-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.gc-action-item:hover,
.gc-action-item:active {
    background: rgba(249, 112, 102, 0.1);
}

.gc-action-danger {
    color: #ef4444;
}

/* Edit bar */
.gc-edit-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(249, 112, 102, 0.2);
    border-radius: 14px;
    flex-shrink: 0;
}

.gc-edit-label {
    font-size: 0.7rem;
    color: var(--coral);
    font-weight: 600;
    white-space: nowrap;
}

.gc-edit-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    outline: none;
}

.gc-edit-input:focus {
    border-color: rgba(249, 112, 102, 0.4);
}

.gc-edit-save,
.gc-edit-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gc-edit-save {
    background: var(--coral);
    color: #fff;
}

.gc-edit-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

/* Clear confirm */
.gc-clear-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    margin: 0 0.5rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 14px;
    font-size: 0.82rem;
    color: #fde68a;
    flex-shrink: 0;
}

.gc-clear-actions {
    display: flex;
    gap: 0.4rem;
}

.gc-clear-yes {
    padding: 0.35rem 0.85rem;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 10px;
    color: #fde68a;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.gc-clear-yes:hover {
    background: rgba(251, 191, 36, 0.3);
}

.gc-clear-no {
    padding: 0.35rem 0.85rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.gc-clear-no:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Input bar */
.gc-input-bar {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--glass-border);
    padding: 0.6rem 0.75rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
    z-index: 3;
}

.gc-input-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.gc-input {
    width: 100%;
    min-height: 40px;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.gc-input::placeholder {
    color: var(--text-muted);
}

.gc-input:focus {
    border-color: rgba(244, 114, 182, 0.35);
    background: rgba(244, 114, 182, 0.04);
}

.gc-send-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff9090, #e84545);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(249, 112, 102, 0.3);
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    opacity: 0.5;
}

.gc-send-active {
    opacity: 1;
}

.gc-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 22px rgba(249, 112, 102, 0.4);
}

.gc-send-btn:active {
    transform: scale(0.94);
}

/* Photo button */
.gc-photo-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--text-muted);
    transition: color 0.2s, background 0.2s;
}

.gc-photo-btn:hover {
    color: var(--coral);
    background: rgba(249, 112, 102, 0.1);
}

/* Chat image in bubble */
.gc-bubble-image {
    padding: 4px;
}

.gc-chat-image {
    display: block;
    max-width: 240px;
    max-height: 300px;
    border-radius: 10px;
    object-fit: cover;
}

.gc-bubble-image .gc-bubble-text {
    padding: 4px 8px 2px;
}

/* Image preview strip */
.gc-image-preview-strip {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--glass-border);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gc-image-preview-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gc-image-preview-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.8);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.gc-image-preview-remove:hover {
    background: rgba(239, 68, 68, 1);
}

/* Small spinner for send button */
.gc-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@media (max-width: 767.98px) {
    .gc-msg-content {
        max-width: 85%;
    }

    .gc-chat-image {
        max-width: 200px;
    }
}

/* ===========================
   Video Call Page - Glympsie v0
   =========================== */
.vc-page {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: #000;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    user-select: none;
    font-family: 'DM Sans', sans-serif;
}

/* Remote video */
.vc-remote {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
}

.vc-remote-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-cam-off {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}

.vc-cam-off p {
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

/* Gradient fades */
.vc-top-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
    z-index: 4;
    pointer-events: none;
}

.vc-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 260px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    z-index: 4;
    pointer-events: none;
}

/* Top info bar */
.vc-top-info {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 6;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vc-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vc-back-btn {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s;
    flex-shrink: 0;
    text-decoration: none;
}

.vc-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.vc-caller-name {
    font-size: 18px;
    font-weight: 500;
    color: #f8fafc;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.vc-call-status {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 3px;
    letter-spacing: 0.04em;
}

/* Signal pill */
.vc-signal-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 10px;
}

.vc-signal-dot {
    width: 7px;
    height: 7px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
    animation: vc-pulse-green 2s ease infinite;
}

@keyframes vc-pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.vc-signal-label {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
}

/* Connection quality pill */
.vc-conn-pill {
    position: absolute;
    top: calc(66px + env(safe-area-inset-top));
    left: 16px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 6;
}

.vc-conn-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.vc-conn-bar {
    width: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    transition: background 0.3s;
}

.vc-conn-bar.vc-bar-active { background: #34d399; }

.vc-conn-bar:nth-child(1) { height: 5px; }
.vc-conn-bar:nth-child(2) { height: 9px; }
.vc-conn-bar:nth-child(3) { height: 13px; }

.vc-conn-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.03em;
}

/* PIP (local video) */
.vc-pip {
    position: absolute;
    top: calc(70px + env(safe-area-inset-top));
    right: 16px;
    width: 90px;
    height: 130px;
    z-index: 8;
    border-radius: 12px;
    border: 2px solid var(--coral);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(255, 107, 107, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.vc-pip:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 28px rgba(255, 107, 107, 0.4);
}

.vc-pip:active {
    transform: scale(0.96);
}

.vc-pip-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-pip-cam-off {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* PIP overlay controls */
.vc-pip-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.vc-pip-show {
    opacity: 1;
    pointer-events: auto;
}

.vc-pip-ctrl {
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    color: #fff;
    padding: 0;
}

.vc-pip-ctrl:hover {
    background: rgba(255, 255, 255, 0.15);
}

.vc-pip-off {
    color: var(--coral);
}

.vc-pip-off svg {
    stroke: var(--coral);
}

/* PIP badge */
.vc-pip-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Chat overlay */
.vc-chat-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    max-height: 40vh;
    overflow-y: auto;
    z-index: 7;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.vc-chat-overlay.vc-chat-hidden {
    opacity: 0;
    pointer-events: none;
}

.vc-chat-wrap {
    display: flex;
    flex-direction: column;
    animation: vc-chat-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vc-chat-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.vc-chat-sent {
    align-items: flex-start;
}

.vc-chat-recv {
    align-items: flex-start;
}

.vc-chat-bubble {
    max-width: 220px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #f8fafc;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    word-break: break-word;
}

.vc-bubble-sent {
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.55), rgba(244, 114, 182, 0.55));
    border: 1px solid rgba(244, 114, 182, 0.45);
    border-radius: 16px 16px 4px 16px;
}

.vc-bubble-recv {
    background: rgba(30, 30, 40, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px 16px 16px 4px;
}

.vc-chat-translation {
    display: block;
    font-style: italic;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Chat input bar */
.vc-chat-input-bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 140px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.vc-chat-input-bar.vc-chat-hidden {
    opacity: 0;
    pointer-events: none;
}

.vc-chat-input-bar.vc-chat-kb-open {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 0;
    z-index: 8;
}

.vc-chat-overlay.vc-chat-kb-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
    max-height: 30vh;
}

.vc-chat-field {
    flex: 1;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #f8fafc;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    outline: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vc-chat-field::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.vc-chat-send {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #ff9090, #e84545);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(255, 107, 107, 0.35);
    transition: transform 0.15s;
}

.vc-chat-send:hover {
    transform: scale(1.08);
}

.vc-chat-send:active {
    transform: scale(0.92);
}

/* Bottom controls */
.vc-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 7;
    padding: 0 20px calc(12px + env(safe-area-inset-bottom));
}

.vc-controls-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    margin: 0 0 18px;
}

.vc-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.vc-ctrl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.vc-ctrl-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative;
    color: #fff;
}

.vc-ctrl-circle:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.07);
}

.vc-ctrl-circle:active {
    transform: scale(0.93);
}

.vc-ctrl-circle svg {
    stroke: #fff;
}

.vc-toggled-off {
    background: rgba(255, 107, 107, 0.18);
    border-color: rgba(255, 107, 107, 0.3);
}

.vc-toggled-off svg {
    stroke: var(--coral);
}

.vc-chat-active {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.35);
    box-shadow: 0 0 16px rgba(255, 107, 107, 0.2);
}

.vc-chat-active svg {
    stroke: #ff9090;
}

.vc-ctrl-label {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
}

/* End call button */
.vc-end-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4757, #c0392b);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 28px rgba(255, 45, 85, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
    padding: 0;
}

.vc-end-circle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 36px rgba(255, 45, 85, 0.55);
}

.vc-end-circle:active {
    transform: scale(0.92);
}

.vc-end-label {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 80, 80, 0.8);
    letter-spacing: 0.03em;
}

/* Unread badge */
.vc-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #fff;
    background: var(--coral);
    box-shadow: 0 2px 8px rgba(249, 112, 102, 0.4);
}

/* Pre-call overlay */
.vc-precall {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 5;
}

.vc-precall-status {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.vc-precall-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Start Call - coral gradient with shimmer glow */
.vc-btn-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #ff9090 0%, var(--coral) 50%, #e84545 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(249, 112, 102, 0.4), 0 2px 8px rgba(249, 112, 102, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.vc-btn-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: disc-shimmer 3s ease infinite;
}

.vc-btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(249, 112, 102, 0.5);
}

.vc-btn-start:active {
    transform: scale(0.97);
}

/* Accept - green gradient with pulse glow */
.vc-btn-accept {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #34d399, #22c55e);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(34, 197, 94, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: vc-accept-pulse 2s ease-in-out infinite;
}

@keyframes vc-accept-pulse {
    0%, 100% { box-shadow: 0 6px 28px rgba(34, 197, 94, 0.35); }
    50% { box-shadow: 0 6px 36px rgba(34, 197, 94, 0.55); }
}

.vc-btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(34, 197, 94, 0.5);
}

.vc-btn-accept:active {
    transform: scale(0.97);
}

/* Reject - red glass */
.vc-btn-reject {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 50px;
    color: #fca5a5;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.03em;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.vc-btn-reject:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}

.vc-btn-reject:active {
    transform: scale(0.97);
}

/* Cancel - glass morphism */
.vc-btn-cancel {
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.03em;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.vc-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.vc-btn-cancel:active {
    transform: scale(0.97);
}

/* Back - subtle glass */
.vc-btn-back {
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.vc-btn-back:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}

/* Error overlay */
.vc-error {
    position: absolute;
    bottom: 100px;
    left: 1rem;
    right: 1rem;
    z-index: 10;
}

.vc-error-inner {
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 300;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Desktop PIP sizing */
@media (min-width: 768px) {
    .vc-pip {
        width: 140px;
        height: 200px;
    }

    .vc-pip-ctrl {
        width: 32px;
        height: 32px;
    }

    .vc-chat-input-bar {
        right: 30%;
    }
}

@media (max-width: 767px) {
    .vc-chat-overlay {
        right: 0;
        bottom: calc(155px + env(safe-area-inset-bottom));
    }

    .vc-chat-input-bar {
        right: 14px;
        bottom: calc(110px + env(safe-area-inset-bottom));
    }
}

/* Small phone adjustments */
@media (max-width: 374px) {
    .vc-ctrl-circle {
        width: 44px;
        height: 44px;
    }

    .vc-end-circle {
        width: 52px;
        height: 52px;
    }

    .vc-ctrl-circle svg {
        width: 18px;
        height: 18px;
    }
}

/* ===========================
   Chat List Page - Glympsie v0
   =========================== */
.cl-page {
    position: relative;
    min-height: 100vh;
    padding: 1rem 1rem 5rem;
    overflow-x: hidden;
}

.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cl-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #f8fafc;
    margin: 0;
    line-height: 1.1;
}

.cl-subtitle {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(148, 163, 184, 0.6);
    letter-spacing: 0.05em;
}

.cl-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cl-row:hover {
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
}

.cl-row:active {
    background: rgba(255, 255, 255, 0.07);
}

/* Avatar */
.cl-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.15), rgba(251, 113, 133, 0.1));
    border: 1.5px solid rgba(249, 112, 102, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.cl-avatar span {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f97066;
    line-height: 1;
}

.cl-avatar-online::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid #0f172a;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Body */
.cl-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cl-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cl-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-time {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(148, 163, 184, 0.5);
    flex-shrink: 0;
}

.cl-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cl-preview {
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(148, 163, 184, 0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.cl-you {
    color: rgba(148, 163, 184, 0.45);
    font-weight: 400;
}

.cl-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #f97066, #fb7185);
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(249, 112, 102, 0.3);
}

@media (min-width: 768px) {
    .cl-page {
        padding: 1.5rem 2rem 2rem;
    }

    .cl-row {
        padding: 14px 18px;
    }
}

/* ===========================
   Profile Page - Glympsie v0
   =========================== */
.up-page {
    position: relative;
    min-height: 100vh;
    padding: 1rem 1rem 5rem;
    overflow-x: hidden;
}

.up-header {
    margin-bottom: 1.25rem;
}

.up-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #f8fafc;
    margin: 0;
    line-height: 1.1;
}

.up-subtitle {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(148, 163, 184, 0.6);
    letter-spacing: 0.05em;
}

.up-card {
    margin-bottom: 0.75rem;
    padding: 1.25rem;
}

.up-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* Profile top section — centered avatar with overlay buttons */
.up-profile-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
}

.up-avatar-wrap {
    position: relative;
    display: inline-flex;
    margin-bottom: 0.6rem;
}

.up-avatar-img-lg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(249, 112, 102, 0.3);
    box-shadow: 0 0 24px rgba(249, 112, 102, 0.15);
}

.up-avatar-circle-lg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.18), rgba(251, 113, 133, 0.12));
    border: 2.5px solid rgba(249, 112, 102, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(249, 112, 102, 0.12);
}

.up-avatar-circle-lg span {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 2rem;
    color: #f97066;
    line-height: 1;
}

.up-avatar-btns {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}

.up-avatar-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.up-avatar-btn:active {
    transform: scale(0.92);
}

.up-avatar-btn-edit {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
}

.up-avatar-btn-edit:hover {
    background: #e5635a;
    border-color: #e5635a;
}

.up-avatar-btn-delete {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.7);
}

.up-avatar-btn-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.up-name-center {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
    text-align: center;
}

.up-email-center {
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

/* Legacy avatar classes kept for other usages */
.up-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 112, 102, 0.18), rgba(251, 113, 133, 0.12));
    border: 2px solid rgba(249, 112, 102, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(249, 112, 102, 0.12);
}

.up-avatar span {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #f97066;
    line-height: 1;
}

/* Crop modal */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.crop-modal {
    width: 100%;
    max-width: 340px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.crop-header {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.crop-canvas-wrap {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    touch-action: none;
}

.crop-canvas-wrap canvas {
    display: block;
    cursor: grab;
}

.crop-canvas-wrap canvas:active {
    cursor: grabbing;
}

.crop-hint {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.5);
    margin-top: -0.25rem;
}

.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
}

.crop-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(30, 41, 59, 0.6);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.crop-zoom-btn:hover {
    background: rgba(249, 112, 102, 0.15);
    color: var(--coral);
}

.crop-zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.2);
    outline: none;
}

.crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(249, 112, 102, 0.4);
}

.crop-zoom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(249, 112, 102, 0.4);
}

.crop-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 280px;
}

.crop-btn-cancel,
.crop-btn-save {
    flex: 1;
    padding: 0.55rem 0;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    border: none;
}

.crop-btn-cancel {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
}

.crop-btn-cancel:hover {
    background: rgba(148, 163, 184, 0.2);
}

.crop-btn-save {
    background: var(--coral);
    color: #fff;
}

.crop-btn-save:hover {
    background: #e5635a;
}

/* Meta row */
.up-meta-row {
    display: flex;
    gap: 1.5rem;
}

.up-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.up-meta-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.up-meta-value {
    font-size: 0.85rem;
    font-weight: 400;
    color: #cbd5e1;
}

/* Edit display name */
.up-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-input {
    flex: 1;
}

.up-save-btn {
    flex-shrink: 0;
    min-width: 64px;
}

.up-edit-msg {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.up-edit-success {
    color: #4ade80;
}

.up-edit-error {
    color: #fca5a5;
}

/* Blocked users */
.up-empty-text {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.45);
    margin: 0;
}

.up-blocked-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.up-blocked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.up-blocked-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.up-blocked-avatar span {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fca5a5;
    line-height: 1;
}

.up-blocked-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.up-blocked-info strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

.up-blocked-info span {
    font-size: 0.7rem;
    font-weight: 300;
    color: rgba(148, 163, 184, 0.5);
}

.up-unblock-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fca5a5;
    flex-shrink: 0;
    transition: all 150ms;
}

.up-unblock-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Profile video player */
.up-video-player {
    width: 100%;
    max-height: 300px;
    border-radius: 12px;
    background: #000;
}

/* Logout */
.up-logout-area {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.up-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid rgba(252, 165, 165, 0.15);
    background: rgba(252, 165, 165, 0.06);
    color: rgba(252, 165, 165, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 200ms;
}

.up-logout-btn:hover {
    background: rgba(252, 165, 165, 0.12);
    border-color: rgba(252, 165, 165, 0.25);
    color: #fca5a5;
}

@media (min-width: 768px) {
    .up-page {
        padding: 1.5rem 2rem 2rem;
        max-width: 600px;
    }
}

/* ===========================
   Discover Page
   =========================== */
.disc-page {
    padding: 1rem 0.75rem 6rem;
    max-width: 480px;
    margin: 0 auto;
}

.disc-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.disc-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.disc-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.disc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
}

.disc-start-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--coral), var(--soft-pink));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms;
}

.disc-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(249, 112, 102, 0.4);
}

.disc-searching {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem;
}

.disc-pulse-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

.disc-pulse-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: var(--coral);
    border-radius: 50%;
}

.disc-pulse-ring::before,
.disc-pulse-ring::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--coral);
    animation: disc-pulse 2s ease-out infinite;
}

.disc-pulse-ring::after {
    animation-delay: 0.6s;
}

@keyframes disc-pulse {
    0% {
        transform: scale(0.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.disc-search-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}



.disc-cancel-btn {
    padding: 10px 32px;
    border-radius: 10px;
    border: 1px solid rgba(252, 165, 165, 0.2);
    background: rgba(252, 165, 165, 0.08);
    color: #fca5a5;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 200ms;
}

.disc-cancel-btn:hover {
    background: rgba(252, 165, 165, 0.15);
    border-color: rgba(252, 165, 165, 0.35);
}

.disc-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.disc-preview-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
.disc-preview-wrap {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3/4;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
}
.disc-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.disc-preview-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
}
.disc-go-btn {
    padding: 10px 40px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms;
}
.disc-go-btn:hover {
    filter: brightness(1.1);
}

.disc-error {
    margin-top: 1rem;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    font-size: 0.85rem;
    text-align: center;
}

@media (min-width: 768px) {
    .disc-page {
        padding: 1.5rem 2rem 2rem;
    }
}

/* ===========================
   Profile Photo Avatars
   =========================== */

/* (Profile photo button styles moved to .up-avatar-btn overlay above) */

/* Chat header avatar */
.gc-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--coral);
    box-shadow: 0 0 14px rgba(249, 112, 102, 0.25);
}

/* Chat per-message received avatar */
.gc-recv-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(249, 112, 102, 0.3);
    flex-shrink: 0;
    align-self: flex-end;
}

/* ChatList avatar */
.cl-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(249, 112, 102, 0.2);
    flex-shrink: 0;
    position: relative;
}

.cl-avatar-img.cl-avatar-online {
    border-color: #22c55e;
}

/* Friends page avatar */
.fr-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fr-avatar-img.fr-avatar-sm {
    width: 42px;
    height: 42px;
}

.fr-avatar-img.fr-avatar-md {
    width: 46px;
    height: 46px;
}

/* Home online strip avatar */
.online-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Home feed avatar */
.feed-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(148, 163, 184, 0.15);
}

.feed-avatar-img.feed-avatar-online {
    border-color: var(--coral);
}

.feed-avatar-img:not(.feed-avatar-sm) {
    width: 44px;
    height: 44px;
}

.feed-avatar-img.feed-avatar-sm {
    width: 32px;
    height: 32px;
}

/* ===========================
   Media Permission Overlay
   =========================== */
.perm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.perm-modal {
    width: 100%;
    max-width: 340px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.perm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(249, 112, 102, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coral);
    margin-bottom: 0.25rem;
}

.perm-icon-blocked {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.perm-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.perm-desc {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
    line-height: 1.5;
    margin: 0;
}

.perm-btn {
    display: block;
    width: 100%;
    padding: 0.65rem 0;
    border-radius: 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: none;
    transition: background 0.2s, opacity 0.2s;
}

.perm-btn-allow {
    background: var(--coral);
    color: #fff;
}

.perm-btn-allow:hover {
    background: #e5635a;
}

.perm-btn-back {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
}

.perm-btn-back:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
}