/* Shared header/popup styles (moved out of includes/header.php so browsers cache them). */

/* ===== All existing styles ===== */
.auth-stage { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); padding: 20px; }
.auth-stage-inner { max-width: 420px; width: 100%; }
.auth-heading { text-align: center; margin-bottom: 24px; }
.auth-logo { font-size: 48px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-heading h1 { font-size: 24px; margin: 8px 0 4px; }
.auth-heading p { color: var(--muted); font-size: 14px; }
.auth-glass-card { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 16px; padding: 32px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6); }
.auth-footer-links { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.auth-footer-links a { color: var(--accent); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; color: var(--text); margin-bottom: 4px; font-size: 13px; }
.form-group input, .form-group select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent); }
.btn-block { width: 100%; justify-content: center; }
.form-error { background: rgba(248,113,113,0.12); border-left: 3px solid var(--danger); padding: 10px 14px; border-radius: 6px; color: var(--danger); font-size: 14px; margin-bottom: 8px; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; }
.alert-success { background: rgba(52,211,153,0.12); border-left: 3px solid var(--success); color: var(--success); }
.alert-error { background: rgba(248,113,113,0.12); border-left: 3px solid var(--danger); color: var(--danger); }
.alert-info { background: rgba(56,189,248,0.12); border-left: 3px solid var(--accent); color: var(--accent); }

/* ===== Header Buttons ===== */
.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
}
.header-btn:hover {
    background: var(--surface);
    border-color: var(--accent);
    text-decoration: none;
    color: var(--text);
}
.header-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.header-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #04121e;
}
.header-btn-primary:hover {
    background: #22b3f0;
    border-color: #22b3f0;
    color: #04121e;
}
.header-btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #2b0505;
}
.header-btn-danger:hover {
    background: #f65d5d;
    border-color: #f65d5d;
    color: #2b0505;
}
.header-profile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 9999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color 0.2s;
    text-decoration: none;
    color: var(--text);
}
.header-profile-link:hover {
    border-color: var(--accent);
    text-decoration: none;
}
.header-profile-link .profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.header-profile-link .profile-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #04121e;
}
.header-profile-link .profile-name {
    font-weight: 500;
    font-size: 14px;
}

/* CovenCoins balance pill — same gradient/premium treatment used for
   VIP badges elsewhere in the app, so it reads as part of the same
   visual language rather than a bolted-on widget. */
.header-btn-coins {
    background: linear-gradient(135deg, #f5b400, #f97316);
    border-color: transparent;
    color: #1a1200;
    font-weight: 700;
}
.header-btn-coins:hover {
    filter: brightness(1.08);
    color: #1a1200;
}

/* Unread badge */
.unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9999px;
    border: 2px solid var(--surface-2);
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
}

/* Popup dropdown
   Positioned with JS (see positionPopup() below) as position:fixed,
   anchored to the triggering button's own bounding rect and clamped
   to stay fully inside the viewport. This replaces the old
   `position:absolute; right:0` approach, which anchored to the
   button wrapper and used fixed pixel offsets on mobile
   (`right:-40px`) — those offsets didn't account for viewport width
   or which button (messages vs notifications) was pressed, so the
   popup could end up shifted off-screen or misaligned from its
   arrow depending on screen size. */
.header-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 320px;
    max-width: min(400px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    padding: 8px 0;
    z-index: 999;
    backdrop-filter: blur(12px);
    background: rgba(18,22,34,0.95);
}
.header-popup::before {
    content: '';
    position: absolute;
    top: -6px;
    /* Set per-instance by positionPopup() so the arrow keeps
       pointing at the button even when the popup itself has been
       shifted to stay on-screen. */
    right: var(--arrow-offset, 16px);
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}
.header-popup.active {
    display: block;
    animation: popupFade 0.2s ease;
}
@keyframes popupFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.popup-header {
    padding: 10px 16px 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.popup-list {
    max-height: 320px;
    overflow-y: auto;
}
.popup-item {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
    align-items: flex-start;
    cursor: pointer;
}
.popup-item:hover {
    background: var(--surface-2);
}
.popup-item:last-child {
    border-bottom: none;
}
.notif-inline-actions { display: flex; gap: 6px; margin-top: 6px; }
.notif-inline-actions .btn { padding: 4px 12px; font-size: 12px; }
.popup-item .avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--surface-2);
    overflow: hidden;
}
.popup-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.popup-item .body {
    flex: 1;
    min-width: 0;
}
.popup-item .body .title {
    font-size: 13px;
    color: var(--text);
}
.popup-item .body .title a {
    color: var(--text);
    text-decoration: none;
}
.popup-item .body .title a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.popup-item .body .meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.popup-item .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 10px;
    display: inline-block;
}

#notification-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: calc(100vw - 32px);
}
.notification-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface, #171923);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    text-decoration: none;
    color: var(--text);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}
