/* /Layout/MainLayout.razor.rz.scp.css */
:root[b-yuag8vqax6] {
    --container-max: 1000px;
}

.app-header[b-yuag8vqax6] {
    background-color: var(--color-bg-header);
    border-bottom: 1px solid var(--color-border-primary);
    padding: 10px 30px;
    box-shadow: 0 2px 8px var(--color-shadow-card);
    position: relative;
    flex-shrink: 0;
    z-index: 100;
}

.header-content[b-yuag8vqax6] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    gap: 1rem;
    position: relative;
}

.header-left[b-yuag8vqax6],
.header-center[b-yuag8vqax6],
.header-right[b-yuag8vqax6] {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
}

.header-left[b-yuag8vqax6] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
}

.header-center[b-yuag8vqax6] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-right[b-yuag8vqax6] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

/* --- STATS DISPLAY (Sway + Level) --- */
.stats-display[b-yuag8vqax6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-right: 25px;
}

.sway-display[b-yuag8vqax6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #F9A825;
}

.level-display[b-yuag8vqax6] {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #2A67B1;
}

.level-progress-section[b-yuag8vqax6] {
    padding: 10px 15px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.level-progress-label[b-yuag8vqax6] {
    font-size: 14px;
    font-weight: 700;
    color: #2A67B1;
}

.level-progress-xp[b-yuag8vqax6] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.xp-bar-track[b-yuag8vqax6] {
    height: 6px;
    background-color: var(--color-xp-bar-track);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.xp-bar-fill[b-yuag8vqax6] {
    height: 100%;
    background-color: #2A67B1;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.branding[b-yuag8vqax6] {
    margin: 0;
    display: flex;
    align-items: center;
}

.brand-link[b-yuag8vqax6] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo[b-yuag8vqax6] {
    height: 64px;
    width: auto;
}

.brand-name[b-yuag8vqax6] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    white-space: nowrap;
}

.logo-dark[b-yuag8vqax6] { display: none; }
.logo-light[b-yuag8vqax6] { display: block; }

.nav-tabs[b-yuag8vqax6] {
    flex-grow: 1;
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-icons[b-yuag8vqax6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: center;
    overflow: visible;
    margin: 0;
}

.nav-icon[b-yuag8vqax6] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    color: var(--color-brand-blue);
}

.nav-icon:hover[b-yuag8vqax6] {
    background-color: var(--color-bg-hover);
    color: #87ceeb;
    transform: translateY(-1px);
}

.nav-icon img[b-yuag8vqax6],
.nav-icon svg[b-yuag8vqax6] {
    width: 64px;
    height: 64px;
    display: block;
    fill: currentColor;
    padding: 0;
}

.premium-badge[b-yuag8vqax6]::after {
    content: 'PRO';
    background-color: #FFD700;
    color: #333;
    font-size: 0.6em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
}

.btn-header-right[b-yuag8vqax6] {
    width: 64px;
    height: 64px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    border: none;
    background-color: #2A67B1;
    color: white;
    cursor: pointer;

    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(42, 103, 177, 0.4);
}

.btn-header-right:hover[b-yuag8vqax6] {
    background-color: #49BBD7;
    box-shadow: 0 6px 15px rgba(42, 103, 177, 0.6);
    transform: translateY(-1px);
}

.btn-header-right svg[b-yuag8vqax6] {
    fill: currentColor;

    width: 48px;
    height: 48px;

    max-width: 100%;
    max-height: 100%;
    display: block;
}

.account-icon[b-yuag8vqax6] {
    padding: 0;
}

.dropdown-container[b-yuag8vqax6] {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-account[b-yuag8vqax6] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
}

.dropdown-overlay[b-yuag8vqax6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
}

.dropdown-menu[b-yuag8vqax6] {
    display: block !important;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    width: 200px;
    background: linear-gradient(160deg, var(--color-bg-dropdown), var(--color-bg-surface));
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--color-shadow-card);
    z-index: 999;
    padding: 5px 0;
    animation: fadeIn 0.2s ease-out;
}

.dropdown-item[b-yuag8vqax6] {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    text-decoration: none;
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    font-size: 15px;
    font-family: inherit;
    font-weight: normal;
}

.dropdown-item:hover[b-yuag8vqax6] {
    background-color: var(--color-bg-hover);
    color: #87ceeb;
}

.dropdown-divider[b-yuag8vqax6] {
    height: 1px;
    margin: 5px 0;
    background-color: var(--color-border-primary);
}

