/* VisualGram monochrome theme.
   Loaded after the inline styles: replaces glass/blur/glow effects with flat
   surfaces and hairlines. Only visual properties are overridden so the
   responsive layout rules in index.html keep working.
   Dark is the default; body.light-mode switches to the paper-white variant. */

:root {
    --ink-0: #0b0b0b;
    --ink-1: #121212;
    --ink-2: #181818;
    --ink-3: #202020;
    --ink-4: #2a2a2a;
    --line: #262626;
    --line-strong: #353535;
    --fg: #ededed;
    --fg-2: #a3a3a3;
    --fg-3: #6f6f6f;
    /* Bubbles never invert between themes: own = a step lighter graphite. */
    --bubble-out: #2f2f2f;
    --bubble-out-fg: #f2f2f2;
    --bubble-out-meta: #9a9a9a;
    --bubble-in: #1a1a1a;
    --bubble-in-fg: #ededed;
    --focus: #ffffff;
    --radius: 14px;
}

/* Aliases used by index.html. Declared on body (not :root) so they resolve
   against the active theme's --fg/--ink values. */
body, body.light-mode {
    --primary-color: #ededed;
    --primary-hover: #ffffff;
    --secondary-color: #8a8a8a;
    --accent-color: #bdbdbd;
    --text-color: var(--fg);
    --text-secondary: var(--fg-2);
    --bg-color: var(--ink-0);
    --container-bg: var(--ink-2);
    --border-color: var(--line);
    --input-bg: var(--ink-2);
    --placeholder-color: var(--fg-3);
    --sidebar-bg: var(--ink-1);
    --chat-bg: var(--ink-0);
    --message-in: var(--bubble-in);
    --message-out: var(--bubble-out);
    --glass-bg: var(--ink-2);
    --glass-border: var(--line);
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, .55);
    --neon-glow: none;
    --neon-glow-strong: none;
}

body.light-mode {
    --ink-0: #fafafa;
    --ink-1: #ffffff;
    --ink-2: #f2f2f2;
    --ink-3: #e9e9e9;
    --ink-4: #dedede;
    --line: #e4e4e4;
    --line-strong: #cfcfcf;
    --fg: #111111;
    --fg-2: #5c5c5c;
    --fg-3: #8f8f8f;
    --bubble-out: #e3e3e3;
    --bubble-out-fg: #111111;
    --bubble-out-meta: #6b6b6b;
    --bubble-in: #ffffff;
    --bubble-in-fg: #111111;
    --focus: #111111;
    --primary-color: #111111;
    --primary-hover: #000000;
    --secondary-color: #6b6b6b;
    --accent-color: #3a3a3a;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, .12);
}

/* ---- Base ---- */
body {
    background: var(--ink-0) !important;
    color: var(--fg);
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.light-mode #particles-js { opacity: .35; filter: invert(1); }
::selection { background: var(--fg); color: var(--ink-0); }

*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Layout surfaces ---- */
.sidebar {
    background: var(--ink-1) !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: none !important;
    animation: none !important;
}
.chat-area {
    background-color: var(--ink-0) !important;
    background-image: radial-gradient(var(--line) 1px, transparent 1.2px) !important;
    background-size: 22px 22px !important;
    box-shadow: none !important;
    animation: none !important;
}
.header, .chat-header, .message-input-container {
    background: var(--ink-1) !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
}
.header { border-bottom: 1px solid var(--line) !important; }
.chat-header { border-bottom: 1px solid var(--line) !important; }
.message-input-container { border-top: 1px solid var(--line) !important; }

.logo-text {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* ---- Inputs ---- */
.search-input, .message-input, .modal-input, input[type="text"], input[type="email"], input[type="password"], textarea {
    background: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
}
.search-input, .message-input { border-radius: var(--radius) !important; }
.search-input:focus, .message-input:focus, .modal-input:focus, textarea:focus {
    border-color: var(--fg-3) !important;
    background: var(--ink-1) !important;
    box-shadow: none !important;
    transform: none !important;
}
.search-input::placeholder, .message-input::placeholder { color: var(--fg-3) !important; }

/* ---- Tabs ---- */
.tab {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.tab::before, .tab::after { display: none !important; }
.tab:hover { color: var(--fg) !important; border-color: var(--line-strong) !important; transform: none !important; }
.tab.active {
    background: var(--fg) !important;
    color: var(--ink-0) !important;
    border-color: var(--fg) !important;
    font-weight: 600 !important;
}

/* ---- Contact list ---- */
.contact {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    margin-bottom: 2px !important;
    box-shadow: none !important;
    transition: background-color .12s ease !important;
}
.contact::before, .contact::after { display: none !important; }
.contact:hover { background: var(--ink-2) !important; transform: none !important; }
.contact.active {
    background: var(--ink-3) !important;
    border-color: var(--line) !important;
    box-shadow: inset 3px 0 0 var(--fg) !important;
}
.contact-avatar, .chat-avatar {
    background: var(--ink-4) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
}

.add-group-btn {
    background: transparent !important;
    border: 1px dashed var(--line-strong) !important;
    color: var(--fg-2) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}
.add-group-btn:hover { color: var(--fg) !important; border-color: var(--fg-3) !important; transform: none !important; }

/* ---- Messages ---- */
.message {
    box-shadow: none !important;
    border: 1px solid transparent !important;
    padding: 9px 14px !important;
    margin-bottom: 6px !important;
    line-height: 1.42;
    animation: vgMsgIn .16s ease-out !important;
}
@keyframes vgMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.incoming {
    background: var(--bubble-in) !important;
    color: var(--bubble-in-fg) !important;
    border-color: var(--line) !important;
    border-radius: 16px 16px 16px 4px !important;
}
.outgoing {
    background: var(--bubble-out) !important;
    color: var(--bubble-out-fg) !important;
    border-color: transparent !important;
    border-radius: 16px 16px 4px 16px !important;
}
.outgoing .message-time, .outgoing .message-status, .outgoing .message-meta { color: var(--bubble-out-meta) !important; }
.outgoing .message-sender { color: var(--bubble-out-fg) !important; opacity: .7; }
.outgoing a { color: inherit !important; text-decoration: underline; }
.message-time { color: var(--fg-3) !important; font-size: 11px !important; letter-spacing: .02em; }
.message-sender { color: var(--fg-2) !important; letter-spacing: 0 !important; }
.image-message img, .video-message video { border-radius: 10px !important; }

.empty-chat { color: var(--fg-2) !important; }
.empty-chat * { text-shadow: none !important; }

/* ---- Buttons ---- */
.send-btn {
    background: var(--fg) !important;
    color: var(--ink-0) !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
}
.send-btn:hover { transform: none !important; opacity: .88; box-shadow: none !important; }
.header-btn, .theme-toggle, .attach-btn, .voice-btn, .call-btn, .menu-toggle, .profile-settings-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--fg-2) !important;
    box-shadow: none !important;
    transition: background-color .12s ease, color .12s ease !important;
}
.header-btn:hover, .theme-toggle:hover, .attach-btn:hover, .voice-btn:hover, .call-btn:hover, .profile-settings-btn:hover {
    background: var(--ink-3) !important;
    color: var(--fg) !important;
    transform: none !important;
}
.menu-toggle { background: var(--ink-1) !important; border-color: var(--line) !important; }

.modal-btn-primary, .save-btn-modal, .edit-btn-modal, .voice-send-btn, .call-answer-btn {
    background: var(--fg) !important;
    color: var(--ink-0) !important;
    border: 1px solid var(--fg) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.modal-btn-secondary, .cancel-btn-modal, .voice-cancel-btn {
    background: transparent !important;
    color: var(--fg) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.modal-btn-primary:hover, .save-btn-modal:hover, .modal-btn-secondary:hover, .cancel-btn-modal:hover { transform: none !important; opacity: .88; }
.logout-btn-modal, .call-end-btn, .call-decline-btn {
    background: transparent !important;
    color: #e5484d !important;
    border: 1px solid rgba(229, 72, 77, .45) !important;
    box-shadow: none !important;
}
.call-end-btn, .call-decline-btn { background: #e5484d !important; color: #fff !important; }

/* ---- Modals & popups ---- */
.modal-content, .settings-modal-content, .user-profile-modal-content, .edit-form-modal, .profile-popup,
.call-modal-content, .incoming-call-content {
    background: var(--ink-1) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-xl) !important;
    border-radius: 18px !important;
    color: var(--fg) !important;
}
.settings-modal, .user-profile-modal, .call-modal, .incoming-call-modal { background: rgba(0, 0, 0, .55) !important; }
.settings-modal-header, .user-profile-header, .user-profile-toolbar, .profile-popup-toolbar {
    background: transparent !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
.settings-nav-item, .setting-item-modal, .user-profile-item, .settings-section-modal {
    background: transparent !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
.settings-nav-item:hover, .user-profile-item:hover { background: var(--ink-2) !important; transform: none !important; }
.setting-description-modal, .user-profile-item-value, .profile-version { color: var(--fg-2) !important; }
.user-profile-item-icon { color: var(--fg-2) !important; background: var(--ink-3) !important; box-shadow: none !important; }
.user-profile-name-large, .settings-modal-title, .setting-title-modal { color: var(--fg) !important; letter-spacing: -0.01em; }
.user-profile-username-large { color: var(--fg-2) !important; }
.user-profile-avatar-large, .profile-avatar-popup { box-shadow: none !important; border: 1px solid var(--line) !important; }

.toggle-switch, .theme-toggle-switch { background: var(--ink-4) !important; box-shadow: none !important; border: 1px solid var(--line-strong) !important; }
.toggle-switch.active, .theme-toggle-switch.active { background: var(--fg) !important; border-color: var(--fg) !important; }
.toggle-switch::after, .theme-toggle-switch::after { background: var(--ink-1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; }
.toggle-switch.active::after, .theme-toggle-switch.active::after { background: var(--ink-0) !important; }

/* ---- Voice recording ---- */
.voice-recording-overlay { background: var(--ink-1) !important; border-color: var(--line) !important; box-shadow: none !important; }
.voice-recording-dot { background: #e5484d !important; box-shadow: none !important; }
.voice-waveform-bar, .voice-wave { background: currentColor !important; opacity: .55; box-shadow: none !important; }
.voice-play-btn { background: rgba(127, 127, 127, .18) !important; color: inherit !important; box-shadow: none !important; }

/* Status dot keeps one functional accent. */
.user-profile-status-dot.online, .online-dot { background: #3dbe7a !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
    .message { animation: none !important; }
}

/* ---- Auth pages (login.html, reg.html) ---- */
body.vg-auth::before { display: none !important; }
body.vg-auth { display: flex; align-items: center; justify-content: center; }
.login-container {
    background: var(--ink-1) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-xl) !important;
    border-radius: 20px !important;
}
.logo-section h1 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--fg) !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.logo-section img { filter: none !important; box-shadow: none !important; }
.form-input {
    background: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
}
.form-input:hover { border-color: var(--line-strong) !important; }
.form-input:focus { border-color: var(--fg-3) !important; background: var(--ink-1) !important; }
.next-button {
    background: var(--fg) !important;
    color: var(--ink-0) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.next-button:hover:not(:disabled) { transform: none !important; opacity: .88; box-shadow: none !important; }
.next-button:disabled { background: var(--ink-4) !important; color: var(--fg-3) !important; }
.register-link { background: var(--ink-2) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 14px !important; }
.register-link-text { color: var(--fg-2) !important; }
.register-link-button {
    background: transparent !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
}
.register-link-button:hover { background: var(--ink-3) !important; transform: none !important; }
.progress-dot { background: var(--ink-4) !important; box-shadow: none !important; }
.progress-dot.active { background: var(--fg) !important; }
.error-message { color: #e5484d !important; }
/* The wrapper also holds the error line, so anchor the arrow to the input, not the wrapper bottom. */
body.vg-auth .input-wrapper .next-button { top: 0; bottom: auto; }
@media (max-width: 480px) { body.vg-auth .input-wrapper .next-button { height: 58px; width: 58px; } }

/* Gradient-filled headings were white-on-white in the light theme. */
.empty-chat h2, .modal-title, .add-group-icon {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--fg) !important;
    text-shadow: none !important;
}
.empty-chat p { color: var(--fg-2) !important; }
.empty-chat-icon, .logo-icon { filter: none !important; box-shadow: none !important; }
body.light-mode .app-logo, body.light-mode .empty-chat-icon img { filter: invert(1) contrast(1.1); }
body.light-mode .call-info, body.light-mode .call-info-status, body.light-mode .incoming-call-type,
body.light-mode .call-placeholder, body.light-mode .upload-progress, body.light-mode .error-message-modal { color: var(--fg) !important; }
body.light-mode .contact-avatar, body.light-mode .chat-avatar, body.light-mode .profile-avatar-popup,
body.light-mode .user-profile-avatar-placeholder, body.light-mode .avatar-placeholder-modal { background: #2b2b2b !important; color: #fff !important; }

/* Legal/support links in settings had the browser's default blue on near-black. */
nav[aria-label="Данные и документы"] a { color: var(--fg-2) !important; text-decoration: underline; text-underline-offset: 3px; }
nav[aria-label="Данные и документы"] a:hover { color: var(--fg) !important; }
nav[aria-label="Данные и документы"] button {
    align-self: flex-start; padding: 10px 14px; border-radius: 10px; cursor: pointer; font: inherit;
    background: transparent; color: #e5484d; border: 1px solid rgba(229, 72, 77, .45);
}

/* Mobile: the page must never pan sideways. Tapping a 14px input made iOS
   auto-zoom and the whole layout "grew" to the right. */
html, body { overflow-x: hidden !important; max-width: 100vw; overscroll-behavior-x: none; }
#messagesContainer, .contacts-list { overflow-x: hidden !important; touch-action: pan-y pinch-zoom; }
.message { max-width: min(78%, 560px) !important; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.message img, .message video { max-width: 100% !important; height: auto; }
@media (max-width: 768px) {
    input, textarea, select, .search-input, .message-input, .modal-input { font-size: 16px !important; }
    .message { max-width: 86% !important; }
}

/* ---- Round video messages ("circles") ---- */
.message.is-circle { background: transparent !important; border-color: transparent !important; padding: 0 !important; box-shadow: none !important; }
.circle-message { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: visible; cursor: pointer;
    transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.circle-message video { width: 208px; height: 208px; margin: 6px; border-radius: 50%; object-fit: cover; background: #000; display: block; }
.circle-message.sound { transform: scale(1.06); }
.circle-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.circle-ring circle { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; opacity: 0; transition: opacity .2s; }
.circle-message.sound .circle-ring circle { opacity: 1; }
.circle-badge { position: absolute; left: 14px; bottom: 12px; display: inline-flex; gap: 4px; align-items: center; padding: 3px 8px; border-radius: 99px;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; }
.circle-message.sound .circle-mute { display: none; }
.message.is-circle .message-time { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: var(--ink-1); }
.circle-btn svg { display: block; }

.circle-recorder { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(0, 0, 0, .9); color: #fff; opacity: 0; transition: opacity .2s; }
.circle-recorder.open { opacity: 1; }
.cr-stage { position: relative; width: min(300px, 78vw); aspect-ratio: 1; transform: scale(.85); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.circle-recorder.open .cr-stage { transform: scale(1); }
.cr-preview { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%; object-fit: cover; background: #111; transform: scaleX(-1); }
.cr-preview[src] { transform: none; }
.cr-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cr-ring circle { fill: none; stroke-width: 2.4; }
.cr-track { stroke: rgba(255, 255, 255, .15); }
.cr-bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; }
.cr-time { display: flex; align-items: center; gap: 8px; font-size: 18px; font-variant-numeric: tabular-nums; }
.cr-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; opacity: 0; }
.circle-recorder.recording .cr-dot { opacity: 1; animation: crPulse 1s ease-in-out infinite; }
@keyframes crPulse { 50% { opacity: .25; } }
.cr-hint { margin: 0; color: #bdbdbd; font-size: 14px; }
.cr-actions { position: absolute; bottom: max(40px, env(safe-area-inset-bottom)); display: flex; gap: 40px; align-items: center; }
.cr-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #2a2a2a; color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.cr-main, .cr-send { width: 76px; height: 76px; background: #fff; color: #111; font-size: 26px; }
.cr-main span { width: 30px; height: 30px; border-radius: 50%; background: #e5484d; transition: border-radius .2s, width .2s, height .2s; }
.circle-recorder.recording .cr-main span { width: 26px; height: 26px; border-radius: 6px; }
.cr-btn[hidden] { display: none; }
.cr-btn:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .circle-message, .cr-stage { transition: none; } .circle-recorder.recording .cr-dot { animation: none; } }