.notification-toast.visible {
    opacity: 1;
    transform: translateX(0);
}
.notification-toast-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--surface-2);
}
.notification-toast-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.notification-toast-body { flex: 1; min-width: 0; }
.notification-toast-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.notification-toast-message {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notification-toast-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px;
    flex-shrink: 0;
}
.notification-toast-close:hover { color: var(--text); }
@media (max-width: 480px) {
    #notification-toast-stack { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; max-width: none; }
}
.popup-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
}
.popup-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.popup-footer a:hover {
    text-decoration: underline;
}
.popup-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== HIDE REQUESTS LINK ON DESKTOP, SHOW ON MOBILE ===== */
.mobile-only {
    display: none !important;
}
@media (max-width: 768px) {
    .mobile-only {
        display: inline-flex !important;
    }
}
/* Inverse of .mobile-only — Messages/Notifications popups now
   live as their own tabs in the mobile bottom bar, so they're
   hidden on mobile here to avoid showing the same thing twice,
   but desktop (which has no bottom tab bar) still needs them. */
.desktop-only {
    display: flex !important;
}
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}
/* Sidebar navigation badge */
.nav-badge {
    background: var(--accent);
    color: #04121e;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
    margin-left: auto;
    line-height: 1.4;
}

/* ===== FIX: Mobile topbar layout and hide text labels ===== */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 720px) {
    /* Hide button labels on mobile — but per request, the
       profile-name (full username next to the avatar) now
       stays visible on mobile too, so it's excluded here. */
    .header-btn .btn-label {
        display: none !important;
    }
    .header-profile-link .profile-name {
        display: inline-block !important;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Make buttons compact */
    .header-btn {
        padding: 6px 10px;
        justify-content: center;
    }
    .nav-actions {
        gap: 6px;
    }
    /* Popup adjustments: width only — actual screen position is
       computed in JS (positionPopup) so it always stays clamped
       within the viewport regardless of which button opened it. */
    .header-popup {
        min-width: 260px;
    }

    /* Flex order: brand left, nav-actions right, search below */
    .brand {
        order: 1;
    }
    .nav-actions {
        order: 2;
        margin-left: auto;
    }
    .search-form {
        order: 3;
        width: 100%;
        margin-top: 6px;
    }
}

/* ===== Maintenance Warning Banner ===== */
.maintenance-warning {
    background: #facc15;
    color: #04121e;
    padding: 10px 20px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid #eab308;
    font-size: 14px;
}
.maintenance-warning a {
    color: #04121e;
    text-decoration: underline;
    margin-left: 8px;
}
.maintenance-warning a:hover {
    text-decoration: none;
}

/* ===== Push notification permission banner ===== */
.push-permission-banner {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--surface-2, #1b2740);
    color: var(--text, #f1f5f9);
    border-bottom: 1px solid var(--border, #2a3752);
    padding: 10px 20px;
    font-size: 13px;
}
.push-permission-icon { flex-shrink: 0; }
.push-permission-text { flex: 1; min-width: 0; }
.push-permission-enable {
    background: var(--accent, #38bdf8);
    color: #04121e;
    border: none;
    padding: 6px 14px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.push-permission-enable:hover { opacity: 0.9; }
.push-permission-dismiss {
    background: transparent;
    border: none;
    color: var(--muted, #b0c4de);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 6px;
}
.push-permission-dismiss:hover { color: var(--text, #f1f5f9); }
@media (max-width: 600px) {
    .push-permission-banner { padding: 8px 12px; font-size: 12px; }
    .push-permission-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ===== Call Invite Popup (Facebook-style) ===== */
#call-invite-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
}

.call-popup-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.call-popup-card {
    background: var(--surface, #1c2333);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
    animation: callPopupIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes callPopupIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.call-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #2a3752);
    font-weight: 600;
    font-size: 16px;
    color: var(--text, #f1f5f9);
}

.call-popup-close {
    background: transparent;
    border: none;
    color: var(--muted, #b0c4de);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}
.call-popup-close:hover { color: var(--text, #fff); }

.call-popup-body {
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.call-popup-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent, #38bdf8);
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.2);
    flex-shrink: 0;
}
.call-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-popup-ringing {
    position: absolute;
    bottom: -4px;
    right: -4px;
    display: flex;
    gap: 4px;
    background: var(--bg, #0b1220);
    padding: 4px 8px;
    border-radius: 9999px;
    border: 2px solid var(--bg, #0b1220);
}
.ringing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    animation: ringingPulse 1.4s ease-in-out infinite;
}
.ringing-dot:nth-child(2) { animation-delay: 0.2s; }
.ringing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ringingPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.call-popup-info {
    text-align: center;
}
.caller-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #f1f5f9);
}
.caller-detail {
    font-size: 14px;
    color: var(--muted, #b0c4de);
    margin-top: 4px;
}

.call-popup-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.call-popup-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.call-popup-reject {
    background: #ef4444;
    color: #fff;
}
.call-popup-reject:hover { background: #dc2626; transform: scale(1.04); }

.call-popup-join {
    background: var(--accent, #38bdf8);
    color: #04121e;
}
.call-popup-join:hover { background: #22b3f0; transform: scale(1.04); }

@media (max-width: 480px) {
    .call-popup-card { max-width: 100%; margin: 10px; }
    .call-popup-avatar { width: 80px; height: 80px; }
    .caller-name { font-size: 18px; }
    .call-popup-btn { padding: 10px 20px; font-size: 14px; }
}