/* ============================================================================ ALCONTA AI — ДИЗАЙН-СИСТЕМА Единый источник правды для типографики, цвета, формы, глубины и движения. Правило: компоненты ниже никогда не пишут цвет напрямую — только токен. Акцент задаётся ОДНИМ значением (--accent); всё остальное выводится из него через color-mix, поэтому смена акцента в настройках меняет весь интерфейс. ========================================================================= */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/caveat-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} /* Сетка на фоне экрана входа: тихая база на весь экран + маленький яркий круг, который ходит за курсором. Раньше висело на body::before/::after — но .login-panel и .brand-panel рисуют собственный непрозрачный градиентный фон (var(--scene-grad)), который полностью перекрывал сетку под собой: она физически была на странице, просто невидима за панелями. .access-shell существует только на index.html и 404.html (в app.html такого класса нет вовсе), поэтому вешаем эффект прямо на него — это и даёт нужную область видимости, и позволяет разместить слои МЕЖДУ фоном панелей и их текстом: .access-shell создаёт свой контекст наложения (position:relative + z-index), внутри которого .login-card/.brand-mark/.brand-copy-block с z-index:1 остаются поверх сетки, а сами панели (z-index:auto) — под ней. position:fixed сохранён намеренно: coordinates остаются от вьюпорта, а не от бокса панели — иначе свечение съезжает в сторону на границе панелей. */ .access-shell::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:40px 40px; /* Видна только у краёв экрана — гаснет к центру, где как раз читаемый текст и форма, чтобы сетка не спорила с содержимым. mix-blend-mode:screen — на случай если слой всё же рисуется поверх карточки логина (в каком-то из браузеров это оказалось так, несмотря на z-index:0 против z-index:1) — "screen" только слегка высветляет то, что под ним, а не перекрывает текст. */ mask-image:radial-gradient(circle at 50% 50%,transparent 0%,transparent 26%,black 62%); -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0%,transparent 26%,black 62%); } /* Яркая копия той же сетки во весь экран, проявляемая круглой маской под курсором: смысл эффекта именно в том, что подсвечивается уже нарисованная сетка (::before), клетка в клетку, а не рисуется своя вокруг мыши. Пробовал двигать маленький слой через transform ради дешевизны — так сетка ездила вместе с ним, потому что transform ломает background-attachment:fixed. Поэтому слой снова статичный и во весь экран, а ездит только маска — координаты приходят в --spot-x/--spot-y. */ .access-shell::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.38) 1.5px,transparent 1.5px), linear-gradient(90deg,rgba(255,255,255,.38) 1.5px,transparent 1.5px); background-size:40px 40px; mask-image:radial-gradient(circle 130px at var(--spot-x) var(--spot-y),black 0%,black 30%,transparent 100%); -webkit-mask-image:radial-gradient(circle 130px at var(--spot-x) var(--spot-y),black 0%,black 30%,transparent 100%); } @media (hover:none){ .access-shell::after{ display:none; } } /* Пока мышь не двинулась (в том числе на телефоне, где события вообще не придут) круг просто не мешает — стоит точно в центре экрана и погашен. */ :root { /* Стартовое положение подсветки сетки под курсором — по центру, пока мышь ещё не двигалась. */ --spot-x:50%; --spot-y:50%; /* — Типографика — */ --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --font-hand:'Caveat','Segoe Script',cursive; /* — Форма — */ --r-xs:7px; --r-sm:10px; --r-md:13px; --r-lg:17px; --r-xl:22px; --r-full:999px; /* — Движение — */ --ease:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.46,.64,1); --t-fast:.14s; --t-mid:.24s; --t-slow:.42s; /* — Акцент: единственная точка настройки — */ --accent:#7c5cff; --accent-2:#24d2b5; /* Производные от акцента. Меняется --accent — меняется всё это. */ --accent-hi:color-mix(in oklab,var(--accent) 62%,white); --accent-lo:color-mix(in oklab,var(--accent) 78%,black); --accent-text:color-mix(in oklab,var(--accent) 55%,white); --accent-soft:color-mix(in oklab,var(--accent) 16%,transparent); --accent-line:color-mix(in oklab,var(--accent) 38%,transparent); --accent-glow:color-mix(in oklab,var(--accent) 26%,transparent); --accent-grad:linear-gradient(118deg,var(--accent-lo),var(--accent-hi)); --brand-grad:linear-gradient(135deg,var(--accent),var(--accent-2)); /* Производные от второго акцента (статус «всё хорошо») */ --ok:var(--accent-2); --ok-text:color-mix(in oklab,var(--accent-2) 62%,white); --ok-soft:color-mix(in oklab,var(--accent-2) 13%,transparent); --ok-line:color-mix(in oklab,var(--accent-2) 40%,transparent); /* Семантика тревоги — независима от акцента */ --danger:#ff5f72; --danger-text:#ff96a5; --danger-soft:rgba(255,95,114,.12); --danger-line:rgba(255,95,114,.38); --warn:#f0b95b; --warn-soft:rgba(240,185,91,.11); /* — Поверхности (тёмная тема — база) — */ --bg:#0a0c12; --card-bg:#121620; --card-bg-2:#161b28; --sidebar-bg:#0d1017; --panel-soft:#171b25; --input-bg:#0d1119; --surface-sunk:#0b0e15; --surface-active:color-mix(in oklab,var(--accent) 22%,#12141f); --surface-hover:rgba(255,255,255,.05); /* — Текст — */ --ink:#f7f8fb; --text-strong:#eef1f7; --muted:#9da6b8; --muted-2:#9ca7b7; --muted-3:#8d98aa; --muted-4:#a9b2c3; --muted-faint:#6f7b8e; --on-accent:#fff; /* — Границы и глубина — */ --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.06); --border-strong:#303848; --shadow-sm:0 2px 8px rgba(0,0,0,.22); --shadow-md:0 14px 34px rgba(0,0,0,.3); --shadow-lg:0 28px 80px rgba(0,0,0,.42); --shadow-accent:0 16px 40px var(--accent-glow); /* — Атмосфера: сетка и свечения фона — */ --grid-line:rgba(255,255,255,.025); --aura-1:color-mix(in oklab,var(--accent) 30%,transparent); --aura-2:color-mix(in oklab,var(--accent-2) 15%,transparent); --scene-grad:linear-gradient(150deg,#151526 0%,#0c0f17 58%,#090b10 100%); } :root[data-accent="aqua"]{ --accent:#17c4ad; --accent-2:#7c5cff; } :root[data-accent="ember"]{ --accent:#ff7a45; --accent-2:#ffc247; } :root[data-accent="ocean"]{ --accent:#3b82f6; --accent-2:#22d3ee; } /* — Светлая тема: переопределяются ТОЛЬКО токены — */ @media (prefers-color-scheme: light) { :root[data-theme="system"] { --bg:#f4f5fa; --card-bg:#fff; --card-bg-2:#fafafd; --sidebar-bg:#fff; --panel-soft:#eef0f6; --input-bg:#f2f3f8; --surface-sunk:#f0f1f7; --surface-active:color-mix(in oklab,var(--accent) 13%,#fff); --surface-hover:rgba(20,20,45,.045); --ink:#161824; --text-strong:#161824; --muted:#5a627a; --muted-2:#5a627a; --muted-3:#666e85; --muted-4:#4e5568; --muted-faint:#858da3; --line:rgba(20,20,45,.11); --line-2:rgba(20,20,45,.06); --border-strong:#d9dce6; --accent-text:color-mix(in oklab,var(--accent) 82%,black); --ok-text:color-mix(in oklab,var(--accent-2) 78%,black); --danger-text:#c22e45; --shadow-sm:0 1px 3px rgba(22,24,36,.07); --shadow-md:0 10px 28px rgba(22,24,36,.09); --shadow-lg:0 24px 64px rgba(22,24,36,.13); --grid-line:rgba(20,20,45,.035); --scene-grad:linear-gradient(150deg,#f0efff 0%,#f6f7fb 58%,#eef0f8 100%); --aura-1:color-mix(in oklab,var(--accent) 20%,transparent); --aura-2:color-mix(in oklab,var(--accent-2) 13%,transparent); } } :root[data-theme="light"] { --bg:#f4f5fa; --card-bg:#fff; --card-bg-2:#fafafd; --sidebar-bg:#fff; --panel-soft:#eef0f6; --input-bg:#f2f3f8; --surface-sunk:#f0f1f7; --surface-active:color-mix(in oklab,var(--accent) 13%,#fff); --surface-hover:rgba(20,20,45,.045); --ink:#161824; --text-strong:#161824; --muted:#5a627a; --muted-2:#5a627a; --muted-3:#666e85; --muted-4:#4e5568; --muted-faint:#858da3; --line:rgba(20,20,45,.11); --line-2:rgba(20,20,45,.06); --border-strong:#d9dce6; --accent-text:color-mix(in oklab,var(--accent) 82%,black); --ok-text:color-mix(in oklab,var(--accent-2) 78%,black); --danger-text:#c22e45; --shadow-sm:0 1px 3px rgba(22,24,36,.07); --shadow-md:0 10px 28px rgba(22,24,36,.09); --shadow-lg:0 24px 64px rgba(22,24,36,.13); --grid-line:rgba(20,20,45,.035); --scene-grad:linear-gradient(150deg,#f0efff 0%,#f6f7fb 58%,#eef0f8 100%); --aura-1:color-mix(in oklab,var(--accent) 20%,transparent); --aura-2:color-mix(in oklab,var(--accent-2) 13%,transparent); } * { box-sizing: border-box; } /* Author display rules always beat the UA [hidden] stylesheet regardless of specificity — this has silently broken hidden state on several elements (stop button, chat-rail backdrop, composer menu, admin nav link) each time a component gave itself an explicit display. One global override closes the whole bug class instead of patching it per-selector forever. */ [hidden] { display: none !important; } html, body { min-height: 100%; } body { margin:0; color:var(--ink); background:var(--bg); font-family:Arial,Helvetica,sans-serif; } body.dialog-open { overflow:hidden; overscroll-behavior:contain; } button, input { font:inherit; } .access-shell { height:100dvh; display:grid; grid-template-columns:minmax(380px,1.05fr) minmax(460px,.95fr); } .brand-panel { position:relative; overflow:hidden; padding:clamp(48px,7vw,108px); display:flex; flex-direction:column; justify-content:center;gap:56px; background:radial-gradient(circle at 18% 12%,rgba(124,92,255,.34),transparent 36%),radial-gradient(circle at 82% 80%,rgba(36,210,181,.16),transparent 30%),var(--scene-grad); } /* Знак на входе — ромб (квадрат, повёрнутый на 45°) с буквой поверх. Раньше ромб был залит цветом карточки с еле заметной обводкой и на тёмном фоне читался как непонятное тёмное пятно; теперь заливка — фирменный градиент, как у знака в сайдбаре, поэтому форма читается. Буква лежит отдельным слоем и вместе с ромбом не поворачивается. */ .brand-mark { position:relative; z-index:1; width:68px; height:68px; display:grid; place-items:center; margin-bottom:4px; } .brand-orbit { position:absolute; inset:7px; border-radius:14px; transform:rotate(45deg); background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 14px 40px rgba(98,75,255,.38); } .brand-copy-block{position:relative;z-index:1} .brand-core { position:relative; z-index:1; font-weight:800; font-size:26px; color:white; } .eyebrow { margin:0 0 18px; color:var(--accent-text); font-size:12px; font-weight:800; letter-spacing:.18em; } .brand-panel h1 { margin:0; max-width:720px; font-size:clamp(40px,4.6vw,68px); line-height:1.22; letter-spacing:-.03em; } .brand-copy { max-width:560px; margin:22px 0 0; color:var(--muted); font-size:clamp(16px,1.15vw,19px); line-height:1.6; letter-spacing:-.005em; } .login-panel { height:100dvh; padding:clamp(20px,4vh,48px); display:grid; place-items:center; align-content:center; background:var(--sidebar-bg); overflow-y:auto; } .login-card { position:relative; z-index:1; width:min(430px,100%); } .mobile-brand { display:none; } .accent { color:var(--accent-2); margin-bottom:14px; } .login-card h2 { margin:0; font-size:40px; letter-spacing:-.045em; } .login-copy { margin:14px 0 34px; color:var(--muted); line-height:1.55; } .login-error { margin:-12px 0 24px; padding:14px 16px; display:grid; gap:4px; color:var(--danger-text); background:rgba(255,75,92,.12); border:1px solid rgba(255,104,118,.42); border-radius:12px; line-height:1.45; } .login-error strong { color:#fff; font-size:14px; } .login-error span { font-size:13px; } .login-form { display:grid; gap:20px; } .login-form label { display:grid; gap:9px; } .login-form label>span { color:var(--ink); font-size:14px; font-weight:700; } .login-form input { width:100%; height:54px; padding:0 16px; color:var(--ink); background:var(--panel-soft); border:1px solid var(--line); border-radius:12px; outline:none; transition:border-color .2s,box-shadow .2s; } .login-form input:focus { border-color:rgba(124,92,255,.85); box-shadow:0 0 0 4px rgba(124,92,255,.12); } /* Автозаполнение Chrome красит фон поля своим цветом через встроенный слой, который background-color не перекрывает никак — только этим трюком с огромной inset-тенью. Без него автозаполненное поле светлело и сквозь него становилась видна сетка (это и была вся "загадка"). */ .login-form input:-webkit-autofill, .login-form input:-webkit-autofill:hover, .login-form input:-webkit-autofill:focus { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--panel-soft) inset; box-shadow:0 0 0 1000px var(--panel-soft) inset; transition:background-color 5000s ease-in-out 0s; } .login-form input[readonly] { color:var(--muted); cursor:default; } .login-form button { height:56px; margin-top:5px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:white; background:linear-gradient(115deg,var(--accent),var(--accent-hi)); border:0; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 16px 36px rgba(74,49,183,.3); } .login-form button:hover { filter:brightness(1.08); } .security-note { margin-top:28px; padding:16px; display:flex; gap:12px; color:var(--muted-3); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:12px; font-size:12px; line-height:1.5; } .security-note span { color:var(--accent-2); } .security-note p { margin:0; } .security-note strong { color:var(--text-strong); } .legal { margin:34px 0 0; color:var(--muted-faint); font-size:12px; } @media (max-width:850px) { .access-shell{grid-template-columns:1fr}.brand-panel{display:none}.login-panel{padding:28px 22px;position:relative;overflow:hidden;background:radial-gradient(circle at 18% 8%,rgba(124,92,255,.32),transparent 40%),radial-gradient(circle at 88% 92%,rgba(36,210,177,.18),transparent 34%),var(--scene-grad)}.login-card{position:relative;z-index:1}.mobile-brand{display:block;margin-bottom:64px;font-size:13px;font-weight:900;letter-spacing:.18em}.login-card h2{font-size:34px} /* На мобильном .brand-panel скрыт, а сетка (.access-shell::before) рисуется позади своей же секции — .login-panel красит поверх неё собственный непрозрачный фон и полностью её перекрывает. Тот же эффект «видна у краёв, гаснет к центру» вешаем прямо на .login-panel её же псевдоэлементом. */ .login-panel::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle at 50% 50%,transparent 0%,transparent 22%,black 58%); -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0%,transparent 22%,black 58%); } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} } /* Alconta AI cabinet */ :root[data-theme="system"] { color-scheme:dark light; } .app-body { min-height:100dvh; background:var(--bg); } .app-shell { min-height:100dvh; display:grid; grid-template-columns:248px minmax(0,1fr); } .app-sidebar { position:sticky; top:0; height:100dvh; padding:24px 14px 16px; display:flex; flex-direction:column; gap:30px; background:var(--sidebar-bg); border-right:1px solid var(--line); z-index:10; } .app-brand { padding:0 10px; display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:12px; font-weight:900; letter-spacing:.16em; } .app-brand-mark { width:30px; height:30px; display:grid; place-items:center; color:white; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:10px; font-size:15px; letter-spacing:0; box-shadow:0 8px 24px rgba(98,75,255,.32); } .app-brand-text{display:flex;flex-direction:column;gap:3px;min-width:0} .app-greeting{margin:0;padding:0;color:var(--muted-3);font-size:11px;font-weight:400;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app-nav,.sidebar-bottom { display:grid; gap:4px; } .app-nav a,.sidebar-bottom a,.sidebar-bottom button { height:44px; padding:0 12px; display:flex; align-items:center; gap:12px; width:100%; color:var(--muted); border:0; border-radius:10px; background:transparent; font-size:14px; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; } .app-nav a span,.sidebar-bottom a span,.sidebar-bottom button span { width:18px; color:var(--muted); text-align:center; font-size:17px; font-weight:400; } .icon{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle;color:var(--muted)} .send-button,.attachment,.stop-button{display:grid;place-items:center} .search-toggle,.chat-rail-toggle{display:inline-flex;align-items:center} .rename-session,.delete-session,.message-copy,.message-edit,.dialog-close,#chat-search-close{display:inline-flex;align-items:center;justify-content:center} .app-nav a.active .icon{color:var(--ink)} .mobile-menu .icon,.chat-rail-toggle .icon,.search-toggle .icon{color:inherit} .app-nav a:hover,.sidebar-bottom a:hover,.sidebar-bottom button:hover { color:var(--ink); background:rgba(255,255,255,.045); } .app-nav a.active { color:var(--ink); background:rgba(124,92,255,.16); box-shadow:inset 0 0 0 1px rgba(133,109,255,.24); } .app-nav a.active span { color:var(--accent-text); } .sidebar-bottom { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); } .sidebar-bottom form { margin:0; } .app-main { min-width:0; display:flex; flex-direction:column; background:radial-gradient(circle at 90% -10%,rgba(124,92,255,.11),transparent 27%),var(--bg); } .app-header { position:sticky; top:0; z-index:15; background:var(--bg); min-height:88px; padding:18px clamp(24px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); } .app-kicker,.card-kicker { margin:0 0 5px; color:var(--accent-text); font-size:10px; font-weight:900; letter-spacing:.16em; } .app-header h1 { margin:0; font-size:26px; letter-spacing:-.04em; } .header-state { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; } .mobile-menu { display:none; width:38px; height:38px; color:var(--ink); background:var(--panel-soft); border:1px solid var(--line); border-radius:10px; font-size:18px; cursor:pointer; } .app-content { flex:1; padding:clamp(24px,4vw,56px); } .chat-layout { min-height:calc(100dvh - 200px); display:grid; grid-template-columns:216px minmax(0,780px); max-width:1110px; margin:0 auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card-bg); box-shadow:0 28px 80px rgba(0,0,0,.2); } .chat-rail { padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--sidebar-bg); border-right:1px solid var(--line); } .new-chat { height:40px; color:var(--accent-text); border:1px solid rgba(124,92,255,.34); border-radius:10px; background:rgba(124,92,255,.1); font-size:13px; font-weight:800; cursor:pointer; } .chat-rail-label { margin:12px 8px 3px; color:var(--muted-faint); font-size:10px; font-weight:900; letter-spacing:.14em; } .conversation { padding:10px; display:grid; gap:4px; color:var(--muted-4); border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer; } .conversation.current { color:var(--ink); background:rgba(255,255,255,.055); } .conversation span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; } .conversation small { color:var(--muted-faint); font-size:11px; } .chat-panel { min-width:0; min-height:600px; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; } .chat-panel-head { min-height:66px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; background:var(--bg); } /* The chat page has its own identity/status bar (agent avatar, name, "В сети", search) — showing the generic app-header title/status above it too was two stacked bars repeating the same info and eating a third of a phone screen. Shrink the outer header to just the sidebar-toggle (mobile) or nothing (desktop) on this one route, and let the chat bar carry the identity — same content, one bar instead of two. */ .app-main:has(#app-content.chat-page) .app-header{display:none} .agent-mini { display:flex; align-items:center; gap:10px; } .chat-header-actions{display:flex;align-items:center;gap:12px} .chat-rail-backdrop{display:none} .agent-avatar { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:10px; font-weight:900; } .agent-mini strong { display:block; font-size:13px; } .agent-mini small { display:block; margin-top:3px; color:var(--muted-3); font-size:11px; } .messages { min-height:390px; max-height:calc(100dvh - 330px); padding:26px clamp(18px,3vw,36px); overflow:auto; display:flex; flex-direction:column; gap:14px; } .chat-welcome { margin:auto; max-width:340px; text-align:center; } .welcome-mark { width:54px; height:54px; margin:0 auto 18px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:17px; font-size:23px; font-weight:900; box-shadow:0 14px 36px rgba(99,75,255,.25); } .chat-welcome h2 { margin:0; font-size:27px; letter-spacing:-.04em; } .chat-welcome p { margin:10px 0 0; color:var(--muted-3); line-height:1.5; } .message { position:relative; max-width:min(80%,620px); padding:12px 15px; border-radius:14px; font-size:15px; line-height:1.55; } .message p{margin:0 0 10px}.message p:last-child{margin-bottom:0}.message h2,.message h3,.message h4{margin:14px 0 8px;font-size:1.12em;line-height:1.3}.message h2:first-child,.message h3:first-child,.message h4:first-child{margin-top:0}.message ul,.message ol{margin:4px 0 10px;padding-left:22px}.message li{margin:3px 0}.message a{color:var(--accent-text)}.message-user a{color:#fff;text-decoration-color:rgba(255,255,255,.5)} .message code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.message-user code{background:rgba(255,255,255,.22)} .code-block{margin:10px 0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:var(--surface-sunk)}.code-block:first-child{margin-top:0}.code-block-head{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;background:rgba(255,255,255,.04);font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}.code-block-head button{border:0;background:transparent;color:var(--accent-text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.code-block pre{margin:0;padding:12px 14px;overflow-x:auto}.code-block code{background:none;padding:0;font-size:12.5px;line-height:1.55;color:var(--text-strong);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .message-copy{position:absolute;top:-11px;right:10px;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--panel-soft);color:var(--muted-2);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s}.message:hover .message-copy,.message:focus-within .message-copy{opacity:1}.message-copy.copied{opacity:1;color:var(--ok-text);border-color:rgba(47,212,177,.4)} .message-edit{position:absolute;top:-11px;right:42px;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--panel-soft);color:var(--muted-2);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s}.message:hover .message-edit,.message:focus-within .message-edit{opacity:1} .message-user { align-self:flex-end; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-hi)); border-bottom-right-radius:4px; } .message-agent { align-self:flex-start; color:var(--text-strong); background:var(--card-bg-2); border:1px solid rgba(255,255,255,.07); border-bottom-left-radius:4px; } .message-error { align-self:flex-start; color:var(--danger-text); background:rgba(255,79,98,.11); border:1px solid rgba(255,97,113,.32); } .message.pending { display:flex; align-items:center; gap:5px; min-height:42px; } .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--accent-text); animation:typing 1.15s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay:.15s; }.typing-dot:nth-child(3) { animation-delay:.3s; } .message.thinking{gap:8px} .think-label{color:var(--muted-3);font-size:12.5px;font-weight:700} .think-summary{display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:999px;background:var(--panel-soft);color:var(--muted-3);font-size:11px;font-weight:700} @keyframes typing { 0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:1} } .composer { margin:0 18px; padding:7px 8px 7px 12px; display:flex; align-items:end; gap:9px; background:var(--panel-soft); border:1px solid var(--line); border-radius:14px; } .attachment { width:36px; height:36px; display:grid; place-items:center; color:var(--muted-2); cursor:not-allowed; font-size:20px; border:1px solid var(--border-strong); border-radius:10px; background:var(--panel-soft); transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease; }.attachment input{display:none}.composer .attachment:hover{border-color:var(--accent);color:var(--accent-text);background:var(--surface-active)}.attachment.active{border-color:var(--accent);color:var(--ink);background:var(--surface-active);transform:rotate(45deg)} /* Автоувеличение textarea без JS-присвоения .style.height (CSP сайта, style-src 'self', молча блокирует такие правки) — CSS-грид-приём: textarea и невидимый ::after с тем же текстом лежат в одной ячейке грида, ::after растягивает саму ячейку под текст, textarea следует за ней. JS только держит data-replicated-value в синхроне (dataset — не style, CSP не касается). */ .chat-input-autosize{display:grid;flex:1;min-height:36px;max-height:160px;overflow-y:auto} .chat-input-autosize::after{content:attr(data-replicated-value) " ";white-space:pre-wrap;word-break:break-word;visibility:hidden} .chat-input-autosize::after,.chat-input-autosize>textarea{grid-area:1/1/2/2;padding:8px 0;font:inherit;line-height:1.45} .composer textarea { min-height:36px; flex:1; resize:none; color:var(--ink); outline:none; border:0; background:transparent; font:inherit; line-height:1.45; overflow:hidden; width:100%; } .composer textarea::placeholder { color:var(--muted-faint); } .send-button { width:36px; height:36px; flex:0 0 auto; color:white; border:0; border-radius:10px; background:var(--accent); font-size:20px; font-weight:900; cursor:pointer; }.send-button:disabled{opacity:.5;cursor:wait} .composer-note { margin:9px 18px 14px; color:var(--muted-faint); font-size:10px; text-align:center; } .dashboard-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .metric-card,.wide-card,.agent-card,.settings-card,.empty-state { border:1px solid var(--line); border-radius:16px; background:var(--card-bg); } .metric-card { min-height:160px; padding:20px; display:flex; flex-direction:column; cursor:default; text-decoration:none; width:100%; box-sizing:border-box; }.metric-card.prominent{background:linear-gradient(145deg,rgba(111,82,255,.22),var(--card-bg-2))} .metric-card span { color:var(--muted-4); font-size:12px; font-weight:700; }.metric-card strong{margin:18px 0 8px;color:var(--ink);font-size:24px;letter-spacing:-.04em;transition:color .18s ease}.metric-card p{margin:auto 0 0;color:var(--muted-3);font-size:12px;line-height:1.45} .metric-card-link{cursor:pointer}.metric-card-link:hover strong{color:var(--accent-text)}.metric-card-link:hover p{color:var(--accent-text)} @media (prefers-reduced-motion: no-preference){.metric-card,.wide-card,.usage-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.metric-card:hover,.wide-card:hover,.usage-card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:0 14px 34px rgba(108,76,246,.16)} .skill-card,.prompt-card,.integration-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .skill-card:hover,.prompt-card:hover,.integration-card:hover{transform:scale(1.025);border-color:var(--accent-line);box-shadow:0 16px 40px rgba(108,76,246,.22);z-index:1}} .wide-card { max-width:1100px; margin:14px auto 0; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:24px; }.wide-card h2{margin:0;font-size:24px;letter-spacing:-.04em}.wide-card p:not(.card-kicker){max-width:540px;margin:8px 0 0;color:var(--muted-3);line-height:1.5} .primary-link { min-height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:20px; flex:0 0 auto; color:#fff; border-radius:11px; background:linear-gradient(115deg,var(--accent),var(--accent-hi)); box-shadow:0 12px 28px rgba(76,52,190,.25); font-size:13px; font-weight:800; text-decoration:none; }.primary-link span{font-size:18px} .restart-agent-btn{margin-top:10px} .agent-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; }.agent-card{padding:20px}.agent-card-top{display:flex;justify-content:space-between;align-items:start}.agent-avatar.large{width:48px;height:48px;border-radius:14px;font-size:20px}.agent-status{padding:6px 8px;color:var(--muted-3);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800}.agent-status.online{color:var(--ok-text);background:rgba(36,210,181,.08);border-color:rgba(36,210,181,.22)}.agent-card h2{margin:22px 0 5px;font-size:21px;letter-spacing:-.04em}.agent-card>p{margin:0;color:var(--muted-3);font-size:12px}.agent-card dl{margin:22px 0;display:grid;gap:12px}.agent-card dl div{display:flex;justify-content:space-between;gap:12px}.agent-card dt{color:var(--muted-faint);font-size:12px}.agent-card dd{margin:0;color:var(--text-strong);font-size:12px;font-weight:700} .empty-state { max-width:620px; min-height:330px; margin:0 auto; padding:38px; display:grid; place-content:center; text-align:center; }.empty-state>span{margin:0 auto 18px;color:var(--accent-text);font-size:34px}.empty-state h2{margin:0;font-size:25px;letter-spacing:-.04em}.empty-state p{max-width:430px;margin:12px auto 0;color:var(--muted-3);line-height:1.55} .settings-card { max-width:760px; margin:0 auto; padding:26px; display:flex; justify-content:space-between; gap:30px; align-items:center; }.settings-card h2{margin:0;font-size:23px;letter-spacing:-.04em}.settings-card p:not(.card-kicker){margin:8px 0 0;color:var(--muted-3)}.theme-options{display:flex;gap:8px}.theme-option{height:40px;padding:0 14px;color:var(--muted);border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);font-weight:700;cursor:pointer}.theme-option.selected{color:var(--ink);border-color:var(--accent);background:rgba(124,92,255,.16)} @media (max-width:1040px) { .dashboard-grid{grid-template-columns:repeat(2,1fr)}.chat-layout{grid-template-columns:180px minmax(0,1fr)} } @media (max-width:760px) { .app-shell{display:block}.app-sidebar{position:fixed;left:0;top:0;width:274px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:25px 0 70px rgba(0,0,0,.4)}.app-sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.app-header{min-height:70px;padding:12px 18px}.app-header>div:nth-child(2){margin-right:auto}.app-header h1{font-size:21px}.app-kicker{font-size:9px}.header-state span:last-child{display:none}.app-content{padding:14px}.chat-layout{min-height:calc(100dvh - 170px);display:block;border-radius:14px}.chat-rail{display:none}.chat-panel{min-height:calc(100dvh - 170px)}.messages{min-height:340px;max-height:calc(100dvh - 270px);padding:22px 15px}.message{max-width:88%;font-size:14px}.composer{margin:0 10px}.composer-note{margin:8px 12px 11px}.dashboard-grid{grid-template-columns:1fr;gap:10px}.metric-card{min-height:128px}.wide-card,.settings-card{padding:20px;display:grid}.primary-link{width:100%}.empty-state{min-height:280px;padding:28px 22px}.wide-card h2{font-size:21px}.settings-card{gap:18px}.theme-options{width:100%}.theme-option{flex:1} } /* Alconta cabinet: edge-to-edge workspace and admin panels. */ .app-content.chat-page{padding:0;overflow:hidden}.chat-layout.chat-layout-full{height:100dvh;min-height:0;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;grid-template-columns:252px minmax(0,1fr)}.chat-layout-full .chat-rail{padding:22px 14px;background:var(--sidebar-bg);border-right:1px solid var(--line)}.chat-layout-full .chat-panel{min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}.chat-session-live{color:var(--ok-text);font-size:11px;font-weight:800}.chat-layout-full .messages{min-height:0;max-height:none;height:auto;padding:34px clamp(22px,5vw,90px);overflow-y:auto}.chat-layout-full .composer{margin:0 clamp(18px,5vw,90px)}.chat-layout-full .composer-note{margin:8px clamp(20px,5vw,92px) 15px}.page-loading{min-height:300px;display:grid;place-items:center;color:var(--muted-3);font-weight:700} .dashboard-preloader{min-height:60vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;position:relative} .dashboard-preloader-glow{position:absolute;width:520px;height:520px;max-width:85vw;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.28),rgba(36,210,177,.1) 55%,transparent 72%);filter:blur(6px);pointer-events:none} .dashboard-preloader-mascot{position:relative;width:400px;height:400px;max-width:70vw;image-rendering:pixelated;image-rendering:crisp-edges} .dashboard-preloader p{position:relative;margin:0;color:var(--muted);font-weight:700;font-size:13px}.optimistic{opacity:.9}.message.pending{min-width:74px}.agent-editor{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}.agent-card.editable{height:max-content}.agent-form{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);padding:26px}.form-heading h2,.skills-toolbar h2,.section-intro h2{margin:0;font-size:26px;letter-spacing:-.045em}.form-heading>p:not(.card-kicker),.skills-toolbar p:not(.card-kicker){color:var(--muted-3);line-height:1.55;margin:8px 0 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:25px}.form-grid label,.skill-dialog label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.form-grid label.wide{grid-column:1/-1}.form-grid input,.form-grid textarea,.skills-search input,.skill-dialog input,.skill-dialog textarea{width:100%;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:10px;padding:11px 12px;font:inherit;resize:vertical}.form-grid textarea{line-height:1.5}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;color:var(--ok-text);font-size:12px;font-weight:700}.button-link{border:0;cursor:pointer}.section-intro{max-width:1100px;margin:0 auto 18px}.section-intro>p{margin:0 0 7px;color:var(--accent-text);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}.section-intro>span{display:block;margin-top:7px;color:var(--muted-3)}.integration-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.integration-category{max-width:1100px;margin:0 auto 26px}.integration-category h3{margin:0 0 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-3)}.integration-card{min-height:128px;border:1px solid var(--line);border-radius:14px;background:var(--card-bg);padding:17px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.integration-card.status-pending{border-color:rgba(255,122,140,.35);background:linear-gradient(180deg,rgba(255,122,140,.07),rgba(18,22,32,0) 60%) var(--card-bg)}.integration-card.status-connected{border-color:rgba(47,212,177,.4);background:linear-gradient(180deg,rgba(47,212,177,.08),rgba(18,22,32,0) 60%) var(--card-bg)}.integration-card small{display:block;margin-top:6px;font-size:11px;font-weight:700}.integration-card.status-pending small{color:var(--danger-text)}.integration-card.status-connected small{color:var(--ok-text)}.integration-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-strong);border-radius:10px;color:var(--muted-2)}.status-pending .integration-icon{border-color:rgba(255,122,140,.45);color:var(--danger-text)}.status-connected .integration-icon{border-color:rgba(47,212,177,.45);color:var(--ok-text)}.integration-card h3{margin:1px 0 5px;font-size:15px}.integration-card p{margin:0;color:var(--muted-3);font-size:12px}.integration-card button{grid-column:1/-1;justify-self:start;border:1px solid var(--border-strong);background:transparent;border-radius:8px;color:var(--muted-3);padding:7px 10px;font:inherit;font-size:11px;font-weight:800}.integration-card button:not([disabled]){cursor:pointer;border-color:var(--accent);color:var(--accent-text)}.integration-card>a.integration-connect{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;padding:7px 12px;font-size:11px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(115deg,var(--accent),var(--accent-hi))}.integration-connect span{font-size:13px}.skills-toolbar{max-width:1100px;margin:0 auto 20px;display:flex;justify-content:space-between;gap:22px;align-items:end}.skills-toolbar>div{max-width:660px}.skills-search{max-width:1100px;margin:0 auto 22px}.skills-search input{height:46px}.section-title{max-width:1100px;margin:26px auto 12px;display:flex;align-items:center;gap:9px}.section-title h2{margin:0;font-size:17px}.section-title span{display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--surface-active);color:var(--accent-text);font-size:11px;font-weight:800}.skill-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.skill-card{min-height:150px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;background:var(--card-bg);padding:18px}.skill-card-head{display:flex;align-items:center;gap:9px}.skill-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.skill-icon-flip{position:relative;width:19px;height:19px;flex:0 0 auto;perspective:240px}.skill-icon-star,.skill-icon-info{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent-text);backface-visibility:hidden;transition:transform .45s ease;font-style:normal;font-weight:800;box-sizing:border-box}.skill-icon-star{font-size:17px;transform:rotateY(0deg)}.skill-icon-info{font-size:10px;border:1.4px solid currentColor;border-radius:50%;transform:rotateY(180deg)}@media (prefers-reduced-motion: no-preference){.skill-card:hover .skill-icon-star{transform:rotateY(180deg)}.skill-card:hover .skill-icon-info{transform:rotateY(360deg)}}.skill-badge{flex:0 0 auto;padding:5px 7px;border-radius:999px;background:rgba(240,185,91,.1);color:var(--warn);font-size:10px;font-weight:800}.skill-badge.installed{background:rgba(47,212,177,.1);color:var(--ok-text)}.skill-badge.unavailable{background:rgba(255,255,255,.07);color:var(--muted-4)}.skill-card-unavailable{opacity:.62}.skill-card-unavailable:hover{opacity:.85}.skill-card h3{margin:0;font-size:14.5px;flex:1;min-width:0}.skill-card p{margin:12px 0 0;color:var(--muted-3);font-size:12px;line-height:1.5}.skill-card-footer{margin-top:auto;padding-top:16px}.skills-tabs{max-width:1100px;margin:0 auto 20px;display:flex;gap:8px}.skills-tabs .skills-tab{border:1px solid var(--line);border-radius:10px;padding:9px 14px;background:transparent;color:var(--muted-4);font-size:12px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.skills-tabs .skills-tab span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--panel-soft);color:var(--muted-3);font-size:10px;font-weight:800}.skills-tabs .skills-tab.active{background:var(--surface-active);border-color:var(--accent-line);color:var(--ink)}.skills-tabs .skills-tab.active span{background:var(--surface-active);color:var(--accent-text)}.skill-card-footer a,.skill-card-footer span{color:var(--accent-text);font-size:11px;font-weight:800;text-decoration:none}.skill-card-footer button{border:1px solid var(--border-strong);border-radius:8px;padding:6px 8px;background:transparent;color:var(--muted-4);font:inherit;font-size:10px;font-weight:800}.skill-card-footer button[disabled]{opacity:.55}.catalog-empty{color:var(--muted-3);font-size:13px}.skill-dialog{width:min(500px,calc(100vw - 32px));max-height:calc(var(--vvh,100dvh) - 48px);overflow-y:auto;border:1px solid var(--border-strong);border-radius:16px;background:var(--card-bg);color:var(--text-strong);padding:27px;box-shadow:0 24px 90px rgba(0,0,0,.6)} .skill-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}.skill-dialog form{display:grid;gap:15px}.skill-dialog h2{margin:0;font-size:23px}.skill-dialog>h2{margin:0 0 12px}.skill-dialog>label{margin-bottom:12px}.skill-dialog>.confirm-actions{margin-top:8px}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}.settings-stack{max-width:860px;margin:0 auto;display:grid;gap:12px} @media (max-width:1040px){.integration-grid,.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-editor{grid-template-columns:1fr}.agent-card.editable{display:none}} @media (max-width:760px){.app-content.chat-page{padding:0}.chat-layout.chat-layout-full{height:100dvh;display:block}.chat-layout-full .chat-rail{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:82vw;max-width:320px;z-index:30;transform:translateX(-105%);transition:transform .2s ease;box-shadow:25px 0 60px rgba(0,0,0,.5)}.chat-layout-full .chat-rail.open{transform:translateX(0)}.chat-rail-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:29}.chat-rail-backdrop.open{display:block}.chat-rail-toggle{display:inline-flex}.chat-layout-full .chat-panel{height:100%}.chat-layout-full .messages{padding:22px 15px}.chat-layout-full .composer{margin:0 10px}.chat-layout-full .composer-note{margin:8px 12px 11px}.chat-session-live{display:none}.agent-editor{margin:0}.agent-form{padding:20px;border-radius:14px}.form-grid{grid-template-columns:1fr}.form-grid label.wide{grid-column:auto}.form-actions{align-items:stretch;flex-direction:column}.integration-grid,.skill-grid{grid-template-columns:1fr}.skills-toolbar{display:grid;align-items:stretch}.skill-card{min-height:140px}.settings-stack{margin:0}.settings-stack .settings-card{margin:0}.skill-dialog{padding:22px}} /* Chat sessions, prompt library and the simplified agent editor. */ .new-chat{width:100%;border:1px solid var(--accent);background:var(--surface-active);color:var(--on-accent);border-radius:10px;padding:11px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.stop-icon{width:12px;height:12px;background:currentColor;border-radius:3px;display:block}.new-chat:disabled{opacity:.6}.session-list{display:grid;gap:5px;min-height:0;overflow:auto}.conversation{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:8px;touch-action:pan-y;transition:background .1s ease,transform .12s ease,box-shadow .12s ease}.conversation.pressing{transform:scale(.98)}.conversation.dragging{opacity:.35}.conversation-actions{display:flex;align-items:center;gap:0}.pin-session,.rename-session{border:0;background:transparent;color:var(--muted-3);font-size:14px;cursor:pointer;padding:5px}.pin-session .icon,.rename-session .icon{width:16px;height:16px}.pin-session:hover,.rename-session:hover{color:var(--accent-text)}.pin-session.active{color:var(--accent-text)} @media (hover:hover){.conversation-actions{opacity:0;transition:opacity .12s ease}.conversation:hover .conversation-actions,.conversation:focus-within .conversation-actions{opacity:1}.conversation:hover{background:rgba(255,255,255,.045)}} .conversation a{display:flex;align-items:baseline;gap:6px;min-width:0;padding:7px 8px;color:var(--text-strong);text-decoration:none;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.conversation a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:700}.conversation a small{flex:0 0 auto;color:var(--muted-3);font-size:9.5px;font-weight:700}.conversation.current{background:var(--surface-active)}.conversation.current a span{color:var(--ink)}.delete-session{border:0;background:transparent;color:var(--muted-3);font-size:15px;cursor:pointer;padding:5px 7px}.delete-session .icon{width:16px;height:16px}.delete-session:hover{color:var(--danger-text)}.rail-loading{margin:10px 8px;color:var(--muted-faint);font-size:12px} .rail-section{display:grid;gap:2px}.rail-pinned{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)} .chat-folder{margin-bottom:4px} .chat-folder-head{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;cursor:pointer;color:var(--muted-3)} .chat-folder-head:hover{background:rgba(255,255,255,.06)} .chat-folder-head .icon{width:13px;height:13px;flex:0 0 auto} .chat-folder-head .folder-caret{width:10px;height:10px;color:var(--muted-4);transition:transform .15s ease} .chat-folder.collapsed .folder-caret{transform:rotate(-90deg)} .chat-folder-head .folder-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em} .chat-folder-head button{border:0;background:transparent;color:var(--muted-4);cursor:pointer;padding:3px} .chat-folder-head button .icon{width:12px;height:12px} @media (hover:hover){.chat-folder-head button{opacity:0;transition:opacity .12s ease}.chat-folder-head:hover button{opacity:1}} /* Линия от папки к её чатам — как дерево дисков/файлов в файловых менеджерах Linux, чтобы было видно, где заканчивается содержимое папки. */ .chat-folder-body{display:grid;gap:2px;padding-left:14px;min-height:6px;position:relative;margin-left:12px;border-left:1px dashed var(--line)} .chat-folder.collapsed .chat-folder-body{display:none} .chat-folder-body .conversation{position:relative} .chat-folder-body .conversation::before{content:'';position:absolute;left:-14px;top:50%;width:10px;height:1px;border-top:1px dashed var(--line)} .chat-folder-head.drop-hover,.rail-unfoldered.drop-hover{background:rgba(124,92,255,.14);outline:1px dashed var(--accent-line);outline-offset:2px;border-radius:8px} .chat-drag-ghost{position:fixed;z-index:999;pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 12px;border-radius:9px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.4);transform:translateY(-50%)} .new-folder-btn{display:flex;align-items:center;gap:6px;width:100%;border:1px dashed var(--border-strong);background:transparent;color:var(--muted-3);border-radius:8px;padding:8px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;margin:6px 0 20px} .new-folder-btn:hover{border-color:var(--accent-line);color:var(--accent-text)} .new-folder-btn .icon{width:13px;height:13px}.prompt-library-link{margin-top:auto;padding:12px 8px;color:var(--accent-text);border-top:1px solid var(--line);font-size:12px;font-weight:800;text-decoration:none}.composer-tools{position:relative;margin:0 clamp(18px,5vw,90px) 8px;padding:8px;border:1px solid var(--border-strong);border-radius:14px;background:var(--card-bg-2);box-shadow:0 16px 40px rgba(0,0,0,.35)}@media (prefers-reduced-motion: no-preference){.composer-tools:not([hidden]){animation:composerMenuIn .15s ease}}@keyframes composerMenuIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.composer-menu-list{display:flex;flex-direction:column;gap:2px}.composer-menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:9px;background:transparent;color:var(--text-strong);padding:9px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s ease,color .12s ease}.composer-menu-item .icon{color:var(--accent-text);flex:0 0 auto}.composer-menu-item:hover{background:var(--surface-active);color:var(--ink)}.composer-menu-item:hover .icon{color:var(--accent-text)}.attachment-list{display:flex;gap:7px;flex-wrap:wrap;margin:0 clamp(18px,5vw,90px);padding:0}.attachment-list:empty{display:none}.attachment-list span{display:inline-flex;align-items:center;gap:6px;max-width:240px;border:1px solid var(--border-strong);border-radius:8px;background:var(--card-bg-2);color:var(--text-strong);padding:6px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-list button,.prompt-card>button{border:0;background:transparent;color:var(--muted-2);cursor:pointer;font:inherit;font-size:17px}.composer .attachment{cursor:pointer}.prompt-picker{width:100%;border-top:1px solid var(--line);padding-top:8px}.prompt-picker-head{display:flex;gap:9px;align-items:center;color:var(--text-strong);font-size:12px}.prompt-picker-head input{min-width:0;flex:1;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--ink);border-radius:7px;padding:7px}.prompt-picker-list{display:grid;gap:5px;max-height:190px;overflow:auto;margin-top:7px}.prompt-picker-list button{display:flex!important;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;width:100%;border:0;border-radius:9px;background:transparent;color:var(--text-strong);padding:9px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}.prompt-picker-list button:hover{background:var(--surface-active);color:var(--ink)}.prompt-picker-list button span{min-width:0}.prompt-picker-list button small{white-space:normal;line-height:1.4}.prompt-picker-list small{color:var(--accent-text)}.prompt-picker-list p{margin:6px;color:var(--muted-3);font-size:12px}.usage-card,.dashboard-summary{max-width:1100px;margin:16px auto 0}.usage-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:stretch;border:1px solid var(--line);border-radius:16px;background:var(--card-bg);padding:22px 26px}.usage-card h2{margin:4px 0 0;font-size:22px}.usage-chart{height:152px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:end}.usage-column{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:7px;text-align:center;color:var(--muted-3);font-size:10px}.usage-column b{color:var(--ink);font-size:13px}.usage-column i{display:block;align-self:end;min-height:7px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo))}.usage-column-empty i{background:var(--panel-soft);min-height:2px}.usage-card-empty{display:flex;flex-direction:column;gap:8px}.usage-empty{margin:0;color:var(--muted-faint);font-size:13px}.metric-card strong{font-size:31px;letter-spacing:-.055em}.agent-card-actions{display:flex;align-items:center;gap:10px}.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--border-strong);border-radius:10px;background:var(--panel-soft);color:var(--text-strong);font:inherit;font-size:20px;cursor:pointer}.icon-button-small{width:30px;height:30px;border-radius:8px}.icon-button-small .icon{width:15px;height:15px}.icon-button-small:hover{border-color:var(--accent);color:var(--ink)}.icon-button-danger:hover{border-color:var(--danger);color:var(--danger-text)}.agent-form[hidden]{display:none!important}.form-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.form-grid select,.skill-dialog select,.prompt-toolbar select{width:100%;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:10px;padding:11px 12px;font:inherit}.avatar-upload{grid-template-columns:auto 1fr;align-items:center}.avatar-upload input{grid-column:1/-1}.avatar-upload small{grid-column:1/-1;color:var(--muted-3);font-weight:600}.avatar-upload img{width:46px;height:46px;object-fit:cover;border-radius:12px}.agent-avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.prompt-toolbar,.prompt-grid{max-width:1100px;margin-left:auto;margin-right:auto}.prompt-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px;margin-bottom:18px}.prompt-toolbar input{border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:10px;padding:12px;font:inherit}.prompt-grid{columns:3 260px;column-gap:13px}.prompt-card{display:block;width:100%;break-inside:avoid;margin-bottom:13px;border:1px solid var(--line);border-radius:15px;background:var(--card-bg);padding:18px;cursor:pointer;transition:border-color .12s ease} .prompt-card:hover{border-color:var(--accent-line)} .prompt-view-text{white-space:pre-wrap;word-break:break-word;max-height:50vh;overflow:auto;margin:0;font:inherit;font-size:13px;line-height:1.6;color:var(--text-strong);background:var(--input-bg);border:1px solid var(--border-strong);border-radius:10px;padding:14px} .disk-usage-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;text-decoration:none;color:inherit;cursor:pointer} .disk-usage-head{display:flex;align-items:center;justify-content:space-between;gap:14px} .disk-usage-pct{font-size:20px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .disk-usage-pct.disk-usage-ok{color:var(--ok-text)} .disk-usage-pct.disk-usage-warning{color:var(--warn)} .disk-usage-pct.disk-usage-critical{color:var(--danger-text)} /* border-strong вместо panel-soft — иначе на тёмном фоне «пустой» остаток шкалы почти сливался с карточкой и вся полоса выглядела закрашенной. */ .disk-usage-bar{position:relative;width:100%;height:10px;border-radius:999px;background:var(--border-strong);overflow:hidden} .disk-usage-cta{display:flex;align-items:center;gap:6px;max-height:0;opacity:0;overflow:hidden;color:var(--accent-text);font-size:12px;font-weight:800;transition:max-height .18s ease,opacity .18s ease,margin-top .18s ease} .disk-usage-card:hover .disk-usage-cta,.disk-usage-card:focus-visible .disk-usage-cta{max-height:24px;opacity:1;margin-top:2px} .disk-usage-cta span{transition:transform .18s ease} .disk-usage-card:hover .disk-usage-cta span{transform:translateX(3px)} /* Полоса — SVG вместо : CSP сайта (style-src 'self') блокирует style="" в любом виде — из HTML, из JS .style.*, из setAttribute('style',...) — а атрибуты SVG-геометрии (width, height, x, y) под это ограничение не подпадают. */ .disk-usage-fill{display:block;height:100%;border-radius:999px;transition:width .3s ease} .disk-usage-fill.disk-usage-ok{background:linear-gradient(90deg,var(--accent),var(--accent-hi))} .disk-usage-fill.disk-usage-warning{background:linear-gradient(90deg,#e8a23a,var(--warn))} .disk-usage-fill.disk-usage-critical{background:linear-gradient(90deg,#e8546a,var(--danger))} .disk-usage-note{margin:0;color:var(--muted-3);font-size:12px;font-variant-numeric:tabular-nums}.prompt-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.prompt-card span{color:var(--accent-text);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.prompt-visibility{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;font-style:normal}.prompt-card-actions{display:flex;gap:6px;margin-top:14px}.prompt-visibility.shared{background:rgba(47,212,177,.12);color:var(--ok-text)}.prompt-visibility.personal{background:rgba(124,92,255,.14);color:var(--accent-text)}.status-pill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;font-style:normal}.status-pill.on{background:rgba(47,212,177,.12);color:var(--ok-text)}.status-pill.off{background:rgba(255,255,255,.06);color:var(--muted-3)}.admin-tabs{max-width:1100px;margin:0 auto 20px;display:flex;gap:8px}.admin-tabs a{border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--muted-4);font-size:12px;font-weight:800;text-decoration:none}.admin-tabs a.active{background:var(--surface-active);border-color:var(--accent-line);color:var(--ink)}.admin-table-wrap{max-width:1100px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:14px}.admin-table{width:100%;border-collapse:collapse;font-size:13px}.admin-table th{text-align:left;padding:12px 14px;color:var(--muted-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}.admin-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text-strong);white-space:nowrap}.admin-table tr:last-child td{border-bottom:0}.admin-row-actions{display:flex;gap:6px;flex-wrap:wrap}.admin-row-actions button{border:1px solid var(--border-strong);background:transparent;border-radius:8px;color:var(--muted-4);padding:6px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.admin-row-actions button:hover{border-color:var(--accent);color:var(--ink)}.prompt-card h3{margin:13px 0 7px;font-size:16px}.prompt-card p{margin:0;color:var(--muted-3);font-size:12px;line-height:1.5;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.skill-dialog{position:relative}.dialog-close{z-index:3} .telegram-account-card{position:relative;overflow:hidden;display:flex;gap:10px;align-items:stretch;width:100%;max-width:300px;margin:0 auto;padding:22px 16px} .telegram-account-spam-ribbon{position:absolute;left:50%;top:50%;width:200%;height:24px;transform:translate(-50%,-50%) rotate(40deg);overflow:hidden;background:linear-gradient(90deg,#ff3b5c,#ff7a3d);box-shadow:0 0 12px 2px rgba(255,59,92,.6),0 0 26px 6px rgba(255,122,61,.3);z-index:5;pointer-events:none} .telegram-account-spam-track{display:flex;width:200%;height:100%;animation:telegramSpamScroll 7s linear infinite} .telegram-account-spam-track span{flex:0 0 50%;display:flex;align-items:center;justify-content:space-around;color:#fff;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} @keyframes telegramSpamScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.telegram-account-spam-track{animation:none}}.telegram-account-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}.telegram-account-avatar{flex:0 0 auto;width:58px;height:58px;margin-bottom:8px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;font-size:20px}.telegram-account-avatar img{width:100%;height:100%;object-fit:cover;display:block}.telegram-account-info{min-width:0;width:100%}.telegram-account-info .prompt-card-head{justify-content:center;gap:8px;flex-wrap:wrap}.telegram-account-name{margin:5px 0 2px;color:var(--text-strong);font-size:12.5px;font-weight:750;white-space:normal;overflow:hidden;text-overflow:ellipsis}.telegram-account-info h3{margin:2px 0 5px}.telegram-account-info p{white-space:normal;-webkit-line-clamp:unset}.telegram-account-actions-rail{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:9px;padding-left:8px;border-left:1px solid var(--line)}.telegram-account-actions-rail .icon-button{position:relative;overflow:hidden;width:40px;height:40px;background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(56,189,248,.09))}.telegram-account-actions-rail .icon-button::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-140%);transition:transform .55s ease}.telegram-account-actions-rail .icon-button:hover::after{transform:translateX(140%)}@media (prefers-reduced-motion: reduce){.telegram-account-actions-rail .icon-button::after{display:none}}.avatar-upload-circle img{border-radius:50%}.telegram-cloud-password{margin-top:6px;padding-top:16px;border-top:1px solid var(--line);grid-column:1/-1}.telegram-cloud-password .prompt-hint{margin:0 0 10px}.telegram-cloud-password-value{display:inline-block;margin:0 0 10px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--panel-soft);color:var(--text-strong);font-family:var(--font-mono,monospace);font-size:13px;letter-spacing:.02em;user-select:all} .telegram-cloud-password-actions{display:flex;gap:8px;flex-wrap:wrap} .button-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border-strong);background:transparent;color:var(--text-strong);border-radius:9px;padding:9px 14px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease;white-space:nowrap} .button-outline .icon{width:14px;height:14px} .button-outline:hover{border-color:var(--accent);color:var(--accent-text)} .button-outline:disabled{opacity:.6;cursor:default} .button-outline-danger{border-color:rgba(255,122,140,.35);color:var(--danger-text)} .button-outline-danger:hover{border-color:var(--danger);background:rgba(255,122,140,.08);color:var(--danger-text)} .telegram-logout-inline{display:flex;align-items:flex-end} .telegram-logout-inline .button-outline{width:100%} .avatar-cropper-dialog{text-align:center;width:min(360px,calc(100vw - 32px))} .avatar-cropper-viewport{position:relative;width:280px;height:280px;max-width:100%;aspect-ratio:1/1;margin:18px auto;border-radius:50%;overflow:hidden;background:#000;cursor:grab;touch-action:none;box-shadow:0 0 0 4000px rgba(0,0,0,.55)} .avatar-cropper-viewport.dragging{cursor:grabbing} .avatar-cropper-viewport svg{position:absolute;top:0;left:0;width:100%;height:100%;user-select:none} .avatar-cropper-zoom{display:grid;gap:8px;max-width:280px;margin:0 auto 22px;color:var(--muted);font-size:12px;font-weight:800;text-align:left} .avatar-cropper-zoom input[type="range"]{width:100%;accent-color:var(--accent)} .avatar-upload input[type="file"]{color:var(--muted-3);font-size:12px} .avatar-upload input[type="file"]::file-selector-button{margin-right:10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--panel-soft);color:var(--text-strong);padding:8px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .12s ease,color .12s ease} .avatar-upload input[type="file"]::file-selector-button:hover{border-color:var(--accent);color:var(--accent-text)} .avatar-upload input[type="file"]::-webkit-file-upload-button{margin-right:10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--panel-soft);color:var(--text-strong);padding:8px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer} .tg-search-bar{max-width:1100px;margin:0 auto 22px;display:flex;gap:10px} .tg-search-input-wrap{position:relative;flex:1} .tg-search-input-wrap input{width:100%;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:10px;padding:12px 40px 12px 14px;font:inherit} .tg-search-clear-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border:0;background:transparent;color:var(--muted-3);cursor:pointer;border-radius:7px} .tg-search-clear-btn:hover{background:var(--surface-active);color:var(--ink)} .tg-search-clear-btn .icon{width:14px;height:14px} #tg-save-btn.tg-save-btn-active,#tg-own-btn.tg-save-btn-active{border-color:rgba(47,212,177,.45);color:var(--ok-text)} .tg-saved-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .tg-saved-card{position:relative;border:1px solid var(--line);border-radius:15px;background:var(--card-bg);padding:18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:border-color .12s ease,transform .12s ease} .tg-saved-card:hover{border-color:var(--accent-line);transform:scale(1.02)} .tg-saved-remove{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--border-strong);border-radius:7px;background:var(--panel-soft);color:var(--muted-3);cursor:pointer} .tg-saved-remove:hover{border-color:var(--danger);color:var(--danger-text)} .tg-saved-remove .icon{width:12px;height:12px} .tg-saved-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:4px} .tg-saved-avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;font-size:20px} .tg-saved-card h3{margin:0;font-size:14.5px} .tg-saved-link{color:var(--accent-text);font-size:12px;font-weight:700;text-decoration:none} .tg-saved-bio{margin:2px 0 0;color:var(--muted-3);font-size:11.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tg-saved-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:6px;color:var(--muted-3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em} .tg-post-media{position:relative;width:100%;margin:0 0 10px;padding:0;border:0;border-radius:10px;overflow:hidden;max-height:340px;display:flex;cursor:pointer;background:none} .tg-post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease} .tg-post-media:hover img{transform:scale(1.03)} .tg-post-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff} .tg-post-play .icon{width:18px;height:18px} .tg-lightbox{padding:0;border:0;background:transparent;max-width:min(94vw,900px);max-height:calc(var(--vvh,100dvh) - 32px)} .tg-lightbox::backdrop{background:rgba(0,0,0,.82)} .tg-lightbox img,.tg-lightbox video{display:block;max-width:min(94vw,900px);max-height:calc(var(--vvh,100dvh) - 32px);border-radius:10px} .tg-lightbox .dialog-close{position:fixed;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2} @media (max-width:760px){.tg-saved-grid{margin-left:14px;margin-right:14px}} #tg-analytics-body{max-width:1100px;margin:0 auto} .tg-channel-card{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);padding:24px;margin-bottom:8px} .tg-channel-top{display:flex;align-items:center;gap:16px} .tg-channel-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto} .tg-channel-avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;font-size:24px} .tg-channel-id h2{margin:0 0 4px;font-size:22px} .tg-channel-id a{color:var(--accent-text);font-size:13px;font-weight:700;text-decoration:none} .tg-channel-description{margin:14px 0 0;color:var(--muted-3);font-size:13px;line-height:1.55;white-space:pre-wrap} .tg-stat-row{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap} .tg-stat{display:flex;flex-direction:column;gap:2px} .tg-stat strong{font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tg-stat span{color:var(--muted-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700} .tg-growth-note{margin:14px 2px 22px} .tg-stats-card{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);padding:22px 24px;margin-bottom:22px} .tg-stats-card .tg-stat-row{margin-top:16px;row-gap:16px} .tg-stats-detail{display:flex;flex-wrap:wrap;gap:28px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .tg-stats-detail p:last-child{margin:4px 0 0;color:var(--text-strong);font-size:13px;font-weight:700} .tg-stats-card>.prompt-hint:only-of-type{margin:14px 0 0} .tg-posts-list{display:flex;flex-direction:column;gap:12px} .tg-post-card{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card-bg);padding:16px 18px} .tg-post-media-badge{position:absolute;top:14px;right:14px;color:var(--accent-text);opacity:.7} .tg-post-media-badge .icon{width:16px;height:16px} .tg-post-text{margin:0;color:var(--text-strong);font-size:13.5px;line-height:1.55;white-space:pre-wrap;padding-right:26px} .tg-post-empty{color:var(--muted-faint);font-style:italic} .tg-post-meta{display:flex;align-items:center;gap:14px;margin-top:12px;color:var(--muted-3);font-size:11.5px;font-weight:700} .tg-post-meta span{display:inline-flex;align-items:center;gap:5px} .tg-post-meta .icon{width:13px;height:13px} .tg-post-meta a{margin-left:auto;color:var(--accent-text);text-decoration:none} @media (max-width:760px){.tg-search-bar{margin-left:14px;margin-right:14px}.tg-recents{margin-left:14px;margin-right:14px}#tg-analytics-body{margin-left:14px;margin-right:14px}.tg-channel-top{flex-wrap:wrap}} .tg-own-page-inner{max-width:1100px;margin:0 auto} .tg-growth-grid{margin:0 0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:stretch} .tg-growth-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--card-bg);padding:20px 22px} .tg-growth-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .tg-growth-periods{display:flex;gap:4px} .tg-growth-period-btn{border:1px solid var(--border-strong);background:transparent;color:var(--muted-4);border-radius:8px;padding:4px 9px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer} .tg-growth-period-btn:hover{border-color:var(--accent-line);color:var(--ink)} .tg-growth-period-btn.active{background:var(--surface-active);border-color:var(--accent-line);color:var(--ink)} .tg-growth-chart{position:relative;margin-top:14px;flex:1;min-height:140px;display:flex;align-items:center} .tg-growth-guide{stroke-width:1.2;opacity:.6;pointer-events:none} .tg-growth-chart>p{margin:0} .tg-growth-svg{width:100%;height:140px;display:block;overflow:visible} .tg-growth-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .tg-growth-area{opacity:.32;stroke:none} .tg-growth-dot-last{stroke:var(--card-bg);stroke-width:2} .tg-growth-tip-group{pointer-events:none} .tg-growth-tip-bg{fill:var(--card-bg-2);stroke:var(--border-strong);stroke-width:1;rx:8;ry:8} .tg-growth-tip-value{fill:var(--ink);font-size:13px;font-weight:700;font-family:var(--font-body)} .tg-growth-tip-date{fill:var(--muted-3);font-size:9px;font-weight:700;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.04em} @media (max-width:760px){.tg-own-page-inner{margin-left:14px;margin-right:14px}} .tg-own-header-wrap{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:stretch;margin-bottom:22px} .tg-own-header-wrap .tg-channel-card{margin-bottom:0} .tg-notes-board{display:flex;flex-direction:column;gap:14px;height:100%;align-self:stretch} /* Цвета «бумаги» — CSS-классы, не инлайн-стиль: CSP сайта (style-src 'self', без unsafe-inline) молча блокирует любой style="" и .style.*, выставленный из JS, а класс он не трогает. */ .tg-note-color-0{--note-bg:#fff6c8,#fce994;--note-text:#3a2f00;--note-date:#6b5a10;--note-pin:#ff9a9a,#c02b2b} .tg-note-color-1{--note-bg:#d7f7df,#a9e8bc;--note-text:#154226;--note-date:#2c6b46;--note-pin:#8fe0ab,#1f8a4c} .tg-note-color-2{--note-bg:#e7ddff,#c9b6ff;--note-text:#2f1f5c;--note-date:#5a4590;--note-pin:#c3aeff,#6b3fd6} .tg-note-color-3{--note-bg:#ffe0ee,#ffb8d2;--note-text:#5c1030;--note-date:#8a3357;--note-pin:#ff9ac2,#d6266e} .tg-sticky-note{position:relative;flex:1 0 auto;width:100%;min-height:150px;overflow:visible;text-align:left;cursor:pointer;border:none;border-radius:10px;padding:20px 16px 14px;transform:rotate(-1.6deg);background:linear-gradient(180deg,var(--note-bg));background-image:linear-gradient(180deg,var(--note-bg)),repeating-linear-gradient(180deg,transparent,transparent 26px,rgba(0,0,0,.12) 27px);box-shadow:0 14px 26px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;transition:transform .15s ease,box-shadow .15s ease} .tg-sticky-note:nth-child(even){transform:rotate(1.4deg)} .tg-sticky-note:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 18px 32px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.5) inset} .tg-sticky-note-pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--note-pin));box-shadow:0 2px 4px rgba(0,0,0,.45)} .tg-sticky-note-text{display:-webkit-box;font-family:var(--font-hand);font-size:18px;line-height:1.45;color:var(--note-text);-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word} .tg-sticky-note-empty .tg-sticky-note-text{-webkit-line-clamp:unset;font-size:16px} .tg-sticky-note-date{display:block;margin-top:8px;font-family:var(--font-hand);font-size:13px;color:var(--note-date)} @media (max-width:900px){.tg-own-header-wrap{grid-template-columns:1fr}} .tg-notes-dialog{width:min(720px,calc(100vw - 32px));max-height:calc(var(--vvh,100dvh) - 32px);overflow-y:auto;border:none;border-radius:22px;background:var(--card-bg);color:var(--text-strong);padding:26px;box-shadow:0 24px 90px rgba(0,0,0,.6)} .tg-notes-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(4px)} .tg-notes-dialog .dialog-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-strong);background:var(--panel-soft);color:var(--muted-4);font-size:18px;line-height:1;cursor:pointer} .tg-notes-layout{display:grid;grid-template-columns:180px 1fr;gap:16px;margin-top:16px} .tg-notes-list{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow-y:auto} .tg-notes-list-item{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:var(--panel-soft);border-radius:9px;padding:8px 10px;cursor:pointer} .tg-notes-list-item:hover{border-color:var(--accent-line)} .tg-notes-list-item.active{border-color:var(--accent-line);background:var(--surface-active)} .tg-notes-list-date{font-size:10px;font-weight:800;color:var(--muted-3);text-transform:uppercase;letter-spacing:.04em} .tg-notes-list-snippet{font-size:11.5px;color:var(--text-strong);line-height:1.4} .tg-notes-page{position:relative;min-height:280px;padding:26px 22px 18px;border-radius:16px;background:linear-gradient(180deg,var(--note-bg,#fff6c8,#fce994));background-image:linear-gradient(180deg,var(--note-bg,#fff6c8,#fce994)),repeating-linear-gradient(180deg,transparent,transparent 27px,rgba(0,0,0,.1) 28px);box-shadow:0 10px 24px rgba(0,0,0,.35)} .tg-notes-page-text{margin:0;font-family:var(--font-hand);font-size:19px;line-height:1.5;color:var(--note-text,#3a2f00);white-space:pre-wrap} .tg-notes-page-date{margin:14px 0 0;font-family:var(--font-hand);font-size:13px;color:var(--note-date,#6b5a10)} /* Контейнер только для атомарной замены DOM (см. app.js) — на глаз его нет: display:contents убирает у него собственную коробку, дети ведут себя как прямые потомки .tg-notes-page, ничего в раскладке не меняется. */ .tg-note-actions{display:contents} .tg-note-apply-btn{margin-top:16px;padding:8px 16px;border-radius:999px;border:2px dashed var(--note-text,#3a2f00);background:transparent;color:var(--note-text,#3a2f00);font-family:var(--font-hand);font-size:16px;font-weight:600;cursor:pointer;transform:rotate(-1deg);transition:transform .15s ease,background .15s ease} .tg-note-apply-btn:hover{transform:rotate(0deg) scale(1.04);background:rgba(0,0,0,.06)} .tg-note-apply-btn.applied{border-style:solid;background:rgba(0,0,0,.08)} .tg-notes-empty{padding:30px 0;text-align:center;color:var(--muted-3)} .tg-notes-actions{margin-top:18px;display:flex;justify-content:flex-end} @media (max-width:620px){.tg-notes-layout{grid-template-columns:1fr}.tg-notes-list{flex-direction:row;max-height:none;overflow-x:auto}.tg-notes-list-item{min-width:150px}} .composer-tools[hidden]{display:none!important}.message-attachments{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.16);font-size:11px;line-height:1.5;color:var(--accent-text)} .stop-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--danger),var(--danger));color:#fff;cursor:pointer;font-size:13px}.stop-button[hidden],.send-button[hidden]{display:none} .confirm-dialog{width:min(380px,calc(100vw - 32px));max-height:calc(var(--vvh,100dvh) - 32px);overflow-y:auto;border:1px solid var(--border-strong);border-radius:16px;background:var(--card-bg);color:var(--text-strong);padding:24px;box-shadow:0 24px 90px rgba(0,0,0,.6)}.confirm-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}.confirm-dialog h2{margin:8px 0 20px;font-size:17px;line-height:1.4;font-weight:700}.confirm-actions{display:flex;justify-content:flex-end;gap:10px}.confirm-actions button{border-radius:9px;padding:9px 16px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.confirm-actions #confirm-cancel{border:1px solid var(--border-strong);background:transparent;color:var(--muted-4)}.confirm-actions .danger{border:0;background:linear-gradient(135deg,var(--danger),var(--danger));color:#fff} .attachment-list span.thumb{padding:2px}.attachment-list img{width:28px;height:28px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:6px} .attachment-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:var(--panel-soft);color:var(--accent-text);margin-right:6px;flex:0 0 auto;border:0;padding:0;font:inherit} .attachment-icon .icon{width:15px;height:15px} button.attachment-preview-btn{cursor:pointer} button.attachment-preview-btn:hover{background:var(--surface-active)} .attachment-icon.uploading{background:transparent} .upload-ring{width:28px;height:28px;transform:rotate(-90deg)} .upload-ring .ring-track{fill:none;stroke:var(--panel-soft);stroke-width:2.5} .upload-ring .ring-progress{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .15s ease} .chat-search{display:none;align-items:center;gap:6px;margin:0 clamp(18px,5vw,90px) 10px}.chat-search[data-open]{display:flex}.chat-search input{flex:1;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px}.chat-search button{border:0;background:transparent;color:var(--muted-3);font-size:16px;cursor:pointer;padding:4px 8px}.message.search-hidden{display:none} .search-toggle{border:0;background:transparent;color:var(--muted-2);font-size:16px;cursor:pointer;padding:4px 6px}.search-toggle.active{color:var(--accent-text)} @media (max-width:1040px){.usage-card{grid-template-columns:1fr}.prompt-grid{columns:2 220px}} @media (max-width:760px){.composer-tools,.attachment-list{margin-left:10px;margin-right:10px}.prompt-grid{columns:1}.prompt-toolbar{grid-template-columns:1fr}.usage-card{margin:12px 14px;padding:19px}.usage-chart{gap:7px;height:130px}.dashboard-summary{margin-left:14px;margin-right:14px}.agent-card.editable{display:block}.agent-card-actions .primary-link{width:auto}.avatar-upload{grid-template-columns:auto 1fr}} :root[data-density="compact"] .app-nav a,:root[data-density="compact"] .sidebar-bottom a,:root[data-density="compact"] .sidebar-bottom button{height:36px} :root[data-density="compact"] .metric-card,:root[data-density="compact"] .skill-card,:root[data-density="compact"] .prompt-card,:root[data-density="compact"] .integration-card{padding:13px} :root[data-density="compact"] .admin-table th,:root[data-density="compact"] .admin-table td{padding:8px 12px} :root[data-density="compact"] .messages{padding-top:18px;padding-bottom:18px;gap:8px} /* ============================================================================ ПРЕМИАЛЬНЫЙ СЛОЙ — типографика, объём, движение, фокус. Идёт последним: переопределяет базовые компоненты, не трогая их разметку. ========================================================================= */ /* — Типографика — */ body,.app-body{font-family:var(--font-body);font-feature-settings:'cv05','ss01';letter-spacing:-.005em} h1,h2,h3,.app-header h1,.chat-welcome h2,.metric-card strong,.wide-card h2,.agent-card h2, .settings-card h2,.empty-state h2,.login-card h2,.brand-panel h1,.skill-dialog h2,.form-heading h2, .skills-toolbar h2,.section-intro h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em} .app-kicker,.card-kicker,.eyebrow,.chat-rail-label,.integration-category h3,.section-intro>p, .admin-table th,.skill-badge,.status-pill,.prompt-visibility,.prompt-card span,.code-block-head span{ font-family:var(--font-mono);font-weight:600;letter-spacing:.08em} code,pre,.mono,.code-block code{font-family:var(--font-mono)} /* Цифры не должны прыгать при обновлении */ .metric-card strong,.usage-column b,.admin-table td,.skills-tabs .skills-tab span, .section-title span,.dashboard-summary h2{font-variant-numeric:tabular-nums} .app-brand{font-family:var(--font-display);font-weight:800} .app-brand-mark,.welcome-mark,.agent-avatar,.brand-core{font-family:var(--font-display);font-weight:800} /* — Видимый фокус на всём интерактивном (раньше его не было нигде) — */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} .app-nav a:focus-visible,.sidebar-bottom a:focus-visible,.sidebar-bottom button:focus-visible{outline-offset:-2px} /* — Атмосфера: живой фон рабочей области — */ .app-main{ background: radial-gradient(circle at 88% -12%,var(--aura-1),transparent 34%), radial-gradient(circle at 4% 108%,var(--aura-2),transparent 32%), var(--bg); background-attachment:fixed} .app-main::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 70% 0%,black,transparent 62%)} .app-content,.app-header{position:relative;z-index:1} /* — Объём карточек: подсветка верхнего края + мягкая тень — */ .metric-card,.wide-card,.usage-card,.skill-card,.prompt-card,.integration-card, .agent-card,.settings-card,.agent-form,.admin-table-wrap,.empty-state{ position:relative;box-shadow:var(--shadow-sm); background-image:linear-gradient(180deg,rgba(255,255,255,.028),transparent 42%)} :root[data-theme="light"] .metric-card,:root[data-theme="light"] .wide-card, :root[data-theme="light"] .usage-card,:root[data-theme="light"] .skill-card, :root[data-theme="light"] .prompt-card,:root[data-theme="light"] .integration-card, :root[data-theme="light"] .agent-card,:root[data-theme="light"] .settings-card{background-image:none} /* Тонкая световая грань сверху у крупных карточек */ .metric-card::before,.usage-card::before,.wide-card::before{ content:'';position:absolute;left:16px;right:16px;top:0;height:1px;border-radius:1px; background:linear-gradient(90deg,transparent,var(--accent-line),transparent);opacity:.7} /* — Главная карточка дашборда: объёмная сфера-аура — */ .metric-card.prominent{ background: radial-gradient(120% 130% at 88% -20%,var(--accent-soft),transparent 58%), linear-gradient(150deg,color-mix(in oklab,var(--accent) 13%,var(--card-bg)),var(--card-bg)); border-color:var(--accent-line);overflow:hidden} .metric-card.prominent::after{ content:'';position:absolute;right:-46px;bottom:-56px;width:172px;height:172px;border-radius:50%; background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent)); filter:blur(34px);opacity:.32;pointer-events:none} @media (prefers-reduced-motion:no-preference){ .metric-card.prominent::after{animation:orb 14s linear infinite} @keyframes orb{to{transform:rotate(360deg)}}} /* — Появление контента: карточки въезжают каскадом — */ @media (prefers-reduced-motion:no-preference){ .dashboard-grid>*,.skill-grid>*,.integration-grid>*,.prompt-card,.settings-stack>*, .admin-table-wrap,.usage-card,.dashboard-summary{animation:riseIn .5s var(--ease) backwards} .dashboard-grid>*:nth-child(1),.skill-grid>*:nth-child(1),.integration-grid>*:nth-child(1){animation-delay:.02s} .dashboard-grid>*:nth-child(2),.skill-grid>*:nth-child(2),.integration-grid>*:nth-child(2){animation-delay:.07s} .dashboard-grid>*:nth-child(3),.skill-grid>*:nth-child(3),.integration-grid>*:nth-child(3){animation-delay:.12s} .dashboard-grid>*:nth-child(4),.skill-grid>*:nth-child(4),.integration-grid>*:nth-child(4){animation-delay:.17s} .skill-grid>*:nth-child(n+5),.integration-grid>*:nth-child(n+5){animation-delay:.2s} .usage-card{animation-delay:.2s}.dashboard-summary{animation-delay:.26s} @keyframes riseIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .app-content>*{animation:fadeUp .34s var(--ease) backwards} @keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}} /* — Наведение: свет идёт за курсором по границе — */ @media (prefers-reduced-motion:no-preference){ .metric-card,.wide-card,.usage-card,.skill-card,.prompt-card,.integration-card{ transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease)} .metric-card:hover,.wide-card:hover,.usage-card:hover{ transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow-accent)} .skill-card:hover,.prompt-card:hover,.integration-card:hover{ transform:translateY(-3px) scale(1.012);border-color:var(--accent-line); box-shadow:var(--shadow-accent);z-index:1}} /* — Кнопки: градиент со сдвигом блика — */ .primary-link,.login-form button,.integration-connect{ position:relative;overflow:hidden;background:var(--accent-grad); box-shadow:0 10px 26px var(--accent-glow); transition:transform var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease)} .primary-link::after,.login-form button::after,.integration-connect::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.24) 47%,transparent 66%); transform:translateX(-130%)} @media (prefers-reduced-motion:no-preference){ .primary-link:hover::after,.login-form button:hover::after,.integration-connect:hover::after{ transition:transform .68s var(--ease);transform:translateX(130%)}} .primary-link:hover,.login-form button:hover,.integration-connect:hover{ transform:translateY(-2px);box-shadow:0 16px 36px var(--accent-glow);filter:none} .primary-link:active,.login-form button:active{transform:translateY(0)} .primary-link span{transition:transform var(--t-mid) var(--ease-spring)} .primary-link:hover span{transform:translateX(4px)} /* — Навигация: акцентная грань у активного пункта — */ .app-nav a{position:relative;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)} .app-nav a.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)} .app-nav a.active::before{ content:'';position:absolute;left:-14px;top:50%;width:3px;height:20px;border-radius:0 3px 3px 0; background:var(--accent);transform:translateY(-50%);box-shadow:0 0 12px var(--accent)} @media (prefers-reduced-motion:no-preference){ .app-nav a:hover .icon{transform:translateX(2px);transition:transform var(--t-mid) var(--ease-spring)}} /* — Статус: дышащая точка вместо статичной — */ @media (prefers-reduced-motion:no-preference){ @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 var(--ok-line)}55%{box-shadow:0 0 0 7px transparent}}} /* — Чат: сообщения проявляются, а не возникают — */ @media (prefers-reduced-motion:no-preference){ .message{animation:msgIn .34s var(--ease) backwards} @keyframes msgIn{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}} .message-user{background:var(--accent-grad);box-shadow:0 6px 18px var(--accent-glow)} .message-agent{background:var(--card-bg-2);border:1px solid var(--line)} /* — Поля ввода: мягкое кольцо фокуса в цвете акцента — */ .form-grid input,.form-grid textarea,.form-grid select,.skill-dialog input,.skill-dialog textarea, .skill-dialog select,.skills-search input,.prompt-toolbar input,.prompt-toolbar select, .chat-search input,.login-form input{ transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease)} .form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus,.skill-dialog input:focus, .skill-dialog textarea:focus,.skill-dialog select:focus,.skills-search input:focus, .prompt-toolbar input:focus,.prompt-toolbar select:focus,.chat-search input:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} /* — Композер: поднимается в фокусе — */ .composer{transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)} .composer.composer-drop-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.18)} /* Настройки → всплывающее меню сбоку с Интеграциями, Базой знаний, Админкой — вместо отдельных пунктов в основном списке навигации. */ /* Раньше подменю раскрывалось по :hover — на телефоне ховера нет вообще, поэтому Интеграции/База знаний были физически недостижимы. Теперь везде (и на ПК, и на телефоне) один и тот же клик-переключатель через класс .open — см. app.js. */ .settings-menu{position:relative} .settings-menu-toggle{width:100%;text-align:left;border:0;background:transparent;font:inherit;cursor:pointer} .settings-flyout{position:absolute;left:100%;bottom:0;margin-left:8px;min-width:190px;padding:6px;border:1px solid var(--border-strong);border-radius:12px;background:var(--card-bg);box-shadow:0 18px 50px rgba(0,0,0,.45);display:none;flex-direction:column;gap:2px} .settings-menu.open .settings-flyout{display:flex} .settings-flyout a{border-radius:8px} @media (max-width:760px){.settings-flyout{position:static;left:auto;bottom:auto;margin:4px 0 0;box-shadow:none;border:0;background:transparent}} .composer:focus-within{border-color:var(--accent-line);box-shadow:0 8px 30px var(--accent-glow)} /* — Диалоги: въезд, а не мигание — */ @media (prefers-reduced-motion:no-preference){ .skill-dialog[open],.confirm-dialog[open]{animation:dialogIn .28s var(--ease-spring)} @keyframes dialogIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}} .skill-dialog,.confirm-dialog{border-color:var(--line);box-shadow:var(--shadow-lg)} /* — Табы и пилюли — */ .skills-tabs .skills-tab,.admin-tabs a,.theme-option{ transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .skills-tabs .skills-tab:hover,.admin-tabs a:hover,.theme-option:hover{ border-color:var(--accent-line);color:var(--ink)} .theme-option.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)} .skills-tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .skills-tabs::-webkit-scrollbar{display:none} .skills-tabs .skills-tab{white-space:nowrap;flex:0 0 auto} /* — График активности: подъём столбцов — */ .usage-column i{background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo)); box-shadow:0 -2px 14px var(--accent-glow)} @media (prefers-reduced-motion:no-preference){ .usage-column i{animation:growBar .6s var(--ease) backwards;transform-origin:bottom} .usage-column:nth-child(1) i{animation-delay:.05s}.usage-column:nth-child(2) i{animation-delay:.1s} .usage-column:nth-child(3) i{animation-delay:.15s}.usage-column:nth-child(4) i{animation-delay:.2s} .usage-column:nth-child(5) i{animation-delay:.25s}.usage-column:nth-child(6) i{animation-delay:.3s} .usage-column:nth-child(7) i{animation-delay:.35s} @keyframes growBar{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}} /* — Скроллбары в стиле продукта — */ *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full); border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box} /* — Выделение текста — */ ::selection{background:var(--accent-soft);color:var(--ink)} /* — Радиусы к единой шкале — */ .metric-card,.wide-card,.usage-card,.agent-card,.settings-card,.empty-state,.agent-form{border-radius:var(--r-lg)} .skill-card,.prompt-card,.integration-card{border-radius:var(--r-md)} .skill-dialog,.confirm-dialog{border-radius:var(--r-xl)} /* — Планшет: карточка агента больше не пропадает (была дыра 760–1040px) — */ @media (max-width:1040px) and (min-width:761px){.agent-card.editable{display:block}} /* ============================================================================ БАЗА ЗНАНИЙ (админка) и каталог интеграций ========================================================================= */ .kb-search{max-width:1180px;margin:0 auto 18px} .kb-search input{width:100%;height:46px;padding:0 15px;border:1px solid var(--border-strong); background:var(--input-bg);color:var(--text-strong);border-radius:var(--r-md);font:inherit} .kb-layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:290px minmax(0,1fr); gap:18px;align-items:start} .kb-index{display:flex;flex-direction:column;gap:20px;position:sticky;top:104px;max-height:calc(100dvh - 140px); overflow-y:auto;padding-right:4px} .kb-group h3{margin:0 0 8px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-3)} .kb-link{display:grid;gap:3px;width:100%;text-align:left;border:1px solid transparent;border-radius:var(--r-sm); background:transparent;color:var(--muted-4);padding:9px 11px;font:inherit;cursor:pointer; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .kb-link strong{font-size:13.5px;font-weight:600;color:var(--text-strong)} .kb-link small{font-size:11.5px;line-height:1.45;color:var(--muted-3)} .kb-link:hover{background:var(--surface-hover);border-color:var(--line);transform:translateX(2px)} .kb-link.active{background:var(--accent-soft);border-color:var(--accent-line)} .kb-link.active strong{color:var(--ink)} .kb-reader{min-height:440px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-bg); padding:clamp(22px,3.4vw,40px);box-shadow:var(--shadow-sm)} .kb-placeholder{min-height:380px;display:grid;place-content:center;text-align:center;gap:6px} .kb-placeholder h2{margin:14px 0 0;font-size:22px} .kb-placeholder p{max-width:420px;margin:8px auto 0;color:var(--muted-3);line-height:1.6} .empty-glyph{width:34px;height:34px;color:var(--accent-text)} .empty-state>span .empty-glyph,.kb-placeholder .empty-glyph{margin:0 auto} .kb-article h2{margin:0 0 10px;font-size:clamp(24px,3.2vw,31px)} .kb-lede{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line); color:var(--muted-2);font-size:16px;line-height:1.6} .kb-body{color:var(--muted-2);font-size:15px;line-height:1.72} .kb-body h3,.kb-body h4{margin:30px 0 10px;color:var(--ink);font-family:var(--font-display); font-size:18px;font-weight:800;letter-spacing:-.02em} .kb-body h3:first-child{margin-top:0} .kb-body p{margin:0 0 14px} .kb-body ul,.kb-body ol{margin:0 0 16px;padding-left:22px} .kb-body li{margin:6px 0} .kb-body strong{color:var(--ink);font-weight:600} .kb-body code{padding:2px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent-text); font-family:var(--font-mono);font-size:.87em} .kb-body .code-block{margin:18px 0} .kb-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;display:block;overflow-x:auto} .kb-source{margin:32px 0 0;padding-top:18px;border-top:1px solid var(--line); font-family:var(--font-mono);font-size:11px;color:var(--muted-faint)} @media (max-width:900px){ .kb-layout{grid-template-columns:1fr} .kb-index{position:static;max-height:none;flex-direction:column} .kb-reader{padding:20px}} /* Таблицы внутри статей базы знаний (renderMarkdown их не строит — оставляем аккуратный вид для будущего, а сейчас таблицы приходят как текст) */ .kb-body p:has(+ p) code{white-space:nowrap} /* — Интеграция со статусом «Планируется» — */ .integration-card.status-planned{border-color:var(--line);opacity:.72; background:linear-gradient(180deg,var(--surface-hover),transparent 60%) var(--card-bg)} .integration-card.status-planned:hover{opacity:1} .integration-card.status-planned small{color:var(--muted-3)} .integration-card.status-planned .integration-icon{border-color:var(--border-strong);color:var(--muted-3)} .integration-icon .icon{width:17px;height:17px} .integration-card.status-connected .integration-icon .icon{color:var(--ok-text)} .integration-card.status-pending .integration-icon .icon{color:var(--danger-text)} /* — Живая точка Gateway в шапке чата — */ .live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block; margin-right:6px;vertical-align:middle} @media (prefers-reduced-motion:no-preference){ .live-dot{animation:pulseDot 2.6s var(--ease) infinite}} /* — Ссылка на библиотеку промптов — */ .prompt-library-link{display:flex;align-items:center;gap:8px} .prompt-library-link .icon{width:16px;height:16px;color:var(--accent-text)} /* ============================================================================ ЧАТ: раскладка панели Раньше .chat-panel объявлял 4 строки грида, а детей было шесть (шапка, поиск, сообщения, меню «+», вложения, композер). Из-за этого строку minmax(0,1fr) получал поиск, а не лента сообщений: при открытии поиска он наезжал на текст, а композер уезжал в неявную строку у самого низа. Теперь каждый ребёнок закреплён за своей строкой явно, поэтому скрытый поиск больше ничего не сдвигает. ========================================================================= */ .chat-layout-full .chat-panel{grid-template-rows:auto auto minmax(0,1fr) auto auto auto} .chat-layout-full .chat-panel-head{grid-row:1} .chat-layout-full .chat-search{grid-row:2} .chat-layout-full .messages{grid-row:3} .chat-layout-full .composer-tools{grid-row:4} .chat-layout-full .attachment-list{grid-row:5} .chat-layout-full .composer{grid-row:6} /* Поиск больше не всплывает поверх ленты и живёт в своей строке */ .chat-search{margin:10px clamp(18px,5vw,90px);position:relative;z-index:2} .chat-search input{height:42px} /* Композер не должен лежать на самом краю экрана */ .chat-layout-full .composer{margin:0 clamp(18px,5vw,90px) clamp(18px,2.4vw,26px)} .chat-layout-full .attachment-list{margin-bottom:8px} /* Индикатор Gateway убран: состояние агента видно на дашборде, а пульсирующая точка на каждой странице только отвлекала. */ .chat-session-live,.header-state{display:none} .app-header{justify-content:flex-start} @media (max-width:760px){ .chat-layout-full .composer{margin:0 10px 12px} .chat-search{margin:8px 10px} } /* ============================================================================ ТАБЛИЦЫ В MARKDOWN (база знаний, ответы агента) ========================================================================= */ .md-table-wrap{margin:0 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md); background:var(--card-bg-2)} .md-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px} .md-table th{text-align:left;padding:12px 16px;background:var(--surface-hover); font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-3);border-bottom:1px solid var(--line);white-space:nowrap} .md-table td{padding:12px 16px;border-bottom:1px solid var(--line-2);color:var(--muted-2); vertical-align:top;line-height:1.6} .md-table tr:last-child td{border-bottom:0} .md-table td:first-child{color:var(--ink);font-weight:500} .md-table code{white-space:nowrap} .message .md-table-wrap{margin:12px 0} /* ============================================================================ БАЗА ЗНАНИЙ: разделы-аккордеоны ========================================================================= */ .kb-group{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-bg); overflow:hidden;transition:border-color var(--t-fast) var(--ease)} .kb-group:hover{border-color:var(--border-strong)} .kb-group-head{display:flex;align-items:center;gap:10px;width:100%;padding:13px 15px; border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left; transition:background var(--t-fast) var(--ease)} .kb-group-head:hover{background:var(--surface-hover)} .kb-group-head h3{margin:0;flex:1;font-family:var(--font-body);font-size:13.5px;font-weight:600; letter-spacing:0;text-transform:none;color:var(--ink)} .kb-group-count{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted-3); padding:2px 7px;border:1px solid var(--line);border-radius:var(--r-full)} .kb-chevron{width:16px;height:16px;flex:0 0 auto;color:var(--muted-3); transition:transform var(--t-mid) var(--ease)} .kb-group[data-open] .kb-chevron{transform:rotate(90deg);color:var(--accent-text)} .kb-group-body{display:none;padding:2px 8px 9px;flex-direction:column;gap:2px} .kb-group[data-open] .kb-group-body{display:flex} @media (prefers-reduced-motion:no-preference){ .kb-group[data-open] .kb-group-body{animation:kbOpen .26s var(--ease)} @keyframes kbOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}} .kb-index{gap:10px} /* ============================================================================ ФИРМЕННЫЕ СКИЛЛЫ ALCONTA ========================================================================= */ .curated-block{max-width:1100px;margin:0 auto 30px} .curated-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px} .curated-head h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:800; letter-spacing:-.03em;color:var(--ink)} .curated-head span{font-size:13px;color:var(--muted-3)} .skill-card-curated{border-color:var(--accent-line); background:radial-gradient(120% 140% at 88% -20%,var(--accent-soft),transparent 62%),var(--card-bg)} .skill-curated-glyph{width:17px;height:17px;color:var(--accent-text)} .skill-badge.curated{background:var(--accent-soft);color:var(--accent-text)} .skill-install-primary{border:0!important;border-radius:var(--r-sm)!important; background:var(--accent-grad);color:var(--on-accent)!important;padding:8px 15px!important; font-size:11.5px!important;font-weight:700;cursor:pointer; box-shadow:0 6px 16px var(--accent-glow); transition:transform var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease)} .skill-install-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px var(--accent-glow)} .skill-install-primary:disabled{opacity:.65;cursor:wait;transform:none} .skill-installed{border:1px solid var(--ok-line)!important;border-radius:var(--r-sm)!important; background:var(--ok-soft)!important;color:var(--ok-text)!important;padding:8px 13px!important; font-size:11.5px!important;font-weight:700;cursor:pointer} .section-divider{max-width:1100px;margin:0 auto 16px;display:flex;align-items:center;gap:14px; color:var(--muted-3);font-family:var(--font-mono);font-size:10.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase} .section-divider::after{content:'';flex:1;height:1px;background:var(--line)} /* ============================================================================ КНОПКА МИКРОФОНА ========================================================================= */ .mic-button{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center; border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--panel-soft); color:var(--muted-2);cursor:pointer;position:relative; transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)} .mic-button:hover{border-color:var(--accent);color:var(--accent-text)} .mic-button .icon{width:17px;height:17px} .mic-button.recording{border-color:var(--danger);color:var(--on-accent); background:linear-gradient(135deg,var(--danger),color-mix(in oklab,var(--danger) 76%,black))} .mic-button.recording::after{content:attr(data-time);position:absolute;bottom:calc(100% + 7px); left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:var(--r-full); background:var(--danger);color:var(--on-accent);font-family:var(--font-mono); font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} @media (prefers-reduced-motion:no-preference){ .mic-button.recording{animation:micPulse 1.5s var(--ease) infinite} @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 var(--danger-soft)}55%{box-shadow:0 0 0 8px transparent}}} /* ============================================================================ ИНСТРУКЦИЯ К ИНТЕГРАЦИИ (поп-ап) ========================================================================= */ /* Кнопка «?» живёт в строке заголовка, а не поверх карточки: при абсолютном позиционировании она вставала по-разному в зависимости от длины описания и у части карточек наезжала на текст. */ .integration-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .integration-head h3{margin:1px 0 5px;flex:1;min-width:0} /* Специфичность здесь не для красоты: общее правило `.integration-card button` задаёт padding 7px 10px, и при ширине кнопки 25px иконке оставалось 5px — она вылезала из центра на несколько пикселей. Селектор с родителем бьёт то правило по весу, а !important не нужен. */ .guide-open, .integration-card .guide-open, .skill-card .guide-open{flex:0 0 auto;width:26px;height:26px;margin-top:0;display:grid; place-items:center;border:1px solid var(--line);border-radius:var(--r-full); background:transparent;color:var(--muted-3);cursor:pointer;padding:0;line-height:0; transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .guide-open .icon{width:15px;height:15px;display:block} .guide-open:hover, .integration-card .guide-open:hover, .skill-card .guide-open:hover{color:var(--accent-text);border-color:var(--accent-line); background:var(--accent-soft);transform:scale(1.08)} .guide-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(var(--vvh,100dvh) - 60px)} .guide-body{position:relative;padding:28px;overflow-y:auto;max-height:calc(100dvh - 60px)} .guide-dialog h2{margin:0 0 12px;font-size:24px} .guide-what{margin:0 0 4px;color:var(--muted-2);font-size:15px;line-height:1.65} .guide-section{margin-top:24px} .guide-section h3{margin:0 0 10px;font-family:var(--font-mono);font-size:10.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3)} .guide-list,.guide-steps{margin:0;padding-left:20px;color:var(--muted-2);font-size:14.5px;line-height:1.65} .guide-list li,.guide-steps li{margin:6px 0} .guide-steps li::marker{color:var(--accent-text);font-weight:600} .guide-note{margin:22px 0 0;padding:13px 15px;border-radius:var(--r-sm); background:var(--accent-soft);border:1px solid var(--accent-line); color:var(--muted-2);font-size:13.5px;line-height:1.6} /* Примеры оформлены как настоящая переписка */ .guide-chat{display:flex;flex-direction:column;gap:9px;padding:15px;border-radius:var(--r-md); background:var(--surface-sunk);border:1px solid var(--line)} .guide-bubble{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.55} .guide-user{align-self:flex-end;background:var(--accent-grad);color:var(--on-accent); border-bottom-right-radius:4px} .guide-agent{align-self:flex-start;background:var(--card-bg-2);color:var(--text-strong); border:1px solid var(--line);border-bottom-left-radius:4px} @media (prefers-reduced-motion:no-preference){ .guide-bubble{animation:msgIn .32s var(--ease) backwards} .guide-chat .guide-bubble:nth-child(2){animation-delay:.1s} .guide-chat .guide-bubble:nth-child(3){animation-delay:.2s} .guide-chat .guide-bubble:nth-child(4){animation-delay:.3s}} @media (max-width:560px){.guide-body{padding:22px 18px}.guide-bubble{max-width:94%}} /* Вкладки «Подключённые / Доступные» на странице интеграций */ .skills-tab-panel .integration-grid{margin-top:0} .skills-tab-panel>.section-divider{margin-top:26px} .skills-tab-panel .integration-category:last-child{margin-bottom:0} /* ============================================================================ ЗАТЕМНЕНИЕ ПОД БОКОВЫМ МЕНЮ Клик мимо панели закрывает её. Раньше выйти можно было только повторным попаданием в кнопку-гамбургер. ========================================================================= */ .sidebar-backdrop{display:none;position:fixed;inset:0;z-index:9; background:rgba(0,0,0,.5);backdrop-filter:blur(2px)} .sidebar-backdrop.open{display:block} @media (min-width:761px){.sidebar-backdrop{display:none!important}} @media (prefers-reduced-motion:no-preference){ .sidebar-backdrop.open{animation:fadeIn .18s var(--ease)} @keyframes fadeIn{from{opacity:0}to{opacity:1}}} /* ============================================================================ СТРАНИЦА «AI-АГЕНТЫ» Была одна карточка на пол-экрана с выдуманными строками и пустотой под ней. Теперь: живые показатели в карточке и понятные блоки настройки под ней. ========================================================================= */ .agent-editor{max-width:760px} .agent-card.editable{padding:26px} .agent-card dl{margin:22px 0 0;display:grid;gap:0; border-top:1px solid var(--line)} .agent-card dl div{display:flex;justify-content:space-between;gap:14px; padding:12px 0;border-bottom:1px solid var(--line-2)} .agent-card dl div:last-child{border-bottom:0} .agent-card dt{color:var(--muted-3);font-size:13px} .agent-card dd{margin:0;color:var(--ink);font-size:13px;font-weight:600; font-variant-numeric:tabular-nums;text-align:right} .agent-card-actions{margin-top:22px} /* Подсказки под карточкой — вместо пустого экрана */ .agent-hints{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px; max-width:760px;margin:16px auto 0} .agent-hint{padding:18px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--card-bg);box-shadow:var(--shadow-sm)} .agent-hint .icon{width:18px;height:18px;color:var(--accent-text);margin-bottom:10px} .agent-hint h3{margin:0 0 6px;font-family:var(--font-display);font-size:15px;font-weight:700; letter-spacing:-.02em;color:var(--ink)} .agent-hint p{margin:0;color:var(--muted-3);font-size:13px;line-height:1.55} @media (prefers-reduced-motion:no-preference){ .agent-hints>*{animation:riseIn .45s var(--ease) backwards} .agent-hints>*:nth-child(2){animation-delay:.06s} .agent-hints>*:nth-child(3){animation-delay:.12s}} /* ============================================================================ ПЕРСОНАЛИЗАЦИЯ Каждая настройка — атрибут на , который переопределяет только токены. Компоненты ниже про эти атрибуты не знают и не должны знать. ========================================================================= */ /* — Акценты — */ :root[data-accent="violet"]{ --accent:#7c5cff; --accent-2:#24d2b5 } :root[data-accent="aqua"]{ --accent:#17c4ad; --accent-2:#7c5cff } :root[data-accent="ocean"]{ --accent:#3b82f6; --accent-2:#22d3ee } :root[data-accent="ember"]{ --accent:#ff7a45; --accent-2:#ffc247 } :root[data-accent="magenta"]{ --accent:#e857c8; --accent-2:#8b5cf6 } :root[data-accent="forest"]{ --accent:#3fa96b; --accent-2:#a3d977 } :root[data-accent="crimson"]{ --accent:#f2485f; --accent-2:#ff9d6e } :root[data-accent="slate"]{ --accent:#7d8aa3; --accent-2:#9fb3c8 } /* — Шрифтовые наборы — */ :root[data-font="inter"]{ --font-display:'Inter',system-ui,sans-serif } :root[data-font="serif"]{ --font-display:Georgia,'Times New Roman',serif; --font-body:Georgia,'Times New Roman',serif } :root[data-font="mono"]{ --font-display:var(--font-mono); --font-body:var(--font-mono) } :root[data-font="mono"] body{letter-spacing:-.01em;font-size:15px} :root[data-font="serif"] h1,:root[data-font="serif"] h2,:root[data-font="serif"] h3{letter-spacing:-.01em} /* Масштаб текста — раньше document.body.style.zoom=... из JS, CSP сайта (style-src 'self') такое молча блокирует. Вариантов всего три (см. prefCard('Масштаб текста',...) в app.js), так что просто три готовых класса вместо произвольного инлайн-значения. */ :root[data-scale="110"] body{zoom:1.1} :root[data-scale="120"] body{zoom:1.2} /* — Скругления — */ :root[data-radius="sharp"]{ --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:6px } :root[data-radius="round"]{ --r-xs:12px; --r-sm:16px; --r-md:20px; --r-lg:26px; --r-xl:32px } :root[data-radius="sharp"] .app-brand-mark,:root[data-radius="sharp"] .agent-avatar, :root[data-radius="sharp"] .welcome-mark{border-radius:4px} :root[data-radius="round"] .app-brand-mark,:root[data-radius="round"] .agent-avatar{border-radius:14px} /* — Фон рабочей области — */ :root[data-texture="plain"] .app-main::before{display:none} :root[data-texture="plain"] .app-main{background:var(--bg)} :root[data-texture="glow"] .app-main::before{display:none} :root[data-texture="glow"] .app-main{ background: radial-gradient(circle at 82% -8%,var(--aura-1),transparent 42%), radial-gradient(circle at 10% 104%,var(--aura-2),transparent 40%), radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--accent) 7%,transparent),transparent 60%), var(--bg)} /* — Форма сообщений — */ :root[data-bubbles="square"] .message{border-radius:3px} :root[data-bubbles="square"] .message-user, :root[data-bubbles="square"] .message-agent{border-bottom-left-radius:3px;border-bottom-right-radius:3px} :root[data-bubbles="flat"] .message-agent{background:var(--surface-sunk);border-color:transparent} :root[data-bubbles="flat"] .message-user{background:transparent;color:var(--accent-text); border:1px solid var(--accent-line);box-shadow:none} /* — Движение — */ :root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{ animation:none!important;transition:none!important} :root[data-motion="calm"] *{transition-duration:.1s!important} :root[data-motion="calm"] .metric-card.prominent::after, :root[data-motion="calm"] .live-dot{animation:none!important} :root[data-motion="calm"] .metric-card:hover,:root[data-motion="calm"] .skill-card:hover, :root[data-motion="calm"] .prompt-card:hover,:root[data-motion="calm"] .integration-card:hover, :root[data-motion="calm"] .wide-card:hover,:root[data-motion="calm"] .usage-card:hover{transform:none} /* ============================================================================ ЭКРАН НАСТРОЕК ========================================================================= */ .settings-hero{max-width:860px;margin:0 auto 6px;padding:26px;border:1px solid var(--line); border-radius:var(--r-lg);background: radial-gradient(130% 150% at 88% -30%,var(--accent-soft),transparent 60%),var(--card-bg); box-shadow:var(--shadow-sm)} .settings-hero h2{margin:0 0 8px;font-size:clamp(22px,3.4vw,28px)} .settings-hero p:not(.card-kicker){margin:0;max-width:56ch;color:var(--muted-2);font-size:14.5px;line-height:1.6} /* Готовые наборы */ .preset-grid{max-width:860px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px} .preset-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:15px; border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-bg); cursor:pointer;text-align:left;font:inherit;box-shadow:var(--shadow-sm); transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease)} .preset-card:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:var(--shadow-accent)} .preset-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--shadow-accent)} .preset-card strong{font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--ink)} .preset-card small{color:var(--muted-3);font-size:11.5px;line-height:1.45} .preset-swatch{display:flex;gap:3px;margin-bottom:8px} .preset-swatch i{width:20px;height:20px;border-radius:6px;display:block} /* Превью набора собирается из его же значений, а не из отдельных картинок */ .preset-swatch i:nth-child(1){background:var(--sw-bg,#0a0c12);border:1px solid var(--line)} .preset-swatch i:nth-child(2){background:var(--sw-accent,#7c5cff)} .preset-swatch i:nth-child(3){background:var(--sw-second,#24d2b5)} [data-preview-theme="light"]{--sw-bg:#f4f5fa} [data-preview-accent="violet"]{--sw-accent:#7c5cff;--sw-second:#24d2b5} [data-preview-accent="aqua"]{--sw-accent:#17c4ad;--sw-second:#7c5cff} [data-preview-accent="ocean"]{--sw-accent:#3b82f6;--sw-second:#22d3ee} [data-preview-accent="ember"]{--sw-accent:#ff7a45;--sw-second:#ffc247} [data-preview-accent="magenta"]{--sw-accent:#e857c8;--sw-second:#8b5cf6} [data-preview-accent="forest"]{--sw-accent:#3fa96b;--sw-second:#a3d977} /* Кружки акцентов */ .accent-options{display:flex;flex-wrap:wrap;gap:9px} /* --dot раньше ставился из JS через el.style.setProperty('--dot',...) — CSP сайта (style-src 'self') это молча блокирует. Цветов всего 8 и они фиксированы (см. ACCENTS в app.js), так что просто прописываем их здесь по значению уже существующего data-pref-value — .accent-dot сама кнопка, --dot наследуется в дочерний span. */ .accent-dot[data-pref-value="violet"]{--dot:#7c5cff} .accent-dot[data-pref-value="aqua"]{--dot:#17c4ad} .accent-dot[data-pref-value="ocean"]{--dot:#3b82f6} .accent-dot[data-pref-value="ember"]{--dot:#ff7a45} .accent-dot[data-pref-value="magenta"]{--dot:#e857c8} .accent-dot[data-pref-value="forest"]{--dot:#3fa96b} .accent-dot[data-pref-value="crimson"]{--dot:#f2485f} .accent-dot[data-pref-value="slate"]{--dot:#7d8aa3} .accent-dot{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:50%; border:2px solid transparent;background:transparent;cursor:pointer; transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-spring)} .accent-dot span{width:22px;height:22px;border-radius:50%;background:var(--dot); box-shadow:0 2px 8px color-mix(in oklab,var(--dot) 45%,transparent)} .accent-dot:hover{transform:scale(1.12)} .accent-dot.selected{border-color:var(--dot)} .accent-dot.selected span{box-shadow:0 0 0 2px var(--card-bg) inset,0 2px 10px color-mix(in oklab,var(--dot) 55%,transparent)} .settings-card{align-items:center} .settings-card-text{min-width:0} .settings-card-text h2{margin:0;font-size:17px;font-weight:700} .settings-card-text p{margin:5px 0 0;color:var(--muted-3);font-size:13px;line-height:1.5} .settings-card .theme-options{flex-wrap:wrap;justify-content:flex-end} .theme-option{font-size:13px;padding:0 13px;height:36px} .settings-reset .theme-option{border-color:var(--danger-line);color:var(--danger-text)} .settings-reset .theme-option:hover{background:var(--danger-soft)} @media (max-width:760px){ .settings-card{display:grid;gap:14px;align-items:stretch} .settings-card .theme-options{justify-content:flex-start} .preset-grid{grid-template-columns:repeat(2,1fr)} } /* ============================================================================ ПОДСКАЗКИ НА СТРАНИЦЕ АГЕНТА — карусель Раньше это была сетка под карточкой: на телефоне она уезжала вбок и растягивала страницу по горизонтали. Теперь лента с прокруткой и прилипанием — экран остаётся одним. ========================================================================= */ .agent-hints{display:flex;gap:10px;margin:0 0 16px;padding-bottom:4px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; /* Лента тянется на всю ширину области, а не только на ширину карточки */ margin-left:calc(var(--content-pad, 0px) * -1); margin-right:calc(var(--content-pad, 0px) * -1); padding-left:var(--content-pad, 0px);padding-right:var(--content-pad, 0px)} .agent-hints::-webkit-scrollbar{display:none} .agent-hint{flex:0 0 clamp(210px,72vw,260px);scroll-snap-align:start; padding:16px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--card-bg);box-shadow:var(--shadow-sm)} .agent-hint .icon{width:17px;height:17px;color:var(--accent-text);margin-bottom:9px} .agent-hint h3{margin:0 0 5px;font-family:var(--font-display);font-size:14.5px;font-weight:700; letter-spacing:-.02em;color:var(--ink)} .agent-hint p{margin:0;color:var(--muted-3);font-size:12.5px;line-height:1.5} @media (min-width:761px){ .agent-hint{flex:1 1 0;min-width:0} .agent-hints{overflow:visible} } /* Страница агента укладывается в один экран без горизонтальной прокрутки */ .app-content{overflow-x:hidden} /* ============================================================================ КОНТРАСТ В СВЕТЛОЙ ТЕМЕ Замерено на живых страницах. Первая попытка смешивала акцент с чёрным через color-mix, но в oklab у светлых бирюзовых и жёлтых тонов подмешивание почти не меняет светлоту — контраст даже упал (3.46 → 2.51). Поэтому для светлой темы задаём готовые тёмные значения: они предсказуемы и проверяемы. ========================================================================= */ :root[data-theme="light"] .agent-status.online, :root:not([data-theme="dark"]) .agent-status.online{ color:#0a5f50;background:#e2f7f2;border-color:#9adfd0} :root[data-theme="light"] .skill-badge, :root:not([data-theme="dark"]) .skill-badge{background:#fdf3e0;color:#7a5205} :root[data-theme="light"] .skill-badge.installed, :root:not([data-theme="dark"]) .skill-badge.installed{background:#e2f7f2;color:#0a5f50} :root[data-theme="light"] .skill-badge.curated, :root:not([data-theme="dark"]) .skill-badge.curated{background:#eee9ff;color:#4327b8} :root[data-theme="light"] .skill-badge.unavailable, :root:not([data-theme="dark"]) .skill-badge.unavailable{background:rgba(20,20,45,.07);color:#4e5568} :root[data-theme="light"] .status-pill.on, :root:not([data-theme="dark"]) .status-pill.on{background:#e2f7f2;color:#0a5f50} :root[data-theme="light"] .prompt-visibility.shared, :root:not([data-theme="dark"]) .prompt-visibility.shared{background:#e2f7f2;color:#0a5f50} :root[data-theme="light"] .prompt-visibility.personal, :root:not([data-theme="dark"]) .prompt-visibility.personal{background:#eee9ff;color:#4327b8} :root[data-theme="light"] .integration-card.status-connected small, :root:not([data-theme="dark"]) .integration-card.status-connected small{color:#0a5f50} :root[data-theme="light"] .skills-tab span, :root:not([data-theme="dark"]) .skills-tab span{color:#4e5568} :root[data-theme="light"] .kb-link small, :root:not([data-theme="dark"]) .kb-link small{color:var(--muted)} :root[data-theme="light"] .chat-session-live, :root:not([data-theme="dark"]) .chat-session-live{color:#0a5f50} /* ============================================================================ КАРТОЧКА БЕСПЛАТНОГО РОУТЕРА НА ДАШБОРДЕ ========================================================================= */ .omni-card{max-width:1100px;margin:16px auto 0;padding:22px 26px;border:1px solid var(--line); border-radius:var(--r-lg);background: radial-gradient(120% 140% at 90% -30%,var(--ok-soft),transparent 58%),var(--card-bg); box-shadow:var(--shadow-sm)} .omni-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .omni-card h2{margin:4px 0 0;font-size:clamp(20px,3vw,25px);font-variant-numeric:tabular-nums} .omni-sub{margin:7px 0 0;color:var(--muted-3);font-size:13px} .omni-badge{flex:0 0 auto;padding:5px 11px;border-radius:var(--r-full); background:var(--ok-soft);color:var(--ok-text);border:1px solid var(--ok-line); font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} .omni-meter{margin:20px 0 10px;height:8px;border-radius:var(--r-full);overflow:hidden; background:var(--surface-sunk);border:1px solid var(--line-2)} .omni-meter i{display:block;height:100%;border-radius:var(--r-full); background:linear-gradient(90deg,var(--accent),var(--accent-2))} @media (prefers-reduced-motion:no-preference){ .omni-meter i{animation:meterGrow .8s var(--ease) backwards;transform-origin:left} @keyframes meterGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}} .omni-legend{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; color:var(--muted-3);font-size:12.5px} .omni-legend b{color:var(--ink);font-variant-numeric:tabular-nums} .omni-note{margin:14px 0 0;color:var(--muted-3);font-size:12.5px;line-height:1.55} .usage-windows{display:grid;gap:6px} .usage-window .omni-meter{margin:8px 0 4px} @media (max-width:760px){.omni-card{padding:19px}} /* ============================================================================ ВЫБОР МОДЕЛИ В ШАПКЕ ЧАТА ========================================================================= */ .agent-switch{border:0;background:transparent;padding:6px 8px;margin:-6px -8px; border-radius:var(--r-sm);cursor:pointer;font:inherit;color:inherit;text-align:left; transition:background var(--t-fast) var(--ease)} .agent-switch:hover{background:var(--surface-hover)} .agent-switch-caret{width:14px;height:14px;color:var(--muted-3);flex:0 0 auto; transform:rotate(90deg);transition:transform var(--t-mid) var(--ease)} .agent-switch[aria-expanded="true"] .agent-switch-caret{transform:rotate(-90deg)} .chat-panel-head{position:relative} .model-menu{position:absolute;top:calc(100% + 6px);left:12px;z-index:20; width:min(320px,calc(100vw - 32px));max-height:min(420px,60dvh);overflow-y:auto; border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-bg); box-shadow:var(--shadow-lg);padding:6px} @media (prefers-reduced-motion:no-preference){ .model-menu:not([hidden]){animation:composerMenuIn .16s var(--ease)}} .model-menu-head{padding:8px 10px 6px;font-family:var(--font-mono);font-size:10px; font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3)} .model-menu-loading{margin:0;padding:14px 12px;color:var(--muted-3);font-size:13px} .model-menu-list{display:flex;flex-direction:column;gap:10px} .model-group{display:flex;flex-direction:column;gap:2px} .model-group-name{padding:4px 10px;font-family:var(--font-mono);font-size:10px; font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)} .model-option{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px; border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-strong); font:inherit;font-size:13px;cursor:pointer;text-align:left; transition:background var(--t-fast) var(--ease)} .model-option span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .model-option:hover{background:var(--surface-active)} .model-option.current{background:var(--accent-soft)} .model-option:disabled{opacity:.6;cursor:wait} .model-free,.model-current{flex:0 0 auto;padding:2px 7px;border-radius:var(--r-full); font-family:var(--font-mono);font-size:9.5px;font-weight:600;font-style:normal; letter-spacing:.05em;text-transform:uppercase} .model-free{background:var(--ok-soft);color:var(--ok-text)} .model-current{background:var(--accent-soft);color:var(--accent-text)} /* Баннер успешного подключения: раньше цвет рамки задавался атрибутом style, а политика безопасности его отбрасывала — сообщение об успехе выглядело как ошибка. */ .login-error.banner-success{color:var(--ok-text);background:var(--ok-soft); border-color:var(--ok-line)} .login-error.banner-success strong{color:var(--ink)} /* ============================================================================ ИСПРАВЛЕНИЯ ВЁРСТКИ ========================================================================= */ /* Чат не должен ездить вбок. Длинные ссылки и неразрывные строки в ответах агента растягивали пузырь шире экрана, и вся страница уезжала. */ .chat-layout,.chat-layout-full,.chat-panel,.messages{max-width:100%;overflow-x:hidden} .message{overflow-wrap:anywhere;word-break:break-word} .message a{overflow-wrap:anywhere} .message pre{max-width:100%;overflow-x:auto} .message table{display:block;max-width:100%;overflow-x:auto} /* Карточки дашборда одной ширины: у ссылки-карточки inline-природа давала другую расчётную ширину, чем у соседних article. */ .dashboard-grid{align-items:stretch} .dashboard-grid>*{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .metric-card{display:flex;width:100%;min-width:0} /* Дашборд: одна ширина на все секции. Раньше блок OmniRoute задавал себе боковые отступы вручную и на узком экране оказывался уже соседей. */ .dashboard-row,.dashboard-grid,.usage-card,.dashboard-summary,.omni-card{ max-width:1100px; margin-left:auto; margin-right:auto; width:100%; box-sizing:border-box; } .dashboard-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:14px} /* Блоков с моделями бывает от одного до нескольких — раскладка подстраивается, а не оставляет пустые колонки. */ .dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .metric-card-slim{min-height:104px;padding:16px 18px} .metric-card-slim strong{margin:10px 0 6px;font-size:24px} .metric-card-alert strong{color:var(--danger-text)} .provider-card.provider-free{background:linear-gradient(145deg,rgba(47,212,177,.18),var(--card-bg-2))} .provider-card.provider-warn{background:linear-gradient(145deg,rgba(255,176,32,.2),var(--card-bg-2))} .provider-card.provider-plain{background:var(--card-bg)} @media (max-width:760px){ .dashboard-row{grid-template-columns:repeat(2,1fr);gap:10px} .metric-card-slim{min-height:92px;padding:14px} .metric-card-slim strong{font-size:20px} .dashboard-grid{grid-template-columns:1fr} } /* Пошаговые инструкции с картинками */ .guide-walk{list-style:none;margin:0;padding:0;display:grid;gap:14px} .guide-walk li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center} .guide-walk h4{margin:0 0 5px;font-size:14px;color:var(--ink)} .guide-walk p{margin:0;color:var(--muted-3);font-size:12.5px;line-height:1.5} .guide-walk-art{position:relative} .guide-walk-art b{position:absolute;left:-4px;top:-6px;display:grid;place-items:center;width:22px;height:22px; border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:850} .guide-art{width:100%;height:auto;display:block} .guide-art .ga-panel{fill:var(--card-bg-2);stroke:var(--border-strong);stroke-width:1} .guide-art .ga-bar{fill:var(--panel-soft)} .guide-art .ga-dot{fill:var(--muted-faint)} .guide-art .ga-line{fill:var(--muted-2)} .guide-art .ga-dim{fill:var(--muted-faint)} .guide-art .ga-input,.guide-art .ga-code{fill:var(--input-bg);stroke:var(--border-strong);stroke-width:1} .guide-art .ga-btn{fill:none;stroke:var(--accent);stroke-width:1.2} .guide-art .ga-accent{fill:var(--accent)} .guide-art .ga-accent-fill{fill:var(--accent)} .guide-art .ga-label{fill:var(--accent-text);font-size:9px;font-weight:700} .guide-art .ga-label-on{fill:var(--on-accent);font-size:9px;font-weight:700} .guide-art .ga-mono{fill:var(--ink);font-size:9.5px;font-family:var(--font-mono,monospace)} .guide-art .ga-caption{fill:var(--muted-3);font-size:8px} .guide-art .ga-arrow{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .guide-art .ga-check{stroke:var(--ok-text,var(--accent));stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round} @media (max-width:600px){.guide-walk li{grid-template-columns:1fr;gap:10px}} /* Карточка возможности целиком открывает инструкцию */ .skill-card-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent} .skill-card-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion: no-preference){ .skill-card-clickable{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .skill-card-clickable:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:0 12px 30px rgba(108,76,246,.14)} } /* Переворот значка теперь и на наших карточках — раньше он был только у встроенных */ @media (prefers-reduced-motion: no-preference){ .skill-card-curated:hover .skill-icon-star{transform:rotateY(180deg)} .skill-card-curated:hover .skill-icon-info{transform:rotateY(360deg)} } .skill-hint{color:var(--muted-faint);font-size:10.5px;font-weight:700} .skill-card-clickable:hover .skill-hint{color:var(--accent-text)} .skills-more{display:block;max-width:1100px;margin:20px auto 0;width:100%;border:1px dashed var(--border-strong); border-radius:12px;background:transparent;color:var(--muted-3);padding:13px;font:inherit;font-size:12px; font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px} .skills-more:hover{border-color:var(--accent);color:var(--accent-text)} .skills-more span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px; background:var(--panel-soft);color:var(--muted-3);font-size:10px} .skills-tucked{margin-top:14px} .skills-tucked[hidden]{display:none} /* Настройки: ровная сетка вместо ленты разной высоты */ .settings-stack{max-width:980px} .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:stretch} .settings-grid .settings-card{height:100%;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px} .settings-grid .settings-card-text h2{font-size:16px;letter-spacing:-.02em} .settings-grid .settings-card-text p{margin:5px 0 0;font-size:12px;line-height:1.45} .settings-grid .theme-options{width:100%;display:flex;flex-wrap:wrap;gap:6px} .settings-grid .theme-option{flex:1 1 auto;min-width:78px;text-align:center;white-space:nowrap} .settings-hero,.preset-grid,.settings-reset{max-width:980px;margin-left:auto;margin-right:auto} .settings-reset{margin-top:12px} /* Акцентные точки — своя карточка, ей сетка колонок не нужна */ .settings-grid .accent-options{display:flex;flex-wrap:wrap;gap:8px} @media (max-width:760px){ .settings-grid{grid-template-columns:1fr} .settings-grid .settings-card{gap:12px} } /* Диалог ввода кода */ .prompt-dialog textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-strong); background:var(--input-bg);color:var(--ink);border-radius:10px;padding:11px 12px;font:inherit; font-size:13px;resize:vertical;margin-top:12px} .prompt-hint{margin:8px 0 0;color:var(--muted-3);font-size:12.5px;line-height:1.5} .confirm-actions button.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)} .integration-connect-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px; border:0!important;border-radius:8px;padding:7px 12px;font-size:11px;font-weight:800;color:#fff!important; background:linear-gradient(115deg,var(--accent),var(--accent-hi))} /* Кнопка входа по подписке. Правило .integration-card button задано как «класс + тег» и по весу перебивало одиночный класс — фон кнопки оставался прозрачным, и на светлой теме она пропадала совсем. Поднимаем вес, вкладывая класс в карточку. */ .integration-card .integration-connect-btn{ cursor:pointer;display:inline-flex;align-items:center;gap:6px; border:0;border-radius:8px;padding:8px 14px;font-size:11.5px;font-weight:800; color:#fff;background:linear-gradient(115deg,var(--accent-lo),var(--accent)); box-shadow:0 6px 18px rgba(108,76,246,.28) } .integration-card .integration-connect-btn:hover{filter:brightness(1.08)} .integration-card .integration-connect-btn:disabled{opacity:.6;cursor:default;box-shadow:none} /* Случайное выделение текста при листании выглядит как поломка, поэтому выделять можно только там, где это осмысленно: переписка, поля ввода и код, который человек захочет скопировать. */ body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .messages,.message,.message *,.md-table,.code-block,pre,code, input,textarea,[contenteditable="true"]{ -webkit-user-select:text;user-select:text } /* Двойное касание по кнопке не должно приближать страницу */ button,a,.skill-card-clickable,.integration-card,.metric-card{touch-action:manipulation} /* --- Чат: меньше визуального шума ---------------------------------- */ /* Подряд идущие сообщения одной стороны читаются как один блок: между ними зазор меньше, а «хвостик» рисуется только у последнего. Раньше каждая реплика выглядела отдельной карточкой, и лента казалась нагромождённой. */ .messages{gap:4px} .message + .message{margin-top:0} .message-user + .message-user{border-top-right-radius:6px} .message-agent + .message-agent{border-top-left-radius:6px} .message-user:has(+ .message-agent), .message-agent:has(+ .message-user){margin-bottom:14px} /* «Хвостик» — признак конца реплики, поэтому он только у последнего пузыря в группе. У остальных угол обычный, и группа читается как один блок. */ .message-user:has(+ .message-user){border-bottom-right-radius:14px} .message-agent:has(+ .message-agent){border-bottom-left-radius:14px} /* Спокойный фокус у поля ввода: рамка тоньше, свечение вдвое мягче. Яркое кольцо перетягивало внимание с самой переписки. */ .composer:focus-within{ border-color:color-mix(in oklab,var(--accent) 45%,var(--line)); box-shadow:0 4px 18px color-mix(in oklab,var(--accent) 12%,transparent) } /* Выделение должно быть заметным, но не кричащим: прежние 16% почти не читались на пузыре, а системный синий спорил с акцентом. */ ::selection{background:color-mix(in oklab,var(--accent) 30%,transparent);color:inherit} .message-user ::selection,.message-user::selection{background:rgba(255,255,255,.3);color:#fff} /* Воздух вокруг ленты — чтобы сообщения не липли к краям и к полю ввода */ .messages{padding-bottom:8px} .composer{margin-top:4px} /* Пока ответ ещё пишется, пузырь мягко пульсирует и держит курсор в конце — иначе после первых слов кажется, что агент уже закончил и завис. */ .message.streaming{position:relative} .message.streaming::after{ content:'';display:inline-block;width:7px;height:15px;margin-left:3px; vertical-align:-2px;border-radius:2px;background:var(--accent-text); } @media (prefers-reduced-motion:no-preference){ .message.streaming::after{animation:caretBlink 1s steps(2,start) infinite} .message.streaming{animation:answerPulse 2.4s ease-in-out infinite} } @keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}} @keyframes answerPulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 0%,transparent)} 50%{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 12%,transparent)} } /* Значки в строке ввода стояли по нижнему краю и на однострочном поле выглядели приподнятыми. Ровняем по центру, а поле тянется вверх само. */ .composer{align-items:center} .composer textarea{align-self:center} .composer .attachment,.composer .mic-button,.composer .send-button,.composer .stop-button{ align-self:center;flex:0 0 auto } /* Ссылки в ответах агента: заметные, но не кричащие, и не рвущие вёрстку длинными адресами */ .message a{color:var(--accent-text);text-decoration:underline; text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent); text-underline-offset:2px;word-break:break-word} .message a:hover{text-decoration-color:var(--accent)} .message-user a{color:#fff;text-decoration-color:rgba(255,255,255,.55)} /* Длинный список диалогов не должен растягивать раскладку и выдавливать поле ввода за нижний край экрана. Колонки чата держим в высоте окна, а прокрутку отдаём внутрь списка. */ .chat-layout{max-height:100%;overflow:hidden} .chat-layout>*{min-height:0} .chat-rail{display:flex;flex-direction:column;min-height:0;overflow:hidden} .session-list{flex:1 1 auto;min-height:0;overflow-y:auto; /* Список — сетка: без этого строки растягиваются на всю свободную высоту и одна карточка диалога занимает пол-экрана. */ align-content:start} .session-list>*{align-self:start} .chat-panel{display:flex;flex-direction:column;min-height:0} .chat-panel>.messages{flex:1 1 auto;min-height:0;overflow-y:auto} /* Поле ввода всегда остаётся видимым — оно не участвует в растяжении */ .composer,.composer-note,.attachment-list,.composer-tools{flex:0 0 auto} /* Картинки и файлы в сообщениях (от агента и свои вложения) */ .agent-media{display:block;margin:10px 0 4px;max-width:min(420px,100%);border:0;background:transparent;padding:0;cursor:pointer;font:inherit} .agent-media img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block} .agent-media:hover img{border-color:var(--accent-line)} .agent-file{display:inline-flex;align-items:center;gap:7px;margin:6px 0;padding:8px 12px; border:1px solid var(--border-strong);border-radius:10px;background:var(--card-bg-2); color:var(--accent-text);font-size:12.5px;font-weight:700;text-decoration:none;font-family:inherit;cursor:pointer} .agent-file:hover{border-color:var(--accent)} .agent-file .icon{width:14px;height:14px;flex:0 0 auto} .doc-preview-dialog iframe{width:100%;border:0;border-radius:10px;background:#fff;display:block} .doc-html-preview{max-height:70vh;overflow:auto;border:1px solid var(--border-strong);background:var(--input-bg);border-radius:10px;padding:20px;color:var(--text-strong);font-size:13.5px;line-height:1.6} .doc-html-preview h1,.doc-html-preview h2,.doc-html-preview h3{margin:18px 0 8px;line-height:1.3} .doc-html-preview h1:first-child,.doc-html-preview h2:first-child,.doc-html-preview h3:first-child{margin-top:0} .doc-html-preview p{margin:0 0 12px} .doc-html-preview ul,.doc-html-preview ol{margin:0 0 12px;padding-left:22px} .doc-html-preview table{border-collapse:collapse;margin:0 0 14px;width:100%} .doc-html-preview td,.doc-html-preview th{border:1px solid var(--border-strong);padding:6px 9px;text-align:left} .doc-html-preview img{max-width:100%} .doc-html-preview a{color:var(--accent-text)} .agent-media-video,.agent-media-audio{display:block;margin:10px 0 4px;max-width:min(420px,100%);border-radius:12px;background:#000} .agent-media-video{width:100%;height:auto;border:1px solid var(--line)} .agent-media-audio{width:100%} .message-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .message-attachments .agent-media{margin:0;max-width:220px} .agent-video{display:block;width:min(360px,100%);max-height:70vh;border-radius:12px;border:1px solid var(--line);background:#000} .message-attachments .agent-media-video{margin:0;max-width:260px} .message-attachments .agent-file{margin:0} .image-lightbox{position:relative;border:0;background:transparent;padding:0;max-width:min(92vw,900px);max-height:92vh} .image-lightbox::backdrop{background:rgba(6,7,14,.82)} .image-lightbox img{display:block;max-width:min(92vw,900px);max-height:92vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)} .image-lightbox .dialog-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:var(--card-bg);color:var(--text-strong);font-size:18px;cursor:pointer;display:grid;place-items:center} .image-lightbox .dialog-close:hover{border-color:var(--accent);color:var(--ink)} /* Таблицы в ответах агента и в базе знаний. Правило .message{overflow-wrap:anywhere} — добавленное, чтобы длинные ссылки не распирали пузырь, — заодно позволяло автоматической раскладке таблицы ломать слова посреди буквы в любой колонке. Браузер, пытаясь уместить все колонки, схлопывал текстовую до нескольких букв в строке, а короткие колонки (флаг страны, галочки) оставались просторными. Внутри таблиц возвращаем обычный перенос по словам. */ .md-table,.message table,.kb-body table{ word-break:normal;overflow-wrap:break-word } /* Вкладки админки: раньше 4 пункта в один ряд без переноса сжимались, и «База знаний» переносилась на две строки. После того как одну вкладку убрали, оставшимся хватает места — но на совсем узком экране пусть лучше прокручиваются в одну строку, чем снова ломаются на две. */ .admin-tabs{overflow-x:auto;scrollbar-width:none} .admin-tabs a{white-space:nowrap;flex:0 0 auto} /* База знаний для администратора — технической документации явно тесно в тех же 1180px, что и у обычного пользователя. Расширяем только этот вариант: у него отдельный класс-маркер, пользовательская страница не трогается. */ .kb-page.kb-wide .section-intro, .kb-page.kb-wide .kb-search, .kb-page.kb-wide .kb-layout{max-width:1560px} @media (max-width:1600px){ .kb-page.kb-wide .section-intro, .kb-page.kb-wide .kb-search, .kb-page.kb-wide .kb-layout{max-width:100%} } /* Заголовок и текст под ним ходят слоем выше подсветки сетки — иначе более яркая копия узора на mask-слое перекрывала бы буквы под курсором. */ .access-shell{position:relative;z-index:2} /* Вкладка «Лендинги» — карточки со скриншотом-превью вместо иконки, по образцу .integration-card/.skill-card, но с картинкой сверху. */ .site-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media (max-width:1040px){.site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.site-grid{grid-template-columns:1fr}} .site-card{border:1px solid var(--line);border-radius:15px;background:var(--card-bg);overflow:hidden;display:flex;flex-direction:column} .site-thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--panel-soft);overflow:hidden} .site-thumb img{width:100%;height:100%;object-fit:cover;object-position:top} .site-thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--muted-4);font-size:12px} .site-status-badge{position:absolute;top:9px;right:9px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;background:rgba(47,212,177,.15);color:var(--ok-text);backdrop-filter:blur(6px)} .site-card.status-unpublished .site-status-badge,.site-card.status-archived .site-status-badge{background:rgba(255,255,255,.12);color:var(--muted-3)} .site-card.status-unpublished .site-thumb,.site-card.status-archived .site-thumb{filter:grayscale(1);opacity:.6} .site-body{padding:14px;display:flex;flex-direction:column;gap:8px} .site-link{font-size:14px;font-weight:800;color:var(--text-strong);text-decoration:none;word-break:break-all} .site-link:hover{color:var(--accent-text)} .site-body>small{color:var(--muted-4);font-size:11px} .site-seo{border-top:1px solid var(--line);padding-top:8px;margin-top:2px} .site-seo summary{cursor:pointer;font-size:11px;font-weight:800;color:var(--muted-3);text-transform:uppercase;letter-spacing:.06em} .site-seo label{display:grid;gap:5px;margin-top:9px;color:var(--muted);font-size:11px;font-weight:700} .site-seo input,.site-seo textarea{width:100%;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:8px;padding:8px 10px;font:inherit;font-size:12px;resize:vertical} .site-seo-save{margin-top:9px;border:1px solid var(--accent-line);background:transparent;color:var(--accent-text);border-radius:8px;padding:7px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer} .site-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px} .site-actions button{border:1px solid var(--border-strong);background:transparent;color:var(--muted-3);border-radius:8px;padding:6px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer} .site-actions button:hover{border-color:var(--accent-line);color:var(--accent-text)} .site-actions button.site-delete{border-color:rgba(255,122,140,.35);color:var(--danger-text)} .site-actions button.site-delete:hover{background:rgba(255,122,140,.1)} .site-thumb-external{display:grid;place-items:center;color:var(--muted-4)} .site-thumb-external svg{width:28px;height:28px} .site-external-pw{display:grid;gap:5px;font-size:11px;font-weight:700;color:var(--muted-3)} .site-external-pw-row{display:flex;gap:6px} .site-external-pw-row input{flex:1;min-width:0;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:8px;padding:6px 9px;font:inherit;font-size:12px} /* Вкладка «Файлы» — сетка карточек, сгруппированных по датам. */ .files-toolbar-actions{display:flex;gap:8px} .file-grid{max-width:1100px;margin:0 auto 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media (max-width:1040px){.file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.file-grid{grid-template-columns:1fr}} .file-card{border:1px solid var(--line);border-radius:14px;background:var(--card-bg);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease,opacity .12s ease} .file-card.pressing{transform:scale(.98)} .file-card.dragging{opacity:.35} .file-grid.drop-hover{outline:1px dashed var(--accent-line);outline-offset:2px;border-radius:8px;background:rgba(124,92,255,.08)} .file-folder-body{padding-left:14px;position:relative;margin-left:12px;border-left:1px dashed var(--line)} .file-folder-body .file-grid{margin:0} .file-thumb{border:0;padding:0;cursor:pointer;display:block;width:100%;aspect-ratio:16/10;background:var(--panel-soft);overflow:hidden;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none} .file-thumb img,.file-thumb video{-webkit-touch-callout:none;-webkit-user-drag:none} .file-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .file-thumb img{width:100%;height:100%;object-fit:cover} .file-thumb-icon{width:100%;height:100%;display:grid;place-items:center;color:var(--muted-3)} .file-thumb-icon .icon{width:28px;height:28px} .file-thumb-video{width:100%;height:100%;object-fit:cover;background:#000} .file-thumb-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff} .file-thumb-play .icon{width:34px;height:34px;padding:8px;border-radius:999px;background:rgba(10,12,18,.45);fill:currentColor} .file-thumb{position:relative} .file-body{padding:16px;display:flex;flex-direction:column;gap:8px} .file-name{border:0;background:transparent;text-align:left;padding:0;color:var(--text-strong);font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .file-body>small{color:var(--muted-4);font-size:11px} .file-caption{margin:2px 0 0;color:var(--muted-3);font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .file-actions{display:flex;gap:8px;margin-top:8px} .file-actions button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-strong);background:transparent;color:var(--muted-3);border-radius:8px;padding:6px 9px;font:inherit;font-size:11px;font-weight:800;cursor:pointer} .file-actions button .icon{width:12px;height:12px} .file-actions button:hover{border-color:var(--accent-line);color:var(--accent-text)} .file-actions button.file-delete{border-color:rgba(255,122,140,.35);color:var(--danger-text)} .file-actions button.file-delete:hover{background:rgba(255,122,140,.1)} .file-preview-dialog textarea{width:100%;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-strong);border-radius:8px;padding:9px;font:inherit;margin-top:6px;resize:vertical} /* Раньше весь диалог скроллился целиком (унаследовано от .skill-dialog), а внутри ещё и сам предпросмотр документа скроллился по 70vh — два ползунка на одно и то же, и шапка/кнопки уезжали за экран вместе с диалогом. Теперь скроллится только сам блок предпросмотра: диалог — flex-колонка фиксированной высоты (overflow:hidden), шапка и подпись с кнопками — flex:0 (не сжимаются), а предпросмотр — flex:1 с overflow:auto, забирает всё оставшееся место и скроллит только себя. */ .file-preview-dialog{padding:0;display:flex;flex-direction:column;overflow:hidden} .file-preview-dialog .dialog-head{flex:0 0 auto;background:var(--card-bg);padding:27px 27px 14px;border-bottom:1px solid var(--line);border-radius:16px 16px 0 0} .file-preview-dialog .dialog-head h2{margin:0} .file-preview-dialog .dialog-body{padding:18px 27px 27px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .file-preview-dialog .dialog-body>label{margin-bottom:12px;flex:0 0 auto} .file-preview-dialog .dialog-body>.confirm-actions{margin-top:8px;flex:0 0 auto} .file-preview-dialog .dialog-body>*:last-child{margin-bottom:0} .file-preview-dialog video,.file-preview-dialog audio,.file-preview-dialog img, .file-preview-dialog iframe,.file-preview-dialog .doc-html-preview,.file-preview-dialog .prompt-view-text, .file-preview-dialog>.dialog-body>.catalog-empty{flex:1 1 auto;min-height:0;margin-bottom:18px} .file-preview-dialog video,.file-preview-dialog img{width:100%;border-radius:10px;background:#000;object-fit:contain} .file-preview-dialog .doc-html-preview,.file-preview-dialog .prompt-view-text{max-height:none} /* «Скачать» раньше был голой подчёркнутой ссылкой рядом с настоящей кнопкой «Сохранить примечание» — визуально не парой, а случайным текстом сбоку. */ .confirm-actions .button-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);background:transparent;color:var(--muted-4);border-radius:9px;padding:9px 16px;font:inherit;font-size:12px;font-weight:800;text-decoration:none} .confirm-actions .button-link:hover{border-color:var(--accent);color:var(--ink)} .share-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted-3)} .share-row:last-child{border-bottom:0} .share-row .icon{width:12px;height:12px;vertical-align:-1px} .share-row-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto} .share-row-thumb-inline{display:none;flex:0 0 auto;width:52px;height:38px;border-radius:8px;overflow:hidden;background:#000} .share-row-thumb-inline:empty{display:none!important} .share-row-thumb-inline img,.share-row-thumb-inline video{width:100%;height:100%;object-fit:cover;display:block} @media (hover:none){.share-row-thumb-inline:not(:empty){display:block}.share-thumb-float{display:none}} .share-row-info{display:flex;flex-direction:column;gap:3px;min-width:0} .share-row-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .share-row-name .icon{color:var(--muted-3)} .share-row-info small{color:var(--muted-3);font-size:11px} .share-row-actions{display:flex;gap:6px;flex:0 0 auto} .share-row-actions button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border-strong);border-radius:8px;background:transparent;color:var(--muted-3);cursor:pointer;padding:0} .share-row-actions button:hover{border-color:var(--accent);color:var(--ink)} .share-row-actions button:last-child:hover{border-color:var(--danger);color:var(--danger-text)} .share-row[data-thumb-src]{cursor:default} /* Список ссылок сам скроллится, поэтому превью не может быть частью строки (обрежется этим скроллом) — один плавающий элемент на весь диалог, позиционируется через JS по координатам наведённой строки. */ .share-thumb-float{position:fixed;width:280px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 14px 34px rgba(0,0,0,.55);transform:translateY(-50%);z-index:1000;pointer-events:none} .share-thumb-float img,.share-thumb-float video{width:100%;height:100%;object-fit:cover} /* Страница 404 — тот же вход-шелл (сетка+свечение за курсором из login.js), но один центрированный блок вместо двух панелей логина. */ .notfound-shell{display:flex;align-items:center;justify-content:center;height:100dvh;padding:32px;overflow-y:auto} .notfound-panel{position:relative;z-index:1;max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .notfound-mascot{width:660px;height:660px;max-width:90vw;max-height:56vh;image-rendering:pixelated;image-rendering:crisp-edges;margin-bottom:12px} .notfound-panel h1{margin:6px 0 0;font-size:clamp(24px,4vw,32px);font-family:var(--font-display);font-weight:800;letter-spacing:-.03em} .notfound-copy{margin:10px 0 22px;color:var(--muted-3);line-height:1.55} .notfound-home{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 22px;font-size:14px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(115deg,var(--accent),var(--accent-hi))} /* Три места, где раньше был style="" прямо в разметке (Доктор, «Показать ещё» на вкладке аналитики) — CSP сайта (style-src 'self') блокирует его так же, как и .style.* из JS, независимо от того, откуда style="" взялся. */ .user-features-kicker{margin-top:8px} .user-features{display:flex;flex-direction:column;gap:8px;margin-bottom:4px} .user-feature{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);cursor:pointer} .user-feature:hover{border-color:var(--accent-line)} .user-feature input{margin-top:2px;flex:0 0 auto;accent-color:var(--accent)} .user-feature span{display:flex;flex-direction:column;gap:2px;min-width:0} .user-feature b{color:var(--text-strong);font-size:13px;font-weight:700} .user-feature small{color:var(--muted-3);font-size:11.5px;line-height:1.45} .user-feature input:disabled{opacity:.5} .user-feature:has(input:disabled){opacity:.6;cursor:default} .doctor-alert-warning{margin:0 0 16px;padding:12px 14px;border:1px solid var(--warn);border-left-width:3px;border-radius:10px;background:var(--warn-soft);color:var(--text-strong);font-size:13px;line-height:1.5} .doctor-settings-form{max-width:1100px;margin:0 auto 24px} .doctor-settings-actions-row{display:flex;gap:10px} .doctor-checks-table{margin-bottom:20px} .tg-load-more-btn{margin:18px auto;display:flex} /* ——— Рубрикатор: календарь публикаций своего канала ——— */ .rub-page{display:flex;flex-direction:column;gap:16px} .rub-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .rub-month{display:flex;align-items:center;gap:12px} .rub-month-label{display:flex;flex-direction:column;gap:2px;min-width:230px} .rub-month-label strong{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em} .rub-month-label span{font-size:12px;color:var(--muted-faint)} .rub-nav{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-bg);color:var(--muted-4);font-size:15px;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .rub-nav:hover{background:var(--surface-hover);color:var(--ink)} .rub-toolbar-actions{display:flex;align-items:center;gap:10px} .rub-toolbar-actions>button:first-child{padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-bg);color:var(--muted-4);font-size:13px;cursor:pointer} .rub-toolbar-actions>button:first-child:hover{background:var(--surface-hover);color:var(--ink)} .rub-freq-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-4);margin:-6px 0 4px} .rub-freq-row input{width:56px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-bg);color:var(--ink);font-size:13px} .rub-freq-hint{font-size:12px;color:var(--muted-faint)} /* Четыре цвета рубрик — одни и те же для точки в календаре и для легенды. Заданы через data-атрибут, а не инлайн-стилем: инлайн-стили запрещены политикой безопасности страницы (style-src 'self'). */ [data-rubric-color="0"]{--rub-hue:#7c5cff} [data-rubric-color="1"]{--rub-hue:#24d2b5} [data-rubric-color="2"]{--rub-hue:#f0b95b} [data-rubric-color="3"]{--rub-hue:#ff7aa8} .rub-legend{display:flex;flex-wrap:wrap;gap:8px} .rub-legend-item{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card-bg);font-size:12px;color:var(--muted-4)} .rub-chip-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--rub-hue,var(--muted-faint));flex:0 0 auto} .rub-calendar{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-bg);overflow:hidden} .rub-weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line-2);background:var(--surface-sunk)} .rub-weekdays span{padding:9px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-faint)} .rub-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(104px,auto)} .rub-day{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:7px 8px 9px;display:flex;flex-direction:column;gap:5px;min-width:0} .rub-day:nth-child(7n){border-right:none} .rub-day:nth-child(n+36){border-bottom:none} .rub-day-outside{background:var(--surface-sunk)} .rub-day-outside .rub-day-num{color:var(--muted-faint);opacity:.5} .rub-day-today .rub-day-num{background:var(--accent);color:var(--on-accent)} .rub-day-head{display:flex;align-items:center;justify-content:space-between;gap:6px} .rub-day-num{min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);font-size:12px;color:var(--muted-4);font-variant-numeric:tabular-nums} .rub-day-add{width:20px;height:20px;border-radius:var(--r-xs);border:none;background:transparent;color:var(--muted-faint);font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease)} .rub-day:hover .rub-day-add{opacity:1} .rub-day-add:hover{background:var(--surface-hover);color:var(--ink)} .rub-day-add:focus-visible{opacity:1} .rub-day-posts{display:flex;flex-direction:column;gap:4px;min-width:0} .rub-chip{display:flex;align-items:center;gap:6px;width:100%;padding:5px 7px;border-radius:var(--r-xs);border:1px solid var(--line-2);background:color-mix(in oklab,var(--rub-hue,#8d98aa) 12%,transparent);color:var(--text-strong);font:inherit;font-size:12px;text-align:left;cursor:pointer;min-width:0;transition:background var(--t-fast) var(--ease)} .rub-chip:hover{background:color-mix(in oklab,var(--rub-hue,#8d98aa) 22%,transparent)} .rub-chip-time{color:var(--muted-faint);font-variant-numeric:tabular-nums;flex:0 0 auto} .rub-chip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* Одобренный пост отмечен слева сплошной чертой, опубликованный — приглушён: статус читается в клетке, без подписи, которая туда не поместится. */ .rub-chip[data-status="approved"]{border-left:3px solid var(--rub-hue,var(--accent))} .rub-chip[data-status="published"]{opacity:.55} .rub-foot{font-size:12px;color:var(--muted-faint);max-width:70ch} .rub-post-dialog{max-width:620px;width:min(620px,92vw)} .rub-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rub-post-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px} .rub-post-actions .danger{padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--danger-line);background:var(--danger-soft);color:var(--danger-text);font-size:13px;cursor:pointer} .rub-post-actions button[type="submit"]{margin-left:auto} @media (max-width:760px){ .rub-grid{grid-auto-rows:minmax(84px,auto)} .rub-chip-time{display:none} .rub-form-row{grid-template-columns:1fr} .rub-month-label{min-width:0} } /* Доктор: спокойная подсказка, когда уведомления работают запасным путём — в отличие от doctor-alert-warning, это не тревога, а пояснение. */ .doctor-alert-note{margin:0 0 14px;padding:11px 14px;border-radius:var(--r-md); background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--muted-4);font-size:13.5px;line-height:1.55} /* ——— Карточка «агент стал умнее» ——— */ /* Живёт над содержимым страницы и видна из любого раздела: обновление — событие про агента целиком, а не про конкретный экран. */ #agent-update-slot:empty{display:none} .agent-update-card{margin:0 clamp(16px,4vw,40px) 4px;display:flex;gap:20px;align-items:center; justify-content:space-between;flex-wrap:wrap;padding:18px 22px;border-radius:var(--r-lg); border:1px solid var(--accent-line);background:linear-gradient(120deg,var(--accent-soft),transparent 70%),var(--card-bg); box-shadow:var(--shadow-md)} .agent-update-body{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 340px} .agent-update-body h2{font-family:var(--font-display);font-size:19px;letter-spacing:-.015em;margin:0} .agent-update-body>p{margin:0;font-size:14px;color:var(--muted-4);max-width:70ch} .agent-update-list{margin:2px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px; font-size:13.5px;color:var(--muted-4)} .agent-update-note{font-size:12.5px;color:var(--muted-faint);max-width:70ch} .agent-update-error{font-size:13px;color:var(--danger-text)} .agent-update-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .agent-update-actions>button:first-child{padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--line); background:transparent;color:var(--muted-4);font-size:13px;cursor:pointer;transition:background var(--t-fast) var(--ease)} .agent-update-actions>button:first-child:hover{background:var(--surface-hover);color:var(--ink)} .agent-update-done{border-color:var(--ok-line);background:linear-gradient(120deg,var(--ok-soft),transparent 70%),var(--card-bg)} @media (max-width:760px){.agent-update-card{margin-inline:14px}.agent-update-actions{width:100%} .agent-update-actions>*{flex:1 1 auto;justify-content:center}} /* Состояние «подтверждено, ждём паузы у агента» — спокойное, без тревоги: от человека уже ничего не требуется. */ .agent-update-waiting{border-color:var(--ok-line); background:linear-gradient(120deg,var(--ok-soft),transparent 70%),var(--card-bg)} .agent-update-spinner{width:18px;height:18px;border-radius:var(--r-full); border:2px solid var(--ok-line);border-top-color:var(--ok);animation:rub-spin 900ms linear infinite} @keyframes rub-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.agent-update-spinner{animation:none}} /* Канал без веб-предпросмотра: объясняем, почему нет ленты постов. */ .tg-preview-off{border:1px solid var(--warn-soft);background:var(--warn-soft);border-radius:var(--r-md); padding:16px 18px;display:flex;flex-direction:column;gap:6px;margin-top:14px} .tg-preview-off h3{margin:0;font-family:var(--font-display);font-size:16px;letter-spacing:-.01em} .tg-preview-off p{margin:0;font-size:14px;color:var(--muted-4);max-width:70ch} /* Следующий шаг после применения рекомендации — тем же «рисованным» стилем, что и сама записка, чтобы читалось как продолжение, а не чужая кнопка. */ .tg-note-plan-btn{margin-top:8px;align-self:flex-start;font-family:var(--font-hand);font-size:19px; padding:5px 15px;border-radius:var(--r-full);cursor:pointer;color:var(--note-text,#3a2f00); background:transparent;border:2px solid currentColor;opacity:.75; transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .tg-note-plan-btn:hover{opacity:1;transform:translateY(-1px)} .tg-note-plan-btn:disabled{opacity:.5;cursor:default;transform:none} /* Разбор конкурента под карточкой канала: спокойный блок с текстом от агента — читается как заметка аналитика, а не как системное сообщение. */ .tg-rival-report{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--card-bg);padding:18px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)} .tg-rival-text{font-size:14.5px;line-height:1.65;color:var(--muted-4);max-width:78ch} .tg-notes-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} @media (max-width:600px){.tg-notes-actions>*{flex:1 1 auto;justify-content:center}} /* ——— Окно поста: редактор слева, предпросмотр справа ——— */ .rub-post-dialog{max-width:1020px;width:min(1020px,95vw)} .rub-editor-split{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start} .rub-editor-fields{display:flex;flex-direction:column;gap:12px;min-width:0} .rub-preview{display:flex;flex-direction:column;gap:8px;position:sticky;top:0} .rub-preview-cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-faint)} /* Фон под «перепиской» — чтобы пузырь читался как сообщение в Telegram, а не как ещё одна карточка формы. */ .rub-preview-chat{background:var(--surface-sunk);border:1px solid var(--line-2);border-radius:var(--r-md); padding:14px 12px;min-height:220px;display:flex;align-items:flex-start} .rub-preview-bubble{background:var(--card-bg-2);border-radius:14px 14px 14px 4px;padding:10px 12px; width:100%;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)} .rub-preview-media{display:grid;gap:3px;border-radius:10px;overflow:hidden} .rub-preview-media.many{grid-template-columns:1fr 1fr} .rub-preview-media img{width:100%;height:100%;max-height:150px;object-fit:cover;display:block} .rub-preview-vid{display:grid;place-items:center;min-height:96px;background:var(--surface-sunk); color:var(--muted-4);font-size:22px} .rub-preview-more{display:grid;place-items:center;min-height:60px;background:var(--surface-sunk); color:var(--muted-4);font-size:13px} .rub-preview-text{font-size:13.5px;line-height:1.55;color:var(--text-strong);word-break:break-word; max-height:300px;overflow-y:auto} .rub-preview-empty{color:var(--muted-faint);font-style:italic} .rub-preview-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-faint); font-variant-numeric:tabular-nums} .rub-media-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rub-media-label{font-size:12.5px;color:var(--muted-faint)} .rub-media-strip{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:26px} .rub-media-empty{font-size:12.5px;color:var(--muted-faint)} .rub-media-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 8px;border-radius:var(--r-full); border:1px solid var(--line);background:var(--card-bg);font-size:13px} .rub-media-chip button{border:none;background:transparent;color:var(--muted-faint);cursor:pointer; font-size:15px;line-height:1;padding:0 2px} .rub-media-chip button:hover{color:var(--danger-text)} .rub-actions-spacer{flex:1 1 auto} .rub-approve-btn{border-color:var(--ok-line);color:var(--ok-text)} .rub-approve-btn:hover{background:var(--ok-soft)} /* Плашка о правах: тревожная, но с понятным следующим шагом. */ .rub-access-note{border:1px solid rgba(240,185,91,.32);background:var(--warn-soft);border-radius:var(--r-md); padding:14px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-bottom:14px} .rub-access-note h3{margin:0;font-family:var(--font-display);font-size:15.5px} .rub-access-note p{margin:0;font-size:14px;color:var(--muted-4);max-width:70ch} .rub-access-note.ok{border-color:var(--ok-line);background:var(--ok-soft)} @media (max-width:900px){ .rub-editor-split{grid-template-columns:1fr} .rub-preview{position:static;order:-1} .rub-preview-chat{min-height:0} } /* Кнопка «Архив» в тулбаре — как «Сегодня», не акцентная. */ #rub-archive-open{padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--card-bg);color:var(--muted-4);font-size:13px;cursor:pointer; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} #rub-archive-open:hover{background:var(--surface-hover);color:var(--ink)} /* ——— Диалог «Архив постов» ——— */ .rub-archive-dialog{max-width:640px;width:min(640px,92vw)} .rub-archive-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;margin-top:4px} .rub-archive-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--card-bg)} .rub-archive-item-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto} .rub-archive-item-open{all:unset;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0} .rub-archive-item-open:hover .rub-archive-item-title{color:var(--accent-text)} .rub-archive-item-rubric{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-faint)} .rub-archive-item-title{font-size:14.5px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;transition:color var(--t-fast) var(--ease)} .rub-archive-item-date{font-size:12px;color:var(--muted-faint);font-variant-numeric:tabular-nums} /* ——— «Почты»: хаб личных Gmail-ящиков администратора ——— */ .mail-flash{margin:0 0 4px;padding:10px 14px;border-radius:var(--r-sm);font-size:13.5px} .mail-flash-ok{background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok-text)} .mail-flash-bad{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger-text)} .mail-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start} .mail-accounts-panel{display:flex;flex-direction:column;gap:6px;background:var(--card-bg); border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;position:sticky;top:0} .mail-panel-title{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-faint)} .mail-account-all{width:100%;text-align:left;padding:9px 11px;border-radius:var(--r-sm);border:1px solid transparent; background:transparent;color:var(--muted-4);font-size:13.5px;cursor:pointer;font-weight:600} .mail-account-all.active{background:var(--surface-active);color:var(--ink);border-color:var(--accent-line)} #mail-accounts-list{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto} .mail-account-row{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 11px;border-radius:var(--r-sm); cursor:pointer;border:1px solid transparent;transition:background var(--t-fast) var(--ease)} .mail-account-row:hover{background:var(--surface-hover)} .mail-account-row.active{background:var(--surface-active);border-color:var(--accent-line)} .mail-account-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto} .mail-account-email{font-size:13px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-account-sub{font-size:11px;color:var(--muted-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-account-error{font-size:11px;color:var(--danger-text)} .mail-account-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--t-fast) var(--ease)} .mail-account-row:hover .mail-account-actions{opacity:1} .mail-account-actions button{width:22px;height:22px;border:none;background:transparent;color:var(--muted-faint); cursor:pointer;border-radius:var(--r-xs);font-size:13px;line-height:1} .mail-account-actions button:hover{background:var(--surface-hover);color:var(--ink)} .mail-account-remove:hover{color:var(--danger-text)} .mail-inbox-panel{display:flex;flex-direction:column;gap:10px;min-width:0} .mail-inbox-toolbar{display:flex;gap:10px} .mail-inbox-toolbar input{flex:1 1 auto;padding:9px 13px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--input-bg);color:var(--ink);font-size:13.5px} .mail-inbox-toolbar button{padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--card-bg);color:var(--muted-4);font-size:13px;cursor:pointer} .mail-inbox-toolbar button:hover{background:var(--surface-hover);color:var(--ink)} .mail-message-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;background:var(--card-bg)} .mail-message-row{all:unset;display:grid;grid-template-columns:110px 170px 1fr auto;gap:14px;align-items:baseline; padding:11px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;min-width:0} .mail-message-row:last-child{border-bottom:none} .mail-message-row:hover{background:var(--surface-hover)} .mail-message-row.unread .mail-message-from,.mail-message-row.unread .mail-message-subject{font-weight:700;color:var(--ink)} .mail-message-account{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-faint); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-message-from{font-size:13px;color:var(--muted-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-message-subject{font-size:13.5px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-message-subject::after{content:' — ';color:var(--muted-faint)} .mail-message-snippet{display:none} .mail-message-date{font-size:12px;color:var(--muted-faint);font-variant-numeric:tabular-nums;white-space:nowrap} .mail-message-dialog{max-width:720px;width:min(720px,94vw)} .mail-message-meta{font-size:13px;color:var(--muted-4);line-height:1.6;margin:6px 0 16px} .mail-message-body{font-size:14px;line-height:1.65;color:var(--text-strong);max-width:100%;overflow-x:auto} .mail-message-body img{max-width:100%} /* HTML-письмо целиком в sandbox — чужой script/onerror внутри физически не выполнится и не дотянется до родительской страницы (см. app.js). Высоту зафиксировали со своей прокруткой: без allow-scripts iframe не может сообщить родителю размер своего содержимого. */ .mail-message-frame{width:100%;height:60vh;border:1px solid var(--line);border-radius:var(--r-md); background:#fff;color-scheme:light} @media (max-width:860px){ .mail-layout{grid-template-columns:1fr} .mail-accounts-panel{position:static} .mail-message-row{grid-template-columns:1fr auto;grid-template-areas:'subject date' 'from from'} .mail-message-account{display:none} .mail-message-subject{grid-area:subject} .mail-message-date{grid-area:date} .mail-message-from{grid-area:from} } /* ——— «Серверы и VPN» ——— */ .servers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:14px} .server-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px; display:flex;flex-direction:column;gap:14px} .server-card-head{display:flex;align-items:flex-start;gap:10px} .server-card-head h3{margin:0;font-family:var(--font-display);font-size:16px;letter-spacing:-.01em} .server-card-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted-faint)} .server-dot{width:9px;height:9px;border-radius:var(--r-full);margin-top:6px;flex:0 0 auto} .server-dot-ok{background:var(--ok)} .server-dot-bad{background:var(--danger)} .server-card-body{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line-2)} .server-vpn-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .server-card-vpn-label{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-faint)} .server-vpn-external{color:var(--muted-4);text-decoration:none;font-size:15px;line-height:1;padding:2px 4px;border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .server-vpn-external:hover{background:var(--surface-hover);color:var(--ink)} .server-vpn-frame{width:100%;height:560px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-hover)} .server-card-hint{margin:0;font-size:12px;color:var(--muted-faint);max-width:50ch} .task-card .task-meta{margin:6px 0 0;font-size:12px;color:var(--muted)} .task-card .task-failed{color:var(--danger,#e5484d);font-weight:600} .task-card .task-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}