body.vesti-standalone-body{ margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:'Inter',sans-serif; background-image: linear-gradient(180deg, rgba(5,2,1,.55) 0%, rgba(5,2,1,.35) 40%, rgba(5,2,1,.75) 100%), url('https://i.postimg.cc/J0hShxXm/Chat-GPT-Image-29-iul-2026-g-12-59-29.png'); background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; } /* страница встроена в общий лэйаут сайта: шапка сверху, футер снизу, Cube — между ними */ body.vesti-page-body .header-outer{position:relative;z-index:5;} body.vesti-page-body footer{position:relative;z-index:5;margin-top:auto;} .vs-header-btn-active{color:var(--vs-accent,#00d4be) !important;background:rgba(0,212,190,.12) !important;} .vs-standalone-guard{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:60px 20px; } .vs-standalone-guard svg{color:var(--vs-accent,#00d4be);margin-bottom:8px;filter:drop-shadow(0 0 16px rgba(0,180,160,.5));} .vs-standalone-guard h1{color:#fff;font-size:26px;font-weight:900;margin:0;} .vs-standalone-guard p{color:#c9beb6;font-size:13.5px;margin:0 0 6px;} .vs-standalone-shell{flex:1;display:flex;padding:20px;box-sizing:border-box;position:relative;z-index:1;min-height:640px;} .vs-standalone-shell::before{ content:"";position:absolute;inset:8px;border-radius:34px; background:linear-gradient(135deg, rgba(0,180,160,.3), rgba(255,60,20,0) 40%, rgba(0,200,180,.2) 100%); filter:blur(30px);opacity:.6;z-index:0;pointer-events:none; } .vs-shell-standalone{ width:100%;max-width:1280px;margin:0 auto;height:calc(100vh - 220px);min-height:520px; border-radius:26px; border:1px solid var(--vs-border, rgba(0,212,190,.22)); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.07) inset, 0 -20px 50px rgba(0,0,0,.35) inset, 0 0 60px rgba(0,180,160,.1); overflow:hidden; position:relative;z-index:1; } /* ====================================================================== ТЕМЫ CUBE По умолчанию (без класса на , значение 'site') Cube окрашен в фирменные бирюзовые цвета сайта и следует общей светлой/тёмной теме сайта (.ts-light-theme). Пользователь может явно выбрать White, Dark или Punk Orange — тогда эти классы переопределяют переменные независимо от темы сайта. ====================================================================== */ :root{ --vs-font:"Nunito Sans", Inter, system-ui, sans-serif; --vs-bg:rgba(6,14,13,.35); --vs-panel:rgba(10,16,15,.5); --vs-glass:rgba(18,26,25,.5); --vs-glass-strong:rgba(26,36,34,.65); --vs-border:rgba(0,212,190,.18); --vs-text:rgba(255,255,255,.95); --vs-text2:rgba(215,230,227,.64); --vs-text3:rgba(190,210,206,.42); --vs-blur:26px; --vs-radius-lg:28px; --vs-accent:#00d4be; --vs-accent2:#3fe8d8; --vs-msg-out-text:#04231e; --vs-3d-shadow: 0 18px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.07) inset, 0 -14px 30px rgba(0,0,0,.4) inset; } /* --- Punk Orange: фирменная оранжевая тема Cube (было "по умолчанию") --- */ html.vs-theme-punk{ --vs-bg:rgba(10,8,7,.35); --vs-panel:rgba(16,12,10,.5); --vs-glass:rgba(30,24,21,.5); --vs-glass-strong:rgba(40,32,28,.65); --vs-border:rgba(255,150,90,.16); --vs-text:rgba(255,255,255,.95); --vs-text2:rgba(230,215,205,.64); --vs-text3:rgba(210,190,178,.42); --vs-accent:#ff5722; --vs-accent2:#ff8a45; --vs-msg-out-text:#1a0800; } html.vs-theme-punk .vs-standalone-shell::before{ background:linear-gradient(135deg, rgba(255,120,60,.35), rgba(255,60,20,0) 40%, rgba(255,80,30,.25) 100%); } html.vs-theme-punk .vs-standalone-guard svg{filter:drop-shadow(0 0 16px rgba(255,100,40,.5));} /* --- Dark: нейтральная тёмная тема (без бирюзы и без оранжевого) --- */ html.vs-theme-dark{ --vs-bg:rgba(12,13,16,.55); --vs-panel:rgba(17,18,22,.75); --vs-glass:rgba(28,29,34,.6); --vs-glass-strong:rgba(40,41,47,.75); --vs-border:rgba(255,255,255,.1); --vs-text:rgba(255,255,255,.94); --vs-text2:rgba(220,220,228,.6); --vs-text3:rgba(198,198,208,.4); --vs-accent:#5b8bff; --vs-accent2:#8aa9ff; --vs-msg-out-text:#0a1330; } html.vs-theme-dark body.vesti-standalone-body, html.vs-theme-dark #vesti-overlay{ background-image:linear-gradient(180deg, rgba(4,5,7,.85) 0%, rgba(4,5,7,.7) 40%, rgba(4,5,7,.92) 100%), url('https://i.postimg.cc/J0hShxXm/Chat-GPT-Image-29-iul-2026-g-12-59-29.png'); background-color:#08090b; } html.vs-theme-dark .vs-standalone-shell::before{ background:linear-gradient(135deg, rgba(90,130,255,.25), transparent 40%, rgba(90,130,255,.15) 100%); } html.vs-theme-dark .header-outer,html.vs-theme-dark header{background:rgba(10,11,14,.75) !important;} html.vs-theme-dark footer{background:rgba(10,11,14,.85) !important;} /* --- White: полностью светлая тема, без фонового фото и тёмного стекла --- */ html.vs-theme-white{ --vs-bg:#f3f5f8; --vs-panel:#ffffff; --vs-glass:#eef1f5; --vs-glass-strong:#e4e8ee; --vs-border:rgba(20,30,40,.12); --vs-text:#161a20; --vs-text2:rgba(22,26,32,.66); --vs-text3:rgba(22,26,32,.42); --vs-accent:#2f6bff; --vs-accent2:#5a8bff; --vs-msg-out-text:#ffffff; } html.vs-theme-white body.vesti-standalone-body, html.vs-theme-white #vesti-overlay{ background-image:linear-gradient(180deg,#f7f8fb 0%,#eef1f6 100%) !important; background-color:#f3f5f8; } html.vs-theme-white .vs-standalone-shell::before{display:none;} html.vs-theme-white .header-outer,html.vs-theme-white header{background:rgba(255,255,255,.92) !important;border-bottom-color:rgba(20,30,40,.08) !important;} html.vs-theme-white header a,html.vs-theme-white header nav a,html.vs-theme-white .support-header-btn{color:#161a20 !important;} html.vs-theme-white .logo img{filter:none;} html.vs-theme-white footer{background:rgba(255,255,255,.95) !important;color:#161a20 !important;} html.vs-theme-white footer a,html.vs-theme-white .footer-nav-col a,html.vs-theme-white .footer-copy{color:#3a3f47 !important;} html.vs-theme-white .vs-standalone-guard{color:#161a20;} html.vs-theme-white .vs-standalone-guard h1{color:#161a20;} html.vs-theme-white .vs-standalone-guard p{color:#555b64;} html.vs-theme-white .vs-shell-standalone{box-shadow:0 20px 60px rgba(20,30,50,.12), 0 1px 0 rgba(255,255,255,.6) inset;border-color:rgba(20,30,40,.1);} html.vs-theme-white .vs-chat-name,html.vs-theme-white .vs-info-name,html.vs-theme-white .vs-main-head-name, html.vs-theme-white .vs-myp-name,html.vs-theme-white .vs-rail-brand span,html.vs-theme-white .vs-participant span, html.vs-theme-white .vs-modal-user-card .vs-name,html.vs-theme-white .modal h4,html.vs-theme-white .vs-entry-title{color:#161a20 !important;} html.vs-theme-white .vs-msg-in{background:#eef1f5;color:#161a20;box-shadow:0 4px 12px rgba(20,30,50,.08);} html.vs-theme-white .vs-input,html.vs-theme-white .vs-search,html.vs-theme-white .vs-myp-bio,html.vs-theme-white .modal-input, html.vs-theme-white .modal-nick-input{color:#161a20;} html.vs-theme-white .vs-input::placeholder,html.vs-theme-white .vs-search::placeholder{color:rgba(22,26,32,.4);} html.vs-theme-white .vs-chat-unread{background:#161a20;color:#fff;} html.vs-theme-white .vs-myprofile-panel{background:rgba(255,255,255,.98) !important;} /* переключатель тем на 4 кнопки в панели настроек */ .ts-cube-theme-toggle-4{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.05);border-radius:12px;padding:5px;} html.vs-theme-white .ts-cube-theme-toggle-4{background:rgba(20,30,40,.05);} .ts-cube-theme-toggle-4 .ts-cube-theme-btn{padding:9px 8px;text-align:center;} .ts-cube-theme-toggle-4 .ts-cube-theme-btn.active{background:linear-gradient(135deg,var(--vs-accent2),var(--vs-accent));color:#04120d;} html.vs-theme-punk .ts-cube-theme-toggle-4 .ts-cube-theme-btn.active{color:#1a0800;} html.vs-theme-white .ts-cube-theme-toggle-4 .ts-cube-theme-btn.active{color:#fff;} html.vs-theme-white .ts-cube-theme-btn{color:rgba(22,26,32,.55);} html.vs-theme-white .ts-cube-theme-btn:hover{color:#161a20;} #vesti-overlay{ position:fixed;inset:0;z-index:9999; display:none; background-image: linear-gradient(180deg, rgba(5,2,1,.5) 0%, rgba(5,2,1,.3) 40%, rgba(5,2,1,.7) 100%), url('https://i.postimg.cc/J0hShxXm/Chat-GPT-Image-29-iul-2026-g-12-59-29.png'); background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat; font-family:var(--vs-font); color:var(--vs-text); } #vesti-overlay.active{display:flex;} /* ===== MY PROFILE PANEL ===== */ .vs-myprofile-panel{ position:absolute;top:0;right:0;width:300px;height:100%; background:rgba(10,15,14,.92); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border-left:1px solid var(--vs-border); display:flex;flex-direction:column;gap:0; overflow-y:auto;z-index:20; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); } .vs-myprofile-panel.open{transform:translateX(0);} .vs-myp-close{ position:absolute;top:12px;right:12px;z-index:2; } .vs-myp-hero{ display:flex;flex-direction:column;align-items:center;gap:8px; padding:36px 20px 20px; border-bottom:1px solid var(--vs-border); } .vs-myp-avatar-wrap{position:relative;display:inline-block;} .vs-myp-avatar{ width:84px;height:84px;border-radius:20px;object-fit:cover; border:2px solid var(--vs-border); image-rendering:pixelated; } .vs-myp-avatar-edit{ position:absolute;bottom:-6px;right:-6px; width:24px;height:24px;border-radius:8px; background:var(--vs-accent,#00d4be);color:#04120d;border:none; font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center; } .vs-myp-avatar-file{ position:absolute;bottom:-6px;left:-6px; width:24px;height:24px;border-radius:8px; background:var(--vs-glass-strong);color:#fff;border:1px solid var(--vs-border); font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden; } .vs-myp-avatar-file input{position:absolute;inset:0;opacity:0;cursor:pointer;} .vs-myp-name{ font-weight:900;font-size:17px;color:#fff;letter-spacing:-.01em;margin-top:4px; } .vs-myp-status{ font-size:12px;color:rgba(210,225,222,.7);cursor:pointer; padding:3px 10px;border-radius:10px;transition:background .15s; } .vs-myp-status:hover{background:rgba(0,180,160,.1);color:#fff;} .vs-myp-section{ padding:14px 18px;border-bottom:1px solid var(--vs-border); } .vs-myp-bio{ width:100%;box-sizing:border-box; background:rgba(255,255,255,.05);border:1px solid var(--vs-border); border-radius:12px;color:#fff;font-family:'Inter',sans-serif; font-size:13px;padding:10px 12px;resize:vertical;min-height:70px; outline:none;transition:border .15s; } .vs-myp-bio:focus{border-color:rgba(0,180,160,.5);} /* profile button in rail */ .vs-myprofile-btn{ margin-right:2px; border-radius:10px; overflow:hidden; padding:2px; } .vs-myprofile-btn:hover{background:rgba(0,180,160,.15);} /* request dot badge */ .vs-req-dot{ position:absolute;top:4px;right:4px; width:8px;height:8px;border-radius:50%; background:#ff4e4e; display:block; pointer-events:none; } /* ===== presence dot над аватаркой в списке чатов ===== */ .vs-chat-avatar{position:relative;} /* ===== вики Cube: "что такое", "как работает", "правила" ===== */ .vs-wiki-modal{width:560px;max-width:94vw;max-height:82vh;display:flex;flex-direction:column;} .vs-wiki-body{overflow-y:auto;padding-right:6px;color:var(--vs-text2);font-size:13.5px;line-height:1.65;flex:1;} .vs-wiki-body h3{color:var(--vs-text);font-size:16px;margin:0 0 10px;} .vs-wiki-body h4{color:var(--vs-text);font-size:13.5px;margin:16px 0 6px;} .vs-wiki-body p{margin:0 0 10px;} .vs-wiki-body ul{margin:0 0 10px;padding-left:20px;} .vs-wiki-body li{margin-bottom:6px;} .vs-wiki-body .vs-wiki-warn{ margin-top:14px;padding:12px 14px;border-radius:14px; background:rgba(255,80,60,.1);border:1px solid rgba(255,80,60,.3);color:#ffb3a8; font-weight:700;font-size:12.5px;line-height:1.55; }