/* ============================================================
   Broke. — Mobile-First Glassmorphic Design System
   Incorporating Twitter Bootstrap 5 Elements with Translucent Glass
   ============================================================ */

/* ── Custom Theme Tokens & Bootstrap Overrides ── */
:root {
    /* Base Glass Palettes */
    --bs-body-bg: #050709;
    --bs-body-color: #f8fafc;
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-cyan: #06b6d4;
    --bs-cyan-rgb: 6, 182, 212;

    /* Frosted Glass Layers */
    --glass-bg-base: rgba(15, 23, 42, 0.65);
    --glass-bg-card: rgba(22, 31, 50, 0.60);
    --glass-bg-surface: rgba(30, 41, 59, 0.55);
    --glass-bg-navbar: rgba(5, 7, 9, 0.82);
    --glass-bg-input: rgba(10, 14, 26, 0.85);
    --glass-bg-modal: rgba(15, 23, 42, 0.92);

    /* Translucent Borders & Specular Highlights */
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-subtle: rgba(255, 255, 255, 0.08);
    --glass-border-highlight: rgba(124, 58, 237, 0.45);
    --glass-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 32px rgba(0, 0, 0, 0.35);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
    --gradient-brand-hover: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.25), transparent 70%);

    /* Radii & Safe Areas */
    --radius-pill: 9999px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-height: 58px;
}

/* ── Base Mobile-First Typography & Resets ── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ── Ambient Glowing Orbs Background (Shines through Translucent Glass) ── */
.glass-bg-canvas {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.32;
}

.orb-1 {
    width: 380px;
    height: 380px;
    background: #7c3aed;
    top: -100px;
    right: -80px;
    animation: floatOrb 20s ease-in-out infinite;
}

.orb-2 {
    width: 320px;
    height: 320px;
    background: #06b6d4;
    bottom: -80px;
    left: -80px;
    animation: floatOrb 18s ease-in-out infinite reverse;
}

.orb-3 {
    width: 260px;
    height: 260px;
    background: #ec4899;
    top: 45%;
    left: 35%;
    opacity: 0.18;
}

/* ── SPA Views Container ── */
.view {
    display: none;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    position: relative;
    z-index: 1;
}

