/* Void Chat — global UI styles */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
html { transition: font-size .35s var(--ease); }
html,body { overscroll-behavior:none; }
body { background:#000; color:#a3a3a3; font-family:'Inter',system-ui,sans-serif; -webkit-tap-highlight-color:transparent; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#1a1a1a; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#262626; }

.panel-transition { transition: all .5s var(--ease); }
.interactive-element,
button, [role="button"], a, .set-row, .fld, .swatch {
    transition-property: background-color,color,border-color,box-shadow,opacity,transform,filter;
    transition-duration:.25s;
    transition-timing-function:var(--ease);
}
.interactive-element:active, button.interactive-element:active { transform:scale(.97); }
button svg { transition:transform .4s var(--ease); }
svg[width="16"] { width:1rem;height:1rem; }
svg[width="18"] { width:1.125rem;height:1.125rem; }
svg[width="20"] { width:1.25rem;height:1.25rem; }
svg[width="24"] { width:1.5rem;height:1.5rem; }

.glass-btn { background:rgba(0,0,0,.3); border:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#e5e5e5; }
.glass-btn:hover { background:rgba(0,0,0,.45); }

.sw { width:40px;height:24px;border-radius:99px;background:#262626;position:relative;flex-shrink:0;transition:background .25s var(--ease); }
.sw::after { content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#737373;transition:transform .25s var(--ease),background .25s var(--ease); }
input:checked + .sw { background:#404040; }
input:checked + .sw::after { transform:translateX(16px);background:#e5e5e5; }
input:focus-visible + .sw { outline:1px solid #737373;outline-offset:2px; }

.fld { width:100%;background:#050505;border:1px solid #1a1a1a;border-radius:12px;padding:10px 12px;font-size:14px;color:#e5e5e5;outline:none; }
.fld:focus { border-color:#404040; }
.fld.bad { border-color:rgba(255,255,255,.60); }
.fld-label { display:block;font-size:12px;color:#737373;margin:0 0 6px 2px; }

.seg { display:grid;gap:4px;background:#050505;border:1px solid #1a1a1a;border-radius:14px;padding:4px;position:relative; }
.seg-pill { position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n));border-radius:10px;background:#262626;transform:translateX(calc(var(--i) * (100% + 4px)));transition:transform .4s var(--ease); }
.seg button { position:relative;z-index:1;padding:9px 4px;border-radius:10px;font-size:13px;color:#a3a3a3; }
.seg button:hover { color:#e5e5e5; }
.seg button.on { background:transparent;color:#e5e5e5; }

.btn-ghost { padding:9px 14px;border-radius:12px;font-size:13px;color:#e5e5e5;background:#121212;border:1px solid #262626; }
.btn-ghost:hover { background:#1a1a1a;border-color:#404040; }

button[aria-label="Настройки"]:hover svg { transform:scale(1.15); }
button[aria-label="Singularity"]:hover svg { transform:scale(1.18); }
button[aria-label="Прикрепить файл"]:hover svg { transform:scale(1.15); }
button[aria-label="Новый чат"]:hover svg,
button[aria-label^="Закрыть"]:hover svg { transform:scale(1.15); }
button[aria-label="Поиск"]:hover svg { transform:scale(1.18); }
button[aria-label="Панель профиля"]:hover svg { transform:scale(1.12); }
#send-btn:hover svg { transform:translate(2px,-2px); }
#send-btn:hover { box-shadow:0 0 18px rgba(229,229,229,.25); }
button.interactive-element:hover { transform:translateY(-1px); }
button.interactive-element:hover:active { transform:translateY(0) scale(.97); }
.sr-only { position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important; }
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Error screen */
.err-screen { position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(70% 60% at 50% 40%,#0f0f0f,#000 75%); }
.err-card { width:100%;max-width:400px;text-align:center;padding:40px 28px 32px;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:err-in .6s var(--ease) both; }
.err-face { width:72px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#a3a3a3;border-radius:50%;background:#121212;border:1px solid #262626; }
.err-face svg { width:44px;height:44px; }
.err-title { font-size:20px;font-weight:500;color:#e5e5e5;margin:0 0 8px; }
.err-text { font-size:14px;line-height:1.55;color:#737373;margin:0 0 24px; }
.err-btn { width:100%;padding:12px;border-radius:12px;border:0;background:#e5e5e5;color:#050505;font-size:14px;font-weight:500;cursor:pointer; }
.err-btn:hover { background:#fff; }
.err-btn:active { transform:scale(.98); }
@keyframes err-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ---- safe areas: вырез / статус-бар / индикатор «домой» ----
   Страница рисуется под системной строкой (viewport-fit=cover), а её цвет совпадает с цветом шапки,
   поэтому сверху больше нет чёрной полосы с «тенью». Цвет самой системной строки на Android
   подстраивается в ui.js (syncChrome) под то окно, которое сейчас сверху. */
/* --safe-bottom — НЕ весь системный отступ, а его половина: контент не заходит под индикатор «домой», но и не висит высоко.
   Хотите ниже/выше — меняйте множитель (.5). */
:root { --safe-top:env(safe-area-inset-top,0px); --safe-bottom:calc(env(safe-area-inset-bottom,0px) * .5); }
@media (max-width:767px) {
    html,body { background:#0a0a0a !important; }
    main > header.h-16 { height:calc(4rem + var(--safe-top));padding-top:var(--safe-top); }
    #sidebar > div.p-5 { padding-top:calc(1.25rem + var(--safe-top)); }
    #me-card { padding-bottom:calc(1rem + var(--safe-bottom)); }
    #composer { padding-bottom:calc(.75rem + var(--safe-bottom)); }
}

/* ---- экран загрузки при входе с уже сохранённой сессией: вместо мигания страницы входа ---- */
#boot { position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:#0a0a0a;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s; }
html.booting #boot { opacity:1;visibility:visible;pointer-events:auto;transition:none; }
#boot svg { width:44px;height:44px;animation:boot-pulse 1.6s ease-in-out infinite; }
@keyframes boot-pulse { 50% { opacity:.45;transform:scale(.94); } }

/* ---- без блюра на телефоне/планшете ----
   backdrop-filter на мобильных браузерах включается и выключается рывком (зависит от того, какое окно сейчас в фокусе) —
   сверху чата появлялась резкая «размытая тень». Подложки окон остаются затемнёнными, просто без размытия;
   шапка и поле ввода — сплошного цвета (под ними всё равно ничего не прокручивается). */
@media (max-width:1023px) {
    #mobile-overlay,#settings-overlay,#sub-overlay,#new-overlay,#legal-overlay,#group-overlay,#profile-backdrop,.dlg-overlay,
    main > header,#composer,.glass-btn { backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }
    main > header,#composer { background-color:#0a0a0a !important; }
}

/* ---- полоса под системной строкой (вырез/статус-бар): всегда цвет страницы, выше любых подложек и окон ----
   Подложки открытых окон и боковой панели не затемняют эту область → сверху ничего не «темнеет» при смене окон. */
html::after { content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#0a0a0a;z-index:2147483000;pointer-events:none; }
html:not(.has-session)::after { background:#000; }   /* страница входа */