/* Mira · Liquid — жидкое стекло, перламутровые переливы, мягкие градиенты, без рамок.
   Подключается после app.css и меняет только внешний вид и раскладку панелей. Фон — js/core/liquid.js (#mira-bg). */
:root {
  --bg: #EEF2F7; --text: #12141A; --text-2: #343944; --muted: #646B78; --faint: #9AA1AD;
  --card: rgba(255, 255, 255, .5); --panel: rgba(255, 255, 255, .32); --sunk: rgba(255, 255, 255, .36);
  --hover: rgba(255, 255, 255, .45); --press: rgba(255, 255, 255, .6);
  --line: rgba(255, 255, 255, .55); --line-2: rgba(255, 255, 255, .7);
  --accent: #2563EB; --accent-2: #0F9BB5; --on-accent: #fff; --accent-bg: rgba(37, 99, 235, .12); --accent-line: rgba(37, 99, 235, .35);
  --invert: #12141A; --on-invert: #fff;
  --glass: linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .26));
  --glass-hi: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
  --sheen: linear-gradient(115deg, transparent 22%, rgba(34, 184, 207, .20) 36%, rgba(255, 255, 255, .35) 46%, rgba(127, 227, 196, .18) 58%, transparent 74%);
  --rim: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .35), inset 0 0 22px rgba(255, 255, 255, .25);
  --lift: 0 30px 60px -32px rgba(30, 60, 110, .38), 0 10px 24px -18px rgba(30, 60, 110, .25);
  --blur: blur(28px) saturate(1.8) brightness(1.04);
  --mira: linear-gradient(120deg, #2563EB, #0F9BB5); --mira-full: linear-gradient(120deg, #2563EB 0%, #22B8CF 55%, #7FE3C4 100%);
  --r: 18px; --r-lg: 26px; --r-xl: 32px;
  --shadow-sm: none; --shadow: var(--lift); --shadow-lg: 0 50px 100px -40px rgba(30, 50, 100, .45);
}
[data-theme="dark"] {
  --bg: #0A0C14; --text: #F1F3F8; --text-2: #CDD2DC; --muted: #8F97A6; --faint: #5E6574;
  --card: rgba(255, 255, 255, .07); --panel: rgba(255, 255, 255, .04); --sunk: rgba(255, 255, 255, .05);
  --hover: rgba(255, 255, 255, .07); --press: rgba(255, 255, 255, .12);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .12);
  --accent: #5FD6C8; --accent-2: #A6EBD8; --on-accent: #08101A; --invert: #F1F3F8; --on-invert: #0A0C14;
  --glass: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  --glass-hi: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  --sheen: linear-gradient(115deg, transparent 22%, rgba(34, 184, 207, .10) 36%, rgba(255, 255, 255, .08) 46%, rgba(127, 227, 196, .10) 58%, transparent 74%);
  --rim: inset 0 1px 1px rgba(255, 255, 255, .16), inset 0 -1px 1px rgba(255, 255, 255, .04), inset 0 0 24px rgba(255, 255, 255, .03);
  --lift: 0 30px 70px -30px rgba(0, 0, 0, .8); --shadow-lg: 0 50px 110px -40px rgba(0, 0, 0, .9);
}

