/* ══ Оформление «как сайт Радиус v5» (26.10.2026) ═════════════════════════
   бежевый + бургунди, Unbounded / Golos Text / IBM Plex Mono, рисованные иконки.
   Подключается ПОСЛЕДНИМ (после inline-стилей и pwa.css). Тёмная тема — графит + бургунди. */

/* ── палитра: тёмная (запасная) — стоит на :root, светлая — на data-theme="light" ── */
:root{
  --accent:#B8324B; --accent-2:#E58A9B; --accent-soft:rgba(229,138,155,.13); --acc-btn:#9E2740;
  --teal:#8FB5A2;
  --bg:#141011; --panel:#1B1517; --panel-2:#251D20; --panel-3:#2F2528;
  --line:#33282B; --line-2:#463A3E;
  --txt:#F2EBE7; --txt-2:#B5A8AB; --txt-3:#9B8E92;
  --in-bg:#251D20; --in-txt:#F2EBE7; --in-br:transparent;
  --out-bg:#7D1A2E; --out-txt:#fff; --out-br:transparent;
  --natalia:#E58A9B;
  --good:#5CC79A; --bad:#F2778B; --warn:#E3B04B;
  --grid:rgba(190,170,175,.16);
  --shadow:0 8px 28px rgba(0,0,0,.42);
  --r:16px;
  --f-h:'Unbounded',system-ui,sans-serif; --f-b:'Golos Text',system-ui,sans-serif; --f-m:'IBM Plex Mono',ui-monospace,monospace; --f-i:'Playfair Display',Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
:root[data-theme="light"]{
  --accent:#6B1020; --accent-2:#8A1B30; --accent-soft:rgba(107,16,32,.09); --acc-btn:#6B1020;
  --teal:#4E7767;
  --bg:#F3F0EB; --panel:#FBF9F6; --panel-2:#F3EFEA; --panel-3:#EAE4DD;
  --line:#E6DFD8; --line-2:#D5CCC4;
  --txt:#1F1618; --txt-2:#56494D; --txt-3:#6B5F63;
  --in-bg:#FFFFFF; --in-txt:#1F1618; --in-br:#E6DFD8;
  --out-bg:#6B1020; --out-txt:#fff; --out-br:transparent;
  --natalia:#6B1020;
  --good:#2F7D5B; --bad:#B4233F; --warn:#9A6410;
  --grid:rgba(31,22,24,.12);
  --shadow:0 8px 26px rgba(60,30,36,.10);
}

/* ── типографика ── */
body{font-family:var(--f-b);letter-spacing:0;font-feature-settings:normal;background:var(--bg)}
button,input,textarea,select{font-family:inherit}
h1,h2{font-family:var(--f-h);font-weight:600;letter-spacing:-.01em}
.dlg-time,.bub .tm,.sec-h,.sep,.kpi .k,.metrics .m .k,.search .k,.m-title small,.tabs-cap{font-family:var(--f-m)}
.kpi .k,.metrics .m .k{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:500}
.sec-h{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:500}
.sep{font-size:10.5px;letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.dlg-time,.bub .tm{font-size:10.5px;letter-spacing:.02em}
.bub .tx{font-size:14.5px;line-height:1.5}
em.i,.it{font-family:var(--f-i);font-style:italic;font-weight:500}

/* ── шапка: знак и название ── */
.topbar{height:58px;background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--line)}
.logo{gap:11px;margin-right:18px;font-family:var(--f-h);font-weight:600;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--txt)}
.logo span{font-family:var(--f-m);font-weight:400;font-size:10px;letter-spacing:.16em;color:var(--txt-3);padding-left:11px;border-left:1px solid var(--line-2);text-transform:uppercase}
.mark{width:30px;height:30px;flex-shrink:0;color:var(--accent);display:block}
:root:not([data-theme="light"]) .mark{color:var(--accent-2)}
.mark .ring,.mark .rad{fill:none;stroke:currentColor;stroke-width:4.6;stroke-linecap:round}
.mark .dot{fill:currentColor}
.mark .ring{stroke-dasharray:1;stroke-dashoffset:0}
.mark .rad{stroke-dasharray:1;stroke-dashoffset:0}
.brand .mark{width:38px;height:38px}
@keyframes v5mark-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes v5mark-dot{from{transform:scale(0)}to{transform:scale(1)}}
.mark.play .ring{animation:v5mark-ring 1s var(--ease-out) both}
.mark.play .rad{animation:v5mark-ring .5s .85s var(--ease-out) both}
.mark.play .dot{transform-origin:32px 32px;animation:v5mark-dot .4s .75s var(--ease-out) both}
.logo:hover .mark .ring{animation:v5mark-ring .9s var(--ease-out) both}

.nav-link,.nav-pill,.tab{font-family:var(--f-b);font-weight:550;font-size:13.5px;border-radius:999px;padding:8px 16px}
.nav-pill,.tab.on{background:var(--accent-soft);color:var(--accent-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 38%,transparent)}
:root[data-theme="light"] .nav-pill,:root[data-theme="light"] .tab.on{color:var(--accent)}
.nav-link:hover,.tab:hover{background:var(--panel-2);color:var(--txt)}
.counter{background:var(--accent);color:#fff;font-family:var(--f-m);font-weight:500;box-shadow:0 0 0 3px var(--accent-soft)}
.ico{border-radius:12px}
.ico:hover{background:var(--panel-2);color:var(--accent-2)}
:root[data-theme="light"] .ico:hover{color:var(--accent)}

/* ── список диалогов ── */
.aside{background:var(--panel);border-right:1px solid var(--line)}
@media(min-width:761px){
.pill{border-radius:999px;font-weight:550;box-shadow:inset 0 0 0 1px var(--line-2);background:transparent}
.pill.on{background:var(--accent);color:#fff;box-shadow:none}
.pill:not(.on) .n{background:var(--accent-soft);color:var(--accent-2)}
:root[data-theme="light"] .pill:not(.on) .n{color:var(--accent)}
}
.search{background:var(--panel-2);border-radius:14px}
.search:focus-within{border-color:var(--accent);background:var(--panel)}
.dlg{border-radius:16px}
.dlg:hover{background:var(--panel-2)}
.dlg.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.dlg-name{font-weight:600;font-size:14.2px}
.dlg-item{color:var(--accent-2);font-weight:500;opacity:1}
:root[data-theme="light"] .dlg-item{color:var(--accent)}
.av{border-radius:14px;font-family:var(--f-h);font-weight:600;font-size:13.5px;background:color-mix(in srgb,var(--c) 15%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)}
.av.unread::after{background:var(--accent);box-shadow:0 0 0 2.5px var(--panel)}
.tag-b{font-family:var(--f-b);font-weight:600}

/* ── мобильная шапка ── */
.m-title b{font-family:var(--f-h);font-weight:600;font-size:17px;letter-spacing:.01em;text-transform:uppercase}
.m-title small{font-family:var(--f-m);font-size:11px;letter-spacing:.02em}

/* ── переписка ── */
.chat{background:radial-gradient(760px 420px at 88% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),var(--bg)}
.chat-top{background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--line)}
.chat-who b{font-family:var(--f-h);font-weight:600;font-size:13.5px;letter-spacing:0}
.feed{background-image:
  radial-gradient(600px 380px at 10% 6%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),
  radial-gradient(620px 420px at 94% 92%,color-mix(in srgb,var(--accent-2) 6%,transparent),transparent 70%)}
.bub{border-radius:18px}
.bub.i{background:var(--in-bg);box-shadow:0 1px 0 var(--line)!important}
:root[data-theme="light"] .bub.i{background:#fff}
.bub.o{--bb:var(--out-bg);background:linear-gradient(135deg,var(--out-bg),color-mix(in srgb,var(--out-bg) 82%,#fff))!important;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 20%,transparent)!important}
.bub.o .tm{opacity:.78}
.write .box{border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}
.write .box:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn-send{background:var(--accent)!important;color:#fff;border-radius:999px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn-send:hover{filter:none;background:var(--accent-2)!important}
.btn-tpl{border-radius:999px}
.btn-take{background:var(--accent);color:#fff;border-radius:999px}
.btn-take:hover{background:var(--accent-2)}
.btn-info,.btn-take{border-radius:999px}
.stub{font-family:var(--f-b)}
.stub b{font-family:var(--f-i);font-style:italic;font-weight:500;font-size:26px;color:var(--accent);display:block;margin-bottom:6px}
:root:not([data-theme="light"]) .stub b{color:var(--accent-2)}
.mod{border-radius:22px}
.b1,.btn-w,.mini,.b2{border-radius:999px}
.b1,.btn-w{background:var(--accent);color:#fff}
.toast{border-radius:999px}

/* ── рисованные иконки ── */
svg.i{stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
svg.i path[data-v5],.mark path{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes v5draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
svg.v5-in path[data-v5]{animation:v5draw .85s var(--ease-out) both;animation-delay:calc(var(--n,0)*70ms)}
.nav-link:hover svg.i path[data-v5],.ico:hover svg.i path[data-v5],.tab:hover svg.i path[data-v5],
.btn-tpl:hover svg.i path[data-v5],.pill:hover svg.i path[data-v5],.btn-send:hover svg.i path[data-v5],
.card.sig:hover svg.i path[data-v5]{animation:v5draw .7s var(--ease-out) both;animation-delay:calc(var(--n,0)*60ms)}

/* ══ аналитика ══ */
.card{background:var(--panel);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.card h3{font-family:var(--f-h);font-weight:600;font-size:13px;letter-spacing:0}
.kpi .v,.metrics .m .v{font-family:var(--f-h);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .v{font-size:18px}
.metrics .m .v{font-size:21px}
.metrics .m{border-radius:18px;background:var(--panel)}
.metrics .m .v small,.kpi .v small{font-family:var(--f-b);font-weight:500}
h2 .sub{font-family:var(--f-m);font-weight:400;letter-spacing:.02em}
.card .name{font-weight:600}
.card .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.spark,.chart{overflow:visible}
th{font-family:var(--f-m);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.badge.err{border-radius:999px}
.si{border-radius:12px}

/* появление и рисование (v5.js ставит классы) */
@keyframes v5rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.v5-rise{animation:v5rise .7s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes v5fade{from{opacity:0}}
.v5-area{animation:v5fade 1s .5s ease backwards}
svg.v5-draw path[data-line]{stroke-dasharray:1;animation:v5line 1.3s var(--ease-out) both}
@keyframes v5line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.card.acc:hover,.metrics .m:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,var(--line)),var(--shadow);transition:box-shadow .3s var(--ease-out)}

/* ── экран входа ── */
.login-card,.box.login{border-radius:24px}

@media (prefers-reduced-motion:reduce){
  .v5-rise,.v5-area,svg.v5-draw path[data-line],svg.v5-in path[data-v5],.mark.play .ring,.mark.play .rad,.mark.play .dot{animation:none!important}
}

/* экран входа: название знаком сайта */
.brand b{font-family:var(--f-h);font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
label,.lbl{font-family:var(--f-m);font-weight:500;letter-spacing:.1em;font-size:10.5px}

/* ══ Причина обращения (разложенное резюме) + город в шапке диалога ══ */
.sm{display:flex;flex-direction:column;gap:10px}
.sm i{font-style:normal;font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);display:block;font-weight:500}
.sm-st{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--txt)}
.sm-st span{width:7px;height:7px;border-radius:50%;background:var(--good)}
.sm-st.warn span{background:var(--warn)} .sm-st.bad span{background:var(--bad)}
.sm-svc{padding:11px 13px;border-radius:14px;background:var(--accent-soft);font-size:13px;line-height:1.45;font-weight:550;color:var(--txt)}
.sm-svc i{color:var(--accent-2);margin-bottom:4px}
:root[data-theme="light"] .sm-svc i{color:var(--accent)}
.sm-want{font-size:13px;line-height:1.5;color:var(--txt-2);padding:0 2px}
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sm-chip{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:13px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.sm-chip svg.i{width:17px;height:17px;margin-top:1px;color:var(--accent-2);flex:none}
:root[data-theme="light"] .sm-chip svg.i{color:var(--accent)}
.sm-chip div{min-width:0}
.sm-chip b{display:block;font-size:12.8px;font-weight:600;line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.sm-chip.none{background:transparent;box-shadow:none;border:1px dashed var(--line-2);padding:8px 9px}
.sm-chip.none b{color:var(--txt-3);font-weight:400}
.sm-chip.none svg.i{color:var(--txt-3);opacity:.6}
.sm-note{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--txt-2);padding:0 3px;margin-top:-3px}
.sm-note svg.i{width:14px;height:14px;color:var(--accent-2);flex:none}
.sm-next{padding:12px 13px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);font-size:13px;line-height:1.5}
.sm-next-h{display:flex;gap:7px;align-items:center;font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);font-weight:500;margin-bottom:6px}
:root[data-theme="light"] .sm-next-h{color:var(--accent)}
.sm-next-h svg.i{width:15px;height:15px}
.sm-flag{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--txt-3);padding:0 3px}
.sm-flag svg.i{width:15px;height:15px;flex:none}
.sm-flag.ok svg.i{color:var(--good)}
.sm-flag.bad{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--bad) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 35%,transparent);color:var(--txt);align-items:flex-start;font-size:12.8px}
.sm-flag.bad svg.i{color:var(--bad);margin-top:2px} .sm-flag.bad i{color:var(--bad)}

.it-city{display:inline-flex;align-items:center;gap:4px;color:var(--accent-2);font-weight:600;vertical-align:bottom}
:root[data-theme="light"] .it-city{color:var(--accent)}
.it-city svg.i{width:13px;height:13px;margin:0}
.it-sep{margin:0 5px;opacity:.5}

/* самообучение ИИ в настройках */
.learn{display:flex;flex-direction:column;gap:8px}
.ln-stat{font-size:12.8px;color:var(--txt-2)} .ln-stat b{font-family:var(--f-h);font-weight:600;color:var(--txt)}
.ln-det{background:var(--panel-2);border-radius:12px;padding:8px 12px;box-shadow:inset 0 0 0 1px var(--line)}
.ln-det summary{cursor:pointer;font-size:12.8px;font-weight:600}
.ln-det pre{white-space:pre-wrap;font:12.2px/1.55 var(--f-b);color:var(--txt-2);margin-top:8px;max-height:260px;overflow:auto}
.ln-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* вкладки в панели «Инфо»: причина обращения / варианты ответа */
.itabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);margin:4px 0 14px;position:sticky;top:-18px;z-index:5}
.itab{flex:1 1 0;min-width:0;padding:8px 4px;border-radius:999px;font-size:11.8px;letter-spacing:-.01em;overflow:hidden;font-weight:600;color:var(--txt-2);transition:background-color .25s var(--ease-out),color .25s var(--ease-out),box-shadow .25s var(--ease-out);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px}
.itab:hover{color:var(--txt)}
.itab.on{background:var(--panel);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
:root:not([data-theme="light"]) .itab.on{color:var(--accent-2)}
.itab i{flex:none;font-style:normal;font-family:var(--f-m);font-size:9.5px;min-width:15px;height:15px;border-radius:8px;display:inline-grid;place-items:center;background:var(--accent);color:#fff;padding:0 4px}
.ipane[hidden]{display:none}

/* ── новое сообщение в списке диалогов (десктоп): круглый бейдж с числом, как в мессенджерах ── */
@keyframes v5pop{0%{transform:scale(0)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes v5fresh{0%{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}100%{box-shadow:inset 0 0 0 0 transparent,0 0 0 0 transparent}}
@media(min-width:761px){
  .ubadge{display:grid;place-items:center;flex:none;min-width:21px;height:21px;border-radius:11px;padding:0 6px;margin-left:auto;
    background:var(--accent);color:#fff;font-family:var(--f-m);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
    box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 35%,transparent);animation:v5pop .45s var(--ease-out)}
  .av.unread::after{display:none}
  .dlg.has-new .dlg-name{font-weight:700}
  .dlg.has-new .dlg-time{color:var(--accent-2);font-weight:500}
  :root[data-theme="light"] .dlg.has-new .dlg-time{color:var(--accent)}
}
.dlg.fresh{animation:v5fresh 1.8s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.ubadge,.dlg.fresh{animation:none!important}}

/* фильтр по тегам в списке диалогов */
.tagf{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 0}
.tagf::-webkit-scrollbar{display:none}
.tf{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;font-size:12px;font-weight:550;color:var(--txt-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),color .2s var(--ease-out)}
.tf i{width:7px;height:7px;border-radius:50%;background:var(--tc)}
.tf b{font-family:var(--f-m);font-weight:500;font-size:10.5px;color:var(--txt-3)}
.tf:hover{background:var(--panel-2)}
.tf.on{background:color-mix(in srgb,var(--tc) 16%,var(--panel));box-shadow:inset 0 0 0 1.5px var(--tc);color:var(--txt)}
.pop-hint{font-size:11px;line-height:1.4;color:var(--txt-3);padding:2px 12px 6px}
.tag-auto{font-style:normal;font-family:var(--f-m);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-left:6px;padding:1px 5px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);vertical-align:middle}