:root {
  --app-bg: #f5f3fc;
  --surface: #ffffff;
  --surface-soft: #f3f1f9;
  --surface-raised: #ffffff;
  --text: #282638;
  --muted: #79748b;
  --border: #e5e1f0;
  --accent: #7160db;
  --action: #7160db;
  --accent-soft: #ece7ff;
  --chat-bg: #e6e1f2;
  --bubble: #ffffff;
  --bubble-own: #cfc3f5;
  --message-meta: #777187;
  --danger: #c94661;
  --scrim: rgba(24, 19, 43, .38);
  --shadow: 0 14px 45px rgba(56, 42, 91, .09);
  --color-primary: var(--action);
  --color-primary-dark: var(--action);
  --color-primary1: var(--accent);
  --color-bg: var(--app-bg);
  --ui-text: var(--text);
  --ui-muted: var(--muted);
  --ui-muted2: var(--muted);
  --ui-line: var(--border);
  --sidebar-panel-bg: var(--surface);
  --sidebar-panel-bg-dark: var(--surface);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
:root[data-theme="dark"] {
  --app-bg: #141321;
  --surface: #1e1d2e;
  --surface-soft: #28263b;
  --surface-raised: #2b293e;
  --text: #f1eef9;
  --muted: #b0aac5;
  --border: #383348;
  --accent: #b4a6ff;
  --action: #7b67e3;
  --accent-soft: #39304f;
  --chat-bg: #171522;
  --bubble: #282537;
  --bubble-own: #40355b;
  --message-meta: #bfb7cf;
  --danger: #ff90a5;
  --scrim: rgba(4, 3, 10, .65);
  --shadow: 0 14px 45px rgba(0, 0, 0, .24);
}
:root.native-insets { --safe-top: 0px; --safe-bottom: 0px; --safe-left: 0px; --safe-right: 0px; }
html { background: var(--surface); color: var(--text); }
body { background: var(--app-bg) !important; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body::before, body::after, .settings-sidebar::before, .settings-sidebar::after { display: none !important; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
::selection { color: var(--text); background: var(--accent-soft); }
.layout { background: var(--app-bg); }
.layout > .header { background: var(--surface); }
.chat-list { background: var(--app-bg) !important; border-color: var(--border); }
.chat-list .chat-scroll { background: transparent; }
.search-wrapper { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: none; border-radius: 18px; }
.search-wrapper #userTagInput { color: var(--text); background: transparent; }
.search-wrapper i, .search-wrapper #userTagInput::placeholder, .search-wrapper #clearSearch { color: var(--muted); }
.chat-list .chat-item { color: var(--text); }
.chat-list .chat-item:hover, .chat-list .call-item:hover { background: var(--surface-soft); }
.chat-list .chat-item.active { background: var(--accent-soft); box-shadow: none; }
.chat-list .chat-name, .chat-list .call-name { color: var(--text); }
.chat-list .chat-last, .chat-list .msg-time, .chat-list .call-date, .chat-list .call-meta { color: var(--muted); }
.chat-list [data-avatar-wrapper] { background: var(--surface-soft); border-color: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.chat-list > .tabs { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 5px 18px rgba(30, 20, 60, .04); }
.tabs .tab { color: var(--muted); border-radius: 14px; }
.tabs .tab.active { color: var(--accent); background: var(--accent-soft); }
.fab-wrapper .btn-circle, .fab-wrapper .fab-mini { background: var(--action); color: #fff; box-shadow: 0 8px 24px rgba(90, 65, 180, .18); }
.container .chat-area { background: var(--chat-bg); }
.chat-area::before { opacity: .13; }
:root[data-theme="dark"] .chat-area::before { opacity: .05; mix-blend-mode: normal; }
#messagesArea > .message { --bubble-bg: var(--bubble); background: var(--bubble); color: var(--text); border-radius: 17px; padding: 10px 12px 7px; line-height: 1.45; }
#messagesArea > .my-message { --bubble-bg: var(--bubble-own); background: var(--bubble-own); }
#messagesArea > .message > .message-text { display: block; min-width: 0; overflow-wrap: anywhere; }
#messagesArea > .message > .sender { color: var(--accent); }
#messagesArea > .message > .sender:empty, #messagesArea > .message > .buttons-container:empty { display: none; }
#messagesArea > .message > .message-time { display: flex; position: static; inset: auto; align-self: flex-end; align-items: center; flex: 0 0 auto; max-width: 100%; min-height: 14px; margin: 4px 0 0; padding: 0; line-height: 14px; font-size: 11px; white-space: nowrap; color: var(--message-meta); }
#messagesArea > .message > .message-time::after { flex: 0 0 auto; }
#messagesArea > .message.sticker > .message-time { padding: 3px 8px; background: var(--surface-raised); color: var(--muted) !important; }
#messagesArea > .message.sticker > .message-time::after { filter: none; }
.date-separator { color: var(--muted); background: var(--surface-soft); border-color: var(--border); box-shadow: none; }
.message .message-document, .message .message-file, .message .file-card { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
.message .file-name, .message .file-ext, .message .file-size, .message .audio-time { color: var(--muted); }
.chat-area .input-area { background: var(--surface); border-color: var(--border); box-shadow: none; }
.chat-area .input-area #messageInput { color: var(--text); }
.chat-area #messageInput.is-empty::before { color: var(--muted); font-size: 16px; line-height: 1.4; }
.chat-area .input-area .attach-button, .chat-area .input-area .lock-button { color: var(--muted); background: transparent; }
.chat-area .input-area .mic-button, .chat-area .input-area .send-button { background: var(--action); color: #fff; }
.chat-area .input-area button:hover { transform: none; }
.reply-preview, .input-reply-bubble, .input-edit-bubble { background: var(--surface-soft); color: var(--text); border-color: var(--accent); }
.settings-sidebar, .settings-sidebar .settings-header, .settings-sidebar .settings-body { background: var(--surface); color: var(--text); }
.settings-sidebar #settingsHeader, .settings-sidebar .close-sidebar { color: var(--text); }
.settings-sidebar #usernameInput, .settings-sidebar #languageSelect, .theme-select, .ui-input { background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); border-radius: 14px; min-height: 50px; padding: 12px 14px; width: 100%; box-sizing: border-box; box-shadow: none; }
.settings-sidebar #usernameInput:focus, .ui-input:focus, .theme-select:focus { border-color: var(--accent); }
.settings-sidebar #usernameInput::placeholder, .settings-sidebar #languageLabel { color: var(--muted); }
.settings-sidebar .avatar-wrapper { margin-top: 0 !important; }
.theme-setting { display: grid; gap: 9px; margin: 22px 0; }
.theme-setting label { font-size: 14px; font-weight: 650; color: var(--text); }
.theme-setting p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.settings-sidebar #saveSettingsButton { background: var(--action); color: #fff; border: 0; box-shadow: none; border-radius: 14px; }
.settings-sidebar #logoutButtonProfile { background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); box-shadow: none; border-radius: 14px; }
.settings-sidebar #deleteAccountButton { background: transparent; color: var(--danger); border: 1px solid var(--border); box-shadow: none; font-size: 13px; border-radius: 14px; }
.ss-main, .ss-content, .ss-content .ss-search input { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.ss-content .ss-list .ss-option { color: var(--text) !important; }
.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-selected { background: var(--accent-soft) !important; }
.ss-main .ss-arrow path { stroke: var(--muted); }
#screenBackdrop, .groupmodal, .modal1 { background: var(--scrim); }
.groupmodal-content, .modal1 .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 24px; }
.modal1 .modal-content button { background: var(--surface-soft); color: var(--text); border-color: var(--border); min-height: 48px; border-radius: 12px; }
.menu-dropdown, .context-menu, .modal-window { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.menu-dropdown button, .modal-window .icon-button, .context-menu li, .context-menu button, .context-menu .label { color: var(--text); }
.menu-dropdown button:hover, .modal-window li:hover, .context-menu li:hover { background: var(--surface-soft); }
.menu-dropdown .warning-action, .menu-dropdown .delete-chat { color: var(--danger); }
.context-menu .menu-topbar { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
.context-menu input, .context-menu select, .context-menu .dropdown, #fontMenu { color: var(--text); background: var(--surface-raised); border-color: var(--border); }
#sidebar { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; }
#sidebar #contactCard, #sidebar #sidebarScroll, #sidebar #sidebarTop { color: var(--text); background: var(--surface) !important; }
#sidebar .panel-close { background: var(--surface-soft); color: var(--text); }
#sidebar h2, #sidebar h3, #sidebar .contact-name, #sidebar .participant-name { color: var(--text) !important; }
#sidebar button { color: var(--text); }
#sidebar-stickers, #sidebar-stickers > div:first-child { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
#sidebar-stickers #tab-stickers, #sidebar-stickers #tab-emojis { background: var(--surface-soft) !important; color: var(--text) !important; border-color: var(--border) !important; }
#sidebar-stickers [data-btn="emoji"] { background: var(--surface-soft) !important; }
#sidebar-stickers [data-btn]:hover { background: var(--accent-soft) !important; }
.call-overlay .call-window { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); }
.call-overlay .call-status, .call-overlay .call-name, .call-overlay .call-timer, .call-overlay .call-vol-label { color: var(--text); }
.call-overlay .call-avatar { border-color: var(--surface-soft); }
.call-overlay .call-minimize { background: var(--surface-soft); color: var(--text); border-color: var(--border); min-width: 44px; height: 44px; }
.call-overlay #callVolume { background: var(--border); }
.ui-label { display: block; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.4; margin-bottom: 9px; }
.ui-muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.ui-error { color: var(--danger); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.ui-error:empty { display: none; }
.ui-primary, .ui-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 650; cursor: pointer; }
.ui-primary { background: var(--action); color: #fff; }
.ui-secondary { background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); }
.ui-primary:disabled { opacity: .45; }
.ui-icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; background: var(--surface-soft); color: var(--text); border: 0; border-radius: 14px; cursor: pointer; }
.ui-icon-button svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }