/* Shared visual language for authenticated account pages. */
:where(.messages-shell, .conversation-shell, .profile-page-shell, .sessions-page-shell, .blocked-shell, .member-shell) {
    --account-primary: #4f46e5;
    --account-primary-dark: #3730a3;
    --account-accent: #14b8a6;
    --account-ink: #172033;
    --account-muted: #64748b;
    --account-surface: rgba(255, 255, 255, 0.88);
    --account-border: rgba(79, 70, 229, 0.12);
    --account-shadow: 0 18px 46px rgba(30, 41, 59, 0.08);
}

.messages-shell,
.conversation-shell,
.profile-page-shell,
.sessions-page-shell,
.blocked-shell,
.member-shell {
    color: var(--account-ink);
}

.messages-shell,
.profile-page-shell,
.sessions-page-shell,
.blocked-shell,
.member-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.10), transparent 28%),
        radial-gradient(circle at 94% 12%, rgba(20, 184, 166, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #f3f6ff 100%);
}

.blocked-shell {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
}

.blocked-header,
.blocked-card {
    border-color: var(--account-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--account-shadow) !important;
}

.blocked-header {
    background: var(--account-surface) !important;
    backdrop-filter: blur(16px);
}

.blocked-header h1,
.blocked-name {
    color: var(--account-ink) !important;
}

.blocked-header p,
.blocked-meta {
    color: var(--account-muted) !important;
}

.blocked-primary-btn {
    background: linear-gradient(135deg, var(--account-primary), #7c3aed 58%, var(--account-accent)) !important;
}

.member-shell {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
}

.member-page-header {
    background: linear-gradient(135deg, var(--account-primary), #7c3aed 58%, var(--account-accent)) !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: var(--account-shadow) !important;
}

.member-card,
.member-section {
    border-color: var(--account-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--account-shadow) !important;
}

.member-card,
.member-section,
.member-hero {
    background: var(--account-surface) !important;
}

.member-name,
.member-section h2 {
    color: var(--account-ink) !important;
}

.member-username,
.member-meta,
.member-kpi-label {
    color: var(--account-muted) !important;
}

.member-avatar,
.member-avatar-placeholder {
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 24px rgba(30, 41, 59, 0.12) !important;
}

.member-avatar-placeholder {
    background: linear-gradient(135deg, var(--account-primary), #7c3aed 58%, var(--account-accent)) !important;
}

.member-pill,
.member-kpi {
    border-color: var(--account-border) !important;
    background: rgba(248, 250, 252, 0.78) !important;
}

.member-actions .btn {
    background: linear-gradient(135deg, var(--account-primary), #7c3aed 58%, var(--account-accent)) !important;
    border-radius: 13px !important;
}

.conversation-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.10), transparent 28%),
        radial-gradient(circle at 94% 12%, rgba(20, 184, 166, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #f3f6ff 100%);
}

.messages-toolbar,
.conversation-topbar,
.profile-page-header,
.sessions-page-header {
    border-radius: 24px !important;
    box-shadow: var(--account-shadow) !important;
}

.messages-toolbar,
.conversation-topbar {
    border: 1px solid var(--account-border) !important;
    background: var(--account-surface) !important;
    backdrop-filter: blur(16px);
}

.messages-title-block h1,
.conversation-title {
    letter-spacing: -0.035em;
    color: var(--account-ink);
}

.profile-page-header h1,
.sessions-page-header h1 {
    color: #fff !important;
    letter-spacing: -0.035em;
}

.messages-eyebrow {
    color: var(--account-primary) !important;
}

.messages-cta-btn,
.profile-page-header,
.sessions-page-header {
    background: linear-gradient(135deg, var(--account-primary), #7c3aed 58%, var(--account-accent)) !important;
}

.messages-secondary-btn,
.session-quick-link,
.conversation-back-btn {
    border-color: var(--account-border) !important;
    color: var(--account-primary) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.messages-secondary-btn:hover,
.session-quick-link:hover,
.conversation-back-btn:hover {
    color: var(--account-primary-dark) !important;
    border-color: rgba(79, 70, 229, 0.28) !important;
    background: #fff !important;
}

.conversation-card,
.conversation-panel,
.profile-sidebar-card,
.profile-content-card,
.session-side-card,
.session-main-card {
    border: 1px solid var(--account-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--account-shadow) !important;
}

.conversation-card .card-header,
.conversation-panel .card-header,
.profile-content-card-header,
.session-side-card .card-header,
.session-main-card .card-header {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.97), rgba(124, 58, 237, 0.94)) !important;
    border-bottom: 0 !important;
}

.conversation-panel .card-header,
.conversation-panel .card-header a,
.profile-content-card-header,
.session-side-card .card-header,
.session-main-card .card-header {
    color: #fff !important;
}

.conversation-list-item,
.session-item {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.conversation-list-item:hover,
.session-item:hover {
    background: rgba(79, 70, 229, 0.045) !important;
}

.profile-sidebar-header {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.97), rgba(20, 184, 166, 0.92)) !important;
}

.profile-content-card .form-control,
.profile-content-card .form-select,
#messageText,
.conversation-composer .form-control {
    border-color: rgba(148, 163, 184, 0.28) !important;
    border-radius: 14px !important;
}

.profile-content-card .form-control:focus,
.profile-content-card .form-select:focus,
#messageText:focus,
.conversation-composer .form-control:focus {
    border-color: rgba(79, 70, 229, 0.48) !important;
    box-shadow: 0 0 0 0.22rem rgba(79, 70, 229, 0.12) !important;
}

/* Modern action dialogs used by messages and conversations. */
#newMessageModal .modal-content,
#clearChatModal .modal-content,
#removeChatModal .modal-content,
#messageActionModal .modal-content,
#messageEditModal .modal-content,
#reportUserModal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(30, 41, 59, 0.20);
}

#newMessageModal .modal-header,
#clearChatModal .modal-header,
#removeChatModal .modal-header,
#messageActionModal .modal-header,
#messageEditModal .modal-header,
#reportUserModal .modal-header {
    padding: 1.15rem 1.35rem;
    color: #fff;
    border-bottom: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed 58%, #14b8a6);
}

#newMessageModal .modal-header .btn-close,
#clearChatModal .modal-header .btn-close,
#removeChatModal .modal-header .btn-close,
#messageActionModal .modal-header .btn-close,
#messageEditModal .modal-header .btn-close,
#reportUserModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

#newMessageModal .modal-body,
#clearChatModal .modal-body,
#removeChatModal .modal-body,
#messageActionModal .modal-body,
#messageEditModal .modal-body,
#reportUserModal .modal-body {
    padding: 1.35rem;
}