.discord-item[b-yuag8vqax6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-toggle-item[b-yuag8vqax6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-toggle-icon[b-yuag8vqax6] {
    font-size: 1.2em;
    line-height: 1;
}

.btn-logout[b-yuag8vqax6] {
    color: #e57373;
}

.btn-logout:hover[b-yuag8vqax6] {
    background-color: rgba(229, 115, 115, 0.15);
    color: #ef5350;
}

.service-unavailable-alert[b-yuag8vqax6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    background-color: #fef2f2;
    border: 4px solid #fca5a5;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.alert-icon[b-yuag8vqax6] {
    width: 4rem;
    height: 4rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

.alert-title[b-yuag8vqax6] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 0.5rem;
}

.alert-message[b-yuag8vqax6] {
    color: #4b5563;
    margin-bottom: 1rem;
}

.alert-button[b-yuag8vqax6] {
    background-color: #dc2626;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 150ms ease-in-out;
    border: none;
    cursor: pointer;
}

.alert-button:hover[b-yuag8vqax6] {
    background-color: #b91c1c;
}

@media (max-width: 900px) {
    .brand-name[b-yuag8vqax6] { display: none; }
    .logo[b-yuag8vqax6] { height: 50px; }

    .header-content[b-yuag8vqax6] {
        grid-template-columns: auto 1fr auto;
    }
    .nav-icons[b-yuag8vqax6] { gap: 15px; }
    .nav-icon[b-yuag8vqax6], .btn-header-right[b-yuag8vqax6] {
        width: 50px;
        height: 50px;
    }
    .nav-icon svg[b-yuag8vqax6], .btn-header-right svg[b-yuag8vqax6] {
        width: 48px;
        height: 48px;
    }
    .btn-header-right svg[b-yuag8vqax6] {
        width: 32px;
        height: 32px;
    }

    .stats-display[b-yuag8vqax6] {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        margin-right: 12px;
    }

    .sway-display[b-yuag8vqax6],
    .level-display[b-yuag8vqax6] {
        font-size: 1rem;
    }

    .sway-display[b-yuag8vqax6]  svg {
        width: 18px;
        height: 18px;
    }

    /* Logged-in mobile: two-row header */
    .header-content.logged-in[b-yuag8vqax6] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 1rem;
    }

    .header-content.logged-in .brand-name[b-yuag8vqax6] {
        display: inline;
    }

    .header-content.logged-in .header-left[b-yuag8vqax6] {
        grid-column: 1;
        grid-row: 1;
    }

    .header-content.logged-in .header-right[b-yuag8vqax6] {
        grid-column: 2;
        grid-row: 1;
    }

    .header-content.logged-in .header-center[b-yuag8vqax6] {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
    }

    .header-content.logged-in .stats-display[b-yuag8vqax6] {
        flex-direction: row;
        gap: 12px;
    }
}
/* /Modals/BubbleInfoForm.razor.rz.scp.css */
.modal-form[b-a0k46ho7ak] {
    max-width: 600px;
    padding: 25px 30px;
}

.bubble-details-content[b-a0k46ho7ak] {
    text-align: left;
}

.topics[b-a0k46ho7ak] {
    margin-bottom: 15px;
}

.details[b-a0k46ho7ak] {
    font-size: 1em;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- EDIT MODE: FORM SECTIONS --- */
.form-group.compact[b-a0k46ho7ak] {
    margin-bottom: 15px;
}

.form-group.no-margin-bottom[b-a0k46ho7ak] {
    margin-bottom: 0;
}

.short-textarea[b-a0k46ho7ak] {
    resize: none;
    min-height: 70px;
}

.divider[b-a0k46ho7ak] {
    border: 0;
    border-top: 1px dashed var(--color-border-primary);
    margin: 15px 0;
}

/* --- EDIT MODE: ATMOSPHERE --- */
.atmosphere-section[b-a0k46ho7ak] {
    margin-bottom: 20px;
}

.section-label[b-a0k46ho7ak] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 800;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

/* --- EDIT MODE: SELECTION CARDS --- */
.selection-grid[b-a0k46ho7ak] {
    display: flex;
    gap: 10px;
}

.selection-card[b-a0k46ho7ak] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid var(--color-border-primary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: var(--color-bg-input);
    min-height: 100px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.selection-card:hover[b-a0k46ho7ak] {
    border-color: #b3e5fc;
    transform: translateY(-2px);
}

.selection-card.selected[b-a0k46ho7ak] {
    border-color: #87ceeb;
    background-color: rgba(135, 206, 235, 0.1);
}

.selection-card input[b-a0k46ho7ak] { display: none; }

.card-text[b-a0k46ho7ak] {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-title[b-a0k46ho7ak] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.selection-card.selected .card-title[b-a0k46ho7ak] { color: var(--color-brand-blue); }

.card-sub[b-a0k46ho7ak] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.1;
}

.card-icon[b-a0k46ho7ak] {
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

.selection-card.selected .card-icon.icon-brainstorm[b-a0k46ho7ak] { color: #2196F3; }
.selection-card.selected .card-icon.icon-counterpoint[b-a0k46ho7ak] { color: #FF9800; }

/* --- EDIT MODE: TIMING BAR --- */
.timing-bar[b-a0k46ho7ak] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(135, 206, 235, 0.08);
    border: 1px solid rgba(135, 206, 235, 0.2);
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 15px;
}

.toggle-group[b-a0k46ho7ak] {
    display: flex;
    background: var(--color-bg-input);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--color-border-primary);
}

.toggle-btn[b-a0k46ho7ak] {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn input[b-a0k46ho7ak] { display: none; }

.toggle-btn.active[b-a0k46ho7ak] {
    background: #87ceeb;
    color: white;
    box-shadow: 0 2px 6px rgba(135, 206, 235, 0.4);
}

.date-picker-wrapper[b-a0k46ho7ak] {
    flex-grow: 1;
}

/* --- EDIT MODE: ERROR BANNER --- */
.server-error-banner[b-a0k46ho7ak] {
    background-color: rgba(229, 115, 115, 0.15);
    color: #e57373;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.9em;
    text-align: center;
}

/* --- EDIT MODE: BUTTONS --- */
.button-row[b-a0k46ho7ak] {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.button-row .btn-primary[b-a0k46ho7ak] {
    flex: 1;
    margin-bottom: 0;
}

.btn-primary[b-a0k46ho7ak] {
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* --- ATMOSPHERE BANNER (view mode) --- */
.atmosphere-banner[b-a0k46ho7ak] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid transparent;
}

.atmosphere-banner.brainstorm[b-a0k46ho7ak] {
    background-color: rgba(33, 150, 243, 0.1);
    border-left-color: #2196F3;
    color: #2196F3;
}

.atmosphere-banner.counterpoint[b-a0k46ho7ak] {
    background-color: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
    color: #ff9800;
}

.atmo-icon-container[b-a0k46ho7ak] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.atmo-text[b-a0k46ho7ak] {
    display: flex;
    flex-direction: column;
}

.atmo-label[b-a0k46ho7ak] {
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.atmo-desc[b-a0k46ho7ak] {
    font-size: 0.85em;
    opacity: 0.9;
}

/* --- STATUS BAR --- */
.status-bar[b-a0k46ho7ak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed var(--color-border-primary);
    border-bottom: 1px dashed var(--color-border-primary);
    margin-bottom: 15px;
}

.stat-members-detail[b-a0k46ho7ak] {
    font-size: 1em;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.stat-availability[b-a0k46ho7ak] {
    font-size: 0.9em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.stat-availability.available[b-a0k46ho7ak] {
    background-color: rgba(0, 128, 0, 0.12);
    color: #4caf50;
}

.stat-availability.waiting[b-a0k46ho7ak] {
    background-color: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.stat-availability.failed[b-a0k46ho7ak] {
    background-color: rgba(229, 115, 115, 0.15);
    color: #e57373;
}

/* Scheduled Start Time Display */
.scheduled-info[b-a0k46ho7ak] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.scheduled-label[b-a0k46ho7ak] {
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.countdown-badge[b-a0k46ho7ak] {
    font-size: 0.9em;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 15px;
    background-color: rgba(135, 206, 235, 0.2);
    color: #3a9fc2;
    min-width: 60px;
    text-align: center;
}

/* Buttons */
.btn-secondary[b-a0k46ho7ak] {
    margin-top: 10px;
}

.btn-join[b-a0k46ho7ak] {
    background-color: #4CAF50;
    color: white;
}

.btn-join:hover[b-a0k46ho7ak] {
    background-color: #45a049;
}

.btn-leave[b-a0k46ho7ak] {
    background-color: #e57373;
    color: white;
}

.btn-leave:hover[b-a0k46ho7ak] {
    background-color: #d32f2f;
}

/* Reschedule Section */
.reschedule-section[b-a0k46ho7ak] {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--color-bg-details-toggle);
    border-radius: 10px;
}

.reschedule-message[b-a0k46ho7ak] {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.reschedule-section .form-group[b-a0k46ho7ak] {
    margin-bottom: 0;
}

.reschedule-section .form-control[b-a0k46ho7ak] {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--color-border-primary);
    border-radius: 10px;
    font-size: 1em;
}

.reschedule-section .form-control:focus[b-a0k46ho7ak] {
    border-color: #87ceeb;
    outline: none;
}

.error-message[b-a0k46ho7ak] {
    background-color: rgba(229, 115, 115, 0.15);
    color: #e57373;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

.btn-reschedule[b-a0k46ho7ak] {
    background-color: #87ceeb;
    color: white;
    margin-bottom: 10px;
}

.btn-reschedule:hover[b-a0k46ho7ak] {
    background-color: #6bb8d9;
}
/* /Modals/ChangePasswordDialog.razor.rz.scp.css */
.modal-form[b-u718ydozvi] {
    max-width: 400px;
}

.form-group[b-u718ydozvi] {
    margin-bottom: 20px;
    width: 100%;
}

.modal-actions[b-u718ydozvi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.server-error-banner[b-u718ydozvi] {
    background-color: rgba(229, 115, 115, 0.1);
    border: 1px solid #e57373;
    color: #b05757;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
/* /Modals/CreateBubbleForm.razor.rz.scp.css */
/* --- BASE MODAL --- */
.modal-form[b-2ne97xtoem] {
    max-width: 600px;
    padding: 25px 30px;
}

@media (max-width: 620px) {
    .modal-form[b-2ne97xtoem] {
        width: 95%;
        padding: 20px;
    }
}

.modal-header[b-2ne97xtoem] {
    margin-bottom: 5px;
    text-align: center;
}

.modal-intro-text[b-2ne97xtoem] {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* --- INPUTS --- */
.form-group.compact[b-2ne97xtoem] {
    margin-bottom: 15px;
}

.form-group.no-margin-bottom[b-2ne97xtoem] {
    margin-bottom: 0;
}

.short-textarea[b-2ne97xtoem] {
    resize: none;
    min-height: 70px;
}

.divider[b-2ne97xtoem] {
    border: 0;
    border-top: 1px dashed var(--color-border-primary);
    margin: 15px 0;
}

.atmosphere-section[b-2ne97xtoem] {
    margin-bottom: 20px;
}

.section-label[b-2ne97xtoem] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 800;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

/* --- SELECTION CARDS --- */
.selection-grid[b-2ne97xtoem] {
    display: flex;
    gap: 10px;
}

.selection-card[b-2ne97xtoem] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid var(--color-border-primary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: var(--color-bg-input);
    min-height: 100px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.selection-card:hover[b-2ne97xtoem] {
    border-color: #b3e5fc;
    transform: translateY(-2px);
}

.selection-card.selected[b-2ne97xtoem] {
    border-color: #87ceeb;
    background-color: rgba(135, 206, 235, 0.1);
}

.selection-card input[b-2ne97xtoem] { display: none; }

.card-text[b-2ne97xtoem] {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-title[b-2ne97xtoem] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.selection-card.selected .card-title[b-2ne97xtoem] { color: var(--color-brand-blue); }

.card-sub[b-2ne97xtoem] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.1;
}

/* Icons */
.card-icon[b-2ne97xtoem] {
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

/* Atmosphere Colors */
.selection-card.selected .card-icon.icon-brainstorm[b-2ne97xtoem] { color: #2196F3; }
.selection-card.selected .card-icon.icon-counterpoint[b-2ne97xtoem] { color: #FF9800; }

/* --- TIMING BAR --- */
.timing-bar[b-2ne97xtoem] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(135, 206, 235, 0.08);
    border: 1px solid rgba(135, 206, 235, 0.2);
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 15px;
}

.toggle-group[b-2ne97xtoem] {
    display: flex;
    background: var(--color-bg-input);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(135, 206, 235, 0.1);
}

.toggle-btn[b-2ne97xtoem] {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn input[b-2ne97xtoem] { display: none; }

.toggle-btn.active[b-2ne97xtoem] {
    background: #87ceeb; /* Brand Teal */
    color: white;
    box-shadow: 0 2px 6px rgba(135, 206, 235, 0.4);
}

.date-picker-wrapper[b-2ne97xtoem] {
    flex-grow: 1;
}

/* --- BUTTONS --- */
.btn-primary[b-2ne97xtoem] {
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.btn-secondary[b-2ne97xtoem] {
    margin-top: 0;
}
/* /Modals/LoginForm.razor.rz.scp.css */
.modal-form[b-cqqb2nt2r3] {
    max-width: 400px;
}

/* -------------------------------------- */
/* 1. Form Group and Toggle Footer        */
/* -------------------------------------- */

.form-group[b-cqqb2nt2r3] {
    margin-bottom: 20px;
    width: 100%;
}

/* Toggle Link Footer - UNIQUE TO MODAL */
.toggle-state-footer[b-cqqb2nt2r3] {
    text-align: center;
    margin-top: 25px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.toggle-state-footer button[b-cqqb2nt2r3] {
    background: none;
    border: none;
    color: #87ceeb; /* Use the primary logo teal for the link */
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    margin-left: 5px;
    text-decoration: none;
}

.toggle-state-footer button:hover[b-cqqb2nt2r3] {
    color: #6aadda;
    text-decoration: underline;
}

/* -------------------------------------- */
/* 2. Server Error Banner Style         */
/* -------------------------------------- */
.server-error-banner[b-cqqb2nt2r3] {
    /* Uses our error color #e57373 */
    background-color: rgba(229, 115, 115, 0.1);
    border: 1px solid #e57373;
    color: #b05757; /* A slightly darker red for contrast */
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    /* Ensure it scales correctly inside the modal */
    width: 100%;
    box-sizing: border-box;
}

.btn-secondary[b-cqqb2nt2r3] {
    margin-top: 10px;
}

/* -------------------------------------- */
/* 3. Remember Me Checkbox                */
/* -------------------------------------- */
.remember-me-group[b-cqqb2nt2r3] {
    margin-bottom: 20px;
    width: 100%;
}

.remember-me-label[b-cqqb2nt2r3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* -------------------------------------- */
/* 4. Forgot Password Link                */
/* -------------------------------------- */
.forgot-password-group[b-cqqb2nt2r3] {
    text-align: right;
    margin-top: -10px;
    margin-bottom: 15px;
}

.forgot-password-link[b-cqqb2nt2r3] {
    background: none;
    border: none;
    color: #87ceeb;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
}

.forgot-password-link:hover[b-cqqb2nt2r3] {
    color: #6aadda;
    text-decoration: underline;
}
/* /Modals/OnboardingDialog.razor.rz.scp.css */
/* ================================================= */
/* OnboardingDialog -- Scoped Component Styles       */
/* ================================================= */

/* The backdrop is defined globally in app.css (.modal-backdrop).
   No local redefinition needed -- stopPropagation on the modal
   prevents backdrop clicks from closing the dialog. */

.onboarding-modal[b-clkiqmbmjx] {
    background-color: var(--color-bg-surface);
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(135, 206, 235, 0.2);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

/* ------------------------------------------ */
/* Headings                                    */
/* ------------------------------------------ */

.onboarding-modal h2[b-clkiqmbmjx] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.3;
}

.onboarding-modal h3[b-clkiqmbmjx] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* ------------------------------------------ */
/* Body text                                   */
/* ------------------------------------------ */

.onboarding-modal p[b-clkiqmbmjx] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}

.onboarding-modal p:last-of-type[b-clkiqmbmjx] {
    margin-bottom: 0;
}

.onboarding-modal ul[b-clkiqmbmjx] {
    padding-left: 20px;
    margin-bottom: 14px;
    color: var(--color-text-secondary);
}

.onboarding-modal li[b-clkiqmbmjx] {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* ------------------------------------------ */
/* "Got it" button                             */
/* ------------------------------------------ */

.got-it-btn[b-clkiqmbmjx] {
    margin-top: 28px;
    /* Full-width and pill-shaped comes from global .btn-primary */
}

/* ------------------------------------------ */
/* Responsive: minimum readable at 375px       */
/* ------------------------------------------ */

@media (max-width: 520px) {
    .onboarding-modal[b-clkiqmbmjx] {
        padding: 24px;
        width: 92%;
    }

    .onboarding-modal h2[b-clkiqmbmjx] {
        font-size: 1.5rem;
    }
}
/* /Modals/UpdateEmailDialog.razor.rz.scp.css */
.modal-form[b-o25f6gy163] {
    max-width: 400px;
}

.form-group[b-o25f6gy163] {
    margin-bottom: 20px;
    width: 100%;
}

.modal-actions[b-o25f6gy163] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.server-error-banner[b-o25f6gy163] {
    background-color: rgba(229, 115, 115, 0.1);
    border: 1px solid #e57373;
    color: #b05757;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
/* /Pages/Account.razor.rz.scp.css */
/* ============================================= */
/* Account Settings Page                         */
/* ============================================= */

.account-page[b-f2qjwobdir] {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* -------------------------------------- */
/* 1. Page Header                         */
/* -------------------------------------- */

.header-section[b-f2qjwobdir] {
    margin-bottom: 40px;
    text-align: center;
}

.header-section h1[b-f2qjwobdir] {
    font-size: 2.5em;
    color: #3f51b5;
    margin: 0 0 10px;
}

.subtitle[b-f2qjwobdir] {
    font-size: 1.1em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* -------------------------------------- */
/* 2. Section Cards                       */
/* -------------------------------------- */

.section-card[b-f2qjwobdir] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 35px;
    margin-bottom: 30px;
}

.section-label[b-f2qjwobdir] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #87ceeb;
    margin: 0 0 20px;
}

/* -------------------------------------- */
/* 3. Email Display                       */
/* -------------------------------------- */

.email-display[b-f2qjwobdir] {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin: 0 0 20px;
    padding: 12px 15px;
    background: var(--color-bg-hover);
    border-radius: 8px;
    word-break: break-word;
}

.no-email-note[b-f2qjwobdir] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 20px;
    padding: 12px 15px;
    background: var(--color-bg-hover);
    border-radius: 8px;
    border-left: 3px solid #87ceeb;
}

/* -------------------------------------- */
/* 4. Success Banner                      */
/* -------------------------------------- */

.success-banner[b-f2qjwobdir] {
    background-color: rgba(135, 206, 235, 0.1);
    border: 1px solid #87ceeb;
    color: #2a8fb5;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------- */
/* 5. Responsive                          */
/* -------------------------------------- */

@media (max-width: 900px) {
    .account-page[b-f2qjwobdir] {
        padding: 20px 15px;
    }

    .section-card[b-f2qjwobdir] {
        padding: 25px 20px;
    }
}
/* /Pages/Burst.razor.rz.scp.css */
/* --- LAYOUT STRUCTURE --- */
.burst-page-layout[b-8cqqd43j6z] {
    height: 100%;
    display: flex;       /* ESTABLISH FLEX COLUMN */
    flex-direction: column;
    overflow: hidden;    /* Prevent body scroll */
    background-color: var(--color-bg-page);
    position: relative;
}

/* --- ZONE 1: FIXED HEADER --- */
.burst-fixed-header[b-8cqqd43j6z] {
    flex-shrink: 0;      /* Never shrink */
    background-color: var(--color-bg-page); /* Match page bg */
    padding: 20px 40px 20px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Subtle separation line */
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); /* Very faint shadow */
}

.header-content-wrapper[b-8cqqd43j6z] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.burst-date[b-8cqqd43j6z] {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.burst-page-title[b-8cqqd43j6z] {
    font-size: 2.2rem;   /* Matches Verification Page */
    font-weight: 700;    /* Matches Verification Page */
    color: var(--color-brand-blue);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.burst-topic-row[b-8cqqd43j6z] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topic-pill[b-8cqqd43j6z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border-primary);
    padding: 4px 12px;
    border-radius: 20px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- ZONE 2: SCROLL AREA --- */
.burst-scroll-area[b-8cqqd43j6z] {
    flex-grow: 1;        /* Take up remaining space */
    overflow-y: auto;    /* ENABLE SCROLL HERE */
    padding: 30px 40px 0 40px;

    /* Smooth Scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.burst-content-container[b-8cqqd43j6z] {
    max-width: 800px;
    margin: 0 auto;
}

.scroll-pad[b-8cqqd43j6z] {
    height: 60px; /* Extra space at bottom so content isn't flush with screen edge */
}

/* --- CARDS & CONTENT --- */
.section-card[b-8cqqd43j6z] {
    background: var(--color-bg-surface);
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.section-label[b-8cqqd43j6z] {
    margin-top: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #87ceeb;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Summary Typography - MATCHING VERIFICATION PAGE */
.summary-text[b-8cqqd43j6z] {
    line-height: 1.6;
    color: var(--color-text-primary);
    font-size: 1.05rem;
    white-space: pre-wrap;
    font-family: inherit;
}

/* --- DATA SECTION --- */
.data-section[b-8cqqd43j6z] {
    margin-top: 10px;
}

.questions-grid[b-8cqqd43j6z] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-text[b-8cqqd43j6z] {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--color-brand-blue);
    margin-bottom: 25px;
}

.answers-list[b-8cqqd43j6z] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.answer-row[b-8cqqd43j6z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.answer-info[b-8cqqd43j6z] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.vote-count[b-8cqqd43j6z] {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.9rem;
}

.progress-track[b-8cqqd43j6z] {
    width: 100%;
    height: 10px;
    background-color: var(--color-xp-bar-track);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill[b-8cqqd43j6z] {
    height: 100%;
    background-color: #87ceeb;
    border-radius: 5px;
    transition: width 1s ease-out;
}

.my-vote-check[b-8cqqd43j6z] {
    color: #87ceeb;
    font-size: 0.95rem;
    font-weight: 700;
    margin-right: 4px;
    cursor: default;
}

.tension-label[b-8cqqd43j6z] {
    margin-top: 10px;
    margin-bottom: 0;
}

.tension-body[b-8cqqd43j6z] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tension-header[b-8cqqd43j6z] {
    display: none;
}

.tension-anchor[b-8cqqd43j6z] {
    display: block;
    text-align: center;
}

.tension-vs[b-8cqqd43j6z] {
    display: block;
    text-align: center;
    width: 100%;
    font-style: normal;
    color: #bbb;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* --- COLLAPSIBLE TOPICS (mobile only) --- */
.topics-toggle[b-8cqqd43j6z] {
    display: none; /* Hidden on desktop */
}

@media (max-width: 900px) {
    .burst-page-title[b-8cqqd43j6z] {
        font-size: 1.2rem;
    }

    .burst-fixed-header[b-8cqqd43j6z] {
        padding: 15px 20px;
    }

    .burst-date[b-8cqqd43j6z] {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }

    .topics-toggle[b-8cqqd43j6z] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1px solid var(--color-border-primary);
        border-radius: 20px;
        padding: 4px 14px;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        margin: 8px auto 0 auto;
    }

    .topics-toggle:hover[b-8cqqd43j6z] {
        background-color: var(--color-bg-surface);
    }

    .topics-toggle-arrow[b-8cqqd43j6z] {
        font-size: 0.6rem;
        transition: transform 0.2s ease;
    }

    .topics-toggle-arrow.expanded[b-8cqqd43j6z] {
        transform: rotate(180deg);
    }

    .burst-topic-row[b-8cqqd43j6z] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        margin-top: 0;
    }

    .burst-topic-row.topics-expanded[b-8cqqd43j6z] {
        max-height: 200px;
        opacity: 1;
        margin-top: 8px;
    }
}
/* /Pages/Chat.razor.rz.scp.css */
/* -------------------------------------- */
/* 1. Page Layout & Overall Structure     */
/* -------------------------------------- */

.chat-page[b-ggvd8rsagu] {
    /* The .page class from app.css provides max-width: 1200px and margin: 0 auto.
       We make it a flex container to manage vertical space: Header | Messages | Input */
    display: flex;
    flex-direction: column;
    height: calc(100% - 12px); /* Leave room above the border for the username label */
    margin-top: 12px;
    padding: 1.1rem 20px 0 20px;
    position: relative;      /* Set this as the reference point for absolute positioning */
    border: 3px solid transparent;
    border-radius: 12px;
}

/* --- Dynamic Color Definitions --- */
.chat-page.border-Blue[b-ggvd8rsagu] { border-color: #1E88E5 !important; }
.chat-page.border-Green[b-ggvd8rsagu] { border-color: #43A047 !important; }
.chat-page.border-Purple[b-ggvd8rsagu] { border-color: #8E24AA !important; }
.chat-page.border-Red[b-ggvd8rsagu] { border-color: #E53935 !important; }
.chat-page.border-Orange[b-ggvd8rsagu] { border-color: #FB8C00 !important; }
.chat-page.border-Yellow[b-ggvd8rsagu] { border-color: #F9A825 !important; }
.chat-page.border-Grey[b-ggvd8rsagu] { border-color: #757575 !important; }
.chat-page.border-Brown[b-ggvd8rsagu] { border-color: #6D4C41 !important; }
.chat-page.border-Pink[b-ggvd8rsagu] { border-color: #D81B60 !important; }
.chat-page.border-Teal[b-ggvd8rsagu] { border-color: #00897B !important; }

/* -------------------------------------- */
/* Inner Flex Layout (split-view support) */
/* -------------------------------------- */

.chat-inner-layout[b-ggvd8rsagu] {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
    overflow: hidden;
    border-radius: 9px;
}

.chat-content[b-ggvd8rsagu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: flex 0.3s ease;
}

/* --- Header Styles --- */
.chat-header[b-ggvd8rsagu] {
    flex-shrink: 0; /* Header doesn't shrink when messages grow */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: 15px;
    text-align: center;
}

.bubble-title[b-ggvd8rsagu] {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--color-brand-blue); /* Deep Blue from your brand */
}

.header-meta[b-ggvd8rsagu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.atmosphere-indicator[b-ggvd8rsagu] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.atmosphere-indicator .icon-brainstorm[b-ggvd8rsagu] {
    color: #2196F3;
}

.atmosphere-indicator .icon-counterpoint[b-ggvd8rsagu] {
    color: #FF9800;
}

.sway-budget-indicator[b-ggvd8rsagu] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* --- Collapsible Details Section --- */
.details-toggle-container[b-ggvd8rsagu] {
    flex-shrink: 0;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--color-bg-details-toggle), var(--color-bg-page));
    border-radius: 8px;
    overflow: hidden;
    padding: 0 10px;
}

.details-toggle-btn[b-ggvd8rsagu] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 10px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #4A90E2; /* Brand accent color */
    cursor: pointer;
}

.bubble-details-section[b-ggvd8rsagu] {
    padding: 0 0 15px 0;
}

.details-text[b-ggvd8rsagu] {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
    text-align: left;
}

.topic-tags[b-ggvd8rsagu] {
    text-align: left;
}

/* --- MESSAGES CONTAINER (The scrollable heart of the page) --- */
.messages-container[b-ggvd8rsagu] {
    flex-grow: 1; /* CRUCIAL: Takes all available vertical space */
    overflow-y: auto; /* CRUCIAL: Enables scrolling for messages */
    padding: 15px;
    background-color: var(--color-bg-messages);
    display: flex;
    flex-direction: column;
}

.messages-container[b-ggvd8rsagu]  .chat-message,
.messages-container .system-message[b-ggvd8rsagu] {
    margin-bottom: 10px;
}

.system-message[b-ggvd8rsagu] {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9em;
    padding: 8px 16px;
    background: var(--color-bg-details-toggle);
    border-radius: 12px;
    align-self: center;
    max-width: 80%;
}

.empty-chat[b-ggvd8rsagu] {
    text-align: center;
    color: var(--color-text-muted);
    padding: 50px 0;
    align-self: center;
}

/* -------------------------------------- */
/* Members FAB Toggle Button              */
/* -------------------------------------- */

.members-toggle-fab[b-ggvd8rsagu] {
    position: absolute;
    top: 18px;
    right: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 30px;
    background-color: var(--color-brand-blue);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 90;
    transition: transform 0.2s, box-shadow 0.2s;
}

.members-toggle-fab:hover[b-ggvd8rsagu] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.members-toggle-fab svg[b-ggvd8rsagu] {
    stroke: white;
}

/* Dynamic FAB colors */
.members-toggle-fab.border-Blue[b-ggvd8rsagu] { background-color: #1E88E5; }
.members-toggle-fab.border-Green[b-ggvd8rsagu] { background-color: #43A047; }
.members-toggle-fab.border-Purple[b-ggvd8rsagu] { background-color: #8E24AA; }
.members-toggle-fab.border-Red[b-ggvd8rsagu] { background-color: #E53935; }
.members-toggle-fab.border-Orange[b-ggvd8rsagu] { background-color: #FB8C00; }
.members-toggle-fab.border-Yellow[b-ggvd8rsagu] { background-color: #F9A825; }
.members-toggle-fab.border-Grey[b-ggvd8rsagu] { background-color: #757575; }
.members-toggle-fab.border-Brown[b-ggvd8rsagu] { background-color: #6D4C41; }
.members-toggle-fab.border-Pink[b-ggvd8rsagu] { background-color: #D81B60; }
.members-toggle-fab.border-Teal[b-ggvd8rsagu] { background-color: #00897B; }

/* -------------------------------------- */
/* Mobile Responsive Overrides (≤900px)  */
/* -------------------------------------- */

@media (max-width: 900px) {
    /* Reduce the bubble title font size so it doesn't dominate the header */
    .bubble-title[b-ggvd8rsagu] {
        font-size: 1.3em;
        /* Pad right so the centered title text doesn't run into the FAB pill */
        padding-right: 60px;
        /* Truncate if still too long */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Members pill: shrink to icon-only — hide the text label */
    .members-toggle-fab .members-fab-text[b-ggvd8rsagu] {
        display: none;
    }

    /* Tighten the pill padding now that it's icon-only */
    .members-toggle-fab[b-ggvd8rsagu] {
        padding: 8px;
        gap: 0;
    }

    /* On mobile the MembersSidebar becomes position:fixed and is lifted out of
       the flex flow. Ensure the chat content still fills the full width when
       the split-view class is active (sidebar is open). */
    .chat-page.split-view .chat-content[b-ggvd8rsagu] {
        flex: 1;
        min-width: 0;
        width: 100%;
    }
}

/* -------------------------------------- */
/* Confirmation Dialog Child Content      */
/* -------------------------------------- */

.message-preview[b-ggvd8rsagu] {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    font-style: italic;
    font-size: 0.9em;
    color: #666;
}
/* /Pages/Conversations.razor.rz.scp.css */
/* --- LAYOUT --- */
.messages-page-layout[b-vrwjwhp6bw] {
    display: flex;
    height: 100%; /* Fill the container */
    max-height: calc(100vh - 85px); /* Account for header */
    gap: 20px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
}

/* --- LEFT SIDEBAR (INBOX) --- */
.dm-sidebar[b-vrwjwhp6bw] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-page);
    border-right: 1px solid var(--color-border-primary);
    overflow: hidden;
    padding-right: 5px; /* Space for scrollbar */
}

.dm-sidebar-header[b-vrwjwhp6bw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px 0;
}

.dm-sidebar-header h2[b-vrwjwhp6bw] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-brand-blue);
}

.btn-new-chat[b-vrwjwhp6bw] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-brand-blue);
    color: white;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-new-chat:hover[b-vrwjwhp6bw] {
    background-color: #303f9f;
}

.conversation-list[b-vrwjwhp6bw] {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- CONVERSATION ITEM --- */
.convo-item[b-vrwjwhp6bw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid var(--color-border-primary);
}

.convo-item:hover[b-vrwjwhp6bw] {
    background-color: var(--color-bg-surface);
}

.convo-item.active[b-vrwjwhp6bw] {
    background-color: var(--color-bg-bubble-tint);
}

.convo-info[b-vrwjwhp6bw] {
    flex-grow: 1;
    min-width: 0; /* Enable text truncation */
}

.convo-top-row[b-vrwjwhp6bw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.convo-username[b-vrwjwhp6bw] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.activity-indicator[b-vrwjwhp6bw] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.activity-indicator.unread[b-vrwjwhp6bw] {
    background-color: #87ceeb;
    color: white;
}

.activity-indicator .msg-icon[b-vrwjwhp6bw] {
    flex-shrink: 0;
}

.activity-indicator .count[b-vrwjwhp6bw] {
    font-size: 0.9em;
}

.convo-context[b-vrwjwhp6bw] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- RIGHT MAIN (CHAT AREA) --- */
.dm-main-area[b-vrwjwhp6bw] {
    flex-grow: 1;
    background: var(--color-bg-page);
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid transparent;
    display: flex;
    flex-direction: column;
    padding-top: 12px; /* Room above the border for the username label */
}

.dm-chat-container[b-vrwjwhp6bw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 3px solid transparent;
    border-radius: 12px;
    padding: 15px 20px 0 20px;
    position: relative;
    background-color: var(--color-bg-messages);
}

.dm-chat-header[b-vrwjwhp6bw] {
    flex-shrink: 0;
    padding: 15px;
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-actions[b-vrwjwhp6bw] {
    margin-left: auto;
}

.action-btn[b-vrwjwhp6bw] {
    padding: 6px 16px;
    border: none;
    border-radius: 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.block-btn[b-vrwjwhp6bw] {
    background-color: transparent;
    color: #e57373;
    border: 1px solid #e57373;
}

.block-btn:hover[b-vrwjwhp6bw] {
    background-color: rgba(229, 115, 115, 0.15);
    color: #ef5350;
}

.unblock-btn[b-vrwjwhp6bw] {
    background-color: transparent;
    color: #87ceeb;
    border: 1px solid #87ceeb;
}

.unblock-btn:hover[b-vrwjwhp6bw] {
    background-color: rgba(135, 206, 235, 0.15);
    color: #6aadda;
}

.header-user-info[b-vrwjwhp6bw] {
    display: flex;
    flex-direction: column;
}

.header-username[b-vrwjwhp6bw] {
    font-size: 1.1rem;
    font-weight: 700;
}

.header-context[b-vrwjwhp6bw] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Messages Container (Reusing Chat.razor logic) */
.messages-container[b-vrwjwhp6bw] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--color-bg-messages);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.empty-chat[b-vrwjwhp6bw] {
    text-align: center;
    color: var(--color-text-muted);
    padding: 50px 0;
    align-self: center;
}

.chat-input-area[b-vrwjwhp6bw] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    margin-top: 10px;
    border-top: 3px solid;
    background-color: var(--color-bg-input-area);
}

.input-stack[b-vrwjwhp6bw] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.input-actions-sidebar[b-vrwjwhp6bw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

.icon-toggle-btn[b-vrwjwhp6bw] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}

.icon-toggle-btn:hover[b-vrwjwhp6bw] {
    background: var(--color-bg-hover);
    color: #4A90E2;
}

.citation-field-wrapper[b-vrwjwhp6bw] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.citation-field-wrapper.main[b-vrwjwhp6bw] {
    border-top: 1px solid var(--color-border-primary);
    padding-right: 10px;
}

.citation-input-field[b-vrwjwhp6bw] {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.85em;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    margin-top: 5px;
    background: var(--color-bg-citation-input);
    transition: border-color 0.2s;
}

.citation-input-field:focus[b-vrwjwhp6bw] {
    outline: none;
    border-color: #87ceeb;
}

.citation-input-field.main-cite[b-vrwjwhp6bw] {
    border: none;
    border-top: 1px solid var(--color-border-primary);
    border-radius: 0 0 8px 8px;
    background: transparent;
    padding: 4px 12px;
}

.remove-citation-btn[b-vrwjwhp6bw] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
}

.remove-citation-btn:hover[b-vrwjwhp6bw] {
    color: #E53935;
}

/* Dynamic Borders (for container and input) */
.border-Blue[b-vrwjwhp6bw] { border-color: #1E88E5 !important; }
.border-Green[b-vrwjwhp6bw] { border-color: #43A047 !important; }
.border-Purple[b-vrwjwhp6bw] { border-color: #8E24AA !important; }
.border-Red[b-vrwjwhp6bw] { border-color: #E53935 !important; }
.border-Orange[b-vrwjwhp6bw] { border-color: #FB8C00 !important; }
.border-Yellow[b-vrwjwhp6bw] { border-color: #F9A825 !important; }
.border-Grey[b-vrwjwhp6bw] { border-color: #757575 !important; }
.border-Brown[b-vrwjwhp6bw] { border-color: #6D4C41 !important; }
.border-Pink[b-vrwjwhp6bw] { border-color: #D81B60 !important; }
.border-Teal[b-vrwjwhp6bw] { border-color: #00897B !important; }

.message-textarea[b-vrwjwhp6bw] {
    flex-grow: 1;
    min-height: 40px;
    padding: 10px 15px;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    font-size: 1em;
    resize: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
}

.message-textarea:focus[b-vrwjwhp6bw] {
    border-color: #87ceeb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(135, 206, 235, 0.3);
}

.send-btn[b-vrwjwhp6bw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: #4A90E2; /* Fallback */
}

.send-btn svg[b-vrwjwhp6bw] {
    width: 18px;
    height: 18px;
    transform: translateX(2px) rotate(45deg);
    stroke: white;
}

/* Use bg colors for send button */
.send-btn.border-Blue[b-vrwjwhp6bw] { background-color: #1E88E5; }
.send-btn.border-Green[b-vrwjwhp6bw] { background-color: #43A047; }
.send-btn.border-Purple[b-vrwjwhp6bw] { background-color: #8E24AA; }
.send-btn.border-Red[b-vrwjwhp6bw] { background-color: #E53935; }
.send-btn.border-Orange[b-vrwjwhp6bw] { background-color: #FB8C00; }
.send-btn.border-Yellow[b-vrwjwhp6bw] { background-color: #F9A825; }
.send-btn.border-Grey[b-vrwjwhp6bw] { background-color: #757575; }
.send-btn.border-Brown[b-vrwjwhp6bw] { background-color: #6D4C41; }
.send-btn.border-Pink[b-vrwjwhp6bw] { background-color: #D81B60; }
.send-btn.border-Teal[b-vrwjwhp6bw] { background-color: #00897B; }

/* --- EMPTY STATE --- */
.empty-selection-state[b-vrwjwhp6bw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

.empty-graphic svg[b-vrwjwhp6bw] {
    width: 80px;
    height: 80px;
    fill: var(--color-border-primary);
    margin-bottom: 20px;
}

.empty-selection-state h3[b-vrwjwhp6bw] {
    margin: 0 0 10px 0;
    color: var(--color-brand-blue);
}

.btn-primary[b-vrwjwhp6bw] {
    margin-top: 20px;
    padding: 10px 24px;
    background-color: var(--color-brand-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* --- NEW CHAT MODAL --- */
.contact-picker-modal[b-vrwjwhp6bw] {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(160deg, var(--color-bg-surface), var(--color-bg-page));
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 8px 30px var(--color-shadow-card-hover);
}

.modal-header[b-vrwjwhp6bw] {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body[b-vrwjwhp6bw] {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.candidate-item[b-vrwjwhp6bw] {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.candidate-info-row[b-vrwjwhp6bw] {
    padding: 12px;
    background: var(--color-bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.candidate-info-row:hover[b-vrwjwhp6bw] {
    background: var(--color-bg-bubble-tint);
}

.bubble-title[b-vrwjwhp6bw] {
    flex-grow: 1;
    font-weight: 600;
    color: var(--color-brand-blue);
}

.user-list[b-vrwjwhp6bw] {
    padding: 5px 0;
    background: var(--color-bg-page);
    border-top: 1px solid var(--color-border-primary);
}

.user-row[b-vrwjwhp6bw] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.user-row:hover[b-vrwjwhp6bw] {
    background-color: var(--color-bg-hover);
}

.close-btn[b-vrwjwhp6bw] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
}

/* --- MOBILE RESPONSIVE --- */
.mobile-back-btn[b-vrwjwhp6bw] { display: none; }

@media (max-width: 900px) {
    .messages-page-layout[b-vrwjwhp6bw] {
        flex-direction: column;
    }

    .dm-sidebar[b-vrwjwhp6bw], .dm-main-area[b-vrwjwhp6bw] {
        width: 100%;
        height: 100%;
    }

    .mobile-hidden[b-vrwjwhp6bw] {
        display: none !important;
    }

    .mobile-back-btn[b-vrwjwhp6bw] {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        padding: 0 10px;
        cursor: pointer;
        color: var(--color-brand-blue);
    }
}

/* --- Edit Mode Styling --- */
.edit-mode-container[b-vrwjwhp6bw] {
    padding: 10px;
    background: rgba(255,255,255,0.8);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    margin-top: 5px;
}

.edit-input[b-vrwjwhp6bw] {
    width: 100%;
    min-height: 60px;
    border: 1px solid #4A90E2;
}

.edit-actions[b-vrwjwhp6bw] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

.edit-actions button[b-vrwjwhp6bw] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
}

.save-btn[b-vrwjwhp6bw] { background: #4A90E2; color: white; border: none; }
.cancel-btn[b-vrwjwhp6bw] { background: var(--color-bg-details-toggle); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }

.add-citation-btn[b-vrwjwhp6bw] {
    background: none;
    border: 1px dashed var(--color-border-primary);
    color: var(--color-text-muted);
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
}

.add-citation-btn:hover[b-vrwjwhp6bw] {
    border-color: #87ceeb;
    color: #4A90E2;
}

/* --- Notification Items --- */
.notification-sender[b-vrwjwhp6bw] {
    font-weight: 600;
    color: var(--color-text-muted);
    font-style: italic;
}

.notification-item[b-vrwjwhp6bw] {
    border-left: 3px solid #87ceeb;
}

/* --- System Message (Notification Content) --- */
.system-message[b-vrwjwhp6bw] {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9em;
    background: var(--color-bg-details-toggle);
    padding: 12px 20px;
    border-radius: 12px;
    max-width: 80%;
    align-self: center;
    margin: 10px auto;
}
/* /Pages/Discover.razor.rz.scp.css */
.discover-page[b-u3ll2ccsju] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* --- SEARCH BAR --- */
.search-wrapper[b-u3ll2ccsju] {
    max-width: 450px;
    margin: 0 auto 25px;
}

/* --- THE GRID LAYOUT --- */
.bubble-grid[b-u3ll2ccsju] {
    display: grid;
    /* This creates a flexible grid.
       To strictly enforce ~4 per row on desktop:
       Since .bubble-item is fixed at 250px wide in app.css,
       we use auto-fill with a min-width close to that size.
    */
    grid-template-columns: repeat(auto-fit, 250px);
    gap: 30px;
    justify-content: center;
    justify-items: center;
    margin-bottom: 40px;
}

/* --- PAGINATION CONTROLS --- */
.pagination-controls[b-u3ll2ccsju] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 40px;
}

.nav-btn[b-u3ll2ccsju] {
    width: auto; /* Override full-width default from app.css */
    min-width: 120px;
}

/* --- Loading & Empty States --- */
.loading-state[b-u3ll2ccsju], .empty-state[b-u3ll2ccsju] {
    text-align: center;
    padding: 60px 0;
    color: var(--color-text-secondary);
}

.bubble-grid > .empty-state[b-u3ll2ccsju] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 0 20px;
}

.bubble-topics-preview[b-u3ll2ccsju] {
    font-size: 0.85rem;
    color: #87ceeb; /* Brand Teal */
    margin-top: 5px;
}

/* Inline text link styled as a button for use within paragraph text */
.link-btn[b-u3ll2ccsju] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #87ceeb;
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
    font-family: inherit;
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* ============================================= */
/* Forgot Password Page                          */
/* ============================================= */

.forgot-password-page[b-vjj3gzphcz] {
    max-width: 500px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* -------------------------------------- */
/* 1. Page Header                         */
/* -------------------------------------- */

.header-section[b-vjj3gzphcz] {
    margin-bottom: 40px;
    text-align: center;
}

.header-section h1[b-vjj3gzphcz] {
    font-size: 2.5em;
    color: #3f51b5;
    margin: 0 0 10px;
}

.subtitle[b-vjj3gzphcz] {
    font-size: 1.1em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* -------------------------------------- */
/* 2. Section Card                        */
/* -------------------------------------- */

.section-card[b-vjj3gzphcz] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 35px;
}

/* -------------------------------------- */
/* 3. Form Layout                         */
/* -------------------------------------- */

.form-group[b-vjj3gzphcz] {
    margin-bottom: 20px;
    width: 100%;
}

/* -------------------------------------- */
/* 4. Status Banners                      */
/* -------------------------------------- */

.success-banner[b-vjj3gzphcz] {
    background-color: rgba(135, 206, 235, 0.1);
    border: 1px solid #87ceeb;
    color: #2a8fb5;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.error-banner[b-vjj3gzphcz] {
    background-color: rgba(229, 115, 115, 0.1);
    border: 1px solid #e57373;
    color: #b05757;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------- */
/* 5. Back Link Footer                    */
/* -------------------------------------- */

.back-link-footer[b-vjj3gzphcz] {
    text-align: center;
    margin-top: 20px;
}

.back-link-footer button[b-vjj3gzphcz] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    text-decoration: none;
}

.back-link-footer button:hover[b-vjj3gzphcz] {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

/* -------------------------------------- */
/* 6. Responsive                          */
/* -------------------------------------- */

@media (max-width: 900px) {
    .forgot-password-page[b-vjj3gzphcz] {
        padding: 20px 15px;
    }

    .section-card[b-vjj3gzphcz] {
        padding: 25px 20px;
    }
}
/* /Pages/Help.razor.rz.scp.css */
.help-page[b-w0wp25jyyv] {
    padding-bottom: 80px;
}

/* Table of Contents */
.help-toc[b-w0wp25jyyv] {
    max-width: 800px;
    margin: 0 auto 40px auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.toc-grid[b-w0wp25jyyv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
}

.toc-link[b-w0wp25jyyv] {
    color: #2a8cb5;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease;
    display: block;
}

.toc-link:hover[b-w0wp25jyyv] {
    color: #1a6d8e;
    text-decoration: underline;
}

/* Content Sections */
.help-section[b-w0wp25jyyv] {
    max-width: 800px;
    margin: 0 auto 28px auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 32px 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.help-section h2[b-w0wp25jyyv] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin: 0 0 18px 0;
}

.help-section h3[b-w0wp25jyyv] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin: 20px 0 10px 0;
}

.help-section p[b-w0wp25jyyv] {
    color: var(--color-text-primary);
    line-height: 1.65;
    margin: 0 0 14px 0;
}

.help-section p:last-of-type[b-w0wp25jyyv] {
    margin-bottom: 0;
}

.help-section ul[b-w0wp25jyyv],
.help-section ol[b-w0wp25jyyv] {
    color: var(--color-text-primary);
    line-height: 1.65;
    margin: 0 0 14px 0;
    padding-left: 22px;
}

.help-section li[b-w0wp25jyyv] {
    margin-bottom: 6px;
}

.help-section li:last-child[b-w0wp25jyyv] {
    margin-bottom: 0;
}

.color-list[b-w0wp25jyyv] {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Tables */
.help-table[b-w0wp25jyyv] {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.9rem;
}

.help-table th[b-w0wp25jyyv] {
    text-align: left;
    padding: 10px 14px;
    background: rgba(135, 206, 235, 0.12);
    color: var(--color-brand-blue);
    font-weight: 600;
    border-bottom: 2px solid rgba(135, 206, 235, 0.3);
}

.help-table td[b-w0wp25jyyv] {
    padding: 10px 14px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-primary);
    vertical-align: top;
}

.help-table tbody tr:last-child td[b-w0wp25jyyv] {
    border-bottom: none;
}

.help-table tbody tr:hover td[b-w0wp25jyyv] {
    background: rgba(135, 206, 235, 0.06);
}

/* Back to Top */
.back-to-top[b-w0wp25jyyv] {
    display: block;
    text-align: right;
    margin-top: 22px;
    font-size: 0.85rem;
    color: #2a8cb5;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.back-to-top:hover[b-w0wp25jyyv] {
    color: #1a6d8e;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 900px) {
    .help-toc[b-w0wp25jyyv] {
        padding: 20px;
        margin-bottom: 28px;
    }

    .toc-grid[b-w0wp25jyyv] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .help-section[b-w0wp25jyyv] {
        padding: 24px 20px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    .help-section h2[b-w0wp25jyyv] {
        font-size: 1.3rem;
    }

    .help-table[b-w0wp25jyyv] {
        font-size: 0.85rem;
    }

    .help-table th[b-w0wp25jyyv],
    .help-table td[b-w0wp25jyyv] {
        padding: 8px 10px;
    }
}
/* /Pages/MyBubbles.razor.rz.scp.css */
/* --- Page Layout --- */
.my-bubbles-page[b-tky2dde9z0] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 40px;
}

/* --- Header Section --- */
.header-section[b-tky2dde9z0] {
    margin-bottom: 30px;
}

.header-section h1[b-tky2dde9z0] {
    margin-bottom: 0.2em;
    font-size: 2em;
    color: var(--color-brand-blue);
}

.subtitle[b-tky2dde9z0] {
    color: var(--color-text-secondary);
    font-size: 1.1em;
}

/* --- The Grid (Flexbox for smart centering) --- */
.bubbles-grid[b-tky2dde9z0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

/* --- Placeholder Bubble (Add New) --- */
.placeholder-bubble[b-tky2dde9z0] {
    /* Fixed width to match standard bubble size */
    width: 250px;

    /* CRITICAL: Force 1:1 Aspect Ratio to ensure it is a perfect circle */
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 2px dashed var(--color-border-primary);
    background-color: var(--color-bg-page);

    /* CRITICAL: 50% Radius for circle shape */
    border-radius: 50%;

    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-muted);
    box-sizing: border-box;
}

.placeholder-bubble:hover[b-tky2dde9z0] {
    border-color: #4A90E2;
    background: linear-gradient(135deg, var(--color-bg-bubble-tint), var(--color-bg-page));
    color: #4A90E2;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--color-shadow-card-hover);
}

.icon-plus[b-tky2dde9z0] {
    font-size: 3em;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 10px;
}

.placeholder-bubble .bubble-name[b-tky2dde9z0] {
    font-size: 1.1em;
    font-weight: 600;
}
/* /Pages/MyBursts.razor.rz.scp.css */
.my-bursts-page[b-jaaztop4nm] {
    padding-bottom: 60px;
}

.burst-grid[b-jaaztop4nm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 800px;
    margin: 0 auto;
}

.search-section[b-jaaztop4nm] {
    max-width: 800px;
    margin: 0 auto 25px auto;
}

.empty-state[b-jaaztop4nm] {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 40px 20px;
    font-style: italic;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ============================================= */
/* Reset Password Page                           */
/* ============================================= */

.reset-password-page[b-mjke6i7660] {
    max-width: 500px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* -------------------------------------- */
/* 1. Page Header                         */
/* -------------------------------------- */

.header-section[b-mjke6i7660] {
    margin-bottom: 40px;
    text-align: center;
}

.header-section h1[b-mjke6i7660] {
    font-size: 2.5em;
    color: #3f51b5;
    margin: 0 0 10px;
}

.subtitle[b-mjke6i7660] {
    font-size: 1.1em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* -------------------------------------- */
/* 2. Section Card                        */
/* -------------------------------------- */

.section-card[b-mjke6i7660] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 35px;
}

/* -------------------------------------- */
/* 3. Form Layout                         */
/* -------------------------------------- */

.form-group[b-mjke6i7660] {
    margin-bottom: 20px;
    width: 100%;
}

/* -------------------------------------- */
/* 4. Status Banners                      */
/* -------------------------------------- */

.success-banner[b-mjke6i7660] {
    background-color: rgba(135, 206, 235, 0.1);
    border: 1px solid #87ceeb;
    color: #2a8fb5;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.error-banner[b-mjke6i7660] {
    background-color: rgba(229, 115, 115, 0.1);
    border: 1px solid #e57373;
    color: #b05757;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------- */
/* 5. Responsive                          */
/* -------------------------------------- */

@media (max-width: 900px) {
    .reset-password-page[b-mjke6i7660] {
        padding: 20px 15px;
    }

    .section-card[b-mjke6i7660] {
        padding: 25px 20px;
    }
}
/* /Pages/ThePulse.razor.rz.scp.css */
/* --- PAGE STRUCTURE --- */
.pulse-page[b-yvv8x44ovv] {
    padding-bottom: 60px;
}

/* The 2-Column Grid Wrapper */
.pulse-layout[b-yvv8x44ovv] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

/* --- SIDEBAR (Desktop) --- */
.pulse-sidebar[b-yvv8x44ovv] {
    position: sticky;
    top: 20px;
    padding-left: 15px;
    height: calc(100vh - 40px); /* Use height, not max-height, to enforce the frame */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Webkit scrollbar styling (Chrome/Safari/Edge) */
.pulse-sidebar[b-yvv8x44ovv]::-webkit-scrollbar {
    width: 6px;
}

.pulse-sidebar[b-yvv8x44ovv]::-webkit-scrollbar-thumb {
    background-color: rgba(135, 206, 235, 0.5);
    border-radius: 10px;
}

.sidebar-heading[b-yvv8x44ovv] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 15px;
    font-weight: 700;
}

.sidebar-heading[b-yvv8x44ovv] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 15px;
    font-weight: 700;
    display: block; /* Visible on desktop */
}

.topic-search-wrapper[b-yvv8x44ovv] {
    padding-right: 5px; /* Matches topic-list padding */
    margin-bottom: 10px;
    flex-shrink: 0; /* Prevents shrinking when list grows */
}

.topic-search-input[b-yvv8x44ovv] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    font-size: 0.9rem;
    background-color: var(--color-bg-input);
    transition: all 0.2s ease;
    outline: none;
    color: var(--color-brand-blue);
}

.topic-search-input:focus[b-yvv8x44ovv] {
    border-color: #87ceeb;
    box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.1);
}

.topic-search-input[b-yvv8x44ovv]::placeholder {
    color: var(--color-text-placeholder);
}

.empty-topic-state[b-yvv8x44ovv] {
    padding: 20px 10px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.topic-list[b-yvv8x44ovv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 5px;
    padding-bottom: 20px;
    overflow-y: auto;
    flex-grow: 1;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 206, 235, 0.5) transparent;
}

/* --- STREAMLINED TOPIC ROW --- */
.topic-row[b-yvv8x44ovv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--color-brand-blue);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: left;
    flex-shrink: 0;
}

.topic-row:hover[b-yvv8x44ovv] {
    background-color: var(--color-bg-bubble-tint);
    color: #87ceeb;
    transform: translateX(5px);
}

.topic-name[b-yvv8x44ovv] {
    flex-grow: 1;
    /* FIX 2: Allow wrapping instead of truncation */
    white-space: normal;
    line-height: 1.3;
}

/* --- MAIN CONTENT --- */
.pulse-content[b-yvv8x44ovv] {
    min-width: 0;
}

.burst-grid[b-yvv8x44ovv] {
    display: grid;
    /* Cards stretch to fill the space */
    grid-template-columns: 1fr;
    gap: 25px;
}

.empty-pulse-state[b-yvv8x44ovv] {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 40px;
}

/* --- MOBILE TOPIC STRIP (hidden on desktop) --- */
.mobile-topic-strip[b-yvv8x44ovv] {
    display: none;
}

.topic-chip[b-yvv8x44ovv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(135, 206, 235, 0.5);
    background: transparent;
    color: var(--color-brand-blue);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.topic-chip:active[b-yvv8x44ovv] {
    background-color: var(--color-bg-bubble-tint);
}

/* --- RESPONSIVE MOBILE (< 900px) --- */
@media (max-width: 900px) {
    .pulse-layout[b-yvv8x44ovv] {
        grid-template-columns: 1fr;
    }

    .pulse-sidebar[b-yvv8x44ovv] {
        display: none;
    }

    .mobile-topic-strip[b-yvv8x44ovv] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 16px 0;
        mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
    }

    .mobile-topic-strip[b-yvv8x44ovv]::-webkit-scrollbar {
        display: none;
    }

    .burst-grid[b-yvv8x44ovv] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pulse-content[b-yvv8x44ovv] {
        width: 100%;
        min-width: 0;
    }
}
/* /Pages/Topic.razor.rz.scp.css */
/* --- LAYOUT STRUCTURE --- */
.topic-page-layout[b-y7e111ud3i] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg-page);
    position: relative;
}

/* --- ZONE 1: FIXED HEADER --- */
.topic-fixed-header[b-y7e111ud3i] {
    flex-shrink: 0;      /* Never shrink */
    background-color: var(--color-bg-page);
    padding: 20px 40px 20px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.header-content-wrapper[b-y7e111ud3i] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.topic-title-row[b-y7e111ud3i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 5px;
}

.topic-page-title[b-y7e111ud3i] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    margin: 0;
    line-height: 1.2;
}

/* --- ZONE 2: SCROLL AREA --- */
.topic-scroll-area[b-y7e111ud3i] {
    flex-grow: 1;        /* Take up remaining space */
    overflow-y: auto;    /* ENABLE SCROLL HERE */
    padding: 30px 40px 0 40px;

    /* Smooth Scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.topic-content-container[b-y7e111ud3i] {
    max-width: 1200px; /* Wide container for the 4-bubble grid */
    margin: 0 auto;
}

.scroll-pad[b-y7e111ud3i] {
    height: 60px;
}

/* --- SECTIONS --- */
.section-title[b-y7e111ud3i] {
    font-size: 1.2rem;
    color: var(--color-brand-blue);
    font-weight: 700;
    margin-bottom: 5px;
}

.section-subtitle[b-y7e111ud3i] {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

/* --- TENSIONS SECTION (Collapsible) --- */
.tensions-section[b-y7e111ud3i] {
    margin-bottom: 30px;
}

.tensions-toggle[b-y7e111ud3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tensions-toggle:hover[b-y7e111ud3i] {
    background-color: var(--color-bg-page);
}

.tensions-title[b-y7e111ud3i] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.tensions-arrow[b-y7e111ud3i] {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.tensions-arrow.expanded[b-y7e111ud3i] {
    transform: rotate(180deg);
}

.tensions-content[b-y7e111ud3i] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease;
    margin-top: 0;
}

.tensions-content.tensions-expanded[b-y7e111ud3i] {
    max-height: 800px;
    opacity: 1;
    margin-top: 12px;
}

.tension-row[b-y7e111ud3i] {
    padding: 14px 24px;
    background: var(--color-bg-surface);
    border-radius: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tension-row:last-child[b-y7e111ud3i] {
    margin-bottom: 0;
}

.tension-anchor[b-y7e111ud3i] {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.tension-positive[b-y7e111ud3i] {
    text-align: left;
}

.tension-negative[b-y7e111ud3i] {
    text-align: right;
}

.tension-leading[b-y7e111ud3i] {
    font-weight: 600;
}

.tension-bar-track[b-y7e111ud3i] {
    position: relative;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 2px;
    width: 100%;
}

.tension-bar-center[b-y7e111ud3i] {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 1px;
    height: 8px;
    background: rgba(0,0,0,0.12);
}

.tension-bar-fill[b-y7e111ud3i] {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
}

.fill-consensus[b-y7e111ud3i] {
    background: #00897B;
}

.fill-debating[b-y7e111ud3i] {
    background: #FB8C00;
}

.tension-vs-mobile[b-y7e111ud3i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-style: normal;
    font-weight: 400;
    color: #bbb;
    font-size: 0.8rem;
    line-height: 1.2;
}

.tension-vs-mobile .vs-text[b-y7e111ud3i] {
    display: none;
}

/* --- ACTIVE BUBBLES GRID --- */
.bubbles-section[b-y7e111ud3i] {
    margin-bottom: 50px;
}

.bubbles-grid[b-y7e111ud3i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* --- BURST STREAM --- */
.bursts-section[b-y7e111ud3i] {
    /* Standard block layout */
}

.section-header-row[b-y7e111ud3i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ensure the search bar doesn't stretch too wide in this context */
[b-y7e111ud3i] .burst-search-container {
    margin-bottom: 0; /* Remove bottom margin since the row handles gap */
    max-width: 400px;
}

.burst-stream[b-y7e111ud3i] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.empty-bubbles-msg[b-y7e111ud3i], .empty-bursts-msg[b-y7e111ud3i] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
    font-style: italic;
    background: var(--color-bg-surface);
    border-radius: 12px;
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .topic-page-title[b-y7e111ud3i] {
        font-size: 1.8rem;
    }

    .tension-row[b-y7e111ud3i] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0;
        padding: 10px 16px;
    }

    .tension-anchor[b-y7e111ud3i] {
        display: inline;
        text-align: center;
    }

    .tension-bar-track[b-y7e111ud3i] {
        display: none;
    }

    .tension-vs-mobile[b-y7e111ud3i] {
        display: inline-flex;
        margin: 0 4px;
    }

    .tension-vs-mobile .vs-text[b-y7e111ud3i] {
        display: inline;
    }

    .tension-leading[b-y7e111ud3i] {
        font-weight: 500;
    }
}

@media (max-width: 480px) {
    .topic-page-title[b-y7e111ud3i] {
        font-size: 1.5rem;
    }

    .tensions-toggle[b-y7e111ud3i] {
        padding: 10px 12px;
    }

    .tension-row[b-y7e111ud3i] {
        padding: 8px 12px;
    }
}
/* /Pages/Verification.razor.rz.scp.css */
/* --- Layout Containers --- */
.verification-page[b-0mykr2wx8f] {
    height: calc(100% - 12px); /* Leave room above the border for the username label */
    margin-top: 12px;
    padding: 1.1rem 20px 20px 20px;
    position: relative;
    border: 3px solid transparent;
    border-radius: 12px;
    overflow: visible;
}

.verification-inner-layout[b-0mykr2wx8f] {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
    overflow: hidden;
    border-radius: 9px;
}

.verification-page.border-Blue[b-0mykr2wx8f]   { border-color: #1E88E5 !important; }
.verification-page.border-Green[b-0mykr2wx8f]  { border-color: #43A047 !important; }
.verification-page.border-Purple[b-0mykr2wx8f] { border-color: #8E24AA !important; }
.verification-page.border-Red[b-0mykr2wx8f]    { border-color: #E53935 !important; }
.verification-page.border-Orange[b-0mykr2wx8f] { border-color: #FB8C00 !important; }
.verification-page.border-Yellow[b-0mykr2wx8f] { border-color: #F9A825 !important; }
.verification-page.border-Grey[b-0mykr2wx8f]   { border-color: #757575 !important; }
.verification-page.border-Brown[b-0mykr2wx8f]  { border-color: #6D4C41 !important; }
.verification-page.border-Pink[b-0mykr2wx8f]   { border-color: #D81B60 !important; }
.verification-page.border-Teal[b-0mykr2wx8f]   { border-color: #00897B !important; }

.chat-header[b-0mykr2wx8f] {
    flex-shrink: 0; /* Header doesn't shrink when messages grow */
    padding-bottom: 10px;
    text-align: center;
}

.header-meta[b-0mykr2wx8f] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

.bubble-title[b-0mykr2wx8f] {
    padding-left: 50px;
    padding-right: 100px;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--color-brand-blue); /* Deep Blue from your brand */
}

/* When split view is active, flex allows resizing */
.verification-content[b-0mykr2wx8f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: flex 0.3s ease;
}

/* --- Content Styling --- */
.scrollable-form-area[b-0mykr2wx8f] {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
    /* Custom scrollbar styling could go here if needed */
}

.section-card[b-0mykr2wx8f] {
    background: var(--color-bg-surface);
    border-radius: 20px; /* Matching the .modal-form and .bubble-item radius */
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow */
    border: 1px solid rgba(135, 206, 235, 0.3); /* Subtle teal border */
}

.summary-section h3[b-0mykr2wx8f] {
    margin-top: 0;
    color: var(--color-brand-blue); /* Brand Deep Blue */
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 15px;
}

.summary-section p[b-0mykr2wx8f] {
    line-height: 1.6;
    color: var(--color-text-primary);
    font-size: 1.05em;
    white-space: pre-wrap;
}

/* --- Question & Answer Styling --- */
.question-text[b-0mykr2wx8f] {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--color-brand-blue); /* Deep Blue for questions */
    font-size: 1.1em;
    font-weight: 600;
}

.answers-group[b-0mykr2wx8f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-option[b-0mykr2wx8f] {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid var(--color-border-primary);
    border-radius: 15px; /* Pill/Bubble shape */
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-bg-surface);
}

.answer-option:hover[b-0mykr2wx8f] {
    border-color: #87ceeb; /* Vibrant Teal */
    background-color: var(--color-bg-bubble-tint); /* Lightest teal/blue tint */
}

/* Highlight selected answer */
.answer-option.selected[b-0mykr2wx8f] {
    border-color: var(--color-brand-blue); /* Deep Blue */
    background-color: var(--color-bg-bubble-tint); /* Light indigo tint */
    box-shadow: 0 0 0 1px var(--color-brand-blue); /* clearer selection indicator */
}

.answer-option input[b-0mykr2wx8f] {
    margin-right: 12px;
    accent-color: var(--color-brand-blue); /* Browsers that support accent-color */
}

/* --- Chat Reference Sidebar --- */
.chat-reference-panel[b-0mykr2wx8f] {
    width: 400px;
    flex-shrink: 0;
    background: var(--color-bg-surface); /* Matches modal background */
    border-left: 1px solid var(--color-border-panel);
    border-top: 1px solid var(--color-border-panel);
    border-bottom: 1px solid var(--color-border-panel);
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    animation: slideIn-b-0mykr2wx8f 0.3s ease-out;
    box-shadow: -5px 0 15px rgba(0,0,0,0.05);
}

@keyframes slideIn-b-0mykr2wx8f {
    from { transform: translateX(100%); width: 0; opacity: 0; }
    to { transform: translateX(0); width: 400px; opacity: 1; }
}

.panel-header[b-0mykr2wx8f] {
    padding: 15px 20px;
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3[b-0mykr2wx8f] {
    margin: 0;
    font-size: 1.2em;
    color: var(--color-brand-blue);
}

.close-panel-btn[b-0mykr2wx8f] {
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
}

.close-panel-btn:hover[b-0mykr2wx8f] { color: #E57373; }

/* Readonly Chat List styling - overrides for smaller sidebar display */
.messages-container.readonly[b-0mykr2wx8f] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background: var(--color-bg-messages);
}

/* Spacing between virtualized message items — using margin instead of flex gap
   so that Virtualize spacer elements do not interfere with height calculations */
.messages-container.readonly[b-0mykr2wx8f]  .chat-message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* --- Floating Toggle Button --- */
.chat-toggle-fab[b-0mykr2wx8f] {
    position: absolute;
    top: 18px;
    right: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 30px;
    background-color: var(--color-brand-blue); /* Default fallback */
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 90;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-toggle-fab:hover[b-0mykr2wx8f] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Use user colors for the FAB background if desired, or stick to brand blue */
.chat-toggle-fab.border-Blue[b-0mykr2wx8f] { background-color: #1E88E5; }
.chat-toggle-fab.border-Green[b-0mykr2wx8f] { background-color: #43A047; }
.chat-toggle-fab.border-Purple[b-0mykr2wx8f] { background-color: #8E24AA; }
.chat-toggle-fab.border-Red[b-0mykr2wx8f] { background-color: #E53935; }
.chat-toggle-fab.border-Orange[b-0mykr2wx8f] { background-color: #FB8C00; }
.chat-toggle-fab.border-Yellow[b-0mykr2wx8f] { background-color: #F9A825; }
.chat-toggle-fab.border-Grey[b-0mykr2wx8f] { background-color: #757575; }
.chat-toggle-fab.border-Brown[b-0mykr2wx8f] { background-color: #6D4C41; }
.chat-toggle-fab.border-Pink[b-0mykr2wx8f] { background-color: #D81B60; }
.chat-toggle-fab.border-Teal[b-0mykr2wx8f] { background-color: #00897B; }

.verification-footer[b-0mykr2wx8f] {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 15px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.verification-footer .btn-secondary[b-0mykr2wx8f],
.verification-footer .btn-primary[b-0mykr2wx8f] {
    width: auto; /* Allow buttons to size to content */
    min-width: 120px;
}

.change-requests-container[b-0mykr2wx8f] {
    margin-top: 20px;
    border-top: 1px solid var(--color-border-primary);
    padding-top: 10px;
}

.toggle-requests-btn[b-0mykr2wx8f] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.9em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 0;
    transition: color 0.2s;
}

.toggle-requests-btn:hover[b-0mykr2wx8f] {
    color: var(--color-brand-blue);
}

.toggle-requests-btn .icon[b-0mykr2wx8f] {
    font-size: 0.8em;
}

/* --- Requests List --- */
.requests-list[b-0mykr2wx8f] {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--color-xp-bar-track);
    animation: fadeIn-b-0mykr2wx8f 0.2s ease-out;
}

.change-request-item[b-0mykr2wx8f] {
    margin-bottom: 12px;
}

.req-header[b-0mykr2wx8f] {
    font-size: 0.85em;
    margin-bottom: 2px;
}

.req-user[b-0mykr2wx8f] {
    font-weight: 700;
}

.req-comment[b-0mykr2wx8f] {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
    white-space: pre-wrap;
}

/* --- Request Change Action --- */
.request-change-action[b-0mykr2wx8f] {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.request-change-action .btn-link[b-0mykr2wx8f] {
    color: #E57373;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: underline;
    cursor: pointer;
}

.request-change-action .btn-link:hover[b-0mykr2wx8f] {
    color: #Ef5350;
}

.modal-form[b-0mykr2wx8f] {
    max-width: 475px;
}

.modal-intro[b-0mykr2wx8f] {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
}

.modal-intro .note[b-0mykr2wx8f] {
    font-size: 0.85em;
    color: #E57373;
    font-weight: 600;
}

.modal-actions .btn-secondary[b-0mykr2wx8f] {
    margin-top: 10px;
}

.change-request-input[b-0mykr2wx8f] {
    width: 100%;
    margin-bottom: 20px;
    resize: vertical;
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    padding: 10px;
    font-size: 1em;
}

@keyframes fadeIn-b-0mykr2wx8f {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------- */
/* Mobile Responsive Overrides (≤900px)  */
/* -------------------------------------- */

@media (max-width: 900px) {
    /* Reduce the bubble title font size so it doesn't dominate the header */
    .bubble-title[b-0mykr2wx8f] {
        font-size: 1.3em;
        /* Pad right so the centered title text doesn't run into the FAB pill */
        padding-right: 60px;
        /* Truncate if still too long */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Chat pill: shrink to icon-only — hide the text label */
    .chat-toggle-fab .chat-fab-text[b-0mykr2wx8f] {
        display: none;
    }

    /* Tighten the pill padding now that it's icon-only */
    .chat-toggle-fab[b-0mykr2wx8f] {
        padding: 8px;
        gap: 0;
    }

    /* On mobile the chat-reference-panel becomes a position:fixed full-screen
       overlay lifted out of the flex flow. Ensure the verification content
       still fills the full width when the split-view class is active. */
    .chat-reference-panel[b-0mykr2wx8f] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        z-index: 200;
        animation: slideInMobile-b-0mykr2wx8f 0.3s ease-out;
    }

    @keyframes slideInMobile-b-0mykr2wx8f {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .verification-page.split-view .verification-content[b-0mykr2wx8f] {
        flex: 1;
        min-width: 0;
        width: 100%;
    }
}

.regeneration-alert[b-0mykr2wx8f] {
    background-color: var(--color-bg-bubble-tint); /* Light AliceBlue background */
    border: 1px solid #87ceeb; /* Vibrant Teal border */
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: var(--color-brand-blue); /* Brand Blue */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    animation: fadeIn-b-0mykr2wx8f 0.3s ease-out;
}

.regeneration-alert p[b-0mykr2wx8f] {
    margin: 0;
    font-weight: 600;
    font-size: 1.1em;
}

.regeneration-alert .sub-text[b-0mykr2wx8f] {
    font-weight: 400;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* Simple CSS Spinner */
.spinner-icon[b-0mykr2wx8f] {
    width: 40px;
    height: 40px;
    animation: rotate-b-0mykr2wx8f 2s linear infinite;
}

.spinner-icon .path[b-0mykr2wx8f] {
    stroke: #87ceeb; /* Vibrant Teal */
    stroke-linecap: round;
    animation: dash-b-0mykr2wx8f 1.5s ease-in-out infinite;
}

@keyframes rotate-b-0mykr2wx8f {
    100% { transform: rotate(360deg); }
}

@keyframes dash-b-0mykr2wx8f {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
/* /Shared/Components/BubbleCard.razor.rz.scp.css */
/* ------------------------------------------- */
/* --- BubbleCard Component Styles --- */
/* ------------------------------------------- */

/* --- 1. HEADER & TIMER --- */

.bubble-header-info[b-bgoavkemsz] {
    margin-bottom: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.bubble-name[b-bgoavkemsz] {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-brand-blue);
    margin: 0;
    line-height: 1.3;
    max-height: 3.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: center;
}

/* --- 2. RESTORED: CORE LAYOUT & UNREAD PILLS --- */

.members-count[b-bgoavkemsz] {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-top: 10px;
}

.activity-indicator[b-bgoavkemsz] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    margin: 8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* Default state is transparent/text-color */
    background-color: transparent;
    color: var(--color-text-primary);
}

/* The Blue Pill (Restored) */
.activity-indicator.unread[b-bgoavkemsz] {
    background-color: #87ceeb !important; /* Light Blue */
    color: white !important;
}

/* The Red Pill (Restored) */
.activity-indicator.attention[b-bgoavkemsz] {
    background-color: #E57373 !important; /* Soft Red */
    color: white !important;
}

.activity-indicator .count[b-bgoavkemsz] {
    font-size: 1.1em;
    margin-right: 5px;
}

/* --- 3. RESTORED: BUBBLE DETAILS OVERLAY --- */

.bubble-details-wrapper[b-bgoavkemsz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Restored the Blue Overlay */
    background-color: rgba(63, 81, 181, 0.95);
    color: white;
    border-radius: 50%; /* Ensures overlay matches bubble shape */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;

    /* Restored the Zoom Animation */
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    pointer-events: none;
}

.bubble-item.allow-details:hover .bubble-details-wrapper[b-bgoavkemsz] {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}

.bubble-item.allow-details:hover .bubble-content-main[b-bgoavkemsz] {
    opacity: 0;
    transition: opacity 0.1s;
}

.bubble-details[b-bgoavkemsz] {
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 10px;
    max-height: 8.5em;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    padding: 5px;
}

/* --- 4. RESTORED: BORDER COLORS --- */

.bubble-item.border-Blue[b-bgoavkemsz]   { border-color: #1E88E5 !important; }
.bubble-item.border-Green[b-bgoavkemsz]  { border-color: #43A047 !important; }
.bubble-item.border-Purple[b-bgoavkemsz] { border-color: #8E24AA !important; }
.bubble-item.border-Red[b-bgoavkemsz]    { border-color: #E53935 !important; }
.bubble-item.border-Orange[b-bgoavkemsz] { border-color: #FB8C00 !important; }
.bubble-item.border-Yellow[b-bgoavkemsz] { border-color: #F9A825 !important; }
.bubble-item.border-Grey[b-bgoavkemsz]   { border-color: #757575 !important; }
.bubble-item.border-Brown[b-bgoavkemsz]  { border-color: #6D4C41 !important; }
.bubble-item.border-Pink[b-bgoavkemsz]   { border-color: #D81B60 !important; }
.bubble-item.border-Teal[b-bgoavkemsz]   { border-color: #00897B !important; }

/* --- 5. RESTORED: UTILITIES --- */

.view-details-prompt[b-bgoavkemsz] {
    font-weight: 600;
    font-size: 0.9em;
    margin-top: 10px;
    opacity: 0.7;
}

.start-mode-label[b-bgoavkemsz] {
    font-size: 0.8em;
    color: var(--color-text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* Ensure Main Content is positioned correctly */
.bubble-content-main[b-bgoavkemsz] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* /Shared/Components/BubbleTimer.razor.rz.scp.css */
.bubble-timer[b-0t49zoaeh4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 10px;
    background-color: rgba(135, 206, 235, 0.15);
    border-radius: 12px;
    color: #3a9fc2;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.bubble-timer .clock-icon[b-0t49zoaeh4] {
    flex-shrink: 0;
}

.bubble-timer .countdown[b-0t49zoaeh4] {
    white-space: nowrap;
}
/* /Shared/Components/BurstCard.razor.rz.scp.css */
.burst-card[b-ca4q9rpsaw] {
    background: linear-gradient(160deg, var(--color-bg-surface), var(--color-bg-page));
    border-radius: 16px;
    border: 1px solid rgba(135, 206, 235, 0.3);
    padding: 24px;
    box-shadow: 0 4px 14px var(--color-shadow-card);
    transition: all 0.3s ease-in-out;

    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.burst-card:hover[b-ca4q9rpsaw] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px var(--color-shadow-card-hover);
    border-color: #87ceeb;
}

/* Top Accent (Separate div or pseudo-element) */
.burst-accent[b-ca4q9rpsaw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-brand-blue), #87ceeb);
}

.burst-header[b-ca4q9rpsaw] {
    margin-bottom: 15px;
}

.burst-title-row:hover .burst-title[b-ca4q9rpsaw] {
    color: #4A90E2;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.burst-title-row[b-ca4q9rpsaw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.burst-title[b-ca4q9rpsaw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.icon-open-page[b-ca4q9rpsaw] {
    color: var(--color-text-muted);
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: translateX(-5px);
}

.burst-title-row:hover .icon-open-page[b-ca4q9rpsaw] {
    opacity: 1;
    transform: translateX(0);
    color: #4A90E2;
}

.burst-date[b-ca4q9rpsaw] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.burst-topics[b-ca4q9rpsaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-pill[b-ca4q9rpsaw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--color-bg-bubble-tint), var(--color-bg-hover));
    color: var(--color-brand-blue);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
}
/* /Shared/Components/BurstSearch.razor.rz.scp.css */
.burst-search-container[b-83n0yjs7d3] {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    width: 100%;
    max-width: 100%;
}

.search-input-wrapper[b-83n0yjs7d3] {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper input[b-83n0yjs7d3] {
    width: 100%;
    padding: 12px 40px 12px 45px; /* Room for icons */
    border-radius: 30px; /* Pill shape */
    border: 1px solid var(--color-border-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    outline: none;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
}

.search-input-wrapper input:focus[b-83n0yjs7d3] {
    border-color: #87ceeb; /* Brand Teal */
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.2);
}

.search-icon[b-83n0yjs7d3] {
    position: absolute;
    left: 15px;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.clear-btn[b-83n0yjs7d3] {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.clear-btn:hover[b-83n0yjs7d3] {
    color: var(--color-brand-blue);
}

.search-btn[b-83n0yjs7d3] {
    padding: 0 24px;
    border-radius: 30px;
    background-color: var(--color-brand-blue); /* Brand Blue */
    color: white;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover[b-83n0yjs7d3] {
    background-color: #303f9f;
}
/* /Shared/Components/ChatMessage.razor.rz.scp.css */
/* --- Chat Message Bubble --- */
.chat-message[b-dfryc6xp8h] {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    line-height: 1.4;
    transition: max-width 0.2s ease-in-out, width 0.2s ease-in-out;
}

.chat-message.editing[b-dfryc6xp8h] {
    max-width: 100%;
    width: 100%;
}

.chat-message.them[b-dfryc6xp8h] {
    align-self: flex-start;
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.chat-message.me[b-dfryc6xp8h] {
    align-self: flex-end;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

/* --- Tinted Background Colors --- */
.chat-message.bg-Blue[b-dfryc6xp8h] { background-color: rgba(30, 136, 229, 0.15); }
.chat-message.bg-Green[b-dfryc6xp8h] { background-color: rgba(67, 160, 71, 0.15); }
.chat-message.bg-Purple[b-dfryc6xp8h] { background-color: rgba(142, 36, 170, 0.15); }
.chat-message.bg-Red[b-dfryc6xp8h] { background-color: rgba(229, 57, 53, 0.15); }
.chat-message.bg-Orange[b-dfryc6xp8h] { background-color: rgba(251, 140, 0, 0.15); }
.chat-message.bg-Yellow[b-dfryc6xp8h] { background-color: rgba(249, 168, 37, 0.15); }
.chat-message.bg-Grey[b-dfryc6xp8h] { background-color: rgba(117, 117, 117, 0.15); }
.chat-message.bg-Brown[b-dfryc6xp8h] { background-color: rgba(109, 76, 65, 0.15); }
.chat-message.bg-Pink[b-dfryc6xp8h] { background-color: rgba(216, 27, 96, 0.15); }
.chat-message.bg-Teal[b-dfryc6xp8h] { background-color: rgba(0, 137, 123, 0.15); }

/* --- Message Content --- */
.message-sender[b-dfryc6xp8h] {
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 4px;
}

.message-content[b-dfryc6xp8h] {
    font-size: 1em;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0;
    white-space: pre-wrap;
}

/* --- Footer with Timestamp and Actions --- */
.message-footer[b-dfryc6xp8h] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px; /* Slightly increased gap for the chip */
    margin-top: 6px;
}

.message-footer .timestamp[b-dfryc6xp8h] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-right: auto; /* Pushes timestamp to far left if needed, or keeps spacing flexible */
}

/* --- Citation Link --- */
.citation-link[b-dfryc6xp8h] {
    color: var(--color-text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.citation-link:hover[b-dfryc6xp8h] {
    color: #4A90E2;
    opacity: 1;
}

/* --- SWAY CHIP --- */
.sway-chip[b-dfryc6xp8h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;

    /* Pill Shape */
    border-radius: 12px;
    border: 1px solid var(--color-border-primary);
    background-color: rgba(255, 255, 255, 0.6);

    /* Typography */
    color: var(--color-text-muted);
    font-size: 0.8em;
    font-weight: 700;

    /* Reset Button Defaults */
    cursor: default;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

/* State: Interactive (User can award) */
.sway-chip.interactive[b-dfryc6xp8h] {
    cursor: pointer;
    background-color: var(--color-bg-input);
    border-color: #d0d0d0;
}

.sway-chip.interactive:hover[b-dfryc6xp8h] {
    border-color: #F9A825; /* Sway Gold */
    background-color: rgba(249, 168, 37, 0.12);
    color: #F9A825;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(249, 168, 37, 0.15);
}

.sway-chip.interactive:active[b-dfryc6xp8h] {
    transform: translateY(0);
    box-shadow: none;
}

/* State: Awarded (User already voted) */
.sway-chip.awarded[b-dfryc6xp8h] {
    background-color: #F9A825;
    border-color: #F9A825;
    color: white;
    cursor: default;
    pointer-events: none;
}

/* Icon Animation on Hover */
.sway-chip.interactive:hover[b-dfryc6xp8h]  svg {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sway-count[b-dfryc6xp8h] {
    padding-top: 2px;
}

/* --- Action Buttons --- */
.message-actions[b-dfryc6xp8h] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-message:hover .message-actions[b-dfryc6xp8h] {
    opacity: 1;
}

.msg-action-btn[b-dfryc6xp8h] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 4px;
    line-height: 1;
    color: var(--color-text-muted);
}

.msg-action-btn.edit:hover[b-dfryc6xp8h] { color: #4A90E2; }
.msg-action-btn.delete:hover[b-dfryc6xp8h] { color: #E57373; }
/* /Shared/Components/ConfirmationDialog.razor.rz.scp.css */
.danger-heading[b-spxt4kzwr0] {
    color: #E53935;
}

.modal-body[b-spxt4kzwr0] {
    padding: 20px 0;
    text-align: center;
}

.modal-actions[b-spxt4kzwr0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.btn-danger[b-spxt4kzwr0] {
    background-color: #E53935;
}
/* /Shared/Components/FractureIcon.razor.rz.scp.css */
.fracture-icon-wrapper[b-71klytrdog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fracture-icon-wrapper.consensus[b-71klytrdog] {
    color: #00897B; /* Deep Teal */
}

.fracture-icon-wrapper.debating[b-71klytrdog] {
    color: #FB8C00; /* Deep Orange */
}

.fracture-icon-wrapper.polarized[b-71klytrdog] {
    color: #E53935; /* Strong Red */
}

/* Hover Animation: subtle pulse to draw attention to the metric */
.fracture-icon-wrapper:hover svg[b-71klytrdog] {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* /Shared/Components/InlineMessageEditor.razor.rz.scp.css */
.edit-mode-container[b-ayh9c10fqg] {
    padding: 10px;
    background: var(--color-bg-details-toggle);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    margin-top: 5px;
}

.edit-input[b-ayh9c10fqg] {
    width: 100%;
    min-height: 60px;
    border: 1px solid #4A90E2;
    padding: 10px;
    border-radius: 8px;
    font-size: 1em;
    resize: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
}

.edit-actions[b-ayh9c10fqg] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.edit-actions button[b-ayh9c10fqg] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
}

.save-btn[b-ayh9c10fqg] { background: #4A90E2; color: white; border: none; }
.cancel-btn[b-ayh9c10fqg] { background: var(--color-bg-details-toggle); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }

.add-citation-btn[b-ayh9c10fqg] {
    background: none;
    border: 1px dashed var(--color-border-primary);
    color: var(--color-text-muted);
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 5px;
}

.add-citation-btn:hover[b-ayh9c10fqg] {
    border-color: #87ceeb;
    color: #4A90E2;
}

.citation-field-wrapper[b-ayh9c10fqg] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.citation-input-field[b-ayh9c10fqg] {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.85em;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 10px;
    background: var(--color-bg-citation-input);
    transition: border-color 0.2s;
}

.citation-input-field:focus[b-ayh9c10fqg] {
    outline: none;
    border-color: #87ceeb;
}

.remove-citation-btn[b-ayh9c10fqg] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
}

.remove-citation-btn:hover[b-ayh9c10fqg] { color: #E53935; }
/* /Shared/Components/KickVoteBanner.razor.rz.scp.css */
.kick-vote-banner[b-5l2h0y8gef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: 0 0 15px 0;

    /* Bubble Aesthetic: White card with Red Danger Border */
    background-color: var(--color-bg-surface);
    border: 1px solid #ffcdd2; /* Soft Red */
    border-left: 4px solid #E53935; /* Strong Red Indicator */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.08);

    animation: slideUp-b-5l2h0y8gef 0.3s ease-out;
}

@keyframes slideUp-b-5l2h0y8gef {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- LEFT SIDE: INFO --- */
.vote-info[b-5l2h0y8gef] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vote-icon[b-5l2h0y8gef] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E53935;
}

.vote-text[b-5l2h0y8gef] {
    font-size: 0.95em;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.target-name[b-5l2h0y8gef] {
    font-weight: 700;
}

/* Dynamic User Colors for the Name */
.user-color-Blue[b-5l2h0y8gef]   { color: #1E88E5; }
.user-color-Green[b-5l2h0y8gef]  { color: #43A047; }
.user-color-Purple[b-5l2h0y8gef] { color: #8E24AA; }
.user-color-Red[b-5l2h0y8gef]    { color: #E53935; }
.user-color-Orange[b-5l2h0y8gef] { color: #FB8C00; }
.user-color-Yellow[b-5l2h0y8gef] { color: #F9A825; }
.user-color-Grey[b-5l2h0y8gef]   { color: #757575; }
.user-color-Brown[b-5l2h0y8gef]  { color: #6D4C41; }
.user-color-Pink[b-5l2h0y8gef]   { color: #D81B60; }
.user-color-Teal[b-5l2h0y8gef]   { color: #00897B; }

.vote-status[b-5l2h0y8gef] {
    font-size: 0.8em;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --- RIGHT SIDE: ACTIONS --- */
.vote-actions[b-5l2h0y8gef] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vote-btn[b-5l2h0y8gef] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Keep Button (Soft Grey/Blue) */
.btn-keep[b-5l2h0y8gef] {
    background-color: transparent;
    border-color: var(--color-border-primary);
    color: #78909c;
}
.btn-keep:hover[b-5l2h0y8gef] {
    background-color: #eceff1;
    border-color: var(--color-text-muted);
    color: #546e7a;
}

/* Kick Button (Danger Red) */
.btn-kick[b-5l2h0y8gef] {
    background-color: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}
.btn-kick:hover[b-5l2h0y8gef] {
    background-color: #ffcdd2;
    border-color: #e57373;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(229, 57, 53, 0.2);
}

/* Selected Vote State */
.btn-keep.selected[b-5l2h0y8gef] {
    background-color: #eceff1;
    border-color: #78909c;
    color: #546e7a;
    cursor: default;
}

.btn-kick.selected[b-5l2h0y8gef] {
    background-color: #ffcdd2;
    border-color: #e57373;
    color: #c62828;
    cursor: default;
}

.vote-cast-badge[b-5l2h0y8gef] {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-text-muted);
    font-style: italic;
    padding-right: 10px;
}
/* /Shared/Components/MembersSidebar.razor.rz.scp.css */
.vote-to-kick-note[b-u60a02631q] {
    font-size: 0.85em;
    color: #999;
    margin-top: 8px;
}

/* -------------------------------------- */
/* Members Panel Layout                   */
/* -------------------------------------- */

.members-panel[b-u60a02631q] {
    width: 450px;
    flex-shrink: 0;
    background: var(--color-bg-surface);
    border-left: 1px solid var(--color-border-panel);
    border-top: 1px solid var(--color-border-panel);
    border-bottom: 1px solid var(--color-border-panel);
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    animation: slideIn-b-u60a02631q 0.3s ease-out;
    box-shadow: -5px 0 20px var(--color-shadow-card);
}

@keyframes slideIn-b-u60a02631q {
    from { transform: translateX(100%); width: 0; opacity: 0; }
    to { transform: translateX(0); width: 450px; opacity: 1; }
}

/* -------------------------------------- */
/* Mobile: Full-screen overlay drawer     */
/* -------------------------------------- */

@media (max-width: 900px) {
    .members-panel[b-u60a02631q] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        z-index: 200;
        animation: slideInMobile-b-u60a02631q 0.3s ease-out;
    }

    @keyframes slideInMobile-b-u60a02631q {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* On mobile the fixed 120px action columns are too cramped.
       Switch each member row to a two-row layout: name on top, buttons below. */
    .sidebar-member-item[b-u60a02631q] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }

    .member-info[b-u60a02631q] {
        grid-column: 1 / -1; /* span both columns */
    }

    .member-kick-action[b-u60a02631q],
    .member-block-action[b-u60a02631q] {
        width: auto;
        justify-content: flex-start;
    }

    .action-btn[b-u60a02631q] {
        width: 100%;
    }
}

.panel-header[b-u60a02631q] {
    padding: 15px 20px;
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3[b-u60a02631q] {
    margin: 0;
    font-size: 1.2em;
    color: var(--color-brand-blue);
}

.close-panel-btn[b-u60a02631q] {
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
}

.close-panel-btn:hover[b-u60a02631q] {
    color: #E57373;
}

.sidebar-members-list[b-u60a02631q] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-member-item[b-u60a02631q] {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.sidebar-member-item:hover[b-u60a02631q] {
    background: var(--color-bg-hover);
}

.member-info[b-u60a02631q] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.member-kick-action[b-u60a02631q],
.member-block-action[b-u60a02631q] {
    display: flex;
    justify-content: center;
    width: 120px;
}

.member-color-dot[b-u60a02631q] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.member-name[b-u60a02631q] {
    font-weight: 500;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner-badge[b-u60a02631q] {
    color: #F9A825;
    font-size: 1em;
}

.sidebar-footer[b-u60a02631q] {
    padding: 15px;
    border-top: 1px solid var(--color-border-primary);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancel-bubble-btn[b-u60a02631q] {
    width: 100%;
    padding: 10px;
    background: #E53935;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.cancel-bubble-btn:hover[b-u60a02631q] {
    background: #C62828;
}

.leave-bubble-btn[b-u60a02631q] {
    width: 100%;
    padding: 10px;
    border: 1px solid #E53935;
    border-radius: 8px;
    background: transparent;
    color: #E53935;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.leave-bubble-btn:hover[b-u60a02631q] {
    background: #E53935;
    color: white;
}

/* Base Action Button Style */
.action-btn[b-u60a02631q] {
    background: transparent;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 10px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    width: 120px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* DYNAMIC COLOR MAP */
.action-btn.border-Blue[b-u60a02631q] { border-color: #1E88E5; color: #1E88E5; }
.action-btn.border-Blue:hover[b-u60a02631q] { background-color: rgba(30, 136, 229, 0.1); }
.action-btn.border-Green[b-u60a02631q] { border-color: #43A047; color: #43A047; }
.action-btn.border-Green:hover[b-u60a02631q] { background-color: rgba(67, 160, 71, 0.1); }
.action-btn.border-Purple[b-u60a02631q] { border-color: #8E24AA; color: #8E24AA; }
.action-btn.border-Purple:hover[b-u60a02631q] { background-color: rgba(142, 36, 170, 0.1); }
.action-btn.border-Red[b-u60a02631q] { border-color: #E53935; color: #E53935; }
.action-btn.border-Red:hover[b-u60a02631q] { background-color: rgba(229, 57, 53, 0.1); }
.action-btn.border-Orange[b-u60a02631q] { border-color: #FB8C00; color: #FB8C00; }
.action-btn.border-Orange:hover[b-u60a02631q] { background-color: rgba(251, 140, 0, 0.1); }
.action-btn.border-Yellow[b-u60a02631q] { border-color: #F9A825; color: #F9A825; }
.action-btn.border-Yellow:hover[b-u60a02631q] { background-color: rgba(249, 168, 37, 0.1); }
.action-btn.border-Grey[b-u60a02631q] { border-color: #757575; color: #757575; }
.action-btn.border-Grey:hover[b-u60a02631q] { background-color: rgba(117, 117, 117, 0.1); }
.action-btn.border-Brown[b-u60a02631q] { border-color: #6D4C41; color: #6D4C41; }
.action-btn.border-Brown:hover[b-u60a02631q] { background-color: rgba(109, 76, 65, 0.1); }
.action-btn.border-Pink[b-u60a02631q] { border-color: #D81B60; color: #D81B60; }
.action-btn.border-Pink:hover[b-u60a02631q] { background-color: rgba(216, 27, 96, 0.1); }
.action-btn.border-Teal[b-u60a02631q] { border-color: #00897B; color: #00897B; }
.action-btn.border-Teal:hover[b-u60a02631q] { background-color: rgba(0, 137, 123, 0.1); }
/* /Shared/Components/MessageComposer.razor.rz.scp.css */
/* --- INPUT AREA (Sticks to the bottom) --- */
.chat-input-area[b-p9kv5yvt2g] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 15px 10px;
    /* On iPhone, env(safe-area-inset-bottom) adds clearance above the home indicator bar.
       The max() ensures we always have at least 15px even when safe-area-inset-bottom is 0. */
    padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
    margin-top: 10px;
    border-top: 3px solid;
    background-color: var(--color-bg-input-area);
}

.message-textarea[b-p9kv5yvt2g] {
    flex-grow: 1;
    min-height: 40px;
    padding: 10px;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    font-size: 1em;
    resize: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
}

.message-textarea:focus[b-p9kv5yvt2g] {
    border-color: #87ceeb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(135, 206, 235, 0.3);
}

.citation-input-field[b-p9kv5yvt2g] {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.85em;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 10px;
    background: var(--color-bg-citation-input);
    transition: border-color 0.2s;
}

.citation-input-field:focus[b-p9kv5yvt2g] {
    outline: none;
    border-color: #87ceeb;
}

.input-stack[b-p9kv5yvt2g] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.citation-input-field.main-cite[b-p9kv5yvt2g] {
    border: none;
    border-top: 1px solid var(--color-border-primary);
    border-radius: 0 0 8px 8px;
    background: transparent;
    padding: 4px 12px;
    margin-bottom: 0;
}

.remove-citation-btn[b-p9kv5yvt2g] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
}

.remove-citation-btn:hover[b-p9kv5yvt2g] { color: #E53935; }

.citation-field-wrapper[b-p9kv5yvt2g] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.citation-field-wrapper.main[b-p9kv5yvt2g] {
    border-top: 1px solid var(--color-border-primary);
    padding-right: 10px;
}

.input-actions-sidebar[b-p9kv5yvt2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

.icon-toggle-btn[b-p9kv5yvt2g] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}

.icon-toggle-btn:hover[b-p9kv5yvt2g] {
    background: var(--color-bg-hover);
    color: #4A90E2;
}

.send-btn[b-p9kv5yvt2g] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    background-color: #4A90E2;
}

.send-btn.border-Blue[b-p9kv5yvt2g] { background-color: #1E88E5; }
.send-btn.border-Green[b-p9kv5yvt2g] { background-color: #43A047; }
.send-btn.border-Purple[b-p9kv5yvt2g] { background-color: #8E24AA; }
.send-btn.border-Red[b-p9kv5yvt2g] { background-color: #E53935; }
.send-btn.border-Orange[b-p9kv5yvt2g] { background-color: #FB8C00; }
.send-btn.border-Yellow[b-p9kv5yvt2g] { background-color: #F9A825; }
.send-btn.border-Grey[b-p9kv5yvt2g] { background-color: #757575; }
.send-btn.border-Brown[b-p9kv5yvt2g] { background-color: #6D4C41; }
.send-btn.border-Pink[b-p9kv5yvt2g] { background-color: #D81B60; }
.send-btn.border-Teal[b-p9kv5yvt2g] { background-color: #00897B; }

.send-btn svg[b-p9kv5yvt2g] {
    width: 18px;
    height: 18px;
    transform: translateX(2px) rotate(45deg);
    stroke: white;
}