/* Incognito chat — Auto mode only. Button sits in the top-right corner of the heading.
   While incognito is on, the whole screen goes black with a slowly moving purple glow; the heading icon
   becomes a colour-mixing glasses icon, the subheading says "You've gone incognito", and the only control left is X. */
.header-incognito{ display:none; }
:root[data-mode="auto"] .header-actions .header-incognito{ display:grid; opacity:1; visibility:visible; }
.header-incognito .ico{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* colour-mixing glasses used as the heading icon and on the opening screen */
.vk-incog-brand{ display:none; width:24px; height:24px; }
.vk-incog-brand svg, .vk-incog-open-ico svg{ width:100%; height:100%; fill:none; stroke:url(#vkIncogGrad); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vk-incog-brand, .vk-incog-open-ico{ animation:vkIncogHue 6s linear infinite; filter:drop-shadow(0 0 6px rgba(192,132,252,.7)); }
@keyframes vkIncogHue{ 0%{ filter:hue-rotate(0deg) drop-shadow(0 0 6px rgba(192,132,252,.7)); } 100%{ filter:hue-rotate(360deg) drop-shadow(0 0 6px rgba(192,132,252,.7)); } }

/* the incognito screen: total black + moving purple glow */
:root[data-incognito="1"], :root[data-incognito="1"] body{ background:#000 !important; }
:root[data-incognito="1"] #stage-chat{ background:#000 !important; position:relative; isolation:isolate; overflow:hidden; }
:root[data-incognito="1"] #stage-chat::before, :root[data-incognito="1"] #stage-chat::after{
  content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none; }
:root[data-incognito="1"] #stage-chat::before{
  background:radial-gradient(40% 32% at 28% 30%, rgba(168,85,247,.34), transparent 70%), radial-gradient(38% 30% at 74% 72%, rgba(126,34,206,.32), transparent 70%);
  animation:vkIncogGlowA 11s ease-in-out infinite alternate; }
:root[data-incognito="1"] #stage-chat::after{
  background:radial-gradient(34% 28% at 70% 22%, rgba(217,70,239,.22), transparent 70%), radial-gradient(36% 30% at 24% 78%, rgba(99,102,241,.2), transparent 70%);
  animation:vkIncogGlowB 14s ease-in-out infinite alternate; }
@keyframes vkIncogGlowA{ 0%{ transform:translate(-6%,-4%) scale(1); opacity:.75; } 100%{ transform:translate(7%,6%) scale(1.18); opacity:1; } }
@keyframes vkIncogGlowB{ 0%{ transform:translate(6%,5%) scale(1.1); opacity:1; } 100%{ transform:translate(-7%,-6%) scale(.95); opacity:.7; } }

/* header: only the X is left */
:root[data-incognito="1"] .chat-header, :root[data-incognito="1"] .chat-header-brand-row, :root[data-incognito="1"] .chat-header-mid{ background:transparent !important; border-color:transparent; }
:root[data-incognito="1"] .header-left{ visibility:hidden !important; pointer-events:none; }
:root[data-incognito="1"] .source-modes,
:root[data-incognito="1"] .chat-header-mid,
:root[data-incognito="1"] .header-newchat,
:root[data-incognito="1"] .subhead-wrap,
:root[data-incognito="1"] .mode-bar,
:root[data-incognito="1"] .composer-icon-btn,
:root[data-incognito="1"] #composer-menu,
:root[data-incognito="1"] .at-hint,
:root[data-incognito="1"] .at-hint-arrow{ display:none !important; }
:root[data-incognito="1"] .app-brand-icon{ display:none; }
:root[data-incognito="1"] .vk-incog-brand{ display:block; }
:root[data-incognito="1"] .app-brand-btn{ pointer-events:none; }
:root[data-incognito="1"] .header-incognito{ background:rgba(168,85,247,.16); color:#f3e8ff; box-shadow:inset 0 0 0 1.5px rgba(192,132,252,.8), 0 0 14px rgba(168,85,247,.5); }
:root[data-incognito="1"] .header-incognito:hover{ background:rgba(168,85,247,.3); }
:root[data-incognito="1"] .header-incognito .ico{ stroke-width:2.1; }

/* subheading: same place and size as the normal one */
.vk-incog-note{ display:none; }
:root[data-incognito="1"] .vk-incog-note{ display:block; padding:8px 20px; border-bottom:1px solid rgba(192,132,252,.28); font-size:14px; font-weight:700; line-height:1.3; color:#f3e8ff; text-align:center; background:transparent; }
:root[data-incognito="1"] .composer-pill{ background:rgba(20,8,32,.85); border-color:rgba(192,132,252,.45); box-shadow:0 0 18px rgba(168,85,247,.28); }

/* opening screen */
.vk-incog-open{ position:fixed; inset:0; z-index:9999; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; overflow:hidden; animation:vkIncogOpenIn .5s ease both; }
.vk-incog-open.out{ animation:vkIncogOpenOut .7s ease forwards; }
.vk-incog-open::before{ content:""; position:absolute; width:140vmax; height:140vmax; left:50%; top:50%; margin:-70vmax 0 0 -70vmax; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(168,85,247,.55) 0, rgba(126,34,206,.28) 14%, transparent 34%); animation:vkIncogBloom 2.4s ease-out both; }
.vk-incog-open-ico{ position:relative; z-index:1; width:84px; height:84px; }
.vk-incog-open h2{ position:relative; z-index:1; margin:0; font-size:22px; color:#f3e8ff; }
.vk-incog-open p{ position:relative; z-index:1; margin:0; font-size:22px; line-height:1.3; color:#d8b4fe; font-weight:600; }
@keyframes vkIncogBloom{ 0%{ transform:scale(.15); opacity:0; } 40%{ opacity:1; } 100%{ transform:scale(1); opacity:.9; } }
@keyframes vkIncogOpenIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vkIncogOpenOut{ to{ opacity:0; visibility:hidden; } }

@media (prefers-reduced-motion: reduce){
  :root[data-incognito="1"] #stage-chat::before, :root[data-incognito="1"] #stage-chat::after, .vk-incog-brand, .vk-incog-open-ico, .vk-incog-open::before{ animation:none; }
}
@media (max-width:360px){ .header-actions .header-incognito{ width:30px; height:30px; } }

/* nothing of the hidden left-hand buttons (not even their hover glow) may show through */
:root[data-incognito="1"] .header-left > *, :root[data-incognito="1"] .header-left *::before, :root[data-incognito="1"] .header-left *::after,
:root[data-incognito="1"] .brand-caret::before, :root[data-incognito="1"] .brand-caret::after, :root[data-incognito="1"] .app-brand-btn::before, :root[data-incognito="1"] .app-brand-btn::after{ display:none !important; }

/* System / API key stays available in incognito: the caret becomes a small purple pill ("System ▾" / "API key ▾") */
.vk-incog-src{ display:none; }
:root[data-incognito="1"] .brand-caret{ display:inline-flex !important; align-items:center; gap:4px; width:auto; height:30px; padding:0 10px; margin-inline-start:6px; border-radius:999px; background:rgba(168,85,247,.16); color:#f3e8ff; box-shadow:inset 0 0 0 1.5px rgba(192,132,252,.7); font-size:13px; font-weight:600; }
:root[data-incognito="1"] .brand-caret:hover{ background:rgba(168,85,247,.3); }
:root[data-incognito="1"] .brand-caret .vk-incog-src{ display:inline; }
:root[data-incognito="1"] .brand-caret .ico{ width:16px; height:16px; stroke:currentColor; }
:root[data-incognito="1"] .source-pop{ background:#0b0414; border:1px solid rgba(192,132,252,.45); box-shadow:0 0 24px rgba(168,85,247,.35); z-index:30; }
:root[data-incognito="1"] .source-pop .source-opt{ background:rgba(168,85,247,.08); border-color:rgba(192,132,252,.3); color:#f3e8ff; }
:root[data-incognito="1"] .source-pop .source-opt[aria-checked="true"]{ border-color:#c084fc; background:rgba(168,85,247,.28); }
:root[data-incognito="1"] .source-pop input{ background:#14081f; border-color:rgba(192,132,252,.45); color:#f3e8ff; }
:root[data-incognito="1"] .source-pop .btn-primary{ background:#a855f7; color:#fff; }
:root[data-incognito="1"] .source-pop .source-keys-label, :root[data-incognito="1"] .source-pop .source-hint{ color:#d8b4fe; }
.header-incognito::before, .header-incognito::after{ display:none !important; }