#newMessageModal .modal-footer,
#clearChatModal .modal-footer,
#removeChatModal .modal-footer,
#messageActionModal .modal-footer,
#messageEditModal .modal-footer,
#reportUserModal .modal-footer {
    gap: 0.55rem;
    padding: 0.9rem 1.35rem 1.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

#newMessageModal .btn,
#clearChatModal .btn,
#removeChatModal .btn,
#messageActionModal .btn,
#messageEditModal .btn,
#reportUserModal .btn {
    border-radius: 12px;
    font-weight: 700;
}

#newMessageModal .form-control,
#clearChatModal .form-control,
#removeChatModal .form-control,
#messageActionModal .form-control,
#messageEditModal .form-control,
#reportUserModal .form-control,
#reportUserModal .form-select {
    border-radius: 13px;
    border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] #newMessageModal .modal-content,
html[data-theme="dark"] #clearChatModal .modal-content,
html[data-theme="dark"] #removeChatModal .modal-content,
html[data-theme="dark"] #messageActionModal .modal-content,
html[data-theme="dark"] #messageEditModal .modal-content,
html[data-theme="dark"] #reportUserModal .modal-content {
    border-color: rgba(167, 139, 250, 0.18);
    background: #181927;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] #newMessageModal .modal-body,
html[data-theme="dark"] #clearChatModal .modal-body,
html[data-theme="dark"] #removeChatModal .modal-body,
html[data-theme="dark"] #messageActionModal .modal-body,
html[data-theme="dark"] #messageEditModal .modal-body,
html[data-theme="dark"] #reportUserModal .modal-body {
    color: #e5e7eb;
}

html[data-theme="dark"] #newMessageModal .modal-footer,
html[data-theme="dark"] #clearChatModal .modal-footer,
html[data-theme="dark"] #removeChatModal .modal-footer,
html[data-theme="dark"] #messageActionModal .modal-footer,
html[data-theme="dark"] #messageEditModal .modal-footer,
html[data-theme="dark"] #reportUserModal .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] #newMessageModal .form-control,
html[data-theme="dark"] #clearChatModal .form-control,
html[data-theme="dark"] #removeChatModal .form-control,
html[data-theme="dark"] #messageActionModal .form-control,
html[data-theme="dark"] #messageEditModal .form-control,
html[data-theme="dark"] #reportUserModal .form-control,
html[data-theme="dark"] #reportUserModal .form-select {
    color: #eef2ff;
    background: #202131;
    border-color: rgba(167, 139, 250, 0.20);
}