.view.active {
    display: flex;
    flex-direction: column;
    animation: fadeInView 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Translucent Glass Navbar (Bootstrap .navbar) ── */
.glass-navbar {
    background: var(--glass-bg-navbar) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    padding-top: calc(var(--safe-top) + 6px);
    padding-bottom: 6px;
    height: calc(var(--header-height) + var(--safe-top));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    z-index: 1030;
}

.logo-text {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.accent, .text-primary-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Live Pulse Badges */
.live-badge-nav {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981 !important;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
}

.live-badge-card {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981 !important;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 9px;
}

.live-badge-counter {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981 !important;
    font-size: 0.75rem;
}

.live-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    animation: pulse 1.8s infinite;
}

/* ── Translucent Glass Cards (Bootstrap .card) ── */
.glass-card {
    background: var(--glass-bg-card);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: var(--glass-specular-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-card {
    position: relative;
    padding: 1.25rem;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-gradient, var(--gradient-brand));
}

.room-card:active {
    transform: scale(0.98);
}

@media (hover: hover) {
    .room-card:hover {
        transform: translateY(-3px);
        border-color: var(--glass-border-highlight);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 32px rgba(124, 58, 237, 0.25);
    }
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Bootstrap Nav-Pills Category Ribbon (Horizontal Swipe on Mobile) ── */
.category-pills-container {
    margin: 0 -0.75rem 1rem;
    padding: 0 0.75rem;
}

.scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.nav-pills .filter-btn {
    background: var(--glass-bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-subtle);
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 14px;
    white-space: nowrap;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-pills .filter-btn:active {
    transform: scale(0.95);
}

.nav-pills .filter-btn.active {
    background: var(--gradient-brand) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
}

/* ── Bootstrap Button System & Translucent Variations ── */
.btn-gradient-primary {
    background: var(--gradient-brand);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-gradient-primary:hover, .btn-gradient-primary:focus {
    background: var(--gradient-brand-hover);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.btn-gradient-primary:active {
    transform: scale(0.96);
}

.btn-outline-glass {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
}

.btn-outline-glass:hover, .btn-outline-glass:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-icon-glass {
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    color: #ffffff;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-icon-glass:active {
    transform: scale(0.92);
}

/* Google Sign-in Glass Pill */
.btn-signin-glass {
    background: #ffffff;
    color: #1f2937;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease;
}

.btn-signin-glass:active {
    transform: scale(0.95);
}

/* Signed-in User Pill */
.user-signed-in-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 3px 6px 3px 4px;
}

.user-photo {
    width: 24px;
    height: 24px;
    object-fit: cover;
    background: var(--bs-primary);
}

.user-display-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-signout-link {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0 2px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.btn-signout-link:hover {
    color: #ef4444;
}

/* ── Form Controls with Glassmorphic Overrides ── */
.form-control-glass, .form-select-glass {
    background-color: var(--glass-bg-input) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    color: #ffffff !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-glass:focus, .form-select-glass:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25) !important;
}

.form-control-glass::placeholder {
    color: #64748b;
}

.form-select-glass option {
    background-color: #0f172a;
    color: #ffffff;
}

/* ── Chat Stream Layout ── */
#view-chat {
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
}

.messages-area {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease;
    animation: messageFadeIn 0.2s ease;
}

.message:hover, .message:active {
    background: rgba(255, 255, 255, 0.06);
}

.message-avatar, .message-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.message-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.message-username {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.message-time {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
}

.message-text {
    font-size: 0.9375rem;
    line-height: 1.45;
    word-break: break-word;
    color: #f8fafc !important;
}

/* Floating Jump to Live Glass Button */
.btn-glass-floating {
    position: absolute;
    bottom: calc(96px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-highlight);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 30;
    animation: fadeSlideUp 0.25s ease;
}

.btn-glass-floating:hover {
    background: rgba(124, 58, 237, 0.4);
    color: #ffffff;
}

/* ── Chat Input Bottom Dock (Translucent Glass Dock) ── */
.chat-input-dock {
    position: relative;
    z-index: 40;
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: var(--glass-bg-navbar);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--glass-border);
}

/* Quick Reactions Ribbon — Floating Pill Toolbar Sitting on Top of Input Box */
.quick-reactions-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.quick-reactions-ribbon::-webkit-scrollbar {
    display: none;
}

.btn-glass-emoji {
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    padding: 3px 7px;
    font-size: 1.2rem;
    line-height: 1;
    color: #ffffff;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-glass-emoji:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.15);
}

.btn-glass-emoji:active {
    transform: scale(1.35);
    background: rgba(124, 58, 237, 0.35);
}

/* ── Bootstrap Input Group for Chat (Unified Pill Component) ── */
.input-group-chat {
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--glass-bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.input-group-chat:focus-within {
    border-color: var(--bs-primary);
    background: rgba(30, 41, 59, 0.85);
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.input-group-chat .form-control-chat {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    padding: 10px 16px 10px 18px;
    box-shadow: none !important;
    line-height: 1.4;
}

.input-group-chat .form-control-chat::placeholder {
    color: #64748b;
    font-size: 0.9375rem;
}

.input-group-chat .btn-chat-send {
    background: var(--gradient-brand) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.input-group-chat .btn-chat-send:not(:disabled) {
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.45);
}

.input-group-chat .btn-chat-send:not(:disabled):hover {
    background: var(--gradient-brand-hover) !important;
}

.input-group-chat .btn-chat-send:not(:disabled):active {
    transform: scale(0.92);
}

/* ── Translucent Glass Modal (Mobile-First Bottom Sheet / Centered Dialog) ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(5, 7, 9, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeInModal 0.2s ease;
}

.modal-overlay.active {
    display: flex;
}

.modal-dialog-custom {
    width: 100%;
    max-width: 500px;
}

.modal-content-custom {
    background: var(--glass-bg-modal);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 12px 1.25rem calc(1.5rem + var(--safe-bottom));
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
    animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sheet-drag-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    margin: 0 auto 12px;
}

/* ── Progressive Enhancement (Tablet & Desktop) ── */
@media (min-width: 768px) {
    .modal-overlay {
        align-items: center;
        padding: 1rem;
    }

    .modal-content-custom {
        border-radius: 1.25rem;
        padding: 1.75rem;
    }

    .sheet-drag-handle {
        display: none;
    }

    .user-display-name {
        max-width: 160px;
    }
}

/* ── Animations ── */
@keyframes fadeInView {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}