/* Раздел "Команда" - все стили страницы team.html здесь.
*
* Шрифты и величины - копия из index.html, чтобы раздел выглядел частью той
* же панели. Поменял токены там - поменяй и здесь (или вынеси в общий файл).
* Классы раздела названы по смыслу: .staff-card, .chat-*, .approval-*,
* .funnel-*, .task-*, .thread-* / .colleague-*, .plan-*, .memory-*,
* .approach-*, .diary-*, .journal-*, .settings-*, .tg-*. Общие кирпичи
* (.btn, .tag, .field, .panel, .toast) - те же, что в основной панели.
*/
/* ===== Шрифт: лежит у нас, на чужие хосты панель не ходит ===== */
@font-face {
font-family: 'Plex Sans'; font-style: normal; font-weight: 100 700;
font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-cyrillic-wght-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'Plex Sans'; font-style: normal; font-weight: 100 700;
font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face {
font-family: 'Plex Mono'; font-style: normal; font-weight: 400;
font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'Plex Mono'; font-style: normal; font-weight: 400;
font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;
}
@font-face {
font-family: 'Plex Mono'; font-style: normal; font-weight: 500;
font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'Plex Mono'; font-style: normal; font-weight: 500;
font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;
}
/* ===== Величины и цвета (как в index.html) ===== */
:root {
--s1:.25rem; --s2:.4rem; --s3:.6rem; --s4:.9rem; --s5:1.3rem; --s6:1.9rem;
--r1:5px; --r2:8px; --r3:12px;
--ground:#f2f5f7; --surface:#fff; --surface-2:#e9eef2; --surface-3:#dfe6ec;
--ink:#10161d; --ink-2:#39434f; --muted:#55626f;
--line:#dae2e9; --line-2:#c6d1da;
--accent:#0f6b62; --accent-ink:#fff; --accent-soft:#dff0ed;
--ok:#356b34; --ok-soft:#e0eddd;
--warn:#94601a; --warn-soft:#f6ecd7;
--crit:#95302a; --crit-soft:#f7e3e1; --crit-ink:#fff;
--idle-soft:#e9eef2;
--sh1:0 1px 2px rgba(16,22,29,.06);
--sh2:0 4px 12px rgba(16,22,29,.10), 0 1px 3px rgba(16,22,29,.06);
--sh3:0 16px 40px rgba(16,22,29,.18), 0 2px 8px rgba(16,22,29,.10);
--mono:'Plex Mono',ui-monospace,"SF Mono",Consolas,monospace;
--sans:'Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
/* Свои величины раздела */
--chat-owner:var(--accent-soft); /* пузырь руководителя */
--chat-staff:var(--surface-2); /* пузырь сотрудника */
--chat-height:clamp(20rem, 62vh, 44rem);
}
@media (prefers-color-scheme: dark) {
:root {
--ground:#0d1116; --surface:#151b22; --surface-2:#1c242c; --surface-3:#243039;
--ink:#e8eef4; --ink-2:#c3ccd6; --muted:#8b97a5;
--line:#242f39; --line-2:#33414d;
--accent:#59b8ac; --accent-ink:#0b1013; --accent-soft:#17302e;
--ok:#7cb377; --ok-soft:#1a2a19;
--warn:#d69f56; --warn-soft:#2f2617;
--crit:#dd7d73; --crit-soft:#301d1b; --crit-ink:#2a1512;
--idle-soft:#1c242c;
--sh1:0 1px 2px rgba(0,0,0,.4);
--sh2:0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
--sh3:0 18px 44px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4);
}
}
/* ===== Основа ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
font:15px/1.55 var(--sans);font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3{letter-spacing:-.011em}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
[hidden]{display:none !important}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sp{flex:1}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* ===== Шапка ===== */
.bar{display:flex;align-items:center;gap:var(--s3);
padding:var(--s3) var(--s5);background:var(--surface);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
flex-wrap:wrap;box-shadow:var(--sh1)}
.bar-title{font-size:.92rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.55rem;
letter-spacing:.07em;color:var(--ink);text-decoration:none}
.bar-title::before{content:'';width:.62rem;height:.62rem;border-radius:2px;
background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bar-nav{display:flex;gap:.25rem}
.bar-nav a{padding:.3rem .6rem;border-radius:var(--r1);color:var(--muted);text-decoration:none;font-size:.88rem}
.bar-nav a:hover{background:var(--surface-2);color:var(--ink)}
.bar-nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink);font-weight:500}
.wrap{max-width:1200px;margin:0 auto;padding:var(--s5) var(--s4) var(--s6);
display:flex;flex-direction:column;gap:var(--s5);min-width:0}
/* ===== Кнопки, метки, поля (как в основной панели) ===== */
.btn{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r1);
padding:.42rem .8rem;cursor:pointer;white-space:nowrap;font-weight:500;
display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
box-shadow:var(--sh1);transition:background .12s,border-color .12s,transform .06s;
text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.1)}
.btn.danger{color:var(--crit);border-color:var(--crit-soft)}
.btn.danger:hover{background:var(--crit-soft);border-color:var(--crit)}
.btn.ghost{background:none;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.sm{padding:.26rem .58rem;font-size:.85rem}
.tag{display:inline-flex;align-items:center;gap:.35rem;
font:500 .7rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
padding:.3rem .5rem;border-radius:var(--r1);background:var(--idle-soft);color:var(--muted);
white-space:nowrap}
.tag::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none}
.tag.plain::before{display:none}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.crit{background:var(--crit-soft);color:var(--crit)}
.tag.live::before{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;
padding:.05rem .35rem;border-radius:99px;background:var(--warn-soft);color:var(--warn);
font:500 .72rem/1.4 var(--mono)}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label,.field .label{font-size:.82rem;color:var(--muted);font-weight:500}
.field .hint{font-size:.78rem;color:var(--muted);line-height:1.4}
.field input,.field select,.field textarea,.input{
background:var(--ground);border:1px solid var(--line-2);border-radius:var(--r1);
padding:.5rem .6rem;width:100%;min-width:0;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:5.5rem;resize:vertical}
.field input[type="checkbox"]{width:auto}
.input.inline{width:auto;padding:.26rem .5rem;font-size:.85rem}
.field-set{border:0;padding:0;margin:0}
.span-all{grid-column:1/-1}
.check{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.9rem}
.check input{width:1rem;height:1rem;margin:0;accent-color:var(--accent)}
.form-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.form-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
/* Переключатель "работает / выключен" */
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;font-size:.88rem}
.switch input{appearance:none;-webkit-appearance:none;width:2.4rem;height:1.35rem;border-radius:99px;
background:var(--line-2);position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.switch input::after{content:'';position:absolute;top:.17rem;left:.17rem;width:1rem;height:1rem;border-radius:50%;
background:var(--surface);box-shadow:var(--sh1);transition:transform .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(1.05rem)}
.switch input:disabled{opacity:.5;cursor:not-allowed}
/* ===== Панели и таблицы ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
box-shadow:var(--sh1);min-width:0}
.panel > h2,.panel-head{margin:0;padding:.7rem var(--s4);font-size:.93rem;font-weight:600;
border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.panel-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.panel .note{font-size:.8rem;color:var(--muted);margin:0}
.empty{padding:var(--s5) var(--s4);color:var(--muted);font-size:.9rem;text-align:center}
.scroll{overflow-x:auto;min-width:0}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th,.table td{text-align:left;padding:.5rem var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.table th{font:500 .69rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);background:var(--surface-2);white-space:nowrap}
.table tbody tr:last-child td{border-bottom:none}
.table td.num{font-family:var(--mono);white-space:nowrap}
.table td.wrap-text{overflow-wrap:anywhere;min-width:10rem}
/* ===== Сообщения в углу ===== */
.toasts{position:fixed;right:var(--s4);bottom:var(--s4);z-index:80;
display:flex;flex-direction:column;gap:.5rem;max-width:min(24rem,calc(100vw - 2rem))}
.toast{background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--muted);
border-radius:var(--r2);box-shadow:var(--sh3);padding:.6rem .75rem;
font-size:.88rem;display:flex;gap:.5rem;align-items:flex-start;animation:slidein .16s ease-out}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--crit)}
.toast .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.toast .x{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 .1rem;line-height:1}
.toast.out{animation:slideout .16s ease-in forwards}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}}
@keyframes slideout{to{opacity:0;transform:translateX(12px)}}
/* ===== Нет входа ===== */
.auth-needed{max-width:28rem;margin:10vh auto;text-align:center;padding:var(--s6) var(--s5)}
.auth-needed h2{margin:0 0 .5rem;font-size:1.05rem}
/* ===== Список сотрудников ===== */
.team-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.team-head h2{margin:0;font-size:1.2rem}
.staff-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.staff-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
box-shadow:var(--sh1);color:var(--ink);text-decoration:none;
transition:border-color .12s,box-shadow .12s;min-width:0}
.staff-card:hover{border-color:var(--muted);box-shadow:var(--sh2)}
.staff-card-top{display:flex;gap:var(--s3);align-items:flex-start}
.staff-card-name{font-size:1.1rem;font-weight:600;margin:0}
.staff-card-role{font-size:.85rem;color:var(--muted)}
.staff-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.staff-card-foot{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
/* Прогресс плана: "подключились 1 из 3" и полоска */
.progress{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.progress-label{display:flex;gap:.4rem;font-size:.8rem;color:var(--muted);justify-content:space-between}
.progress-value{font:500 .9rem/1.2 var(--mono);color:var(--ink)}
.meter{height:4px;border-radius:2px;background:var(--idle-soft);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);transition:width .3s}
.meter.full i{background:var(--ok)}
.meter.over i{background:var(--warn)}
.stat{display:flex;flex-direction:column;gap:.1rem}
.stat b{font:500 1.35rem/1.1 var(--mono)}
.stat span{font-size:.78rem;color:var(--muted)}
.staff-card-tasks{color:var(--ink-2)}
.team-tasks-link{align-self:center}
/* ===== Задачи: доска команды и вкладка сотрудника ===== */
.team-tasks{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.task-form .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.task-form-title{grid-column:span 2}
.task-form-note{font-size:.82rem}
.task-board{display:grid;grid-template-columns:repeat(6,minmax(11rem,1fr));gap:var(--s3);
overflow-x:auto;padding-bottom:var(--s2);min-width:0}
.task-col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2);
display:flex;flex-direction:column;min-width:0;min-height:6rem}
.task-col[data-status="done"],.task-col[data-status="declined"],.task-col[data-status="cancelled"]{opacity:.9}
.task-col-head{margin:0;padding:.5rem .65rem;font:500 .69rem/1.2 var(--mono);letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);display:flex;gap:.4rem;align-items:center;
border-bottom:1px solid var(--line)}
.task-col-head .count{margin-left:auto;background:var(--surface);border-radius:99px;padding:.15rem .4rem}
.task-stack{display:flex;flex-direction:column;gap:.45rem;padding:.45rem;min-width:0}
.task-board .task-status{display:none} /* на доске статус - это колонка */
.task-card{display:flex;flex-direction:column;gap:.3rem;background:var(--surface);border:1px solid var(--line-2);
border-radius:var(--r1);padding:.5rem .6rem;box-shadow:var(--sh1);min-width:0}
.task-card[data-status="new"]{border-left:3px solid var(--warn)}
.task-card[data-status="blocked"]{border-left:3px solid var(--crit)}
.task-head{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap;min-width:0}
.task-title{font-size:.9rem;overflow-wrap:anywhere;min-width:0}
.task-who{font-size:.8rem;color:var(--ink-2);overflow-wrap:anywhere}
.task-details,.task-result{margin:0;font-size:.84rem;white-space:pre-wrap;overflow-wrap:anywhere}
.task-result-label{color:var(--muted)}
.task-foot{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font:400 .74rem/1.3 var(--mono);color:var(--muted)}
.task-due.overdue{color:var(--crit);font-weight:500}
.task-manage > summary{cursor:pointer;font-size:.8rem;color:var(--accent);width:max-content}
.task-manage-body{display:flex;flex-direction:column;gap:.45rem;padding-top:.45rem}
.task-manage-body .form-actions{gap:var(--s2)}
.tasks-group{display:flex;flex-direction:column;gap:var(--s3)}
.tasks-group > h3{margin:0;font-size:.95rem;display:flex;gap:.5rem;align-items:center}
.task-list{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.task-list > .empty{grid-column:1/-1;margin:0}
.staff-tasks-board{font-size:.85rem;font-weight:400}
/* ===== Карточка сотрудника: шапка ===== */
.staff-head{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh1)}
.staff-head-row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;min-width:0}
.staff-back{font-size:.85rem}
.staff-name{margin:0;font-size:1.2rem;font-weight:600}
.staff-role{color:var(--muted);font-size:.9rem}
.staff-budget{display:flex;flex-direction:column;gap:.2rem;min-width:10rem;flex:0 1 14rem}
.staff-head-progress{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);flex:1 1 18rem;min-width:0}
.staff-budget-label{font-size:.8rem;color:var(--muted)}
.staff-warn{margin:0;padding:.5rem .7rem;border-radius:var(--r1);background:var(--warn-soft);color:var(--warn);font-size:.85rem;overflow-wrap:anywhere}
.staff-warn.crit{background:var(--crit-soft);color:var(--crit)}
/* Настроение из цифр и серия выполненных планов */
.staff-mood-row{align-items:flex-start}
.staff-mood-row:not(:has(> :not([hidden]))){display:none}
.staff-mood{font-size:.85rem;color:var(--ink-2);min-width:0;max-width:100%}
.staff-mood > summary{cursor:pointer;overflow-wrap:anywhere}
.staff-mood-why{margin:.3rem 0 0;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.staff-streak{font-size:.82rem;color:var(--ok);font-weight:500}
/* Вкладки: на узком экране листаются внутри своей полосы */
.staff-tabs{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:thin;
border-bottom:1px solid var(--line);padding-bottom:1px;min-width:0}
.staff-tabs button{background:none;border:0;border-bottom:2px solid transparent;
padding:.55rem .75rem;cursor:pointer;color:var(--muted);white-space:nowrap;
display:inline-flex;gap:.35rem;align-items:center;font-weight:500}
.staff-tabs button:hover{color:var(--ink)}
.staff-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.pane{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.pane-toolbar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.pane-toolbar .input{width:auto;flex:1 1 12rem}
/* ===== Чат ===== */
.chat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r2);box-shadow:var(--sh1);min-width:0;overflow:hidden}
.chat-off{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin:0;
padding:.6rem var(--s4);background:var(--warn-soft);color:var(--warn);font-size:.9rem;
border-bottom:1px solid var(--line)}
.chat-off .sp{min-width:0}
.chat-budget{padding:.4rem var(--s4);font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line);
display:flex;gap:var(--s3);flex-wrap:wrap}
.chat-log{height:var(--chat-height);overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;
gap:.55rem;background:var(--ground)}
.chat-empty{margin:auto;color:var(--muted);font-size:.9rem;text-align:center}
.msg{max-width:min(78%,40rem);padding:.5rem .7rem .35rem;border-radius:var(--r3);
display:flex;flex-direction:column;gap:.15rem;box-shadow:var(--sh1);min-width:0}
.msg.from-owner{align-self:flex-end;background:var(--chat-owner);border-bottom-right-radius:var(--r1)}
.msg.from-staff{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:var(--r1)}
.msg.system{border-color:var(--warn);background:var(--warn-soft)}
/* Переписка с контактом: наша сторона справа, собеседник слева */
.msg.ours{align-self:flex-end;background:var(--chat-owner);border-bottom-right-radius:var(--r1)}
.msg.theirs{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:var(--r1)}
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.93rem}
.msg-time{align-self:flex-end;font:400 .7rem/1.2 var(--mono);color:var(--muted)}
.chat-typing{padding:.3rem var(--s4);font-size:.82rem;color:var(--muted);font-style:italic;min-height:1.6rem;
background:var(--ground)}
.chat-typing:not(:empty){animation:pulse 1.6s ease-in-out infinite}
.chat-form{display:flex;gap:var(--s3);align-items:flex-end;padding:var(--s3) var(--s4);
border-top:1px solid var(--line);background:var(--surface)}
.chat-input{flex:1;min-width:0;resize:none;min-height:2.6rem;max-height:12rem;line-height:1.45;
background:var(--ground);border:1px solid var(--line-2);border-radius:var(--r2);padding:.55rem .7rem}
.chat-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-hint{padding:0 var(--s4) var(--s3);font-size:.75rem;color:var(--muted);background:var(--surface)}
/* ===== Согласования ===== */
.approvals-group{display:flex;flex-direction:column;gap:var(--s3)}
.approvals-group > h3{margin:0;font-size:.95rem;display:flex;gap:.5rem;align-items:center}
.approval{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh1);
display:flex;flex-direction:column;min-width:0}
.approval[data-status="pending"]{border-left:3px solid var(--warn)}
.approval-head{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:.6rem var(--s4);
border-bottom:1px solid var(--line)}
.approval-kind{font-weight:600}
.approval-at{font-size:.8rem;color:var(--muted)}
.approval-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.approval-meta{display:grid;grid-template-columns:max-content 1fr;gap:.25rem var(--s4);margin:0;font-size:.9rem}
.approval-meta dt{color:var(--muted)}
.approval-meta dd{margin:0;overflow-wrap:anywhere;min-width:0}
.approval-text{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ground);border:1px solid var(--line);
border-radius:var(--r1);padding:.55rem .7rem;margin:0;font-size:.92rem}
.approval-edit{min-height:7rem;font:inherit;line-height:1.5}
.approval-targets{display:flex;gap:var(--s4);flex-wrap:wrap}
.approval-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;padding:.6rem var(--s4);
border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r2) var(--r2)}
.approval-actions .input{flex:1 1 14rem;width:auto}
.approval-send{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;font-size:.88rem}
.approval-note{font-size:.85rem;color:var(--ink-2);margin:0}
/* Ушло само по уровню самостоятельности - без руководителя */
.approval[data-auto]{border-left:3px solid var(--accent)}
.approval-auto{margin:0;font-size:.85rem;color:var(--accent);font-weight:500}
.approval-auto-tag{background:var(--accent-soft);color:var(--accent)}
/* ===== Коллеги: переписка между сотрудниками, только чтение ===== */
.colleagues-note{margin:0;font-size:.85rem}
.colleagues{display:grid;gap:var(--s4);grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);align-items:start}
.thread-list{list-style:none;margin:0;padding:0}
.thread-list > li{border-bottom:1px solid var(--line)}
.thread-list > li:last-child{border-bottom:none}
.thread-item{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;background:none;border:0;
padding:.55rem var(--s4);cursor:pointer;color:inherit;min-width:0}
.thread-item:hover{background:var(--surface-2)}
.thread-item[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.thread-name{font-weight:600;overflow-wrap:anywhere}
.thread-role{font-size:.8rem;color:var(--muted)}
.thread-count{font:400 .74rem/1.3 var(--mono);color:var(--muted)}
.colleague-thread > h2{overflow-wrap:anywhere}
.colleague-log{max-height:var(--chat-height);min-height:8rem;overflow-y:auto;padding:var(--s4);display:flex;
flex-direction:column;gap:.55rem;background:var(--ground);border-radius:0 0 var(--r2) var(--r2)}
.msg-author{font-size:.74rem;font-weight:600;color:var(--muted)}
/* ===== Воронка ===== */
.funnel-board{display:grid;grid-template-columns:repeat(7,minmax(9rem,1fr));gap:var(--s3);
overflow-x:auto;padding-bottom:var(--s2);min-width:0}
.funnel-col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2);
display:flex;flex-direction:column;min-width:0;min-height:6rem}
.funnel-col[data-stage="lost"]{opacity:.85}
.funnel-col-head{margin:0;padding:.5rem .65rem;font:500 .69rem/1 var(--mono);letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);display:flex;gap:.4rem;align-items:center;
border-bottom:1px solid var(--line)}
.funnel-col-head .count{margin-left:auto;background:var(--surface);border-radius:99px;padding:.15rem .4rem}
.funnel-stack{display:flex;flex-direction:column;gap:.45rem;padding:.45rem;min-width:0}
.contact-card{display:flex;flex-direction:column;gap:.2rem;text-align:left;width:100%;
background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r1);
padding:.5rem .6rem;cursor:pointer;box-shadow:var(--sh1);min-width:0}
.contact-card:hover{border-color:var(--muted)}
.contact-card-name{font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.contact-card-where{font:400 .74rem/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.contact-card-next{font-size:.78rem;color:var(--ink-2);overflow-wrap:anywhere}
.contact-card-next.due{color:var(--crit)}
.contact-add{display:flex;flex-direction:column;gap:var(--s4)}
.contact-promo-stats{font:400 .85rem/1.4 var(--mono);color:var(--ink-2)}
/* Карточка контакта - окно поверх доски */
.sheet{border:1px solid var(--line);border-radius:var(--r3);padding:0;width:min(46rem,calc(100vw - 1.5rem));
max-height:min(92vh,60rem);background:var(--surface);color:var(--ink);box-shadow:var(--sh3)}
.sheet::backdrop{background:rgba(8,11,15,.55)}
.sheet-head{display:flex;gap:var(--s3);align-items:center;padding:.75rem var(--s4);border-bottom:1px solid var(--line);
position:sticky;top:0;background:var(--surface);z-index:1}
.sheet-head h3{margin:0;font-size:1rem;overflow-wrap:anywhere;min-width:0}
.sheet-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.sheet-section{display:flex;flex-direction:column;gap:var(--s3)}
.sheet-section > h4{margin:0;font-size:.85rem;color:var(--muted);font-weight:600}
.contact-facts{display:grid;grid-template-columns:max-content 1fr;gap:.25rem var(--s4);margin:0;font-size:.9rem}
.contact-facts dt{color:var(--muted)}
.contact-facts dd{margin:0;overflow-wrap:anywhere;min-width:0}
.contact-edit{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.stage-form{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-end}
.stage-form .field{flex:1 1 10rem}
.thread{display:flex;flex-direction:column;gap:.45rem}
/* ===== План и баллы ===== */
.plan-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.plan-targets{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));align-items:end}
.plan-paid{font-size:.72rem;color:var(--accent);font-weight:600}
.results-table td.claimed{color:var(--muted)}
.points-summary{display:flex;gap:var(--s5);flex-wrap:wrap}
.points-form{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--r2)}
.points-plus{color:var(--ok)}
.points-minus{color:var(--crit)}
.rules{white-space:pre-line;font-size:.88rem;color:var(--ink-2);margin:0;overflow-wrap:anywhere}
/* ===== Отчёты ===== */
.reports-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.report-item{display:flex;gap:var(--s3);align-items:center;padding:.55rem var(--s4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.report-item:last-child{border-bottom:none}
.report-item a{font-family:var(--mono);font-size:.9rem;overflow-wrap:anywhere}
/* ===== Опыт ===== */
.insight-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start}
.approach-name{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.approach-ref{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.approach-rate{font-weight:500}
.diary-list{list-style:none;margin:0;padding:0;max-height:28rem;overflow-y:auto}
.diary-item{display:flex;gap:var(--s3);align-items:baseline;padding:.6rem var(--s4);border-bottom:1px solid var(--line)}
.diary-item:last-child{border-bottom:none}
.diary-date{flex:none;font:500 .76rem/1.4 var(--mono);color:var(--muted)}
.diary-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;min-width:0}
.memory-groups{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.memory-list{list-style:none;margin:0;padding:0}
.memory-item{display:flex;flex-direction:column;gap:.3rem;padding:.6rem var(--s4);border-bottom:1px solid var(--line)}
.memory-item:last-child{border-bottom:none}
.memory-item.inactive .memory-text{color:var(--muted);text-decoration:line-through}
.memory-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem}
.memory-foot{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.memory-due.overdue{color:var(--crit);font-weight:500}
/* ===== Журнал ===== */
.journal-input,.journal-result{font:400 .78rem/1.4 var(--mono);overflow-wrap:anywhere;white-space:pre-wrap}
/* ===== Настройки ===== */
.settings-days{display:flex;gap:.6rem;flex-wrap:wrap}
.access-list{list-style:none;margin:0;padding:0}
.access-item{display:flex;gap:var(--s3);align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.access-item:last-child{border-bottom:none}
/* Telegram сотрудника */
.tg-text{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.tg-qr{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.tg-qr-img{width:220px;height:220px;max-width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--r2);padding:.4rem}
.tg-qr-help{flex:1 1 14rem;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.tg-qr-steps{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.tg-password{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--r2);max-width:32rem}
.tg-wrong{color:var(--crit)}
.tg-settings{display:flex;flex-direction:column;gap:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
/* Окно "точно?" */
.ask-dialog{border:1px solid var(--line);border-radius:var(--r3);padding:0;width:min(26rem,calc(100vw - 2rem));
background:var(--surface);color:var(--ink);box-shadow:var(--sh3)}
.ask-dialog::backdrop{background:rgba(8,11,15,.55)}
.ask-body{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.ask-title{margin:0;font-size:1rem}
.ask-text{margin:0;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.ask-foot{justify-content:flex-end}
/* ===== Узкий экран ===== */
@media (max-width:760px){
.wrap{padding:var(--s4) var(--s3) var(--s5);gap:var(--s4)}
.bar{padding:var(--s3) var(--s4)}
.msg{max-width:88%}
.table th,.table td{padding:.45rem .6rem}
/* 7 колонок воронки на телефоне - столбиком, пустые сжимаются */
.funnel-board{grid-template-columns:1fr;overflow-x:visible}
.funnel-col{min-height:0}
/* Доска задач - тоже столбиком; переписка с коллегой - под списком разговоров */
.task-board{grid-template-columns:1fr;overflow-x:visible}
.task-col{min-height:0}
.task-form-title{grid-column:auto}
.colleagues{grid-template-columns:1fr}
.tg-qr-img{width:180px;height:180px}
/* Таблицы - карточками: подпись колонки слева от значения */
.table.stacked,.table.stacked tbody,.table.stacked tr,.table.stacked td{display:block;width:100%}
.table.stacked thead{display:none}
.table.stacked tr{border-bottom:1px solid var(--line);padding:.5rem var(--s4)}
.table.stacked tr:last-child{border-bottom:none}
.table.stacked td{border:none;padding:.15rem 0;display:flex;gap:.6rem;min-width:0}
.table.stacked td::before{content:attr(data-label);flex:none;width:6.5rem;
font:500 .66rem/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.table.stacked td > *{min-width:0}
.approval-meta,.contact-facts{grid-template-columns:1fr}
.approval-meta dt,.contact-facts dt{margin-top:.3rem}
}
@media (max-width:480px){
#whoami{display:none}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}