/* Привязка компонентов к CSS-переменным темы */

#chat-app,
#chat-page {
    background: var(--lumina-bg-app) !important;
}

.sidebar {
    background: var(--lumina-bg-elevated) !important;
    border-color: var(--lumina-border) !important;
}

.chat-area {
    background: var(--lumina-bg-app) !important;
}

.sidebar-header {
    border-color: var(--lumina-border);
}

.menu-btn:hover {
    background: var(--lumina-bg-hover);
}

.chat-title {
    background: var(--lumina-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
}

#search-input {
    background: var(--lumina-bg-input);
    border-color: var(--lumina-border);
    color: var(--lumina-text);
}

#search-input:focus {
    border-color: var(--lumina-accent);
    background: var(--lumina-bg-input-focus);
}

#search-input::placeholder {
    color: var(--lumina-text-faint);
}

#search-results {
    background: var(--lumina-bg-surface);
    border-color: var(--lumina-border);
}

.search-result-item:hover {
    background: var(--lumina-bg-hover);
}

.search-result-fullname {
    color: var(--lumina-text);
}

.search-result-username {
    color: var(--lumina-text-muted);
}

.chat-item {
    border-color: var(--lumina-border-subtle);
}

.chat-item:hover {
    background: var(--lumina-bg-surface);
}

.chat-item.active {
    background: var(--lumina-bg-surface-2);
    border-left-color: var(--lumina-accent);
}

.chat-item-name {
    color: var(--lumina-text);
}

.chat-item-username,
.chat-item-last {
    color: var(--lumina-text-muted);
}

.chat-item-last {
    color: var(--lumina-text-faint);
}

.chat-area {
    background: var(--lumina-bg-app);
}

.chat-header {
    border-color: var(--lumina-border);
}

#chat-name {
    color: var(--lumina-text);
}

.chat-header-avatar,
.chat-avatar,
.search-result-avatar {
    background: var(--lumina-gradient-avatar);
}

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

#messages-container {
    background: transparent;
}

.message-received {
    background: var(--lumina-bg-bubble-in);
    border-color: var(--lumina-border);
    color: var(--lumina-text);
}

.message-sent {
    background: var(--lumina-bg-bubble-out);
    color: var(--lumina-text-on-accent);
}

.message-username {
    color: var(--lumina-text-muted);
}

.message-time {
    color: var(--lumina-text-faint);
}

.message-sent .message-username {
    color: rgba(255, 255, 255, 0.75);
}

.message-sent .message-time {
    color: rgba(255, 255, 255, 0.65);
}

.mention-link {
    color: var(--lumina-accent);
}

.chat-composer {
    background: var(--lumina-bg-elevated);
    border-color: var(--lumina-border);
}

.date-separator {
    color: var(--lumina-text-muted);
    background: var(--lumina-bg-surface-2);
}

.empty-chat {
    color: var(--lumina-text-faint);
}

.chat-back-btn {
    color: var(--lumina-accent);
}

/* Боковое меню */
.context-menu {
    background: var(--lumina-bg-elevated);
    border-color: var(--lumina-border);
}

.context-fullname {
    color: var(--lumina-text);
}

.context-username {
    color: var(--lumina-text-muted);
}

.context-divider {
    background: var(--lumina-border);
}

.context-item {
    color: var(--lumina-text);
}

.context-item:hover,
.context-profile:hover {
    background: var(--lumina-bg-hover);
}

.context-overlay.show {
    background: var(--lumina-overlay-menu);
}

.toggle-slider {
    background: var(--lumina-toggle-bg);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--lumina-accent);
}

/* Авторизация */
#auth-box {
    background: var(--lumina-bg-surface);
    border-color: var(--lumina-border);
}

.slogan {
    color: var(--lumina-text-faint);
}

#auth-box input,
.auth-page input {
    background: var(--lumina-bg-input);
    border-color: var(--lumina-border);
    color: var(--lumina-text);
}

#auth-box input:focus {
    border-color: var(--lumina-accent);
    background: var(--lumina-bg-input-focus);
}

/* Профиль */
.profile-modal-fullname,
.profile-stat-num {
    color: var(--lumina-text);
}

.profile-modal-label {
    color: var(--lumina-text-faint);
}

.profile-modal-value {
    color: var(--lumina-text-secondary);
}

.profile-modal-header-divider,
.profile-modal-divider,
.profile-modal-section {
    border-color: var(--lumina-border-subtle);
}

.profile-stat-label {
    color: var(--lumina-text-muted);
}

/* Подарки в модалках */
.gifts-category {
    background: var(--lumina-card-bg);
    border-color: var(--lumina-border);
}

.gift-item {
    background: var(--lumina-bg-surface-2);
    border-color: var(--lumina-border-strong);
}

.gifts-category-title {
    color: var(--lumina-text);
}

.quest-notification {
    background: var(--lumina-bg-surface);
    border-color: var(--lumina-accent);
}

.quest-notification-text {
    color: var(--lumina-text-secondary);
}

.quest-notification-text strong {
    color: var(--lumina-text);
}

#submit-btn,
.auth-page button#submit-btn {
    background: var(--lumina-accent);
}

#submit-btn:hover:not(:disabled) {
    background: var(--lumina-accent-hover);
}

.toggle-text {
    color: var(--lumina-text-muted);
}

.toggle-action {
    color: var(--lumina-accent);
}

.checkbox-row label {
    color: var(--lumina-text-muted);
}

/* Lumina UI (чат) */
.msg-menu,
.chat-gift-panel,
.gift-detail-card {
    color: var(--lumina-text);
}

.chat-pinned-bar,
.reply-preview {
    background: var(--lumina-bg-surface-2);
    border-color: var(--lumina-border);
}

.chat-header-title {
    color: var(--lumina-text);
}

.chat-header-subtitle {
    font-size: 12px;
    color: var(--lumina-text-muted);
}
/* Стили статусов */
.chat-item-status,
.chat-header-status,
.profile-modal-status {
    font-size: 11px;
    color: var(--lumina-text-faint);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Статус в шапке чата (серый) */
.chat-header-status {
    font-size: 12px;
    margin-top: 4px;
    color: var(--lumina-text-muted);
}

/* Статус в профиле (цвет акцента) */
.profile-modal-status {
    text-align: center;
    margin: 8px 0 16px;
    font-size: 13px;
    color: var(--lumina-accent);
}
.lumina-modal-overlay {
    transition: background 0.3s ease;
}

.lumina-modal {
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    opacity: 0;
    transform: scale(0.96) translateY(8px);
}

.lumina-modal-overlay.show .lumina-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}