.conversation-composer {
    position: relative;
}

.inline-edit-bar {
    position: absolute;
    right: 0.9rem;
    bottom: calc(100% + 0.45rem);
    left: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(30, 41, 59, 0.10);
    font-size: 0.82rem;
    font-weight: 700;
}

.inline-edit-bar .btn-link {
    padding: 0.15rem 0.35rem;
    color: #6366f1;
    font-weight: 700;
    text-decoration: none;
}

.message-action-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);
    z-index: 20;
    display: flex;
    gap: 0.3rem;
    padding: 0.35rem;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 30px rgba(30, 41, 59, 0.16);
}

.message-bubble {
    position: relative;
}

.message-action-menu button {
    width: 32px;
    height: 32px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.message-action-menu button:hover {
    color: #4338ca;
    background: #eef2ff;
}

.message-action-menu button[data-action="delete"]:hover {
    color: #dc2626;
    background: #fef2f2;
}

html[data-theme="dark"] .inline-edit-bar {
    color: #ddd6fe;
    background: #27254a;
    border-color: rgba(167, 139, 250, 0.24);
}

html[data-theme="dark"] .inline-edit-bar .btn-link { color: #c4b5fd; }

html[data-theme="dark"] .message-action-menu {
    background: #202131;
    border-color: rgba(167, 139, 250, 0.22);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .message-action-menu button { color: #aeb4c7; }
html[data-theme="dark"] .message-action-menu button:hover { color: #ddd6fe; background: #302e4e; }

html[data-theme="dark"] :where(.messages-shell, .conversation-shell, .profile-page-shell, .sessions-page-shell, .blocked-shell, .member-shell) {
    --account-ink: #eef2ff;
    --account-muted: #a8b1c5;
    --account-surface: rgba(24, 25, 40, 0.86);
    --account-border: rgba(167, 139, 250, 0.16);
    --account-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .messages-shell,
html[data-theme="dark"] .profile-page-shell,
html[data-theme="dark"] .sessions-page-shell,
html[data-theme="dark"] .blocked-shell,
html[data-theme="dark"] .member-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.18), transparent 28%),
        radial-gradient(circle at 94% 12%, rgba(20, 184, 166, 0.10), transparent 24%),
        linear-gradient(180deg, #10111d 0%, #151624 100%) !important;
}

html[data-theme="dark"] .blocked-header,
html[data-theme="dark"] .blocked-card {
    background: var(--account-surface) !important;
    border-color: var(--account-border) !important;
}

html[data-theme="dark"] .member-card,
html[data-theme="dark"] .member-section,
html[data-theme="dark"] .member-hero {
    background: var(--account-surface) !important;
    border-color: var(--account-border) !important;
}

html[data-theme="dark"] .member-name,
html[data-theme="dark"] .member-section h2,
html[data-theme="dark"] .member-kpi-value,
html[data-theme="dark"] .member-bio {
    color: var(--account-ink) !important;
}

html[data-theme="dark"] .member-pill,
html[data-theme="dark"] .member-kpi {
    background: rgba(30, 30, 48, 0.82) !important;
    border-color: var(--account-border) !important;
}

html[data-theme="dark"] .conversation-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.18), transparent 28%),
        radial-gradient(circle at 94% 12%, rgba(20, 184, 166, 0.10), transparent 24%),
        linear-gradient(180deg, #10111d 0%, #151624 100%) !important;
}

html[data-theme="dark"] .messages-title-block h1,
html[data-theme="dark"] .conversation-title,
html[data-theme="dark"] .profile-page-header h1,
html[data-theme="dark"] .sessions-page-header h1 { color: #fff !important; }

html[data-theme="dark"] .messages-secondary-btn,
html[data-theme="dark"] .session-quick-link,
html[data-theme="dark"] .conversation-back-btn {
    color: #c4b5fd !important;
    background: rgba(30, 30, 48, 0.82) !important;
}

html[data-theme="dark"] .messages-secondary-btn:hover,
html[data-theme="dark"] .session-quick-link:hover,
html[data-theme="dark"] .conversation-back-btn:hover {
    color: #ede9fe !important;
    background: rgba(48, 46, 78, 0.92) !important;
}

html[data-theme="dark"] .conversation-list-item:hover,
html[data-theme="dark"] .session-item:hover {
    background: rgba(124, 58, 237, 0.10) !important;
}

@media (max-width: 576px) {
    .messages-toolbar,
    .conversation-topbar,
    .profile-page-header,
    .sessions-page-header {
        border-radius: 18px !important;
    }
}