/* ---------- живой фон ---------- */
body { background: var(--bg); }
#mira-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, #F4F8FC 0%, #EEF1F8 45%, #F7EEF4 100%); }
[data-theme="dark"] #mira-bg { background: linear-gradient(160deg, #080B14 0%, #0C0E1C 50%, #140A16 100%); }
#mira-bg i, #mira-bg s { position: absolute; display: block; text-decoration: none; will-change: transform; }
#mira-bg i { border-radius: 50%; filter: blur(70px); opacity: .85; }
#mira-bg .b1 { width: 58vmax; height: 58vmax; left: -14vmax; top: -18vmax; background: radial-gradient(closest-side, #8ED3F0, rgba(142, 211, 240, 0)); animation: mb1 26s ease-in-out infinite alternate; }
#mira-bg .b2 { width: 52vmax; height: 52vmax; right: -16vmax; bottom: -20vmax; background: radial-gradient(closest-side, #F4A9D2, rgba(244, 169, 210, 0)); animation: mb2 30s ease-in-out infinite alternate; }
#mira-bg .b3 { width: 40vmax; height: 40vmax; left: 38%; top: 30%; background: radial-gradient(closest-side, #C9C2F6, rgba(201, 194, 246, 0)); animation: mb3 34s ease-in-out infinite alternate; opacity: .7; }
#mira-bg .b4 { width: 34vmax; height: 34vmax; right: 8%; top: -10vmax; background: radial-gradient(closest-side, #FFFFFF, rgba(255, 255, 255, 0)); animation: mb2 28s ease-in-out infinite alternate-reverse; }
#mira-bg .b5 { width: 30vmax; height: 30vmax; left: 6%; bottom: -12vmax; background: radial-gradient(closest-side, #FBE3CF, rgba(251, 227, 207, 0)); animation: mb1 32s ease-in-out infinite alternate-reverse; opacity: .7; }
[data-theme="dark"] #mira-bg .b1 { background: radial-gradient(closest-side, #0B6F99, rgba(11, 111, 153, 0)); }
[data-theme="dark"] #mira-bg .b2 { background: radial-gradient(closest-side, #8A1F63, rgba(138, 31, 99, 0)); }
[data-theme="dark"] #mira-bg .b3 { background: radial-gradient(closest-side, #3B2C8F, rgba(59, 44, 143, 0)); }
[data-theme="dark"] #mira-bg .b4 { background: radial-gradient(closest-side, #1A3E66, rgba(26, 62, 102, 0)); }
[data-theme="dark"] #mira-bg .b5 { background: radial-gradient(closest-side, #4A1838, rgba(74, 24, 56, 0)); }
/* «ступени» знака Mira — большие, размытые, медленно дрейфуют */
#mira-bg s { width: 16vmax; height: 16vmax; border-radius: 30%; filter: blur(26px); opacity: .45; }
#mira-bg .st1 { left: 58%; top: 56%; background: linear-gradient(135deg, #2F6BEB, #22B8CF); animation: ms 22s ease-in-out infinite alternate; }
#mira-bg .st2 { left: 70%; top: 34%; background: linear-gradient(135deg, #8EC9F0, #C9A5EE); animation: ms 26s ease-in-out infinite alternate-reverse; }
#mira-bg .st3 { left: 82%; top: 12%; background: linear-gradient(135deg, #7FE3C4, #5FD6C8); animation: ms 30s ease-in-out infinite alternate; }
[data-theme="dark"] #mira-bg s { opacity: .32; }
#mira-bg u { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes mb1 { to { transform: translate3d(10vmax, 8vmax, 0) scale(1.12); } }
@keyframes mb2 { to { transform: translate3d(-12vmax, -6vmax, 0) scale(.92); } }
@keyframes mb3 { to { transform: translate3d(-14vmax, 10vmax, 0) scale(1.18); } }
@keyframes ms { to { transform: translate3d(-6vmax, 5vmax, 0) rotate(18deg); } }
@keyframes sheen { from { background-position: 120% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
html.web body::before { display: none; }

/* ---------- жидкое стекло ---------- */
.center, .chat-col, .tree-col, .card, .modal, .pop, .menu, .cmp, .plan-card, .pack, .sub-card, .hm-tile, .wl-stat, .trend, .mg-item, .case-tile,
.ln, .ln-buy, .wl-course, .model-menu, .mg-box, .wg-card, .notice, .earn-st div, .wl-units .tu, .ln-steps li, .ln-why, .route, .msg.ai .bubble {
  border: 0 !important; background: var(--sheen), var(--glass); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), var(--lift); }
.center, .chat-col, .modal, .cmp, .hm-tile, .plan-card, .case-tile, .wg-card { animation: sheen 14s ease-in-out infinite alternate; }
.center, .chat-col, .tree-col { border-radius: var(--r-xl); }
.card, .plan-card, .pack, .sub-card, .hm-tile, .trend, .mg-item, .case-tile, .ln, .wl-stat, .mg-box, .ln-buy, .wl-course { border-radius: var(--r-lg); }
.modal { border-radius: 34px; background: var(--sheen), var(--glass-hi); }
[data-theme="dark"] .modal { background: var(--sheen), linear-gradient(145deg, rgba(30, 34, 48, .9), rgba(18, 20, 30, .85)); }
.overlay { background: rgba(120, 140, 170, .16); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
[data-theme="dark"] .overlay { background: rgba(0, 0, 0, .35); }
.ln-steps li, .earn-st div, .wl-units .tu, .notice, .ln-why { box-shadow: var(--rim); }

/* ---------- раскладка: панели парят над фоном ---------- */
.topbar { background: transparent; height: 64px; padding: 0 18px; }
.main { padding: 0 16px 16px; gap: 14px; }
.tree-col { padding: 12px 8px 90px; margin-bottom: 0; }
.main.home .center { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.brand { height: 42px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), var(--lift); }
.brand .brand-name { font-weight: 650; letter-spacing: -.02em; font-size: 16px; }
.pill, .avatar { border: 0; height: 42px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), var(--lift); }
.avatar { width: 42px; }
.pill { padding: 0 16px; font-weight: 600; color: var(--text); }
.top-crumb { opacity: .8; }
.rail { border: 0; background: var(--glass); box-shadow: var(--rim); }

/* дерево разделов */
.node-row { border-radius: 14px; min-height: 36px; }
.node-row:hover { background: rgba(255, 255, 255, .35); }
[data-theme="dark"] .node-row:hover { background: rgba(255, 255, 255, .06); }
.node-row.active { background: var(--glass-hi); box-shadow: var(--rim), 0 8px 20px -12px rgba(30, 60, 110, .35); }
[data-theme="dark"] .node-row.active { background: rgba(255, 255, 255, .12); }
.node-kids { border-left: 0; }
.tree-sep { background: rgba(255, 255, 255, .45); }

/* нижняя панель — жидкая капсула */
.dock { padding: 6px; gap: 4px; border: 0; background: var(--sheen), var(--glass); background-size: 260% 100%, 100% 100%; animation: sheen 12s ease-in-out infinite alternate;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), 0 30px 60px -24px rgba(30, 60, 110, .45); bottom: 18px; }
html.liquid-refract .dock, html.liquid-refract .cmp.vz, html.liquid-refract .brand, html.liquid-refract .pill { -webkit-backdrop-filter: url(#mira-liquid) blur(18px) saturate(1.9); backdrop-filter: url(#mira-liquid) blur(18px) saturate(1.9); }
.dk { height: 46px; padding: 0 15px; color: var(--text-2); }
.dk:hover { background: rgba(255, 255, 255, .35); }
.m-pill > .m-thumb { border-radius: 999px; background: var(--mira); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 10px 22px -10px rgba(95, 214, 200, .55); }
.dock.m-pill .dk.on, .tabs.m-pill button.on, .seg.m-pill button.on { color: #fff; background: transparent; }
.dk.on { background: var(--mira); color: #fff; }
.dk.on .ic, .tabs button.on .ic, .seg button.on .ic { stroke: #fff !important; }

/* кнопки, чипы, вкладки — капсулы без рамок */
.btn { border: 0; border-radius: 999px; height: 38px; padding: 0 18px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), 0 8px 18px -12px rgba(30, 60, 110, .35); color: var(--text); }
.btn:hover { background: var(--glass-hi); }
.btn.sm { height: 32px; padding: 0 14px; }
.btn.accent, .btn.primary, .hello-start, #mg-go { background: var(--mira); background-size: 160% 100%; color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 14px 30px -14px rgba(95, 214, 200, .6), 0 10px 24px -14px rgba(47, 107, 235, .6); transition: background-position .5s ease, transform .2s; }
.btn.accent:hover, .btn.primary:hover, #mg-go:hover { background: var(--mira); background-size: 160% 100%; background-position: 100% 0; transform: translateY(-1px); }
.btn.ghost { background: transparent; box-shadow: none; } .btn.ghost:hover { background: rgba(255, 255, 255, .4); }
.btn.danger { color: #D2364E; }
.chip { border: 0; height: 34px; padding: 0 15px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), 0 6px 14px -10px rgba(30, 60, 110, .3); color: var(--text-2); font-size: 13px; }
.chip:hover { background: var(--glass-hi); color: var(--text); }
.chip.on { background: var(--mira); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 10px 22px -12px rgba(95, 214, 200, .55); }
.tabs, .seg, .mg-row .seg { border: 0; border-radius: 999px; padding: 4px; background: rgba(255, 255, 255, .32); box-shadow: inset 0 1px 3px rgba(30, 60, 110, .12), inset 0 0 0 1px rgba(255, 255, 255, .25); }
[data-theme="dark"] .tabs, [data-theme="dark"] .seg { background: rgba(255, 255, 255, .05); }
.tabs button, .seg button, .mg-row .seg button { border-radius: 999px; }
.tabs button.on, .seg button.on { color: #fff; background: var(--mira); box-shadow: none; }

/* поля ввода */
.input, .textarea, .field input, .field select, .earn-link input, select.input, .cmp textarea { border: 0 !important; border-radius: 18px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 3px rgba(30, 60, 110, .12), inset 0 0 0 1px rgba(255, 255, 255, .5); }
[data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .field input, [data-theme="dark"] .earn-link input { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.input:focus, .textarea:focus, .field input:focus { box-shadow: inset 0 0 0 2px rgba(47, 107, 235, .45), 0 0 0 6px rgba(47, 107, 235, .12); outline: none; }
.cmp textarea { background: transparent; box-shadow: none; }
.cmp { border-radius: 30px; padding: 14px 12px 10px 18px; }
.cmp:focus-within { box-shadow: var(--rim), var(--lift), 0 0 0 6px rgba(47, 107, 235, .1); }

/* таблицы и разделители — едва заметные */
.table td, .table th { border-color: rgba(255, 255, 255, .45) !important; }
[data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: rgba(255, 255, 255, .06) !important; }
.kv { border-color: rgba(255, 255, 255, .45); }

/* главная: крупная типографика, «живой» шар Mira Pro */
.hm-hero h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 650; letter-spacing: -.045em; }
.page-head h1 { font-weight: 650; letter-spacing: -.04em; font-size: clamp(28px, 3vw, 38px); }
.page-head .kicker { text-transform: none; letter-spacing: 0; font-weight: 600; background: var(--mira); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-title { text-transform: none; letter-spacing: -.01em; font-size: 16px; font-weight: 650; color: var(--text); }
.vz-mic { width: 86px; height: 86px; background: conic-gradient(from 0deg, #2F6BEB, #22B8CF, #F5F9FF, #7FE3C4, #5FD6C8, #8C7BEA, #2F6BEB) !important; animation: orb 9s linear infinite;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .7), inset 0 -10px 20px rgba(60, 20, 90, .35), 0 20px 40px -14px rgba(95, 214, 200, .55), 0 18px 40px -16px rgba(47, 107, 235, .6) !important; }
.vz-mic::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 38%, transparent 62%); pointer-events: none; }
.vz-mic .ic { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); animation: orb 9s linear infinite reverse; }
@keyframes orb { to { transform: rotate(360deg); } }
.hm-tile .ic, .sub-card > .ic, .ln-n { color: #fff; }
.hm-tile > .ic, .sub-card > .ic { padding: 9px; width: 40px; height: 40px; border-radius: 14px; background: var(--mira); stroke: #fff !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 10px 20px -10px rgba(95, 214, 200, .55); }

/* кошелёк: баланс — тёмное стекло с переливом */
.wl-stat.accent { background: linear-gradient(145deg, rgba(18, 22, 34, .92), rgba(28, 22, 40, .88)); color: #fff; position: relative; overflow: hidden; }
.wl-stat.accent::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(47, 107, 235, .55), rgba(95, 214, 200, .35), transparent); filter: blur(20px); animation: mb3 14s ease-in-out infinite alternate; pointer-events: none; }
.wl-stat.accent > * { position: relative; }
.wl-stat .big b, .pc-price span, .pk-c, .earn-st b { font-weight: 300; letter-spacing: -.04em; }
.plan-card.hot { background: var(--sheen), linear-gradient(150deg, rgba(47, 107, 235, .22), rgba(255, 255, 255, .5) 45%, rgba(127, 227, 196, .22)); }

/* сообщения чата */
.msg.user { border: 0; background: var(--mira); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 12px 26px -16px rgba(95, 214, 200, .55); }
.toast { border-radius: 999px; background: rgba(18, 20, 28, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* приветствие, вход в веб-версию */
.hello-glass { background: rgba(240, 245, 252, .14); }
.mira-wave { border: 0; background: var(--glass); box-shadow: var(--rim), var(--lift); }
#web-gate { background: transparent; }
#web-gate::before { display: none; }

@media (prefers-reduced-motion: reduce) { #mira-bg i, #mira-bg s, .vz-mic, .vz-mic .ic, .center, .chat-col, .modal, .cmp, .dock, .hm-tile { animation: none !important; } }
@media (max-width: 900px) { .main { padding: 0 8px 8px; } .topbar { padding: 0 10px; } }
/* название лучшей модели на выбранной капсуле — белое */
.seg button.on .best-name, .chip.on .best-name, .tabs button.on .best-name { background: none; color: #fff; -webkit-text-fill-color: #fff; animation: none; }

/* Голосовая панель Mira Pro: без шара — микрофон и громкость внизу */
.cmp.vz .vz-row { padding: 6px 4px 4px; }
.cmp.vz .vz-txt b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.cmp.vz .cmp-bar { gap: 8px; flex-wrap: wrap; }
.vz-vol { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; color: var(--text-2); background: rgba(255, 255, 255, .35); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7); }
[data-theme="dark"] .vz-vol, [data-theme="dark"] .vz-hello { background: rgba(255, 255, 255, .06); box-shadow: none; }
.vz-vol input { width: 92px; height: 4px; -webkit-appearance: none; appearance: none; border-radius: 9px; background: linear-gradient(90deg, #2F6BEB, #7FE3C4); outline: none; }
.vz-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(30, 60, 110, .35); cursor: pointer; }
.vz-vol input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(30, 60, 110, .35); }
.vz-hello { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.vz-hello:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
.vz-talk { position: relative; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--mira);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 12px 26px -12px rgba(95, 214, 200, .65), 0 10px 22px -12px rgba(47, 107, 235, .6); transition: transform .2s; }
.vz-talk:hover { transform: scale(1.06); } .vz-talk .ic { stroke: #fff !important; position: relative; z-index: 1; }
.vz-talk .vz-ring { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 227, 196, .45), transparent); opacity: 0; transform: scale(calc(1 + var(--lvl, 0) * .6)); transition: opacity .2s; }
.vz-listen .vz-talk .vz-ring { opacity: 1; } .vz-listen .vz-talk { animation: talkp 1.4s ease-in-out infinite; }
.vz-think .vz-talk, .vz-speak .vz-talk { opacity: .75; }
@keyframes talkp { 50% { transform: scale(1.08); } }
@media (max-width: 600px) { .vz-vol input { width: 64px; } .cmp.vz .cmp-bar .price { order: 5; width: 100%; text-align: right; } }

/* вкладки чатов справа */
.ch-tabs { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 170px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .32); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6); }
[data-theme="dark"] .ch-tab { background: rgba(255, 255, 255, .06); box-shadow: none; }
.ch-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-tab.on { background: var(--mira); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 8px 18px -10px rgba(95, 214, 200, .5); }
.ch-tab i { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; opacity: .7; }
.ch-tab i:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.ch-tab.add { width: 32px; padding: 0; justify-content: center; }
/* подсказки при наведении */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 300; top: calc(100% + 8px); right: 0; width: max-content; max-width: 240px; padding: 7px 11px; border-radius: 12px;
  background: rgba(18, 20, 28, .9); color: #fff; font: 500 12px/1.35 var(--font); letter-spacing: 0; white-space: normal; text-align: left; pointer-events: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); animation: tipin .15s ease .25s both; }
.ch-tabs [data-tip]:hover::after, .ch-tab i[data-tip]:hover::after { top: calc(100% + 6px); left: 0; right: auto; }
.ch-tab:has(i:hover)::after { display: none; }
@keyframes tipin { from { opacity: 0; transform: translateY(-3px); } }
/* Главная: только чат и кнопка «Обучение» */
.hm-learn { display: flex; justify-content: center; margin-top: 18px; }
.hm-learn-btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px 0 10px; border: 0; border-radius: 999px; cursor: pointer; color: var(--text); font: inherit;
  background: var(--sheen), var(--glass); background-size: 260% 100%, 100% 100%; animation: sheen 12s ease-in-out infinite alternate; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), var(--lift); transition: transform .25s; }
.hm-learn-btn:hover { transform: translateY(-2px); }
.hm-learn-btn > .ic:first-child { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--mira); stroke: #fff !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
.hm-learn-btn span { display: grid; text-align: left; line-height: 1.25; } .hm-learn-btn b { font-size: 14.5px; } .hm-learn-btn small { font-size: 12px; color: var(--muted); }
.hm-learn-btn > .ic:last-child { opacity: .5; }

.vz-wake { position: relative; } .vz-wake::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 2px; }
.vz-wake.on::before { background: #1FBF7A; box-shadow: 0 0 0 3px rgba(31, 191, 122, .22); animation: wk 2s ease-in-out infinite; }
@keyframes wk { 50% { box-shadow: 0 0 0 6px rgba(31, 191, 122, .08); } }