:root{
/* ТЕМА DARK = прототип «Інтегрований хаб»: графіт + неоновий блакитний */
--bg:#151A23; --panel:#1A202C; --raised:#222A38; --raised-2:#2C3546;
--line:#2a3444; --line-soft:#202936; --line-2:#38BDF8;
--txt:#E7ECF3; --muted:#8A94A6; --muted-2:#9aa5b8;
--ember:#38BDF8; --ember-deep:#0EA5E9; --ember-soft:rgba(56,189,248,.16);
--ok:#34D399; --busy:#F0A030; --away:#5A6577; --danger:#F87171;
--rail:#12161E; --bg-2:#12161E; --scroll:#2C3546; --scroll-h:#3A4557;
--login-grad:#1d2432; --dash:#38BDF8; --conv-1:#151A23; --conv-2:#12161e;
--mine-1:#0284C7; --mine-2:#0EA5E9; --mine-line:#38BDF8; --mine-txt:#ffffff;
--r:16px; --r-sm:11px;
--shadow:0 12px 40px rgba(0,0,0,.45);
--brand-font:'Onest','Oswald',system-ui,sans-serif;
--ui-font:'Golos Text','Onest','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
}
/* ---------- Світла тема = «Світлий офіс» (референс 1b) ---------- */
html[data-theme="light"]{
--bg:#eef1f5; --panel:#ffffff; --raised:#f2f5f9; --raised-2:#e7effa;
--line:#e3e7ee; --line-soft:#e9edf3; --line-2:#c7ddf5;
--txt:#1c2430; --muted:#5c6675; --muted-2:#8b95a5;
--ember:#2563a8; --ember-deep:#1d5290; --ember-soft:#e7effa;
--ok:#1e8e5a; --busy:#e8913f; --away:#8b95a5; --danger:#d4553f;
--rail:#ffffff; --bg-2:#f6f8fb; --scroll:#d3dbe5; --scroll-h:#b9c5d4;
--login-grad:#dde5ee; --dash:#c7ddf5; --conv-1:#eef1f5; --conv-2:#e9edf3;
--mine-1:#dcebfb; --mine-2:#dcebfb; --mine-line:#c7ddf5; --mine-txt:#1c2430;
--shadow:0 8px 28px rgba(28,36,48,.10);
--ui-font:'Golos Text','Onest','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
--brand-font:'Onest','Oswald',system-ui,sans-serif;
}
/* light: бульбашки як у референсі — чужі білі з рамкою, свої блакитні з темним текстом */
html[data-theme="light"] .msg:not(.mine):not(.system) .bubble{background:#ffffff;border:1px solid #e3e7ee !important;box-shadow:0 1px 2px rgba(28,36,48,.04) !important}
html[data-theme="light"] .msg.mine .ticks{color:#7392b5} html[data-theme="light"] .msg.mine .ticks.read{color:#2563a8}
html[data-theme="light"] .msg.mine .edited{color:#7392b5}
html[data-theme="light"] .who{color:#2f7d5a;font-weight:600}
html[data-theme="light"] .send{box-shadow:0 2px 8px rgba(37,99,168,.25) !important}
html[data-theme="light"] .composer{background:#ffffff !important;border:1px solid #e3e7ee !important;box-shadow:0 1px 3px rgba(28,36,48,.05)}
html[data-theme="light"] .composer textarea{background:transparent !important}
html[data-theme="light"] .day-sep{background:#ffffff;border:1px solid #e3e7ee;color:#8b95a5}
/* ---------- Унікальна тема (knight: золото по темному) ---------- */
html[data-theme="unique"]{
--bg:#0B0A07; --panel:#171309; --raised:#241D0E; --raised-2:#2f2613;
--line:#2a2210; --line-soft:#1d1808; --line-2:#3A2F12;
--txt:#F3E9D2; --muted:#8E7F58; --muted-2:#a08a5a;
--ember:#D9A93C; --ember-deep:#bf922f; --ember-soft:rgba(217,169,60,.16);
--ok:#9DC463; --busy:#E8C26A; --away:#8E7F58; --danger:#e07a4a;
--rail:#0a0905; --bg-2:#0c0a06; --scroll:#2f2613; --scroll-h:#3f3318;
--login-grad:#1c1608; --dash:#3A2F12; --conv-1:#100c06; --conv-2:#0b0a07;
--mine-1:#D9A93C; --mine-2:#bf922f; --mine-line:#e6c46a; --mine-txt:#1a1206;
--shadow:0 10px 34px rgba(0,0,0,.55);
--ui-font:Georgia,'Times New Roman','PT Serif','Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',serif;
--brand-font:Georgia,'Times New Roman','PT Serif',serif;
}
/* лицарська тема: бренд/заголовки серифом з трекінгом (як у референсі index5) */
html[data-theme="unique"] .name{letter-spacing:1.5px}
html[data-theme="unique"] h2,
html[data-theme="unique"] h3,
html[data-theme="unique"] .conv-title,
html[data-theme="unique"] .tc-title{font-family:var(--ui-font)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;width:100%;max-width:100%;overflow-x:hidden}
body{
background:var(--bg); color:var(--txt); font-family:var(--ui-font);
font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
overflow:hidden;
}
button{font-family:inherit; cursor:pointer}
input,textarea{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
/* ---------- Вхід ---------- */
.login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
background:radial-gradient(1100px 600px at 70% -10%, var(--login-grad) 0%, var(--bg) 60%)}
.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
border-radius:16px;padding:34px 28px 30px;box-shadow:var(--shadow)}
.mark{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.mark svg{filter:drop-shadow(0 0 10px rgba(255,106,43,.35))}
.mark .name{font-family:var(--brand-font);font-weight:700;font-size:30px;letter-spacing:3px;line-height:1}
.mark .name b{color:var(--ember)}
.mark .sub{font-size:11px;letter-spacing:3px;color:var(--muted-2);text-transform:uppercase;margin-top:3px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 2px;letter-spacing:.3px}
.field input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:var(--r-sm);padding:12px 13px;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-soft)}
.btn-primary{width:100%;margin-top:8px;background:var(--ember);color:#1a1206;border:none;
border-radius:var(--r-sm);padding:13px;font-weight:600;font-size:15px;letter-spacing:.3px;
transition:background .15s,transform .05s}
.btn-primary:hover{background:var(--ember-deep)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:default}
.login-err{min-height:18px;color:var(--danger);font-size:13px;margin:10px 2px 0;text-align:center}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
/* врахування «чілки»/Dynamic Island у режимі встановленого застосунку (PWA) */
@media (display-mode:standalone){
.side-head,.conv-head,.tasks-head,.disk-head,.cal-head{padding-top:calc(13px + env(safe-area-inset-top))}
.rail{padding-top:calc(8px + env(safe-area-inset-top))}
}
.login-hint{margin-top:18px;text-align:center;color:var(--muted-2);font-size:12px}
/* показ/приховання пароля «оком» */
.pass-wrap{position:relative}
.pass-wrap input{width:100%;padding-right:42px}
.pass-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
font-size:17px;line-height:1;opacity:.55;padding:6px 8px;border-radius:8px}
.pass-eye:hover{opacity:1}
/* ---------- Каркас застосунку ---------- */
.app{display:none;height:100%;grid-template-columns:340px 1fr}
.app.ready{display:grid}
/* Бічна панель */
.sidebar{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--panel);border-right:1px solid var(--line)}
.side-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line-soft)}
.side-head .name{font-family:var(--brand-font);font-weight:700;font-size:21px;letter-spacing:2.5px;line-height:1}
.side-head .name b{color:var(--ember)}
.side-head .spacer{flex:1}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);
background:var(--raised);color:var(--muted);transition:.15s}
.iconbtn:hover{color:var(--txt);border-color:var(--line-2);background:var(--raised-2)}
.me-chip{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.me-chip .nm{font-size:13px;font-weight:600;line-height:1.1}
.me-chip .rl{font-size:11px;color:var(--muted)}
.search{padding:12px 14px 8px}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:9px;padding:10px 12px 10px 34px;font-size:14px;outline:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%238b93a3' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:11px 50%}
.search input:focus{border-color:var(--line-2)}
.search-wrap{position:relative}
.search-wrap input{padding-right:30px}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--muted-2);font-size:19px;line-height:1;cursor:pointer;padding:0 4px}
.search-clear:hover{color:var(--txt)}
.note-sec{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.4px;margin:6px 2px 2px}
.ni-title{font-weight:600;font-size:13.5px;margin-bottom:2px}
.ni-acts{display:flex;gap:10px;flex:none;align-items:flex-start}
.ni-edit{color:var(--muted);font-size:12px;cursor:pointer}
.ni-edit:hover{color:var(--accent)}
/* адмін: права диска */
.dp-wrap{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.dp-tree{border:1px solid var(--line-soft);border-radius:10px;padding:6px 0;max-height:70vh;overflow:auto}
.dp-node{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:13px;cursor:pointer;border-left:2px solid transparent}
.dp-node:hover{background:var(--bg)}
.dp-node.sel{background:var(--bg);border-left-color:var(--accent)}
.dp-node span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-detail{border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;max-height:70vh;overflow:auto}
@media(max-width:900px){ .dp-wrap{grid-template-columns:1fr} .dp-tree{max-height:34vh} }
/* кроки: розширені поля та деталі */
.step-box{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.step-extra{display:flex;gap:6px;flex-wrap:wrap}
.step-extra input,.step-extra select{flex:1;min-width:140px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit}
.stp-det{border-left:2px solid var(--line-soft);margin:2px 0 8px 14px;padding:6px 10px;font-size:13px}
.stp-det .sd-row{display:flex;gap:8px;padding:2px 0}
.stp-det .sd-row span{color:var(--muted-2);min-width:130px;flex:none;font-size:12px}
.stp-det .sd-row b{font-weight:500;word-break:break-word}
.newchat{margin:0 14px 12px;display:flex;align-items:center;justify-content:center;gap:8px;
background:transparent;border:1px dashed var(--dash);color:var(--muted);border-radius:9px;padding:10px;
font-size:13px;font-weight:500;transition:.15s}
.newchat:hover{color:var(--ember);border-color:var(--ember)}
.chatlist{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}
.chat-item{display:flex;gap:11px;align-items:center;padding:10px;border-radius:11px;cursor:pointer;
position:relative;transition:background .12s}
.chat-item:hover{background:var(--raised)}
.chat-item.active{background:var(--raised)}
.chat-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--ember)}
/* aspect-ratio тримає квадрат навіть у тісному рядку — інакше при стисканні фото
перетворювалося на овал. Тонка рамка й м'яка тінь відділяють світле фото від
світлого тла: без них портрет на білому просто зливався з карткою. */
/* Кільце робимо outline'ом усередину рамки: box-shadow з розмиттям і зсувом на 1px
давав нерівний ореол, і на круглому фото це читалося як перекошене «яйце».
outline не розмивається, не зсувається і не може змінити форму елемента. */
.avatar{width:44px;height:44px;aspect-ratio:1;border-radius:12px;flex:none;display:grid;place-items:center;
overflow:hidden;font-weight:600;font-size:15px;color:#0e1014;letter-spacing:.5px;
outline:1px solid var(--avatar-ring,rgba(15,23,42,.12));outline-offset:-1px}
/* фото не має вилазити за коло: обрізаємо контейнером і фіксуємо саме зображення */
.avatar > img{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;
object-fit:cover;object-position:center;display:block;border-radius:inherit}
.avatar.group{background:linear-gradient(135deg,#3a414d,#2a2f38);color:var(--ember)}
.ci-main{flex:1;min-width:0}
.ci-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ci-title{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-time{font-size:11px;color:var(--muted-2);flex:none}
.ci-last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ember);color:#1a1206;
font-size:11px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:2px}
/* Розмова */
.conversation{display:flex;flex-direction:column;min-height:0;min-width:0;background:
linear-gradient(180deg,var(--conv-1) 0%,var(--conv-2) 100%)}
.conv-head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);
background:var(--panel);min-height:64px}
.back{display:none;width:34px;height:34px;place-items:center;border-radius:8px;border:none;background:transparent;color:var(--txt)}
.conv-id{flex:1;min-width:0}
.conv-title{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta{font-size:12px;color:var(--muted);height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta .typing{color:var(--ember)}
.messages{flex:1;min-height:0;overflow-y:auto;padding:22px 18px 10px;display:flex;flex-direction:column;gap:3px}
.day-sep{align-self:center;font-size:11px;color:var(--muted-2);background:var(--raised);
padding:3px 12px;border-radius:20px;margin:12px 0 8px;letter-spacing:.4px}
.msg{max-width:min(640px,76%);display:flex;flex-direction:column;margin-top:9px}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg .who{font-size:12px;color:var(--ember);font-weight:600;margin:0 0 3px 12px}
.bubble{padding:9px 13px 8px;border-radius:14px;background:var(--raised);border:1px solid var(--line-soft);
word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;position:relative}
.msg.mine .bubble{background:linear-gradient(135deg,var(--mine-1),var(--mine-2));border-color:var(--mine-line);color:var(--mine-txt)}
.msg .bubble .time{font-size:10px;color:var(--muted-2);float:right;margin:5px 0 0 12px;position:relative;top:3px}
.msg.mine .bubble .time{color:#f3c4ad}
.msg.system{align-self:center;max-width:80%}
.msg.system .bubble{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:13px;text-align:center}
.grp .msg:not(.mine) .who{display:block}
.msg .who{display:none}
/* поле введення */
.composer{display:flex;gap:10px;align-items:flex-end;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
border-top:1px solid var(--line);background:var(--panel)}
.composer textarea{flex:1;resize:none;max-height:140px;min-height:44px;background:var(--bg);
border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:11px 14px;font-size:15px;
line-height:1.4;outline:none;transition:border-color .15s,box-shadow .15s}
.composer textarea:focus{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-soft)}
.send{width:44px;height:44px;flex:none;border:none;border-radius:12px;background:var(--ember);color:#1a1206;
display:grid;place-items:center;transition:background .15s,transform .05s}
.send:hover{background:var(--ember-deep)}
.send:active{transform:translateY(1px)}
.send:disabled{opacity:.45;cursor:default}
/* порожній стан */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:30px}
.empty svg{opacity:.5;filter:drop-shadow(0 0 14px rgba(255,106,43,.25))}
.empty h3{font-family:var(--brand-font);font-weight:600;letter-spacing:2px;font-size:20px;margin:0;color:var(--muted)}
.empty p{color:var(--muted-2);font-size:13px;margin:0;max-width:280px}
/* модалка нового чату */
.modal{position:fixed;inset:0;background:rgba(8,9,12,.6);display:none;align-items:center;justify-content:center;
padding:20px;z-index:40;backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal-card{width:100%;max-width:440px;max-height:86vh;display:flex;flex-direction:column;
background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{margin:0;font-size:17px;font-weight:600}
.modal-body{padding:16px 20px;overflow-y:auto}
.seg{display:flex;gap:8px;margin-bottom:14px}
.seg button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:13px;font-weight:500;transition:.15s}
.seg button.on{border-color:var(--ember);color:var(--ember);background:var(--ember-soft)}
.modal-body input.title{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:9px;padding:11px 13px;font-size:14px;outline:none;margin-bottom:14px}
.modal-body input.title:focus{border-color:var(--ember)}
.ulist{display:flex;flex-direction:column;gap:4px}
.uitem{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;cursor:pointer}
.uitem:hover{background:var(--raised)}
.uitem .nm{flex:1;font-size:14px}
.uitem .rl{font-size:11px;color:var(--muted)}
.check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;color:#1a1206}
.uitem.sel .check{background:var(--ember);border-color:var(--ember)}
.uitem.sel .check svg{display:block}
.check svg{display:none}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end}
.btn-ghost{padding:10px 16px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px}
.btn-ghost:hover{color:var(--txt);border-color:var(--line-2)}
.btn-go{padding:10px 18px;border-radius:9px;border:none;background:var(--ember);color:#1a1206;font-weight:600;font-size:14px}
.btn-go:disabled{opacity:.5;cursor:default}
/* статус-крапка */
.dot{width:9px;height:9px;border-radius:50%;flex:none;border:2px solid var(--panel)}
.dot.online{background:var(--ok)} .dot.busy{background:var(--busy)} .dot.away{background:var(--busy)} .dot.offline{background:var(--muted-2)}
.dot.vacation{background:#7aa7e0} .dot.offline{background:var(--away)}
.av-wrap{position:relative}
.av-wrap .dot{position:absolute;right:-1px;bottom:-1px}
/* тост */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--raised-2);border:1px solid var(--line);color:var(--txt);padding:11px 18px;border-radius:10px;
font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.skeleton{padding:40px 20px;text-align:center;color:var(--muted-2);font-size:13px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg{animation:pop .18s ease both}
.typing-dots span{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ember);margin-left:2px;animation:bl 1s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion: reduce){
*{animation:none!important;transition:none!important}
}
/* ---------- Мобільний ---------- */
@media (max-width:768px){
.app.ready{grid-template-columns:1fr}
.sidebar{grid-column:1}
.conversation{display:none}
.app.show-conv .sidebar{display:none}
.app.show-conv .conversation{display:flex;grid-column:1}
.back{display:grid}
.msg{max-width:86%}
}
/* ---------- Етап 2: реакції / дії / пін / пошук ---------- */
.conversation{position:relative}
.msg{position:relative}
.msg-actions{position:absolute;top:-13px;display:flex;gap:2px;background:var(--raised-2);border:1px solid var(--line);
border-radius:9px;padding:2px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6;box-shadow:var(--shadow)}
.msg:hover .msg-actions,.msg.actions-open .msg-actions{opacity:1;pointer-events:auto}
.msg:not(.mine) .msg-actions{left:6px}
.msg.mine .msg-actions{right:6px}
/* цитата (відповідь) усередині повідомлення */
.msg-reply{border-left:3px solid var(--ember);background:rgba(255,255,255,.06);border-radius:6px;
padding:4px 8px;margin:0 0 5px;cursor:pointer;max-width:100%}
.msg.mine .msg-reply{background:rgba(0,0,0,.16)}
.msg-reply .mr-author{font-size:12px;font-weight:600;color:var(--ember);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-reply .mr-body{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.mine .msg-reply .mr-body{color:rgba(255,255,255,.75)}
.msg.hl .bubble{animation:msghl 1.4s ease}
@keyframes msghl{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--ember-soft)}}
/* панель «Відповідь» над полем вводу */
.reply-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);
background:var(--panel)}
.reply-bar .rb-main{flex:1;min-width:0;border-left:3px solid var(--ember);padding-left:9px}
.reply-bar .rb-author{font-size:12px;font-weight:600;color:var(--ember)}
.reply-bar .rb-body{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* контекстне меню повідомлення (правий клік / довге натискання) */
.bubble{-webkit-touch-callout:none}
.msg-menu{position:fixed;z-index:60;background:var(--raised-2);border:1px solid var(--line);border-radius:12px;
padding:5px;display:none;flex-direction:column;min-width:178px;box-shadow:var(--shadow)}
.msg-menu.open{display:flex}
.msg-menu button{text-align:left;border:none;background:transparent;color:var(--txt);
padding:11px 13px;border-radius:8px;font-size:14.5px;cursor:pointer;white-space:nowrap}
.msg-menu button:hover,.msg-menu button:active{background:var(--raised)}
.msg-menu button.danger{color:#ff7a6b}
.ticks{font-size:11px;margin-left:4px;color:var(--muted-2);vertical-align:baseline}
.ticks.read{color:#5fd0ff}
.msg.mine .ticks{color:rgba(255,255,255,.7)} .msg.mine .ticks.read{color:#0b3a7a;font-weight:700}
.bubble .time .ticks{margin-left:4px;position:static} /* №67: галочки в одному рядку з часом */ /* №67: прочитано — помітно темніше за «доставлено» */
.edited{font-size:10.5px;color:var(--muted-2);margin-left:3px}
.msg.mine .edited{color:rgba(255,255,255,.55)}
.fwd-item{padding:12px 12px;border-radius:9px;cursor:pointer;font-size:14.5px;border-bottom:1px solid var(--line-soft)}
.fwd-item:hover,.fwd-item:active{background:var(--raised)}
.msg-actions button{width:28px;height:25px;display:grid;place-items:center;border:none;background:transparent;
color:var(--muted);border-radius:6px;font-size:13px;line-height:1}
.msg-actions button:hover{background:var(--raised)}
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.msg.mine .reacts{justify-content:flex-end}
.react{display:inline-flex;align-items:center;gap:4px;background:var(--raised);border:1px solid var(--line);
border-radius:20px;padding:1px 8px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.12s;user-select:none}
.react:hover{border-color:var(--line-2)}
.react.mine{background:var(--ember-soft);border-color:var(--ember);color:var(--ember)}
.react .n{font-weight:600}
/* ---- ПОВНИЙ пікер емодзі (emoji-kit: ~1500 гліфів, категорії, тони, прапори) ---- */
:root{
--emoji-font:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",var(--ui-font,system-ui,sans-serif);
}
.emoji-pop{position:fixed;display:none;flex-direction:column;background:var(--raised-2,#22262f);
border:1px solid var(--line,rgba(255,255,255,.09));border-radius:18px;z-index:70;
box-shadow:var(--shadow,0 18px 48px rgba(0,0,0,.45));overflow:hidden}
.emoji-pop.open{display:flex;animation:emojiPop .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes emojiPop{0%{transform:translateY(6px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
/* ---- швидкий ряд ---- */
.emoji-quick{display:flex;align-items:center;gap:2px;padding:6px 8px}
.emoji-quick button{position:relative;width:38px;height:38px;border:none;background:transparent;border-radius:12px;
font-size:23px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
font-family:var(--emoji-font);filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s;
animation:emojiIn .22s cubic-bezier(.34,1.56,.64,1)}
.emoji-quick button:nth-child(2){animation-delay:.03s}
.emoji-quick button:nth-child(3){animation-delay:.06s}
.emoji-quick button:nth-child(4){animation-delay:.09s}
.emoji-quick button:nth-child(5){animation-delay:.12s}
.emoji-quick button:nth-child(6){animation-delay:.15s}
@keyframes emojiIn{0%{transform:scale(.4) translateY(6px);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.emoji-quick button:hover{transform:scale(1.32) translateY(-3px);background:var(--ember-soft,rgba(255,122,47,.14))}
.emoji-quick button:active{transform:scale(1.06)}
.emoji-quick .divider{width:1px;height:24px;background:var(--line,rgba(255,255,255,.09));margin:0 4px;flex:none;align-self:center}
.emoji-quick .more{font-size:20px;color:var(--muted,#8b93a5);font-family:var(--ui-font,inherit);filter:none;animation:none}
.emoji-quick .more:hover{transform:none;background:var(--raised,#1b1e26);color:var(--ember,#ff7a2f)}
/* ---- повний пікер ---- */
/* Пікер обмежений висотою вікна (positionPop ставить max-height), тож усередині
мають стискатися саме ряди емодзі, а не зникати пошук і вкладки категорій. */
.emoji-full{display:none;flex-direction:column;width:344px;min-height:0;flex:1}
.emoji-pop.full .emoji-grid{flex:1;min-height:0;overflow:auto}
.emoji-pop.full .emoji-top,.emoji-pop.full .emoji-tabs,.emoji-pop.full .emoji-head{flex:none}
.emoji-pop.full{border-radius:16px}
.emoji-pop.full .emoji-quick{display:none}
.emoji-pop.full .emoji-full{display:flex}
.emoji-top{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line,rgba(255,255,255,.09))}
.emoji-search{flex:1;min-width:0;display:flex;align-items:center;gap:7px;color:var(--muted,#8b93a5)}
.emoji-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--txt,#eef1f6);font-size:13.5px;font-family:inherit}
.emoji-tones{display:flex;gap:1px;background:var(--raised,#1b1e26);border-radius:9px;padding:2px}
.emoji-tones button{width:20px;height:21px;border:none;background:transparent;border-radius:7px;cursor:pointer;
font-family:var(--emoji-font);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.emoji-tones button.on{background:var(--raised-2,#22262f);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.emoji-tabs{display:flex;gap:1px;padding:6px 8px;border-bottom:1px solid var(--line,rgba(255,255,255,.09));overflow-x:auto;scrollbar-width:none}
.emoji-tabs::-webkit-scrollbar{display:none}
.emoji-tabs button{flex:none;width:30px;height:30px;border:none;background:transparent;border-radius:9px;cursor:pointer;
font-family:var(--emoji-font);font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
opacity:.55;transition:opacity .12s,background .12s;padding:0}
.emoji-tabs button:hover{opacity:1;background:var(--raised,#1b1e26)}
.emoji-tabs button.on{opacity:1;background:var(--ember-soft,rgba(255,122,47,.14));box-shadow:inset 0 0 0 1px rgba(255,122,47,.28)}
.emoji-head{display:flex;align-items:baseline;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted,#8b93a5);padding:10px 13px 3px}
.emoji-head b{font-weight:700;opacity:.5}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:5px 9px 10px;
max-height:250px;overflow-y:auto;overscroll-behavior:contain}
.emoji-grid button{position:relative;height:36px;border:none;background:transparent;border-radius:9px;cursor:pointer;
font-family:var(--emoji-font);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
transition:background .12s,transform .12s cubic-bezier(.34,1.56,.64,1)}
.emoji-grid button:hover{background:var(--ember-soft,rgba(255,122,47,.14))}
.emoji-grid button:active{transform:scale(1.18)}
.emoji-grid .stamp{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-8deg);
font-size:17px;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.emoji-empty{grid-column:1/-1;text-align:center;padding:20px 0;font-size:12.5px;color:var(--muted,#8b93a5)}
/* чіпи реакцій під постом */
.react span:first-child{font-family:var(--emoji-font);font-size:15px;line-height:1}
.pinbar{display:none;align-items:center;gap:9px;padding:8px 16px;border-bottom:1px solid var(--line);
background:var(--panel);cursor:pointer;font-size:13px;color:var(--muted)}
.pinbar.show{display:flex}
.pinbar .pb-ico{color:var(--ember);flex:none;display:grid;place-items:center}
.pinbar .pb-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinbar .pb-text b{color:var(--txt);font-weight:600}
.pinpanel{position:absolute;top:0;right:0;width:min(370px,92%);height:100%;background:var(--panel);
border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:35;display:none;flex-direction:column}
.pinpanel.open{display:flex}
.pinpanel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pinpanel-head h3{margin:0;font-size:15px;font-weight:600;flex:1}
.pinpanel-body{flex:1;overflow-y:auto;padding:8px}
.pin-item{padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft);margin-bottom:6px;cursor:pointer;background:var(--raised)}
.pin-item:hover{border-color:var(--line-2)}
.pin-item .pi-who{font-size:12px;color:var(--ember);font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.pin-item .pi-unpin{color:var(--muted-2);font-size:11px;font-weight:500}
.pin-item .pi-unpin:hover{color:#ff7a6b}
.pin-item .pi-body{font-size:13.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-find{display:none;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.chat-find.show{display:flex}
.chat-find input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;
padding:8px 11px;font-size:14px;outline:none}
.chat-find input:focus{border-color:var(--ember)}
.chat-find .cf-count{font-size:12px;color:var(--muted);flex:none;min-width:40px;text-align:center}
.chat-find button{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--line);
background:var(--raised);color:var(--muted);border-radius:8px}
.chat-find button:hover{color:var(--txt);border-color:var(--line-2)}
mark.hl{background:var(--ember);color:#1a1206;border-radius:3px;padding:0 1px}
.msg.current-find .bubble{box-shadow:0 0 0 2px var(--ember),0 0 14px rgba(255,106,43,.45)}
/* ---------- Етап 2: вкладення ---------- */
.att-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-width:min(640px,76%)}
.msg.mine .att-grid{justify-content:flex-end;margin-left:auto}
/* №82: мініатюра за пропорціями фото — вертикальний скрін більше не кадрується */
.att-img{width:auto;height:auto;max-width:min(260px,100%);max-height:300px;min-width:56px;min-height:56px;border-radius:10px;object-fit:contain;cursor:pointer;border:1px solid var(--line);background:var(--raised)}
.att-video{width:260px;max-width:100%;border-radius:10px;border:1px solid var(--line);background:#000}
.att-file{display:flex;align-items:center;gap:10px;background:var(--raised);border:1px solid var(--line);
border-radius:10px;padding:8px 11px;text-decoration:none;color:var(--txt);max-width:280px;transition:.12s}
.att-file:hover{border-color:var(--ember)}
.att-file .af-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:8px;
background:var(--ember-soft);color:var(--ember);font-size:11px;font-weight:700;letter-spacing:.5px}
.att-file .af-meta{min-width:0}
.att-file .af-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-file .af-sub{font-size:11px;color:var(--muted-2);margin-top:1px}
.attach-btn{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--raised);
color:var(--muted);display:grid;place-items:center;transition:.15s}
.attach-btn:hover{color:var(--ember);border-color:var(--ember)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:90;padding:24px}
.lightbox.open{display:flex}
.lightbox img,.lightbox video{max-width:96%;max-height:92%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
/* перегляд зображення: панель зверху, полотно з масштабом */
.lb-imgwrap{width:96vw;height:92vh;display:flex;flex-direction:column;gap:8px}
.lb-stage{flex:1;min-height:0;overflow:hidden;display:grid;place-items:center;border-radius:10px;
background:rgba(0,0,0,.35)}
.lb-stage.grab{cursor:grab}
.lb-stage.grabbing{cursor:grabbing}
.lightbox .lb-img{max-width:100%;max-height:100%;transform-origin:center center;
transition:transform .06s linear;will-change:transform;user-select:none}
.lb-zoom{min-width:52px;text-align:center;font-size:12.5px;font-weight:700;color:#fff;
font-variant-numeric:tabular-nums}
/* перелік для видалення вкладень (лише адміністратор) */
.att-del-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.att-del{font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;cursor:pointer;
border:1px solid var(--line);background:var(--panel);color:var(--muted);max-width:100%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.att-del:hover{border-color:var(--danger);color:var(--danger)}
.att-del:disabled{opacity:.6;cursor:default}
.lb-close{position:absolute;top:14px;right:20px;width:40px;height:40px;border:none;border-radius:10px;
background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.22)}
/* перегляд PDF у чаті */
#lbBody.pdf{width:96vw;max-width:1000px;height:92vh}
.lb-pdfwrap{width:100%;height:100%;display:flex;flex-direction:column;background:var(--panel);border-radius:10px;overflow:hidden}
.lb-pdfbar{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 12px;background:var(--raised-2);border-bottom:1px solid var(--line);padding-right:50px}
.lb-pdftitle{flex:1;min-width:0;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-btn{font-size:12.5px;padding:6px 11px;border-radius:8px;background:var(--ember);color:#fff;text-decoration:none;white-space:nowrap}
.lb-btn:hover{background:var(--ember-deep)}
.lb-pdf{flex:1;width:100%;border:none;background:#fff}
.lb-doc{flex:1;overflow:auto;background:#fff;color:#222}
.lb-doc pre.lb-txt{margin:0;padding:16px;white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;color:#222}
.lb-doc .lb-docx{padding:26px 22px;max-width:820px;margin:0 auto;color:#222;line-height:1.55;font-size:14px}
.lb-doc .lb-docx img{max-width:100%}
.lb-doc .lb-docx h1,.lb-doc .lb-docx h2,.lb-doc .lb-docx h3{color:#111}
.lb-doc table{border-collapse:collapse}
.lb-doc td,.lb-doc th{border:1px solid #ccc;padding:3px 7px;font-size:12.5px;color:#222;white-space:nowrap}
.lb-xltabs{display:flex;gap:4px;padding:6px;background:#f1f1f1;position:sticky;top:0;flex-wrap:wrap;z-index:1}
.lb-xltabs button{border:1px solid #ccc;background:#fff;color:#333;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.lb-xltabs button.on{background:var(--ember);color:#fff;border-color:var(--ember)}
.lb-xlview{overflow:auto}
/* ---------- Етап 2: опитування ---------- */
.poll{margin-top:6px;display:flex;flex-direction:column;gap:6px;min-width:250px;max-width:min(440px,78vw)}
.msg.mine .poll{margin-left:auto}
.poll-q{font-size:14px;font-weight:600;margin-bottom:2px}
.poll-opt{position:relative;border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;overflow:hidden;background:var(--raised);transition:border-color .12s}
.poll-opt:hover{border-color:var(--line-2)}
.poll-opt.mine{border-color:var(--ember)}
.poll-opt .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ember-soft);transition:width .35s;z-index:0}
.poll-opt .row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.poll-opt .row .tx{display:flex;align-items:center;gap:8px;min-width:0}
.poll-opt .row .tx .dot2{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--muted-2);flex:none}
.poll-opt.mine .row .tx .dot2{border-color:var(--ember);background:var(--ember);box-shadow:inset 0 0 0 3px var(--raised)}
.poll-opt .row .tx .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poll-opt .pct{color:var(--muted);font-weight:600;flex:none;font-size:12.5px}
.poll-foot{font-size:11px;color:var(--muted-2);margin-top:1px}
.poll-btn{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--muted);display:grid;place-items:center;transition:.15s}
.poll-btn:hover{color:var(--ember);border-color:var(--ember)}
.poll-opt-row{display:flex;gap:8px;margin-bottom:8px}
.poll-opt-row input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:10px 12px;font-size:14px;outline:none}
.poll-opt-row input:focus{border-color:var(--ember)}
.poll-opt-row button{width:40px;flex:none;border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:9px}
.poll-opt-row button:hover{color:#ff7a6b;border-color:var(--line-2)}
.poll-checks{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.poll-checks label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);cursor:pointer}
.poll-checks input{width:16px;height:16px;accent-color:var(--ember)}
/* ---------- Профіль ---------- */
.me-chip{cursor:pointer;transition:background .12s}
.me-chip:hover{background:var(--raised)}
.prof-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.prof-top .avatar{width:88px;height:88px;border-radius:24px;font-size:30px}
.prof-ro{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;margin-bottom:14px}
.prof-ro .ro-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px}
.prof-ro .ro-row span{color:var(--muted)}
.prof-ro .ro-row b{color:var(--txt);font-weight:600;text-align:right}
.modal-body select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:11px 12px;font-size:14px;outline:none}
.modal-body select:focus{border-color:var(--ember)}
.modal-body .field{margin-bottom:12px}
.modal-body .field input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:11px 12px;font-size:14px;outline:none}
.modal-body .field input:focus{border-color:var(--ember)}
.modal-body textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:10px 12px;font-size:14px;outline:none;resize:vertical;font-family:inherit}
.modal-body textarea:focus{border-color:var(--ember)}
/* ---------- Етап 3: навігація + задачі ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:64px;background:var(--rail);border-right:1px solid var(--line);
display:none;flex-direction:column;align-items:center;gap:4px;padding:10px 0;z-index:26;overflow-y:auto}
.rail.show{display:flex}
.rail-btn{width:54px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:4px;border:none;
background:transparent;color:var(--muted-2);border-radius:10px;font-size:10px;font-weight:500;transition:.12s}
.rail-btn svg{width:22px;height:22px}
.rail-btn:hover{color:var(--txt);background:var(--raised)}
.rail-btn.active{color:var(--ember)}
.rail-sp{flex:1}
.main-area{height:100%;margin-left:64px}
#viewHome,#viewTasks,#viewCal,#viewRequests,#viewFeed,#viewDisk,#viewAdmin,#viewProduct{display:none;height:100%;flex-direction:column;background:var(--bg)}
.main-area:not([data-view="chats"]) #app{display:none!important}
.main-area[data-view="home"] #viewHome{display:flex}
/* ---- Головна (дашборд) ---- */
#viewHome{overflow:auto;padding:0}
.hm-wrap{display:flex;flex-direction:column;min-height:100%;width:100%}
.hm-top{display:flex;align-items:center;padding:22px 28px 14px;gap:12px}
.hm-hello{font-size:23px;font-weight:700;color:var(--txt)}
.hm-date{font-size:12.5px;color:var(--muted);font-weight:500}
.hm-search{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 13px;color:var(--muted);font-size:12.5px}
.hm-search svg{width:16px;height:16px;stroke-width:1.8}
.hm-av{width:40px;height:40px;border-radius:12px;background:#c2603a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.hm-grid{flex:1;padding:0 28px 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:min-content;gap:16px}
.hm-stats{grid-column:1 / -1;display:flex;gap:14px;flex-wrap:wrap}
.hm-stat{flex:1;min-width:150px;border-radius:16px;padding:16px 18px;background:var(--panel);border:1px solid var(--line)}
.hm-stat.hero{background:linear-gradient(135deg,var(--mine-1),var(--mine-2));border:none;box-shadow:0 10px 26px rgba(2,132,199,.22)}
.hm-stat .v{font-size:30px;font-weight:700;line-height:1;color:var(--ember)}
.hm-stat.hero .v{color:#fff} .hm-stat.warn .v{color:var(--busy)}
.hm-stat .l{font-size:12.5px;margin-top:6px;color:var(--muted)}
.hm-stat.hero .l{color:rgba(255,255,255,.85)}
.hm-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.hm-card.tall{grid-row:span 2;display:flex;flex-direction:column}
.hm-h{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:13px;display:flex;align-items:center}
.hm-h a{margin-left:auto;font-size:12px;font-weight:600;color:var(--ember);cursor:pointer}
.hm-task{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--raised);border-radius:12px;cursor:pointer;margin-bottom:8px}
.hm-task:hover{background:var(--raised-2)}
.hm-box{width:19px;height:19px;border-radius:6px;flex:none;border:2px solid var(--muted-2)}
.hm-tmain{flex:1;min-width:0}
.hm-ttitle{font-size:13px;color:var(--txt);font-weight:500}
.hm-tsub{font-size:11px;color:var(--muted);margin-top:2px}
.hm-due{font-size:10.5px;font-weight:700;border-radius:8px;padding:2px 8px;flex:none;color:var(--busy);background:rgba(240,160,48,.14)}
.hm-due.danger{color:var(--danger);background:rgba(248,113,113,.14)}
.hm-empty{font-size:12.5px;color:var(--muted);padding:10px 2px}
.hm-chats{display:flex;gap:22px;flex-wrap:wrap}
.hm-chat{display:flex;align-items:center;gap:10px;cursor:pointer}
.hm-cav{width:38px;height:38px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.hm-cbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hm-agenda{display:flex;flex-direction:column;gap:11px}
.hm-ag{display:flex;gap:11px}
.hm-agt{font-size:12.5px;font-weight:700;width:40px;color:var(--ember)}
.hm-agbar{flex:1;border-left:2px solid var(--ember);padding-left:11px}
.hm-agttl{font-size:13px;font-weight:600;color:var(--txt)}
.hm-agsub{font-size:11.5px;color:var(--muted)}
.hm-feed{display:flex;gap:10px;padding:9px 0;cursor:pointer;border-top:1px solid var(--line-soft)}
.hm-feed:first-child{border-top:none;padding-top:0}
.hm-fav{width:34px;height:34px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.hm-fmain{min-width:0}
.hm-ftext{font-size:12.5px;color:var(--txt);line-height:1.45}
.hm-ftime{font-size:11px;color:var(--muted);margin-top:3px}
.hsw{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
/* .field label (специфічність вища) ламав перемикач у профілі — фіксуємо явно */
.field label.hsw{display:inline-flex;margin:0}
.hsw input{display:none !important}
.hsw-tr{display:inline-block;width:44px;height:26px;border-radius:13px;background:var(--raised-2);border:1px solid var(--line);box-sizing:border-box;position:relative;transition:.15s;flex:none}
.hsw input:checked + .hsw-tr{background:var(--ember)}
.hsw-kn{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:10px;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hsw input:checked + .hsw-tr{border-color:var(--ember)}
.hsw input:checked + .hsw-tr .hsw-kn{left:20px}
.hsw-lbl{font-size:13.5px;color:var(--txt)}
@media(max-width:860px){ .hm-grid{grid-template-columns:1fr} .hm-card.tall{grid-row:auto} .hm-card[style*="grid-column"]{grid-column:1 !important} }
.main-area[data-view="tasks"] #viewTasks{display:flex}
.main-area[data-view="project"] #viewProject{display:flex}
/* --- сторінка проєкту: вкладки-гілки + канбан --- */
/* height:100% — як у решти екранів (рядок вище): без нього .gf-scroll не має від чого
рахувати висоту, і дерево просто йде за край без прокрутки */
.view-project{display:none;height:100%;flex-direction:column;min-height:0}
.prj-wrap{flex:none;margin:-42px 16px 32px;position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.prj-tabs{display:flex;gap:8px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
border-radius:18px;padding:12px 14px;box-shadow:var(--gf-card-shadow)}
/* у списку проєктів плашка порожня — тоді її просто немає */
.prj-tabs:empty{display:none}
.prj-tab{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);
color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap;transition:.14s}
.prj-tab:hover{color:var(--txt)}
.prj-tab.on{background:var(--gf-accent,#123f7b);border-color:var(--gf-accent,#123f7b);color:#fff}
.prj-tab .cnt{opacity:.7;font-size:11.5px;margin-left:5px}
.prj-tab.add{border-style:dashed}
.prj-branch-info{font-size:13px;color:var(--muted);padding:0 4px}
.prj-branch-info b{color:var(--txt)}
.prj-board{display:block;padding-bottom:24px;position:relative}
/* зведення проєкту — рядком у білій плашці зверху, як панель фільтрів у «Задачах» */
.prj-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;width:100%}
.prj-summary .td-sec{margin:0}
.prj-summary .td-meta{gap:8px 22px;margin:0}
.prj-summary .td-desc{font-size:13px;color:var(--muted);margin:0}
.prj-summary h4{display:none}
.kb-col{flex:0 0 264px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
display:flex;flex-direction:column;min-height:120px;box-shadow:var(--gf-card-shadow)}
.kb-col-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;
border-bottom:1px solid var(--line-soft);font-size:12.5px;font-weight:600;letter-spacing:.3px}
.kb-col-head .n{background:var(--raised-2);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:11.5px;font-weight:500}
.kb-list{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.kb-col.over{border-color:var(--gf-accent,#1a6fc4)}
.kb-col.over .kb-list{background:color-mix(in srgb, var(--gf-accent,#1a6fc4) 8%, transparent);border-radius:10px}
.kb-card{background:var(--raised);border:1px solid var(--line-soft);border-radius:11px;padding:10px 11px;
cursor:grab;transition:.12s}
.kb-card:hover{border-color:var(--gf-accent,#1a6fc4)}
.kb-card.dragging{opacity:.45;cursor:grabbing}
.kb-card .t{font-size:13.5px;line-height:1.35;margin-bottom:5px}
.kb-card .m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--muted-2)}
.kb-pr{border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:600}
.kb-pr.low{background:rgba(120,130,145,.18);color:var(--muted)}
.kb-pr.normal{background:rgba(63,127,174,.18);color:#3f7fae}
.kb-pr.high{background:rgba(232,150,40,.2);color:#c9821a}
.kb-pr.urgent{background:rgba(214,69,69,.2);color:#d64545}
.kb-empty{font-size:12px;color:var(--muted-2);text-align:center;padding:14px 6px}
.prj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;width:100%}
.prj-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
cursor:pointer;transition:.14s;box-shadow:var(--gf-card-shadow)}
.prj-card:hover{border-color:var(--gf-accent,#1a6fc4);transform:translateY(-1px)}
.prj-card .t{font-size:15px;font-weight:600;margin-bottom:5px}
.prj-card .s{font-size:12.5px;color:var(--muted)}
/* схема-дерево проєкту: батько згори, діти в ряд під ним, зʼєднані лініями */
.prj-tree-scroll{width:100%;overflow-x:auto;background:transparent;border:1px solid var(--line);
border-radius:18px;padding:18px 16px 40px;box-shadow:var(--gf-card-shadow);position:relative;z-index:1}
.prj-board{background:var(--panel);border-radius:18px}
/* підписи рівнів — збоку праворуч, навпроти свого ряду; малюються після вирівнювання рядів */
/* ланцюг етапів над деревом: видно весь шлях проєкту й де він зараз */
.prj-stage-nav{display:flex; align-items:center; gap:0; padding:12px 14px; margin:0 0 12px;
background:var(--panel); border:1px solid var(--line); border-radius:18px;
box-shadow:var(--gf-card-shadow); overflow-x:auto}
.psn-step{display:flex; align-items:center; gap:9px; flex:none; background:none; border:0; font:inherit;
padding:4px 6px; border-radius:10px; cursor:pointer; transition:.12s}
.psn-step:hover{background:var(--bg)}
.psn-step .b{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
font-size:12px; font-weight:700; background:var(--bg); border:1px solid var(--line); color:var(--muted); flex:none}
.psn-step .t{display:flex; flex-direction:column; align-items:flex-start; line-height:1.25}
.psn-step .t b{font-size:13px; font-weight:700; color:var(--txt); white-space:nowrap}
.psn-step .t span{font-size:11.5px; color:var(--muted-2); white-space:nowrap}
.psn-step.done .b{background:var(--ok); border-color:var(--ok); color:#fff}
.psn-step.done .t b{color:var(--ok)}
/* етап, на якому зупинили показ, і ті, що поки приховані */
.psn-step.limited{background:color-mix(in srgb,var(--gf-accent,#1a6fc4) 12%,transparent)}
.psn-step.limited .b{background:var(--gf-accent,#1a6fc4); border-color:var(--gf-accent,#1a6fc4); color:#fff}
.psn-step.dim{opacity:.5}
.psn-line{width:34px; height:2px; background:var(--line); flex:none; margin:0 6px}
.psn-line.done{background:var(--ok)}
@media (max-width:768px){ .prj-stage-nav{border-radius:14px; padding:10px} .psn-line{width:20px; margin:0 4px} }
/* кнопка етапу лежить у #prjBoard, а не в смузі: смуга зі своїм z-index утворює власний
контекст накладання і разом із вмістом опиняється під блоком дерева — кліки не доходили */
.prj-stage-mark{position:absolute;right:18px;display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border:1px solid var(--line-2);border-radius:10px;
background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--txt);
font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;pointer-events:auto;
z-index:3;font-family:inherit;transition:.12s;box-shadow:var(--gf-card-shadow)}
.prj-stage-mark:hover{border-color:var(--gf-accent,#1a6fc4);transform:translateY(-1px)}
.prj-stage-mark:active{transform:none}
.prj-stage-mark .chev{font-size:10px;opacity:.75}
.prj-stage-mark.done{border-color:var(--ok);color:var(--ok);
background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
@media (max-width:768px){ .prj-tree-scroll{padding-right:14px} .prj-stage-mark{position:static;transform:none;margin:4px 0 0 8px} }
.prj-tree{display:inline-block;min-width:100%;position:relative}
/* смуга етапу — підкладка на весь ряд: сіра в роботі, зелена коли етап закритий */
.prj-stage-band{position:absolute;left:-8px;right:-8px;z-index:0;border-radius:12px;pointer-events:none;
background:var(--bg);transition:background .15s,box-shadow .15s}
.prj-stage-band.done{background:color-mix(in srgb,var(--ok) 14%,var(--panel));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 38%,transparent)}
.prj-tree>ul{position:relative;z-index:1}
.prj-tree ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);
justify-content:center;position:relative;padding:24px 0 0;margin:0;list-style:none}
.prj-tree li{position:relative;list-style:none;padding:24px 9px 0;text-align:center}
/* горизонтальні звʼязки між сусідами */
.prj-tree li::before,.prj-tree li::after{content:'';position:absolute;top:0;right:50%;
width:50%;height:24px;border-top:2px solid var(--line-2)}
.prj-tree li::after{right:auto;left:50%;border-left:2px solid var(--line-2)}
.prj-tree li:only-child{padding-top:24px}
.prj-tree li:only-child::before,.prj-tree li:only-child::after{display:none}
.prj-tree li:first-child::before,.prj-tree li:last-child::after{border:0 none}
.prj-tree li:last-child::before{border-right:2px solid var(--line-2);border-radius:0 7px 0 0}
.prj-tree li:first-child::after{border-radius:7px 0 0 0}
/* вертикальна лінія від батька вниз */
.prj-tree ul ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:24px;
border-left:2px solid var(--line-2)}
/* корінь без верхніх звʼязків; притиснутий ліворуч, щоб дерево не «стрибало»
при закритті/відкритті гілки: центрування зсувало всі вузли одразу */
.prj-tree>ul{padding-top:0;justify-content:center}
.prj-tree>ul>li{padding-top:0}
.prj-tree>ul>li::before,.prj-tree>ul>li::after{display:none}
/* вузол */
.prj-box{display:inline-flex;flex-direction:column;gap:3px;width:190px;padding:10px 12px;border-radius:10px;
border:1px solid var(--line);background:var(--raised);text-align:left;cursor:pointer;transition:.14s;vertical-align:top}
.prj-box:hover{border-color:var(--gf-accent,#1a6fc4);transform:translateY(-1px)}
.prj-box .t{font-size:13px;font-weight:600;line-height:1.3;word-break:break-word}
.prj-box .s{font-size:11px;color:var(--muted-2);line-height:1.35}
.prj-box.closed{opacity:.45}
.prj-box.locked{border-style:dashed}
.prj-box .acts{display:flex;gap:5px;margin-top:6px}
.prj-btn{padding:3px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel);
color:var(--muted);font-size:10.5px;white-space:nowrap}
.prj-btn:hover{border-color:var(--gf-accent,#1a6fc4);color:var(--gf-accent,#1a6fc4)}
/* кольори за рівнем вкладеності */
.prj-box.lvl0{background:rgba(120,130,145,.16)}
.prj-box.lvl1{background:rgba(124,92,196,.18)}
.prj-box.lvl2{background:rgba(56,161,105,.18)}
.prj-box.lvl3{background:rgba(63,127,174,.18)}
.prj-box.lvl4{background:rgba(214,69,69,.15)}
@media (max-width:768px){ .prj-box{width:150px} .prj-tree li{padding-left:5px;padding-right:5px} }
.prj-msg{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 22px;
text-align:center;width:100%;box-shadow:var(--gf-card-shadow)}
.prj-msg .t{font-size:15px;font-weight:600;margin-bottom:7px}
.prj-msg .s{font-size:13px;color:var(--muted);line-height:1.55;max-width:560px;margin:0 auto}
.prj-placeholder{height:2px;background:var(--gf-accent,#1a6fc4);border-radius:2px;margin:2px 0}
@media (max-width:768px){
.prj-wrap{margin:-42px 8px 8px}
.kb-col{flex:0 0 82vw}
}
.main-area[data-view="calendar"] #viewCal{display:flex}
.main-area[data-view="requests"] #viewRequests{display:flex}
.main-area[data-view="support"] #viewSupport{display:flex}
#viewSupport{display:none;flex-direction:column;height:100%;min-height:0}
.sup-body{flex:1;overflow-y:auto;padding:16px 18px 24px}
.sup-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer}
.sup-card:hover{border-color:var(--ember)}
.sup-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sup-title{font-weight:700;font-size:15px;flex:1}
.sup-meta{color:var(--muted);font-size:13px}
.sup-msg{background:var(--bg);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.sup-msg.mine{background:rgba(21,90,146,.12)}
.main-area[data-view="feed"] #viewFeed{display:flex}
.main-area[data-view="disk"] #viewDisk{display:flex}
.main-area[data-view="admin"] #viewAdmin{display:flex}
.main-area[data-view="product"] #viewProduct{display:flex}
/* ---- Продукт ---- */
/* Вкладки розділу помітні самі по собі: тонкі підписи в один ряд губилися між
синьою шапкою й фільтрами, і розділ виглядав так, ніби в ньому лише оновлення. */
.prod-tabs{display:flex;gap:8px;padding:14px var(--pad,18px) 0;overflow-x:auto;flex:none}
.prod-tab{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
border:1px solid var(--line);color:var(--txt);border-radius:999px;
padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.prod-tab:hover{border-color:var(--ember)}
.prod-tab.on{background:var(--ember);border-color:var(--ember);color:#fff}
.prod-body{padding:16px var(--pad,18px) 26px;max-width:1100px;width:100%;margin:0 auto}
.prod-pane[hidden]{display:none}
.prod-stat{display:inline-flex;align-items:center;gap:7px;background:var(--gf-hero-fill);
border:1px solid var(--gf-hero-stroke);color:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px}
.prod-stat b{font-size:14px}
.pi-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:13px 15px;margin-bottom:10px;cursor:pointer}
.pi-card:hover{border-color:var(--ember)}
.pi-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pi-title{font-weight:600;font-size:14.5px;flex:1;min-width:0}
.pi-ex{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pi-sub{font-size:11.5px;color:var(--muted-2,var(--muted));margin-top:7px}
.pi-st{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pi-st.idea{background:rgba(127,127,127,.16);color:var(--muted)}
.pi-st.planned{background:rgba(21,90,146,.16);color:#2b7fc4}
.pi-st.in_progress{background:rgba(224,150,45,.18);color:#c9862b}
.pi-st.done{background:rgba(46,160,90,.18);color:#2ea05a}
.pi-st.rejected{background:rgba(214,69,69,.16);color:#d64545}
.pi-group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);margin:16px 2px 8px}
.pi-group:first-child{margin-top:0}
.pu-day{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin:18px 2px 8px}
.pu-row{display:flex;align-items:flex-start;gap:10px;background:var(--panel);
border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.pu-main{flex:1;min-width:0}
.pu-title{font-size:14px;line-height:1.45}
.pu-area{display:inline-block;font-size:10.5px;font-weight:700;color:var(--ember);
background:color-mix(in srgb,var(--ember) 12%,transparent);border-radius:999px;
padding:2px 9px;margin-right:8px;vertical-align:1px}
.pu-i{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
background:var(--bg);color:var(--muted);cursor:pointer;font-size:12px;font-weight:700;
display:grid;place-items:center}
.pu-i:hover{border-color:var(--ember);color:var(--ember)}
.pu-det{margin-top:8px;padding:10px 12px;background:var(--bg);border-radius:10px;
font-size:13px;line-height:1.55;white-space:pre-wrap}
.pu-det[hidden]{display:none}
.kb-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:14px 16px;margin-bottom:12px}
.kb-sec-h{display:flex;align-items:center;gap:9px}
.kb-sec-h h3{margin:0;font-size:15px;flex:1;min-width:0}
.kb-art{border-top:1px solid var(--line);padding:10px 0 2px;margin-top:10px}
.kb-art:first-of-type{border-top:0}
.kb-a-h{display:flex;align-items:center;gap:8px;cursor:pointer}
.kb-a-h b{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.kb-a-body{margin-top:8px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--txt)}
.kb-a-body[hidden]{display:none}
.kb-a-sub{font-size:11px;color:var(--muted-2,var(--muted));margin-top:6px}
.kb-mini{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px}
.kb-mini:hover{color:var(--ember)}
/* диск */
.disk-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.disk-head h2{margin:0;font-family:var(--brand-font);font-weight:700;letter-spacing:1.5px;font-size:22px}
.disk-bc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.disk-bc a{color:var(--muted);cursor:pointer} .disk-bc a:hover{color:var(--ember)} .disk-bc .sep{color:var(--muted-2)}
.disk-search input{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 11px;font-size:13px;outline:none;width:190px}
.disk-search input:focus{border-color:var(--ember)}
.disk-body{flex:1;min-height:0;overflow:auto;padding:16px}
.disk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.disk-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;position:relative;transition:.12s}
.disk-item:hover{border-color:var(--line-2)}
.disk-item .di-ico{height:64px;display:grid;place-items:center;color:var(--ember)}
.disk-item .di-ico img{max-width:100%;max-height:64px;border-radius:8px;object-fit:cover}
.disk-item .di-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}
.disk-item .di-sub{font-size:11px;color:var(--muted-2);margin-top:2px}
.disk-item .di-act{position:absolute;top:6px;right:6px;display:none;gap:2px}
.disk-item:hover .di-act{display:flex}
.disk-item .di-act button{width:24px;height:24px;border:none;background:var(--raised-2);color:var(--muted);border-radius:6px;font-size:11px}
.disk-item .di-act button:hover{color:var(--ember)}
.disk-sec-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);margin:0 0 8px}
.perm-rule{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.perm-rule .pr-subj{flex:1;min-width:0}
.perm-rule select,.perm-add select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:5px 7px;font-size:12px}
/* ── права диска: детальний режим ── */
.perm-banner{font-size:12.5px;line-height:1.5;padding:9px 11px;border-radius:9px;margin-bottom:10px;background:var(--bg);border:1px solid var(--line-soft)}
.perm-banner.open{border-left:3px solid var(--accent)}
.perm-banner.closed{border-left:3px solid var(--danger)}
.perm-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.perm-legend{display:grid;grid-template-columns:1fr;gap:5px;background:var(--bg);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;margin-bottom:6px}
.perm-legend .pl-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-2)}
.perm-legend .pl-dot{width:9px;height:9px;border-radius:50%;flex:none}
.perm-legend b{color:var(--txt);font-weight:600}
.pr-badge{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:6px;background:var(--line);color:var(--muted-2);vertical-align:middle}
.perm-rule2{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px;flex-wrap:wrap}
.perm-rule2 .pr-subj{flex:1;min-width:110px}
.lvl-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lvl-seg button{background:var(--bg);border:none;border-right:1px solid var(--line);color:var(--muted-2);font-size:11px;padding:5px 8px;cursor:pointer;font-family:inherit;line-height:1.2}
.lvl-seg button:last-child{border-right:none}
.lvl-seg button:hover{color:var(--txt)}
.lvl-seg button.active{font-weight:600}
.perm-search{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;box-sizing:border-box}
.perm-results{border:1px solid var(--line-soft);border-radius:8px;margin-top:5px;max-height:190px;overflow:auto}
.perm-res{padding:7px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.perm-res:last-child{border-bottom:none}
.perm-res:hover{background:var(--bg)}
.acc-list{margin-top:8px}
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.acc-chip{font-size:11px;color:#fff;padding:2px 8px;border-radius:20px;flex:none}
/* стрічка */
.feed-wrap{flex:1;min-height:0;overflow:auto;padding:16px}
/* Ширше: 640px під допис було тісно, особливо коли в картці є фото й коментарі. */
.feed-layout{display:flex;gap:24px;max-width:1240px;margin:0 auto;align-items:flex-start;justify-content:center}
.feed-col{flex:1;min-width:0;max-width:860px}
#feedPosts{display:flex;flex-direction:column;gap:12px}
.feed-side{width:264px;flex:none;display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.side-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px}
.side-card h5{margin:0 0 11px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);font-weight:700}
.side-bd{display:flex;align-items:center;gap:10px;padding:5px 0}
.side-bd .bd-ic{width:34px;height:34px;border-radius:50%;background:var(--ember-soft);color:var(--ember);display:flex;align-items:center;justify-content:center;flex:none;font-size:16px}
.side-bd .bd-nm{font-size:13px;font-weight:600;line-height:1.2}
.side-bd .bd-dt{font-size:11.5px;color:var(--muted-2)}
.side-bd .bd-go{margin-left:auto;font-size:12px;color:var(--ember);cursor:pointer;flex:none}
.side-stats{display:flex;gap:8px}
.side-stat{flex:1;background:var(--bg);border-radius:9px;padding:9px;text-align:center;cursor:pointer}
.side-stat .n{font-size:21px;font-weight:700;line-height:1}
.side-stat .l{font-size:11px;color:var(--muted-2);margin-top:3px}
.side-online{display:flex;flex-wrap:wrap;gap:8px}
.side-online .avatar{width:34px;height:34px;border-radius:50%;font-size:12px;cursor:pointer}
.side-empty{font-size:12.5px;color:var(--muted-2)}
.act-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:12px 14px}
.act-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.act-ttl{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.act-toggle{font-size:12px;color:var(--ember);cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.act-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line-soft)}
.act-row:first-of-type{border-top:none}
.feed-col.cont #feedPosts{gap:0}
.feed-col.cont .act-card{border:none;border-radius:0;border-bottom:1px solid var(--line-soft);background:transparent}
@media(max-width:1000px){ .feed-side{display:none} }
.feed-composer{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.feed-composer textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;resize:vertical;min-height:60px;font-family:inherit}
.feed-composer textarea:focus{border-color:var(--ember)}
/* Рядок дій композера: однакова висота в усіх кнопок, іконкові — квадратні. */
.fc-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.fc-row .fc-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
border-radius:10px;line-height:1}
.fc-row .fc-chip.fc-icon{padding:0;width:38px;justify-content:center;gap:0}
.fc-row .fc-chip.fc-icon .fc-t:not(:empty){margin-left:7px;font-size:12.5px}
.fc-row .fc-chip.fc-icon:has(.fc-t:not(:empty)){width:auto;padding:0 12px}
.fc-row .btn-go{height:38px;padding:0 18px;border-radius:10px;line-height:1}
.fc-targets{margin-top:10px}
.fc-row select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 9px;font-size:13px}
.fc-row .sp{flex:1}
.fc-files{font-size:12px;color:var(--muted-2);margin-top:6px}
#feedPosts{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.post.pinned{border-color:var(--ember)}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post-head .avatar{width:40px;height:40px;border-radius:12px;font-size:14px}
.post-head .ph-main{flex:1;min-width:0}
.post-head .ph-name{font-weight:600;font-size:14px}
.post-head .ph-sub{font-size:11.5px;color:var(--muted-2)}
.post-head .ph-act{display:flex;gap:4px}
.post-head .ph-act button{width:28px;height:28px;border:none;background:transparent;color:var(--muted-2);border-radius:7px;font-size:13px}
.post-head .ph-act button:hover{background:var(--raised);color:var(--txt)}
.post-sys{font-size:11px;color:var(--ember);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.post-body{font-size:14.5px;white-space:pre-wrap;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.post-foot{display:flex;align-items:center;gap:2px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line-soft)}
.post-foot .pf-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:none;padding:8px 6px;border-radius:9px}
.post-foot .pf-btn:hover{background:var(--bg);color:var(--txt)}
/* композер стрічки: аватар + чіпи; фільтри стрічки */
.feed-composer .fc-top{display:flex;gap:10px;align-items:flex-start}
.feed-composer .fc-top .avatar{width:40px;height:40px;border-radius:50%;font-size:14px;flex:none}
.feed-composer .fc-top textarea{flex:1;min-height:44px}
.fc-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:13px;cursor:pointer;transition:.12s}
.fc-chip:hover{border-color:var(--ember);color:var(--ember)}
.feed-filters{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.feed-filters button{padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:13px;cursor:pointer;transition:.12s}
.feed-filters button:hover{border-color:var(--line-2)}
.feed-filters button.on{background:var(--ember-soft);border-color:transparent;color:var(--ember);font-weight:600}
.feed-col.cont .feed-filters{margin-left:2px}
/* системна подія — компактний рядок (не великий допис) */
.post.sys-row{display:flex;align-items:center;gap:12px;padding:12px 16px}
.post.sys-row:hover{transform:none !important;box-shadow:none !important;background:var(--bg) !important}
.sys-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--raised-2);color:var(--muted);font-size:14px}
.sys-ic.ok{background:rgba(76,203,107,.16);color:#4ccb6b}
.sys-ic.new{background:var(--ember-soft);color:var(--ember)}
.sys-ic.req{background:rgba(63,127,174,.18);color:#6fa8d6}
.sys-txt{flex:1;min-width:0;font-size:13.5px;color:var(--txt);line-height:1.4}
.sys-tm{font-size:12px;color:var(--muted-2);flex:none}
.post-comments{margin-top:10px;display:none;flex-direction:column;gap:8px}
.post-comments.open{display:flex}
/* стрічка — суцільний режим: усі дописи як єдине полотно, розділені лініями (не окремі блоки) */
.feed-col.cont{max-width:600px}
.feed-col.cont #feedPosts{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
.feed-col.cont .post{background:transparent !important;box-shadow:none !important;border:none !important;border-radius:0 !important;margin:0 !important;border-bottom:1px solid var(--line-soft) !important;padding:16px 18px}
.feed-col.cont .post:last-child{border-bottom:none !important}
.feed-col.cont .post:hover{transform:none !important;box-shadow:none !important;background:var(--bg) !important}
.feed-col.cont .post.pinned{border-left:3px solid var(--ember) !important;background:var(--ember-soft) !important}
.feed-col.cont .post.pinned:hover{background:var(--ember-soft) !important}
.feed-col.cont .post-head .avatar{width:44px;height:44px;font-size:15px}
.feed-col.cont .post-body{font-size:15.5px;line-height:1.55}
.feed-col.cont .post-foot{justify-content:space-around;gap:0;margin-top:8px;padding-top:6px}
.feed-col.cont .post-foot .pf-btn{flex:1;justify-content:center;padding:9px 6px;border-radius:9px;font-weight:600;font-size:13.5px}
.feed-col.cont .post-foot .pf-btn:hover{background:var(--raised);color:var(--txt)}
/* ==== Стрічка у стилі «Хаб» (дизайн-кит): синій hero + картки, що заїжджають під нього ==== */
.view-feed{
--gf-font:'Golos Text',var(--ui-font);
--gf-hero:linear-gradient(150deg,#15589e 0%,#2b7fc7 100%);
--gf-hero-sub:#bfdcf5; --gf-hero-fill:rgba(255,255,255,.13); --gf-hero-fill-strong:rgba(255,255,255,.2); --gf-hero-stroke:rgba(255,255,255,.22);
--gf-accent:#1a6fc4; --gf-accent-deep:#123f7b; --gf-accent-soft:#e6f0fb;
font-family:var(--gf-font);
}
html[data-theme="dark"] .view-feed, html[data-theme="unique"] .view-feed{
--gf-hero:linear-gradient(150deg,#0a3762 0%,#14538a 100%);
--gf-accent:#7fb6ea; --gf-accent-deep:#1a6fc4; --gf-accent-soft:#17324c;
}
.view-feed .feed-wrap{padding:0 0 40px}
.gf-hero{background:var(--gf-hero);padding:22px 30px 64px}
.gf-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.gf-eyebrow{font-size:13px;color:var(--gf-hero-sub)}
.gf-title{margin:5px 0 0;font-size:30px;font-weight:800;letter-spacing:-.6px;color:#fff}
.gf-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gf-chip{display:inline-flex;align-items:center;gap:8px;background:var(--gf-hero-fill);border:1px solid var(--gf-hero-fill-strong);
border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:600;color:#eaf3fb;cursor:pointer;font-family:inherit}
.gf-chip:hover{background:rgba(255,255,255,.22)}
.gf-chip.danger{color:#ffd9d4}
.gf-dot{width:7px;height:7px;border-radius:999px;display:inline-block;flex:none}
.gf-dot.ok{background:#5fd18f}
.gf-dot.danger{background:#ff8478}
.gf-hero .cal-modes{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-stroke)}
.gf-hero .cal-modes button{color:#d5e7f8}
.gf-hero .cal-modes button.on{background:#fff;color:#15589e}
.view-feed .feed-layout{margin:-46px auto 0;padding:0 16px;position:relative}
.view-feed .feed-composer{border-radius:18px;padding:16px 18px;box-shadow:0 8px 26px rgba(16,48,88,.10)}
.view-feed .feed-composer textarea{border-radius:14px;font-size:15px;padding:13px 15px}
.view-feed .fc-chip{border-radius:999px;padding:8px 14px;font-weight:600}
.view-feed .btn-go{background:var(--gf-accent-deep);border-radius:11px;font-weight:700}
.view-feed .btn-go:hover{filter:brightness(1.12)}
.view-feed .feed-filters{gap:24px;border-bottom:1px solid var(--line);margin:14px 2px 12px;padding:0 4px;flex-wrap:nowrap;overflow-x:auto}
.view-feed .feed-filters button{border:none;background:none;padding:11px 2px;border-radius:0;font-weight:600;font-size:13.5px;color:var(--muted);margin-bottom:-1px;white-space:nowrap;font-family:inherit}
.view-feed .feed-filters button:hover{border:none;color:var(--txt)}
.view-feed .feed-filters button.on{background:none;color:var(--txt);font-weight:700;box-shadow:inset 0 -2.5px 0 var(--gf-accent)}
.view-feed .post{border-radius:18px;padding:18px 20px}
.view-feed .post-head .avatar{border-radius:50%}
.view-feed .ph-name{font-size:15px;font-weight:700}
.view-feed .ph-sub{font-size:12.5px}
.view-feed .post-body{font-size:15.5px;line-height:1.6}
.view-feed .post-foot{border-top:none;gap:8px;margin-top:10px;flex-wrap:wrap}
.view-feed .post-foot .pf-btn{flex:0 0 auto;background:var(--bg);border-radius:11px;padding:9px 14px;font-weight:600;font-family:inherit}
.view-feed .post-foot .pf-btn:hover{background:var(--gf-accent-soft);color:var(--gf-accent)}
.view-feed .act-card{border-radius:18px;padding:14px 18px}
@media(max-width:760px){ .gf-hero{padding:18px 16px 58px} .gf-title{font-size:24px} .gf-hero-top{flex-wrap:wrap} }
/* ==== «Хаб»: hero-шапки всіх розділів точно за дизайн-китом ==== */
:root{--gf-hero:linear-gradient(150deg,#15589e 0%,#2b7fc7 100%);--gf-hero-sub:#bfdcf5;--gf-hero-fill:rgba(255,255,255,.13);--gf-hero-fill-strong:rgba(255,255,255,.2);--gf-hero-stroke:rgba(255,255,255,.22);--gf-card-shadow:0 8px 26px rgba(16,48,88,.10)}
html[data-theme="dark"],html[data-theme="unique"]{--gf-hero:linear-gradient(150deg,#0a3762 0%,#14538a 100%);--gf-card-shadow:0 8px 26px rgba(0,0,0,.25)}
.gf-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.gf-hero{flex:none;padding-top:calc(22px + env(safe-area-inset-top,0px))}
.gf-hero-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gf-hero .btn-ghost{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-stroke);color:#fff}
.gf-hero .btn-ghost:hover{background:var(--gf-hero-fill-strong);border-color:var(--gf-hero-stroke);color:#fff}
.gf-hero .btn-go{background:#fff;color:#15589e;font-weight:700}
/* «Видалити проєкт» — тимчасова кнопка. Червоний текст на напівпрозорому тлі поверх синього
різав око; кнопка як у сусідів, а небезпека видна лише при наведенні. */
.gf-hero #prjDelete{color:#fff;opacity:1;background:rgba(214,69,69,.20);border-color:rgba(255,168,168,.80)}
.gf-hero #prjDelete:hover{background:rgba(214,69,69,.85);border-color:rgba(255,255,255,.55)}
.gf-hero #prjDelete svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.gf-hero .btn-go:hover{filter:brightness(.95)}
.gf-hero .cal-modes{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-stroke)}
.gf-hero .cal-modes button{color:#d5e7f8}
.gf-hero .cal-modes button.on{background:#fff;color:#15589e}
.gf-hero .cal-nav button{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-stroke);color:#fff}
.gf-hero .cal-nav button#calToday{color:#d5e7f8}
.gf-hero .cal-nav button:hover{border-color:#fff}
.gf-hero .cal-label{color:var(--gf-hero-sub);font-size:13px;font-weight:500;margin-left:0;min-width:0}
.gf-hero .search-wrap input{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-stroke);color:#fff}
.gf-hero .search-wrap input::placeholder{color:#cfe3f7}
.gf-hero .hm-search{background:var(--gf-hero-fill);border-color:var(--gf-hero-stroke);color:#d5e7f8}
.gf-hero .disk-bc,.gf-hero .disk-bc a{color:#cfe3f7}
.gf-hero .disk-bc a:hover{color:#fff}
.gf-hero .disk-bc .sep{color:rgba(255,255,255,.5)}
/* вкладки адмінки — чипи на hero, як у киті */
#adminTabs{gap:8px}
#adminTabs button{background:var(--gf-hero-fill);border:1px solid var(--gf-hero-fill-strong);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:600;color:#eaf3fb;cursor:pointer;font-family:inherit}
#adminTabs button:hover{background:rgba(255,255,255,.22)}
#adminTabs button.on{background:#fff;color:#15589e;font-weight:700}
/* контент «заїжджає» під hero */
.gf-scroll .tasks-filters{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--gf-card-shadow);margin:-42px 16px 14px;padding:12px 14px;position:relative;z-index:1;flex:none}
.gf-scroll .tasks-table-wrap{flex:none;overflow:visible;padding:0 16px 30px}
.gf-scroll #adminBody{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--gf-card-shadow);margin:-42px 16px 26px;padding:10px 12px;position:relative;z-index:1;overflow:visible}
.gf-scroll .cal-body{flex:none;background:var(--bg);border-radius:18px;margin:-42px 14px 24px;padding:10px;position:relative;z-index:1;overflow:visible}
.gf-scroll .disk-body{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--gf-card-shadow);margin:-42px 16px 26px;padding:16px;position:relative;z-index:1;overflow:visible}
.gf-scroll .disk-body .disk-item{background:var(--bg)}
/* Чати: hero + карточна зона (desktop; на вузьких екранах — класика на всю висоту) */
#chatsHero{display:none;padding-bottom:58px}
.main-area[data-view="chats"]{display:flex;flex-direction:column}
.main-area[data-view="chats"] #chatsHero{display:block;flex:none}
.main-area[data-view="chats"] #app{flex:1;min-height:0;height:auto;margin:-42px 14px 14px;position:relative;z-index:1;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--gf-card-shadow)}
@media(max-width:1000px){
.main-area[data-view="chats"] #chatsHero{display:none}
.main-area[data-view="chats"] #app{margin:0;border-radius:0;border:none;box-shadow:none;height:100%}
}
/* Головна: білі стат-картки з великими числами (як у киті) */
#viewHome .hm-grid{margin-top:-42px;position:relative;z-index:1}
.hm-stat,.hm-stat.hero{background:var(--panel);border:1px solid var(--line);box-shadow:var(--gf-card-shadow)}
.hm-stat .v,.hm-stat.hero .v{color:var(--txt);font-weight:800}
.hm-stat .l,.hm-stat.hero .l{color:var(--muted)}
@media(max-width:760px){ .gf-hero-side{justify-content:flex-start} }
/* сповіщення */
.bell-badge{position:absolute;top:2px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ember);color:#1a1206;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.notif-item{display:flex;gap:10px;padding:11px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.notif-item:hover{background:var(--raised)}
.notif-item.unread{background:var(--ember-soft)}
.notif-item .ni-t{font-size:13.5px;font-weight:600}
.notif-item.read .ni-t{font-weight:400;color:var(--muted)}
.notif-item .ni-b{font-size:12.5px;color:var(--muted);margin-top:1px}
.notif-item .ni-tm{font-size:11px;color:var(--muted-2);margin-top:3px}
.notif-settings{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line-soft);padding-top:12px;margin-top:6px}
.notif-settings .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);cursor:pointer}
.notif-settings .chk input{accent-color:var(--ember)}
.sel-add{display:flex;gap:6px}
.sel-add select{flex:1;min-width:0}
.meta-add{width:40px;flex:none;border:1px solid var(--line);background:var(--raised);color:var(--ember);border-radius:9px;font-size:18px;line-height:1;cursor:pointer}
.meta-add:hover{border-color:var(--ember)}
.theme-pick{display:flex;gap:6px}
.theme-pick button{flex:1;padding:9px;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:9px;font-size:13px;transition:.12s}
.theme-pick button:hover{border-color:var(--line-2)}
.theme-pick button.on{border-color:var(--ember);color:var(--ember);background:var(--ember-soft)}
.lw{fill:var(--ember)}
.meta-color{color:var(--ember)}
.rq-new{background:rgba(255,106,43,.16);color:var(--ember)}
.rq-accepted,.rq-in_progress{background:rgba(63,127,174,.18);color:#6fa8d6}
.rq-clarify{background:rgba(224,179,65,.18);color:#e0b341}
.rq-done{background:rgba(76,203,107,.16);color:#4ccb6b}
.rq-canceled{background:#26282e;color:#646c7d}
.tasks-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)}
.tasks-head h2{margin:0;font-family:var(--brand-font);font-weight:700;letter-spacing:1.5px;font-size:22px}
.tasks-head .sp{flex:1}
.tasks-filters{display:flex;flex-wrap:wrap;gap:8px;padding:11px 20px;border-bottom:1px solid var(--line-soft);align-items:center}
.tasks-filters select{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 10px;font-size:13px;outline:none}
.tasks-filters select:focus{border-color:var(--ember)}
.tasks-filters .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.tasks-filters .chk input{accent-color:var(--ember)}
.tasks-table-wrap{flex:1;min-height:0;overflow:auto;padding:0 8px}
table.tasks-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tasks-table thead th{position:sticky;top:0;background:var(--bg);text-align:left;color:var(--muted-2);
font-weight:600;font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.tasks-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tasks-table tbody tr{cursor:pointer}
.tasks-table tbody tr:hover{background:var(--panel)}
.tasks-table .t-title{font-weight:600;color:var(--txt)}
.tasks-table tr.overdue .t-due{color:#ff7a6b;font-weight:600}
/* картки задач/заявок (сітка у стилі «кабінету»: картки з заголовком, рядками, бейджами) */
.task-cards{display:none}
.tasks-table-wrap.mode-cards table.tasks-table{display:none}
.tasks-table-wrap.mode-cards .task-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:16px 14px;align-content:start}
.ecard{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:16px 18px 14px;cursor:pointer;
box-shadow:var(--shadow-soft,none);transition:box-shadow .15s,border-color .15s}
.ecard:hover{box-shadow:0 6px 22px rgba(20,30,50,.10);border-color:var(--line)}
.ecard.overdue{border-color:rgba(255,106,43,.45)}
.ec-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.ec-title{flex:1;min-width:0;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--txt)}
.ec-sub{font-size:12px;color:var(--muted-2);margin:0 0 10px}
.ec-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:3px 0;min-width:0}
.ec-row b{color:var(--txt);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-ico{width:17px;flex:none;text-align:center;font-size:12.5px;opacity:.8}
.ec-warn{color:#e0834d;font-weight:600}
.ec-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pr-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.pr-pill.pr-low{background:rgba(122,130,144,.14);color:#8a93a3}
.pr-pill.pr-normal{background:rgba(63,127,174,.14);color:#5f97c9}
.pr-pill.pr-high{background:rgba(240,150,60,.18);color:#e0834d}
.pr-pill.pr-urgent{background:rgba(255,90,70,.16);color:#e0604d}
/* світіння картки за пріоритетом */
.ecard.glow-urgent{border-color:rgba(255,90,70,.55);box-shadow:0 0 0 1px rgba(255,90,70,.28),0 5px 18px rgba(255,90,70,.16)}
.ecard.glow-high{border-color:rgba(224,179,65,.5);box-shadow:0 0 0 1px rgba(224,179,65,.24),0 5px 18px rgba(224,179,65,.13)}
.ecard.glow-normal{border-color:rgba(63,127,174,.35);box-shadow:0 0 0 1px rgba(63,127,174,.15),0 4px 14px rgba(63,127,174,.09)}
.ecard.glow-urgent:hover{box-shadow:0 0 0 1px rgba(255,90,70,.4),0 8px 26px rgba(255,90,70,.24)}
.ecard.glow-high:hover{box-shadow:0 0 0 1px rgba(224,179,65,.36),0 8px 26px rgba(224,179,65,.2)}
.ecard.glow-normal:hover{box-shadow:0 0 0 1px rgba(63,127,174,.26),0 8px 24px rgba(63,127,174,.15)}
.ecard.done-card{opacity:.78}
/* чіпи-лічильники пріоритетів (клік = фільтр) */
.prio-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.12s}
.pchip .pd{width:8px;height:8px;border-radius:50%;flex:none}
.pchip .pc{font-weight:700;color:var(--txt)}
.pchip:hover{border-color:var(--line-2)}
.pchip.on{border-color:currentColor}
.pchip.pd-urgent{color:#e0604d} .pchip.pd-high{color:#c9962e} .pchip.pd-normal{color:#5f97c9} .pchip.pd-low{color:#8a93a3}
.pchip.pd-urgent .pd{background:#e0604d} .pchip.pd-high .pd{background:#c9962e} .pchip.pd-normal .pd{background:#5f97c9} .pchip.pd-low .pd{background:#8a93a3}
.tfs{width:220px;max-width:100%}
.tfs .perm-search{padding-right:30px}
/* лічильник пріоритету + перестановка задач */
.ec-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);flex:none;margin-right:2px}
.ec-move{display:inline-flex;gap:3px;margin-left:auto}
.ec-move button{width:26px;height:24px;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:7px;font-size:13px;line-height:1;cursor:pointer}
.ec-move button:hover{border-color:var(--ember);color:var(--ember)}
.ecard.dragging{opacity:.45}
.ecard[draggable="true"]{cursor:grab}
.ecard[draggable="true"]:active{cursor:grabbing}
.st-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* статуси (доробка №4.4): подана — сіра, в роботі — жовта, на перевірці — фіолетова,
на доопрацювання — помаранчева (як жовта: «треба працювати»), виконана — зелена, скасована — червона */
.st-submitted{background:rgba(138,147,163,.18);color:#8a93a3}
.st-in_progress{background:rgba(232,190,60,.22);color:#c9962e}
.st-review{background:rgba(150,110,220,.22);color:#9b7de0}
.st-done{background:rgba(76,203,107,.18);color:#3fb75e}
.st-rework{background:rgba(240,150,60,.22);color:#e0834d}
.st-canceled{background:rgba(255,90,70,.18);color:#e0604d}
.prio{font-size:11.5px;font-weight:600}
.prio-low{color:#7a8290} .prio-normal{color:var(--muted)} .prio-high{color:#e0b341} .prio-urgent{color:#ff7a6b}
.tasks-empty{padding:60px 20px;text-align:center;color:var(--muted-2)}
.modal-card.wide{max-width:760px}
.ro-ord{display:flex;align-items:center;gap:6px;padding:4px 2px}
.ro-ord span{flex:1;font-size:13.5px}
.ro-ord button{width:32px;height:27px;border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:7px;font-size:13px}
.ro-ord button:disabled{opacity:.3}
.ro-ord button:hover:not(:disabled){border-color:var(--ember);color:var(--ember)}
.frow{display:flex;gap:10px}
.frow .field{flex:1;min-width:0}
.chip-pick{display:flex;flex-wrap:wrap;gap:6px}
.upick{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.upick.sel{border-color:var(--ember);background:var(--ember-soft);color:var(--ember)}
.step-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.step-row input.st-title{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px;font-size:14px;outline:none}
.step-row select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px;font-size:12.5px;outline:none;max-width:140px}
.step-row button{width:38px;flex:none;border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:9px}
.td-sec{margin-bottom:16px}
.td-sec h4{margin:0 0 7px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2)}
.td-meta{display:flex;flex-wrap:wrap;gap:7px 18px;font-size:13px;color:var(--muted)}
.td-meta b{color:var(--txt);font-weight:600}
.td-desc{font-size:14px;white-space:pre-wrap;line-height:1.5}
.td-steps{display:flex;flex-direction:column;gap:6px}
.td-step{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line-soft);border-radius:9px;background:var(--raised)}
.td-step .num{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--raised-2);font-size:12px;color:var(--muted)}
.td-step.confirmed .num,.td-step.done .num{background:var(--ok);color:#0e1014}
.td-step .stp-main{flex:1;min-width:0}
.td-step .stp-t{font-size:13.5px}
.td-step .stp-a{font-size:11px;color:var(--muted-2)}
.td-step.in_progress{border-color:rgba(63,127,174,.4)}
.td-step.rework{border-color:rgba(255,106,43,.4)}
.td-step .stp-acts{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:200px}
.stp-btn{padding:4px 9px;border-radius:7px;border:1px solid var(--line);background:var(--raised-2);color:var(--muted);font-size:11.5px;white-space:nowrap}
.stp-btn:hover{border-color:var(--ember);color:var(--ember)}
/* Картка задачі була вузькою колонкою, а стрічка коментарів - віконцем на третину
екрана. Обидва тепер по місцю: картка ширша, коментарі займають більшу частину висоти. */
#taskDetailModal .modal-card{max-width:min(1060px,94vw);width:100%}
/* :not([hidden]) обов'язковий — інакше правило перебиває службовий атрибут hidden,
і стрічка коментарів висить у кожній вкладці картки задачі. */
#taskDetailModal .tc-pane[data-pane="comments"]:not([hidden]){display:flex;flex-direction:column}
.td-comments{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,620px);overflow:auto}
.td-comment{background:var(--raised);border:1px solid var(--line-soft);border-radius:9px;padding:8px 11px}
.td-comment .c-who{font-size:11px;color:var(--ember);font-weight:600;margin-bottom:2px}
.td-comment .c-who .c-time{font-weight:400;color:var(--muted);margin-left:7px}
.td-comment .c-body{font-size:13.5px;white-space:pre-wrap}
/* Кнопка «емодзі» біля поля вводу: та сама панель, що й для реакцій, але вставляє
символ у текст. Тримаємо її нейтральною, щоб не сперечалася зі «Надіслати». */
/* Результати глобального пошуку: під списком чатів і над картками задач.
Окремим блоком, а не вперемішку зі списком - інакше незрозуміло, що це знайдене. */
.chat-hits,.task-hits{display:flex;flex-direction:column;gap:6px;padding:6px 10px 12px}
.ch-hh,.th-hh{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);padding:8px 2px 2px}
.ch-hit,.th-hit{background:var(--bg);border:1px solid var(--line);border-radius:10px;
padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.ch-hit:hover,.th-hit:hover{border-color:var(--ember)}
.ch-hit-top,.th-hit-top{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:12.5px}
.ch-hit-top b,.th-hit-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-hit-top span{color:var(--muted);font-size:11.5px;flex:none}
.ch-hit-body,.th-hit-body{font-size:12.5px;color:var(--txt);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-hit-file{font-size:12px;color:var(--muted)}
.th-hit-sub{font-size:11.5px;color:var(--muted)}
/* Пікер людей: пошук по імені, посаді й відділу. Один вигляд у задачах і стрічці. */
.ppick{position:relative;display:flex;flex-direction:column;gap:6px}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.pp-empty{font-size:12.5px;color:var(--muted-2,var(--muted))}
.pp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--raised,rgba(127,127,127,.12));
border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 3px;font-size:12.5px;max-width:100%}
.pp-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;padding:0 2px;line-height:1}
.pp-x:hover{color:var(--danger,#d64545)}
.pp-in{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:9px;padding:8px 11px;font-size:13.5px;outline:none}
.pp-in:focus{border-color:var(--ember)}
.pp-list{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:4px;max-height:260px;overflow:auto;
background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:4px}
.pp-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;cursor:pointer}
.pp-row:hover{background:var(--raised,rgba(127,127,127,.12))}
.pp-row.on{background:color-mix(in srgb,var(--ember) 14%,transparent)}
.pp-rw{flex:1;min-width:0}
.pp-n{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-s{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-tick{color:var(--ember);font-weight:700;flex:none}
.pp-deptic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
background:var(--raised,rgba(127,127,127,.14));font-size:15px;flex:none}
.pp-none{padding:10px;font-size:12.5px;color:var(--muted);text-align:center}
/* Роздільник дня у стрічці: тонка лінія з підписом посередині. */
/* Звернення до IT: одне вікно з полями й зоною для скріна. */
/* Періодичність: готові варіанти плюс свій інтервал. */
/* Фільтр календаря — задачі окремо, події окремо. */
/* Перегляд фото: зображення по центру, кнопки згорнуті в куток. */
.ph-wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.ph-tools{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:0 0 8px} /* №81: над фото, не поверх */
.ph-cnt{margin-right:auto;color:rgba(255,255,255,.72);font-size:13px;padding-left:4px}
.lightbox.photo .lb-close{display:none}
.ph-stage{position:relative}
.ph-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:none;border-radius:12px;background:rgba(20,22,26,.55);color:#fff;font-size:34px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);z-index:2}
.ph-nav.prev{left:4px} .ph-nav.next{right:4px}
.ph-nav:hover{background:rgba(20,22,26,.85)} .ph-nav:disabled{opacity:.25;cursor:default}
.ph-reacts{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:2px 12px 12px}
.ph-rc,.ph-rq{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:5px 11px;font-size:15px;line-height:1;cursor:pointer}
.ph-rc.mine{background:rgba(26,111,196,.55);border-color:rgba(26,111,196,.9)}
.ph-rc:hover,.ph-rq:hover{background:rgba(255,255,255,.18)}
.ph-rq.more{font-weight:700;padding:5px 12px}
.ph-rsep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 4px}
.ph-rsep:first-child{display:none}
.ph-b{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
background:rgba(20,22,26,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;
backdrop-filter:blur(6px)}
.ph-b:hover{background:rgba(20,22,26,.85)}
.ph-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;padding:14px 56px} /* місце під стрілки по боках */
.ph-stage.grab{cursor:grab}
.ph-stage.grabbing{cursor:grabbing}
.ph-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
transform-origin:center center;will-change:transform;user-select:none}
.ph-cap{flex:none;text-align:center;color:rgba(255,255,255,.72);font-size:12.5px;
padding:6px 12px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Вибір із кількох варіантів (наприклад «фото чи файл»). */
.choice{display:flex;flex-direction:column;gap:8px}
.choice-b{text-align:left;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:12px;padding:12px 14px;cursor:pointer}
.choice-b:hover{border-color:var(--ember);background:rgba(21,90,146,.08)}
.choice-t{font-size:14px;font-weight:600}
.choice-s{font-size:12px;color:var(--muted);margin-top:2px}
.cal-filters{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--pad,18px) 10px}
.cal-filters button{background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.cal-filters button:hover{border-color:var(--ember)}
.cal-filters button.on{background:var(--ember);border-color:var(--ember);color:#fff;font-weight:600}
/* Тиждень: сім колонок, кожен запис видно повністю. */
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cw-col{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;
min-height:220px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.cw-col.today{border-color:var(--ember)}
.cw-col.wknd{background:color-mix(in srgb,var(--panel) 90%,var(--muted) 10%)}
.cw-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.cw-dow{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cw-d{font-size:16px;font-weight:700}
.cw-empty{color:var(--muted-2,var(--muted));font-size:12px;text-align:center;padding-top:6px}
/* Рік: дванадцять плиток із кількістю записів. */
.cal-year{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cal-year .cy-m{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:14px 10px;cursor:pointer;color:var(--txt);text-align:center}
.cal-year .cy-m:hover{border-color:var(--ember)}
.cal-year .cy-m.now{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset}
.cy-t{font-size:13px;font-weight:600}
.cy-n{font-size:20px;font-weight:700;margin-top:4px}
.cy-n.zero{color:var(--muted-2,var(--muted));font-weight:400}
@media (max-width:760px){
.cal-week{grid-template-columns:1fr;}
.cw-col{min-height:0}
.cal-year{grid-template-columns:repeat(2,1fr)}
}
/* Свій випадаючий список: системний лишається в розмітці, але невидимий - він і далі
тримає значення й надсилає change, тож код, що читає .value, не знає про підміну. */
/* Вкладки у формі створення задачі — ті самі, що й у картці. */
#taskModal .tc-pane[hidden]{display:none}
#taskModal .tc-tabs{margin-bottom:16px}
.csel{position:relative;display:block}
.csel-native{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;
appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0}
.csel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;
padding:9px 11px;font-size:13.5px;font-family:inherit;line-height:1.3;cursor:pointer;text-align:left}
.csel-btn:hover,.csel.open .csel-btn{border-color:var(--ember)}
/* Продукт: кнопка-фільтр показує повний текст, а не «за створен…» — кнопка розтягується */
.csel-lab{flex:1;min-width:0;white-space:nowrap}
.csel{width:auto;max-width:100%}
.csel-car{flex:none;color:var(--muted);font-size:11px}
/* Продукт #11: список не звужується до кнопки — «Директор», «Керівник» не обрізаються */
.csel-pop{position:absolute;left:0;right:auto;min-width:100%;width:max-content;max-width:min(360px,80vw);top:calc(100% + 4px);z-index:80;
max-height:268px;overflow:auto;background:var(--panel);border:1px solid var(--line);
border-radius:11px;box-shadow:var(--shadow);padding:4px}
.csel-pop.up{top:auto;bottom:calc(100% + 4px)}
.csel-pop[hidden]{display:none}
.csel-opt{padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.csel-opt:hover{background:var(--raised,rgba(127,127,127,.12))}
.csel-opt.on{background:color-mix(in srgb,var(--ember) 16%,transparent);font-weight:600}
.csel-opt.dis{opacity:.5;cursor:default}
.csel.dis{opacity:.6;pointer-events:none}
.td-meta .csel,.gf-hero .csel,.tasks-head .csel{display:inline-block;min-width:170px}
.recur-custom .csel{display:inline-block;width:auto;min-width:150px}
/* Періодичність: один список, а «Кожні» з'являється лише для свого інтервалу. */
.recur-custom{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.recur-custom[hidden]{display:none}
.recur-cl{font-size:12.5px;color:var(--muted)}
.recur-n{width:76px;background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:9px;padding:7px 9px;font-size:13.5px;outline:none}
.recur-u{background:var(--bg);border:1px solid var(--line);color:var(--txt);
border-radius:9px;padding:7px 9px;font-size:13.5px;outline:none}
.recur-hint{font-size:12px;color:var(--muted)}
.sup-urg{display:inline-flex}
.sup-drop{border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;
cursor:pointer;transition:border-color .12s,background .12s}
.sup-drop:hover,.sup-drop.over{border-color:var(--ember);background:rgba(21,90,146,.08)}
.sup-drop-t{font-size:12.5px;color:var(--muted)}
.sup-files{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.sup-file{display:flex;align-items:center;gap:8px;justify-content:space-between;
background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:12.5px}
.sup-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-day{display:flex;align-items:center;gap:10px;margin:14px 2px 8px;color:var(--muted);
font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.feed-day::before,.feed-day::after{content:'';flex:1;height:1px;background:var(--line)}
.feed-day span{flex:none}
#feedVoiceBtn.rec{background:rgba(214,69,69,.16);border-color:rgba(214,69,69,.7);color:#d64545}
/* «Усім» у порожньому стані — не сірий натяк, а повноцінна позначка адресата. */
/* Коментар як у чаті: фото, цитата, дії, надгробок замість зниклого. */
.td-comment{display:flex;gap:9px;align-items:flex-start}
.td-comment .c-av{width:30px;height:30px;border-radius:50%;font-size:11px}
.td-comment .c-col{flex:1;min-width:0}
.td-comment.gone{opacity:.6}
.c-gone{font-size:12.5px;color:var(--muted-2,var(--muted));font-style:italic;padding:4px 0}
.c-quote{border-left:2px solid var(--ember);padding:3px 0 3px 8px;margin:3px 0 5px;cursor:pointer;
background:color-mix(in srgb,var(--ember) 7%,transparent);border-radius:0 8px 8px 0}
.c-qa{font-size:11.5px;font-weight:600;color:var(--ember)}
.c-qb{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Подобається» під дописом — сам значок, як і дії коментаря. */
.pf-btn.pf-icon{padding-left:14px;padding-right:14px;font-size:15px;line-height:1}
/* Вікно поверх іншого вікна: у розмітці порядок модалок довільний, а перекривати
має саме те, яке відкрили останнім. */
.modal.on-top{z-index:60}
.c-reacts{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.c-reacts:empty{display:none}
.c-acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
/* Дії коментаря — самі значки: підписи з'їдали рядок під кожним коментарем. */
.c-act{background:var(--bg);border:1px solid var(--line);border-radius:8px;
width:28px;height:28px;display:grid;place-items:center;padding:0;
font-size:13px;color:var(--muted);cursor:pointer;line-height:1}
.c-act:hover{color:var(--ember);border-color:var(--ember)}
.c-flash{animation:cFlash 1.2s ease-out}
@keyframes cFlash{0%{background:color-mix(in srgb,var(--ember) 22%,transparent)}100%{background:transparent}}
/* Клас задавав display:flex і тим самим перебивав атрибут hidden - порожня панель
лишалася на екрані товстою смугою. */
.c-reply-bar{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;font-size:12px;
background:color-mix(in srgb,var(--ember) 9%,transparent);border-radius:9px}
.c-reply-bar[hidden]{display:none}
.c-reply-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Кому адресовано — просто в підписі допису, з переходом до повного списку. */
.ph-to{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.ph-to:hover{color:var(--ember)}
.pl-note{font-size:12px;color:var(--muted);padding:4px 2px 10px}
/* Розгорнутий допис. */
.pd-top{display:flex;gap:10px;align-items:center}
.pd-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pd-stat{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
color:var(--txt);border-radius:10px;padding:8px 13px;cursor:pointer;font-size:13px}
.pd-stat:hover:not(:disabled){border-color:var(--ember)}
.pd-stat:disabled{cursor:default;opacity:.7}
.pd-sl{color:var(--muted)}
.pd-sn{font-weight:700}
.pd-ch{margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.post-preview[hidden]{display:none}
.c-edit{margin-top:6px}
.c-edit textarea{width:100%;background:var(--bg);border:1px solid var(--ember);color:var(--txt);
border-radius:9px;padding:8px 10px;font-size:13.5px;font-family:inherit;line-height:1.4;
outline:none;resize:none;min-height:38px;max-height:200px}
.c-edit-row{display:flex;gap:6px;margin-top:6px}
.c-edit-row button{font-size:12.5px;padding:6px 12px}
.pp-chip.pp-all{background:color-mix(in srgb,var(--ember) 12%,transparent);
border-color:color-mix(in srgb,var(--ember) 45%,var(--line));font-weight:600}
/* Кнопка емодзі всередині поля: у рядку — праворуч, у багаторядковому — унизу,
щоб не накривати текст, який людина щойно набрала. */
/* Поле, через яке не пускає перевірка: помітно, але без крику. */
.fld-bad{animation:fldBad 2.2s ease-out}
.fld-bad > label{color:var(--danger,#d64545)}
@keyframes fldBad{
0%,60%{box-shadow:0 0 0 2px var(--danger,#d64545);border-radius:10px}
100%{box-shadow:0 0 0 0 transparent;border-radius:10px}
}
.fld-emj{position:relative}
.fld-emj > input,.fld-emj > textarea{padding-right:42px}
.fld-emj-b{position:absolute;right:5px;top:50%;transform:translateY(-50%);
padding:4px 6px;font-size:17px;line-height:1}
.fld-emj:has(textarea) .fld-emj-b{top:auto;bottom:9px;transform:none}
/* Продукт #19: замість жовтого емодзі — монохромна іконка усмішки в кольорі інтерфейсу (як скріпка й мікрофон).
Текст «🙂» лишається в розмітці для доступності, малюється лише маска. */
.emj-btn{background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;
font-size:0;line-height:0;padding:0;color:var(--muted);flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;position:relative}
.emj-btn::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.emj-btn:hover{background:var(--raised,rgba(127,127,127,.14));color:var(--ember)}
/* у композері чату — така сама сіра рамка й підкладка, як у скріпки й мікрофона (клас .emj-btn інакше їх перебивав) */
.composer .emj-btn.attach-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--muted);padding:0;display:inline-flex}
.composer .emj-btn.attach-btn:hover{color:var(--ember);border-color:var(--ember);background:var(--raised)}
/* у стрічці й формах — як сусідні сірі кнопки-чипи */
.fc-row .emj-btn,.fld-emj-b.emj-btn{border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.fc-row .emj-btn:hover,.fld-emj-b.emj-btn:hover{border-color:var(--ember);color:var(--ember)}
/* #18: правка назви/опису на місці */
#tdTitle.editable,.td-desc.editable{cursor:text;border-radius:8px;transition:background .12s}
#tdTitle.editable:hover,.td-desc.editable:hover{background:var(--raised,rgba(127,127,127,.12))}
.td-desc.muted{color:var(--muted-2)}
.td-edit{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--ember);color:var(--txt);border-radius:9px;padding:8px 10px;font:inherit;outline:none;resize:vertical}
#tdTitle .td-edit{font-size:inherit;font-weight:inherit}
.td-addc{display:flex;gap:8px;margin-top:8px;align-items:flex-end}
.td-addc input,.td-addc textarea{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px;font-size:14px;outline:none}
.td-addc textarea{resize:none;min-height:40px;max-height:140px;font-family:inherit;line-height:1.35}
/* статус у «Деталях» — список у кольорі поточного статусу (ті самі st-* кольори, що на картках) */
.csel:has(> .td-status-sel) .csel-lab{font-weight:700}
.csel:has(> .td-status-sel.st-submitted) .csel-lab{color:var(--muted)} .csel:has(> .td-status-sel.st-in_progress) .csel-lab{color:#c9962e}
.csel:has(> .td-status-sel.st-review) .csel-lab{color:#9b7de0} .csel:has(> .td-status-sel.st-done) .csel-lab{color:#4caf7a}
.csel:has(> .td-status-sel.st-rework) .csel-lab{color:#e0834d} .csel:has(> .td-status-sel.st-canceled) .csel-lab{color:#e0604d}
.td-danger-row{display:flex;flex-wrap:wrap;gap:8px}
.td-status-row{display:flex;flex-wrap:wrap;gap:6px}
.td-status-row button{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:12.5px}
.td-status-row button:hover{border-color:var(--ember);color:var(--ember)}
@media (max-width:768px){
/* спільні мобільні правила */
.bubble{-webkit-user-select:none;user-select:none} /* щоб довге натискання відкривало меню, а не виділяло текст */
.app,.app.ready{min-width:0;max-width:100%;width:100%}
#viewTasks,#viewCal,#viewRequests,#viewFeed,#viewDisk,#viewAdmin{min-width:0;max-width:100%;width:100%;overflow-x:hidden}
.tasks-table-wrap,.cal-wrap,.disk-body{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#tasksTable,#reqTable{display:none} /* на телефоні — завжди картки (таблиці незручні) */
#tasksWrap .task-cards,#reqWrap .task-cards{display:grid;grid-template-columns:1fr;gap:10px;padding:12px 10px}
.tasks-filters,.cal-head,.disk-head,.feed-composer{max-width:100%}
.cal-modes{flex-wrap:wrap}
.frow{flex-wrap:wrap}
.rail-btn span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:1.05}
/* на телефоні дії з файлами/папками Диска завжди видимі (hover не працює на тачі) */
.disk-item .di-act{display:flex}
.disk-item .di-act button{width:34px;height:34px}
/* більші тач-зони для дій */
.msg-actions{gap:6px} .msg-actions button{width:36px;height:32px}
.di-act button,.ph-act button,.chat-find button{min-width:34px;min-height:34px}
.att-grid{max-width:86%}
/* ===== меню ЗБОКУ (data-nav="side") ===== */
html[data-nav="side"] .rail{width:54px;left:0;top:0;bottom:0;right:auto;height:auto;flex-direction:column;
border-right:1px solid var(--line);border-top:none;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
html[data-nav="side"] .rail-btn{width:50px;font-size:8.5px;padding:7px 0;gap:3px}
html[data-nav="side"] .rail-btn svg{width:21px;height:21px}
html[data-nav="side"] .rail-btn span{max-width:52px}
html[data-nav="side"] .rail-sp{flex:1}
html[data-nav="side"] .main-area{margin-left:54px;margin-bottom:0;width:calc(100% - 54px);max-width:calc(100% - 54px);overflow-x:hidden}
/* ===== меню ЗНИЗУ (data-nav="bottom") — за замовчуванням ===== */
html[data-nav="bottom"] .rail{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;flex-direction:row;
align-items:center;justify-content:flex-start;gap:2px;
border-right:none;border-top:1px solid var(--line);
padding:5px 6px calc(5px + env(safe-area-inset-bottom));
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
html[data-nav="bottom"] .rail-sp{display:none}
html[data-nav="bottom"] .rail-btn{flex:0 0 auto;width:auto;min-width:60px;padding:6px 8px;font-size:9px;gap:3px}
html[data-nav="bottom"] .rail-btn svg{width:23px;height:23px}
html[data-nav="bottom"] .rail-btn span{max-width:64px}
html[data-nav="bottom"] .main-area{margin-left:0;margin-bottom:0;height:calc(100% - 60px - env(safe-area-inset-bottom));width:100%;max-width:100%;overflow-x:hidden}
/* запас знизу, щоб останній елемент списків не ховався під панеллю */
html[data-nav="bottom"] .tasks-table-wrap,
html[data-nav="bottom"] .cal-body,
html[data-nav="bottom"] .disk-body,
html[data-nav="bottom"] .feed-list,
html[data-nav="bottom"] .chatlist,
html[data-nav="bottom"] .messages{padding-bottom:18px}
/* календар: повністю вміщується на телефоні */
.cal-body{padding:8px}
.cal-cell{min-height:54px;padding:3px 3px}
.cal-cell .cd{font-size:11px}
.cal-chip{font-size:9.5px;padding:1px 3px;border-left-width:2px}
.cal-dow{padding:6px 2px;font-size:9.5px}
.cal-label{min-width:auto}
}
.cal-cell{min-width:0}
.cal-chip{min-width:0}
/* ---------- Етап 4: календар ---------- */
.cal-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cal-head h2{margin:0;font-family:var(--brand-font);font-weight:700;letter-spacing:1.5px;font-size:22px}
.cal-head .sp{flex:1}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav button{height:32px;min-width:32px;border:1px solid var(--line);background:var(--raised);color:var(--txt);border-radius:8px;font-size:16px}
.cal-nav button#calToday{padding:0 12px;font-size:13px;color:var(--muted)}
.cal-nav button:hover{border-color:var(--ember)}
.cal-label{font-size:15px;font-weight:600;margin-left:6px;min-width:140px}
.cal-modes{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.cal-modes button{padding:6px 12px;border:none;background:transparent;color:var(--muted);border-radius:6px;font-size:13px}
.cal-modes button.on{background:var(--ember-soft);color:var(--ember)}
.cal-body{flex:1;min-height:0;overflow:auto;padding:16px 18px}
/* ── календар: сучасна сітка + бокова колонка ── */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.cal-main{min-width:0}
.cal-side{display:flex;flex-direction:column;gap:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{padding:4px 6px 8px;text-align:center;font-size:11px;color:var(--muted-2);font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.cal-cell{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;min-height:104px;padding:7px 7px 6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:box-shadow .13s,border-color .13s;min-width:0}
.cal-cell:hover{border-color:var(--line-2);box-shadow:0 4px 14px rgba(20,30,50,.08)}
.cal-cell.other{background:transparent;border-color:transparent}
.cal-cell.other .cd{opacity:.4}
.cal-cell.wknd:not(.other){background:var(--bg-2)}
.cal-cell .cd{font-size:12px;font-weight:600;color:var(--muted);align-self:flex-end;width:23px;height:23px;display:grid;place-items:center;border-radius:50%}
.cal-cell.today{border-color:var(--ember)}
.cal-cell.today .cd{background:var(--ember);color:var(--on-accent,#fff);font-weight:700}
.cal-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt);background:color-mix(in srgb, var(--cc,#2563a8) 13%, transparent);border-radius:8px;padding:2.5px 7px;white-space:nowrap;overflow:hidden;cursor:pointer}
.cal-chip:hover{background:color-mix(in srgb, var(--cc,#2563a8) 22%, transparent)}
.cal-chip .cdot{width:7px;height:7px;border-radius:50%;flex:none}
.cal-chip .ct{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-chip .ctime{font-size:11px;font-weight:700;color:var(--cc,#2563a8);flex:none}
html[data-theme="dark"] .cal-chip, html[data-theme="unique"] .cal-chip{background:color-mix(in srgb, var(--cc,#38BDF8) 24%, transparent)}
html[data-theme="dark"] .cal-chip:hover, html[data-theme="unique"] .cal-chip:hover{background:color-mix(in srgb, var(--cc,#38BDF8) 34%, transparent)}
html[data-theme="dark"] .cal-chip .ctime, html[data-theme="unique"] .cal-chip .ctime{color:color-mix(in srgb, var(--cc,#38BDF8) 60%, #ffffff)}
html[data-theme="dark"] .cal-chip .ct, html[data-theme="unique"] .cal-chip .ct{color:var(--txt)}
html[data-theme="dark"] .cal-chip.imp, html[data-theme="unique"] .cal-chip.imp{background:rgba(224,96,77,.24)}
html[data-theme="dark"] .cal-chip.imp .ctime, html[data-theme="unique"] .cal-chip.imp .ctime{color:#ff9b86}
.cal-more{font-size:10.5px;color:var(--muted-2);padding-left:6px;font-weight:600}
/* agenda праворуч */
.cal-agenda{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px}
.cal-agenda h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);margin:0 0 9px}
.ag-item{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:8px;cursor:pointer;min-width:0}
.ag-item:hover{background:var(--bg)}
.ag-item .cdot{width:8px;height:8px;border-radius:50%;flex:none}
.ag-item .ag-t{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-item .ag-w{font-size:11px;color:var(--muted-2);flex:none}
.ag-day{font-size:11px;color:var(--muted-2);font-weight:700;margin:8px 2px 2px;text-transform:capitalize}
.ag-empty{font-size:12.5px;color:var(--muted-2);padding:4px 2px}
/* важливі елементи календаря — виділення кольором */
.ag-item.imp{background:rgba(224,96,77,.10);border:1px solid rgba(224,96,77,.35)}
.ag-item.imp .ag-t{font-weight:700;color:#c9553f}
.ag-item.imp:hover{background:rgba(224,96,77,.16)}
.cal-chip.imp{background:rgba(224,96,77,.13);font-weight:600}
.cal-chip.imp:hover{background:rgba(224,96,77,.2)}
.cal-li.imp{background:rgba(224,96,77,.07);border-color:rgba(224,96,77,.35)}
.cal-li.imp .li-title{font-weight:700}
.cal-list{display:flex;flex-direction:column}
.cal-day-group{margin-bottom:12px}
.cal-day-h{font-size:12px;color:var(--muted-2);font-weight:700;padding:6px 2px;margin-bottom:5px;text-transform:capitalize}
.cal-li{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--line-soft);border-radius:11px;background:var(--panel);cursor:pointer;border-left:3px solid var(--ember);margin-bottom:5px;transition:box-shadow .12s}
.cal-li:hover{box-shadow:0 4px 14px rgba(20,30,50,.08)}
.cal-li .li-time{font-size:12px;color:var(--muted);min-width:44px;font-weight:600}
.cal-li .li-title{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cal-li .li-type{font-size:11px;color:var(--muted-2)}
.cal-notes{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px}
.cal-notes h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);margin:0 0 9px}
.note-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg);margin-bottom:6px}
.note-item .ni-body{font-size:13px;white-space:pre-wrap}
.note-item .ni-meta{font-size:11px;color:var(--muted-2);margin-top:3px}
.note-item .ni-del{color:var(--muted-2);font-size:12px;cursor:pointer;flex:none}
.note-item .ni-del:hover{color:#ff7a6b}
@media (max-width:1000px){ .cal-layout{grid-template-columns:1fr} .cal-side{flex-direction:column} }
@media (max-width:768px){
.cal-cell{min-height:66px;border-radius:9px;padding:4px} .cal-cell .cd{font-size:11px;width:20px;height:20px}
.cal-chip{font-size:10px;padding:1.5px 5px} .cal-grid{gap:3px} .cal-body{padding:10px}
}
/* ================================================================
РЕДИЗАЙН 2026 — borderless · круглі аватари · капсули · світіння.
Додатковий шар поверх базових правил (3 теми = 3 прототипи).
Відкат: видалити цей блок або відновити index.backup.before-redesign3.php
================================================================ */
:root{
--glow:rgba(56,189,248,.18); --on-accent:#06222e; --cap:22px;
--shadow-card:0 1px 2px rgba(0,0,0,.22),0 12px 30px rgba(0,0,0,.32);
--shadow-soft:0 6px 20px rgba(0,0,0,.24);
}
html[data-theme="light"]{
--glow:rgba(37,99,235,.12); --on-accent:#ffffff;
--shadow-card:0 1px 2px rgba(15,23,42,.05),0 12px 28px rgba(15,23,42,.08);
--shadow-soft:0 6px 20px rgba(15,23,42,.06);
}
html[data-theme="unique"]{
--glow:rgba(217,169,60,.18); --on-accent:#1a1206;
--shadow-card:0 1px 2px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.5);
--shadow-soft:0 6px 22px rgba(0,0,0,.4);
}
/* круглі аватари скрізь */
.avatar{border-radius:50% !important}
/* borderless каркас — прибираємо жорсткі лінії, замінюємо тінню/фоном */
.sidebar,.rail{border-right:1px solid transparent !important}
.side-head,.me-chip,.disk-head,.tasks-head,.cal-head{border-bottom:1px solid transparent !important}
.conv-head{border-bottom:1px solid transparent !important;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.composer{border-top:1px solid transparent !important}
/* пошук + newchat: заповнені капсули, кнопка — акцентна заливка */
.search input{background:var(--raised) !important;border:1px solid transparent !important;
border-radius:var(--cap) !important;box-shadow:var(--shadow-soft);padding-left:36px}
.search input:focus{border-color:transparent !important;box-shadow:0 0 0 3px var(--ember-soft)}
.newchat{background:var(--ember) !important;border:none !important;color:var(--on-accent) !important;
border-radius:14px !important;font-weight:600;box-shadow:0 6px 18px var(--glow)}
.newchat:hover{background:var(--ember-deep) !important;color:var(--on-accent) !important}
/* активний чат — карта з тінню (кругла), стара смужка прибрана */
.chat-item{border-radius:16px}
.chat-item.active{background:var(--panel);box-shadow:var(--shadow-soft)}
html[data-theme="light"] .chat-item.active{background:#fff}
.chat-item.active::before{display:none !important}
/* онлайн-світіння навколо аватара (клас .on додає JS за presence) */
.avatar.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ember),0 0 12px 1px var(--glow) !important}
/* пузирі — капсули без рамок, з хвостиком до автора */
.bubble{border:1px solid transparent !important;border-radius:18px !important;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.msg:not(.mine) .bubble{border-bottom-left-radius:6px !important}
.msg.mine .bubble{border-bottom-right-radius:6px !important}
.msg.mine .bubble .time{color:inherit !important;opacity:.7} /* час слідує за кольором тексту (білий на синьому/блакитному, темний на золотому) */
.msg.system .bubble{box-shadow:none;border-radius:14px !important}
/* композер — плаваюча капсула, кругла кнопка надсилання зі світінням */
.composer textarea{background:var(--raised) !important;border:1px solid transparent !important;
border-radius:22px !important;box-shadow:var(--shadow-soft)}
.composer textarea:focus{border-color:transparent !important;box-shadow:0 0 0 3px var(--ember-soft) !important}
.send{border-radius:50% !important;color:var(--on-accent) !important;box-shadow:0 6px 18px var(--glow)}
.badge{color:var(--on-accent) !important}
.btn-primary{color:var(--on-accent) !important}
/* картки (диск/стрічка) — borderless + м'яка тінь + більший радіус */
.disk-item,.post,.feed-composer{border:1px solid transparent !important;border-radius:18px !important;box-shadow:var(--shadow-card)}
.disk-item{transition:transform .12s,box-shadow .12s}
.disk-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-card),0 0 0 1px var(--ember-soft)}
.post.pinned{border-left:3px solid var(--ember) !important;background:var(--ember-soft)}
/* рейл: активна вкладка — «пігулка» з акцентом; іконки-кнопки без рамок */
.rail-btn.active{background:var(--ember-soft)}
.iconbtn{border:1px solid transparent !important;border-radius:12px !important}
.iconbtn:hover{border-color:transparent !important}
/* ================================================================
РЕДИЗАЙН 2026 · шар 2 — скло на шапках, неон у dark, плаваючий композер
Відкат: видалити цей блок (шар 1 лишається робочим).
================================================================ */
/* скляні шапки (glassmorphism) — лише у чатах; шапки розділів тепер сині «Хаб»-hero */
.conv-head,.side-head{
background:color-mix(in srgb, var(--panel) 72%, transparent) !important;
backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
/* плаваючий центрований композер — капсула як у прототипі 1 */
.composer{
width:calc(100% - 24px) !important; max-width:760px; margin:0 auto 16px !important;
background:var(--raised) !important; border:1px solid transparent !important;
border-radius:26px !important; box-shadow:var(--shadow-card);
padding:8px 8px 8px 14px !important; align-items:center !important; gap:8px !important;
}
.composer textarea{background:transparent !important; box-shadow:none !important;
border-radius:16px !important; min-height:38px !important}
.composer textarea:focus{box-shadow:none !important}
/* стримане світіння у темній темі (мінімум неону) */
html[data-theme="dark"]{--glow:rgba(56,189,248,.22)}
html[data-theme="dark"] .send,
html[data-theme="dark"] .newchat{box-shadow:0 2px 8px rgba(0,0,0,.35)}
html[data-theme="dark"] .rail-btn.active{box-shadow:none}
html[data-theme="dark"] .badge{box-shadow:none}
html[data-theme="dark"] .avatar.on{box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--ember) !important}
html[data-theme="dark"] .conv-meta .typing,
html[data-theme="dark"] .conv-title{text-shadow:none}
/* ===== скін під референс (чат) ===== */
.conv-meta .dot{width:8px;height:8px}
.conv-meta .dot.online{background:var(--ok)} .conv-meta .dot.busy{background:var(--busy)} .conv-meta .dot.away{background:var(--busy)} .conv-meta .dot.offline{background:var(--muted-2)}
#convDot{width:11px;height:11px;border:2px solid var(--panel)}
.pinbar{background:color-mix(in srgb, var(--ember-soft) 55%, var(--panel)) !important; border-left:3px solid var(--ember); border-bottom:1px solid var(--line)}
.pinbar .pb-text b{color:var(--ember)}
.pb-collapse{flex:none;border:none;background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:inherit;padding:2px 4px}
.pb-collapse:hover{color:var(--ember)}
.conv-title{font-weight:700}
/* закріплення / перетягування чатів */
.ci-pin{font-size:11px;margin-right:5px;vertical-align:middle;opacity:.9}
.chat-item.pinned{background:color-mix(in srgb, var(--ember-soft) 45%, transparent);box-shadow:inset 3px 0 0 var(--ember)}
/* вкладки списку чатів + чипи посад у новому чаті */
.chat-tabs{display:flex;gap:6px;padding:0 14px 10px}
.chat-tabs button{flex:1;padding:7px 4px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.chat-tabs button.on{background:var(--ember-soft);border-color:transparent;color:var(--ember);font-weight:700}
.nc-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.nc-chip{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:18px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.nc-chip.on{background:var(--ember-soft);border-color:transparent;color:var(--ember);font-weight:700}
.ulist.direct .check{display:none}
/* пошук/відповіді у боковій панелі */
.cs-hit{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer;transition:border-color .12s}
.cs-hit:hover{border-color:var(--ember)}
.cs-hit-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.cs-hit-top b{font-size:12.5px;color:var(--txt)}
.cs-hit-top span{font-size:11px;color:var(--muted-2);flex:none}
.cs-hit-body{font-size:12.5px;color:var(--muted);line-height:1.45;max-height:60px;overflow:hidden;white-space:pre-wrap;word-break:break-word}
/* позначка «↩ N відповідей» */
.reply-badge{align-self:flex-start;margin-top:3px;border:1px solid var(--line);background:var(--bg);color:var(--muted);
border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.reply-badge:hover{border-color:var(--ember);color:var(--ember)}
.msg.mine .reply-badge{align-self:flex-end}
/* «хто переглянув / реакції з іменами» */
.mi-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.mi-row{display:flex;align-items:center;gap:10px;padding:6px 2px}
.mi-row .avatar{width:28px;height:28px;font-size:11px;flex:none}
.mi-nm{font-size:13.5px;color:var(--txt)}
.mi-empty{font-size:12.5px;color:var(--muted);padding:4px 2px}
.mi-react{margin:8px 0 4px;padding:8px 10px;background:var(--bg);border-radius:12px}
.mi-rhead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.mi-emoji{font-family:var(--emoji-font);font-size:19px;line-height:1}
.mi-cnt{font-size:12px;font-weight:700;color:var(--muted)}
/* «надгробок» видаленого повідомлення */
.deleted-msg .bubble{opacity:.72;font-style:italic}
.del-reveal{margin-left:8px;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:8px;
padding:3px 10px;font-size:11.5px;cursor:pointer;font-style:normal;font-family:inherit}
.del-reveal:hover{border-color:var(--ember);color:var(--ember)}
.chat-item[draggable="true"]{cursor:grab}
.chat-item.dragging{opacity:.5;cursor:grabbing;background:var(--raised)}
/* ===== активний чат — синя рамка-картка (як у референсі) ===== */
.chat-item{border:1.5px solid transparent;border-radius:14px}
.chat-item.active{background:color-mix(in srgb, var(--ember-soft) 30%, transparent) !important;border-color:var(--ember) !important;box-shadow:none !important}
.chat-item.active::before{display:none !important}
/* яскраві сині «свої» бульбашки */
html[data-theme="dark"] .msg.mine .bubble{background:var(--ember) !important;border-color:var(--ember) !important;color:#fff !important}
/* ===== постійна права панель: Учасники / Медіа·Файли ===== */
@media(min-width:1101px){ .app.side-open{grid-template-columns:340px minmax(0,1fr) 300px} }
.chat-side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}
.cs-tabs{display:flex;gap:6px;padding:12px 14px 10px;border-bottom:1px solid var(--line-soft)}
.cs-tab{flex:1;padding:9px 10px;border:none;border-radius:10px;background:var(--bg);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.cs-tab.on{background:var(--ember);color:#fff}
.cs-body{flex:1;min-height:0;overflow-y:auto;padding:10px 12px}
.cs-mem{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:12px;cursor:pointer}
.cs-mem:hover{background:var(--raised)}
.cs-mem .avatar{width:42px;height:42px;border-radius:50%;font-size:14px}
.cs-mem .nm{font-weight:600;font-size:14px}
.cs-mem .pr{font-size:12px;color:var(--muted);margin-top:1px}
.cs-mem .pr.online{color:var(--ok)}
.cs-mem .pr.away{color:var(--busy)}
.cs-empty{color:var(--muted-2);font-size:13px;text-align:center;padding:24px 8px}
@media(max-width:1100px){ .chat-side{display:none !important} }
/* hidden-атрибут має перемагати display класів (інакше панель/композер «випливають» без чату) */
.chat-side[hidden],.composer[hidden],.conv-head[hidden],#messages[hidden]{display:none !important}
/* ===== іконки як у референсі: тонкі (1.8) зі скругленнями ===== */
.rail-btn svg,.iconbtn svg,.conv-head svg,.composer svg,.cal-nav svg,.back svg{stroke-width:1.8}
.rail-btn svg *,.iconbtn svg *,.conv-head svg *,.composer svg *{stroke-linecap:round;stroke-linejoin:round}
/* ===== бейджі-лічильники у рейлі (реальні числа) ===== */
.rail-btn{position:relative}
.rail-badge{position:absolute;top:1px;right:3px;min-width:18px;height:18px;line-height:18px;border-radius:9px;
background:var(--ember);color:#fff;font-size:10.5px;font-weight:600;text-align:center;padding:0 5px}
.rail-badge[hidden]{display:none !important}
.rail-badge.gray{background:var(--raised-2);color:var(--muted)}
.rail-badge.red{background:var(--danger);color:#fff}
html[data-theme="light"] .rail-badge.gray{background:#eef1f5;color:#5c6675}
html[data-theme="light"] .rail-badge.red{background:#fdecea;color:#d4553f}
/* ===== HOVER: помітне виділення під курсором — картки, рядки, списки (глобально) ===== */
.ecard{transition:box-shadow .15s,border-color .15s,transform .13s}
.ecard:hover{transform:translateY(-3px);border-color:var(--ember)}
.ecard.glow-urgent:hover{border-color:rgba(255,90,70,.8)}
.ecard.glow-high:hover{border-color:rgba(224,179,65,.75)}
.ecard.glow-normal:hover{border-color:rgba(63,127,174,.65)}
.ecard.done-card:hover{transform:translateY(-1px);border-color:var(--line-2)}
.tasks-table tbody tr{transition:background .1s}
.tasks-table tbody tr:hover td{background:var(--raised)}
.tasks-table tbody tr:hover .t-title{color:var(--ember)}
.chat-item{transition:background .12s,border-color .12s}
.chat-item:hover{background:var(--raised);border-color:var(--line-2) !important}
.post{transition:box-shadow .15s,border-color .15s,transform .13s}
.post:hover{border-color:var(--ember) !important;transform:translateY(-2px);box-shadow:0 0 0 1px var(--ember),0 8px 22px rgba(20,30,50,.13)}
.notif-item{transition:background .1s}
.notif-item:hover{background:var(--raised)}
.uitem,.cs-mem{transition:background .1s}
.uitem:hover,.cs-mem:hover{background:var(--raised)}
.note-item{transition:border-color .12s,box-shadow .12s}
.note-item:hover{border-color:var(--line-2);box-shadow:0 3px 10px rgba(20,30,50,.07)}
.cal-cell{will-change:transform}
.cal-cell:hover:not(.other){transform:translateY(-2px);border-color:var(--ember)}
.cal-li{transition:box-shadow .12s,transform .12s,border-color .12s}
.cal-li:hover{transform:translateX(3px)}
.ag-item{transition:background .1s,transform .1s}
.ag-item:hover{transform:translateX(3px)}
.disk-item{transition:transform .13s,box-shadow .13s,border-color .13s}
.disk-item:hover{border-color:var(--ember) !important;transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--ember),0 9px 24px rgba(20,30,50,.14)}
.dp-node{transition:background .1s}
.msg .bubble{transition:filter .12s}
.msg:hover .bubble{filter:brightness(1.06)}
html[data-theme="light"] .msg:hover .bubble{filter:brightness(.965)}
.pchip{transition:transform .1s,border-color .12s}
.pchip:hover{transform:translateY(-1px)}
.cal-modes button,.stp-btn,.btn-ghost,.btn-go,.newchat{transition:background .12s,border-color .12s,color .12s,transform .1s}
.btn-go:hover,.newchat:hover{transform:translateY(-1px)}
/* ==== ВІЗУАЛ за зауваженнями Кирила: акцентні кнопки сині з БІЛИМ написом ==== */
.btn-go,.btn-primary{background:var(--gf-accent-deep,#123f7b);color:#fff;font-weight:600}
.btn-go:hover,.btn-primary:hover{filter:brightness(1.12);color:#fff}
html[data-theme="dark"] .btn-go,html[data-theme="unique"] .btn-go,
html[data-theme="dark"] .btn-primary,html[data-theme="unique"] .btn-primary{background:#1a6fc4;color:#fff}
.newchat{background:var(--gf-accent-deep,#123f7b) !important;color:#fff !important}
html[data-theme="dark"] .newchat,html[data-theme="unique"] .newchat{background:#1a6fc4 !important}
.gf-hero .btn-go{background:#fff;color:#15589e} /* на синьому hero — біла кнопка, як у киті */
/* опитування — окремий блок-картка, а не «продовження повідомлення» */
.poll{background:var(--panel);border:1.5px solid var(--gf-accent,#1a6fc4);border-radius:14px;padding:11px 13px 9px;box-shadow:0 4px 14px rgba(16,48,88,.10)}
.poll::before{content:'📊 Опитування';display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gf-accent,#1a6fc4);margin-bottom:7px}
/* пересилання: рядки з аватарками */
.fwd-item{display:flex;align-items:center;gap:10px}
/* голосові */
#voiceBtn{font-size:17px;line-height:1;min-width:38px;white-space:nowrap}
#voiceBtn.rec{background:var(--danger) !important;color:#fff !important;border-radius:12px;animation:vrec 1.1s ease-in-out infinite}
@keyframes vrec{0%,100%{opacity:1}50%{opacity:.55}}
.voice-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:color-mix(in srgb, var(--danger) 14%, var(--panel));border-top:1px solid var(--line)}
.voice-bar b{font-size:14px;color:var(--txt);min-width:44px}
.vb-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex:none;animation:vrec 1.1s ease-in-out infinite}
.vb-lbl{font-size:13px;color:var(--muted)}
.voice-bar .btn-go,.voice-bar .btn-ghost{padding:7px 14px;font-size:13px}
/* проєктна задача: степер підзадач — гілки вниз, виконане пригашене, активне підсвічене */
.td-step.confirmed,.td-step.canceled{opacity:.55}
.td-step.active{border-color:var(--gf-accent,#1a6fc4);box-shadow:0 0 0 1px color-mix(in srgb, var(--gf-accent,#1a6fc4) 40%, transparent)}
.stp-arrow{text-align:center;color:var(--muted-2);font-size:14px;line-height:1;margin:-1px 0}
.stp-parallel{border-left:2px dashed color-mix(in srgb, var(--gf-accent,#1a6fc4) 55%, transparent);padding-left:10px;display:flex;flex-direction:column;gap:6px}
.stp-par-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.st-par{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:4px;cursor:pointer}
.st-par input{accent-color:var(--gf-accent,#1a6fc4)}
.att-meta{align-self:flex-end;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted-2);padding:2px 4px 0}
.att-meta .time{position:static;font-size:11px}
.att-audio{display:flex;align-items:center;gap:8px;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:6px 12px 6px 10px;width:min(420px,86vw);max-width:100%}
.att-audio audio{height:40px;width:100%;min-width:0}
/* ---- усі вікна відкриваються панеллю збоку (drawer) ---- */
.modal{align-items:stretch;justify-content:flex-end;padding:0}
.modal-card{width:min(560px,100%);max-width:none;height:100%;max-height:100%;
border-radius:16px 0 0 16px;border-right:none;animation:gfDrawerIn .18s ease-out}
.modal-card.wide{width:min(820px,100%)}
/* із дерева проєкту картку відкриваємо на все поле: там більше контексту */
.modal-card.full{width:min(1000px,100%);max-width:none}
/* учасники задачі: біля кожного — кнопка «написати в чат» */
/* ── картка задачі: смуга етапів + плитки + вкладки ── */
/* смуга етапів: де ця задача в ланцюгу проєкту */
.tc-steps{display:flex; align-items:center; padding:4px 2px 18px; margin:0 0 4px; overflow-x:auto; gap:0}
.tc-step{display:flex; align-items:center; gap:10px; flex:none; cursor:pointer; background:none; border:0;
font:inherit; padding:6px 8px; border-radius:12px; transition:.12s; text-align:left}
.tc-step:hover{background:var(--bg)}
.tc-step .b{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
background:var(--bg); border:1px solid var(--line); color:var(--muted); flex:none}
.tc-step.done .b{background:var(--ok); border-color:var(--ok); color:#fff}
.tc-step.now .b{background:var(--gf-accent,#1a6fc4); border-color:var(--gf-accent,#1a6fc4); color:#fff;
box-shadow:0 0 0 4px color-mix(in srgb,var(--gf-accent,#1a6fc4) 18%,transparent)}
.tc-step .t{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.tc-step .t b{font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;
max-width:190px; overflow:hidden; text-overflow:ellipsis}
.tc-step .t span{font-size:11.5px; color:var(--muted-2); white-space:nowrap}
.tc-step.done .t b{color:var(--ok)}
.tc-step.now .t b{color:var(--txt)}
.tc-line{width:36px; height:2px; background:var(--line); flex:none; margin:0 4px}
.tc-line.done{background:var(--ok)}
/* плитки з головним */
.tc-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 14px}
.tc-tile{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px;
background:var(--bg); border:1px solid var(--line)}
.tc-tile .k{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.tc-tile .v{font-size:15px; font-weight:700}
.tc-tile .sub{font-size:12px; color:var(--muted)}
.tc-tile.link{cursor:pointer}
.tc-tile.link:hover{border-color:var(--gf-accent,#1a6fc4)}
.tc-date{font:inherit; font-size:15px; font-weight:700; color:var(--txt); background:var(--panel);
border:1px solid var(--gf-accent,#1a6fc4); border-radius:8px; padding:2px 6px; width:100%; max-width:170px}
/* вкладки */
.tc-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; margin:0 0 14px}
.tc-tab{font:inherit; font-size:13.5px; font-weight:600; color:var(--muted); background:transparent;
border:0; border-bottom:2px solid transparent; padding:9px 12px; cursor:pointer; white-space:nowrap}
.tc-tab:hover{color:var(--txt)}
.tc-tab.on{color:var(--gf-accent,#1a6fc4); border-bottom-color:var(--gf-accent,#1a6fc4)}
.tc-cnt{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--bg);
border:1px solid var(--line); font-size:11px; font-weight:700; color:var(--muted); margin-left:5px}
/* дата + час в одному полі (дедлайн) */
.dt-pair{display:flex; gap:6px}
.dt-pair input[type=date]{flex:1; min-width:0}
.dt-pair input[type=time]{flex:none; width:96px}
.tc-date-pair{display:flex; gap:6px; align-items:center}
.tc-pane[hidden]{display:none}
/* режим розробника: доступ до розділів на людину */
.dev-h{margin:16px 0 4px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2)}
.dev-note{font-size:12.5px; color:var(--muted); margin:0 0 10px}
.dev-user{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:9px 0; border-bottom:1px solid var(--line)}
.dev-user:last-child{border-bottom:0}
.dev-user-name{font-size:13.5px; font-weight:600; min-width:150px}
.dev-user-role{font-size:11.5px; color:var(--muted-2); white-space:nowrap}
.dev-keys{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.dev-key{font:inherit; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; cursor:pointer;
border:1px solid var(--line); background:var(--bg); color:var(--muted-2)}
.dev-key.on{border-color:var(--ok); color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent)}
.dev-key.off{border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent)}
.dev-key:hover{border-color:var(--gf-accent,#1a6fc4)}
/* звідки задача: проєкт і його лічильники просто в картці списку */
.ec-prj{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:2px 0 8px}
.ec-prj-link{font:inherit; font-size:12.5px; font-weight:700; color:var(--gf-accent,#1a6fc4);
background:color-mix(in srgb,var(--gf-accent,#1a6fc4) 12%,transparent); border:0;
border-radius:20px; padding:3px 10px; cursor:pointer}
.ec-prj-link:hover{background:color-mix(in srgb,var(--gf-accent,#1a6fc4) 20%,transparent)}
.ec-prj-cnt{font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}
/* статус і коментарі просто в картці списку */
.ec-status{font:inherit; font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:20px;
border:1px solid var(--line); background:var(--bg); color:var(--txt); cursor:pointer; max-width:150px}
.ec-status:hover{border-color:var(--gf-accent,#1a6fc4)}
.ec-status:disabled{opacity:.6}
.ec-chat{font:inherit; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px;
border:1px solid var(--line); background:var(--bg); color:var(--muted); cursor:pointer}
.ec-chat:hover{border-color:var(--gf-accent,#1a6fc4); color:var(--gf-accent,#1a6fc4)}
/* є що почитати: нові коментарі після останнього перегляду */
.ec-chat.unread{background:var(--gf-accent,#1a6fc4); border-color:var(--gf-accent,#1a6fc4); color:#fff}
.ec-chat.unread:hover{color:#fff; opacity:.9}
/* заголовок групи задач за строком */
.tg-head{grid-column:1/-1; display:flex; align-items:center; gap:10px; margin:14px 2px 2px;
font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.tg-head:first-child{margin-top:0}
.tg-head::after{content:''; flex:1; height:1px; background:var(--line)}
.tg-count{font-size:11px; font-weight:700; color:var(--muted); background:var(--panel);
border:1px solid var(--line); border-radius:20px; padding:1px 8px; order:2}
.tg-head.overdue{color:var(--danger)}
.tg-head.overdue::after{background:color-mix(in srgb,var(--danger) 35%,transparent)}
.tg-head.today{color:var(--gf-accent,#1a6fc4)}
.tg-head.today::after{background:color-mix(in srgb,var(--gf-accent,#1a6fc4) 35%,transparent)}
.ec-prj-stage{font-size:11.5px; font-weight:700; color:var(--muted); background:var(--bg);
border:1px solid var(--line); border-radius:20px; padding:2px 9px; white-space:nowrap}
/* секції всередині вкладки відділяються лінією, як у макеті */
.tc-pane .td-sec{padding:14px 0; border-bottom:1px solid var(--line); margin:0}
.tc-pane .td-sec:last-child{border-bottom:0; padding-bottom:4px}
.tc-pane .td-sec h4{margin:0 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
text-transform:uppercase; color:var(--muted-2)}
/* «Деталі» - сітка підпис-значення замість суцільного рядка. */
.tc-pane .td-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:10px 22px; font-size:13.5px; align-items:center}
@media (max-width:560px){ .tc-pane .td-meta{grid-template-columns:1fr} }
.td-inline-sel{font:inherit; font-size:13px; font-weight:600; padding:3px 8px; border-radius:8px;
border:1px solid var(--line); background:var(--panel); color:var(--txt); cursor:pointer}
.td-inline-sel:hover{border-color:var(--gf-accent,#1a6fc4)}
.td-inline-chk{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.td-inline-chk input{accent-color:var(--gf-accent,#1a6fc4); cursor:pointer}
.tc-pane .td-desc{font-size:14px; line-height:1.6}
/* рядок історії: коли · хто · що змінилось */
.th-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:7px 0;
border-bottom:1px solid var(--line); font-size:13px}
.th-row:last-child{border-bottom:0}
.th-when{color:var(--muted-2); font-variant-numeric:tabular-nums; min-width:132px}
.th-who{font-weight:600; color:var(--txt)}
.th-what{color:var(--muted)}
.th-note{width:100%; color:var(--muted-2); font-size:12.5px; font-style:italic}
/* кнопки зміни статусу — чипи */
.tc-pane .td-status-row{display:flex; flex-wrap:wrap; gap:7px}
.tc-pane .td-status-row button{font:inherit; font-size:13px; font-weight:600; padding:7px 14px;
border-radius:20px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; transition:.12s}
.tc-pane .td-status-row button:hover{border-color:var(--gf-accent,#1a6fc4); color:var(--gf-accent,#1a6fc4)}
.tc-pane .td-status-row button.on{background:var(--gf-accent,#1a6fc4); border-color:var(--gf-accent,#1a6fc4); color:#fff}
/* помітка «частина проєкту» у картці задачі */
.td-prj{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;
border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.td-prj-lb{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.td-prj-nm{font-size:14px;font-weight:700;color:var(--txt)}
.td-people{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:6px}
.tp-lab{color:var(--muted-2)}
.tp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:20px;
background:var(--bg);border:1px solid var(--line);color:var(--txt)}
.tp-send{border:0;background:var(--panel);border:1px solid var(--line);border-radius:50%;
width:22px;height:22px;line-height:1;cursor:pointer;font-size:11px;color:var(--muted);transition:.12s}
.tp-send:hover{border-color:var(--gf-accent,#1a6fc4);color:var(--gf-accent,#1a6fc4)}
/* конверт — SVG замість текстового гліфа, який емодзі-шрифт зсував з центру */
.tp-send-ico{display:inline-flex;align-items:center;justify-content:center;padding:0}
.tp-send-ico svg{width:12px;height:12px;display:block}
/* редактор виконавців і журнал змін */
.ae-box{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ae-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.ae-chk{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
border:1px solid var(--line);background:var(--panel);font-size:13px;cursor:pointer}
.ae-chk.on{border-color:var(--gf-accent,#1a6fc4);color:var(--gf-accent,#1a6fc4);font-weight:600}
.ae-acts{display:flex;gap:8px}
.ae-hist{margin-top:8px;font-size:12.5px;color:var(--muted)}
.ae-hist .h{color:var(--muted-2);text-transform:uppercase;font-size:11px;letter-spacing:.04em;margin-bottom:4px}
.ae-hist div.r{margin-bottom:3px}
/* посилання на задачу всередині повідомлення чату */
.msg-task-link{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:8px;
border:1px solid var(--line);background:var(--panel);color:var(--ember);
font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.msg-task-link:hover{border-color:var(--ember)}
.msg-task-link+.msg-task-link{margin-left:6px}
.msg-task-link.accept{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.msg-task-link.accept:hover{border-color:var(--ok)}
.msg-task-link:disabled{opacity:.7;cursor:default}
.modal-card.full .td-meta{gap:8px 26px}
.modal-body{flex:1;min-height:0}
@keyframes gfDrawerIn{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@media (max-width:768px){
.modal-card,.modal-card.wide{width:100%;border-radius:0}
}
/* вкладення у вікні гілки */
.br-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.br-file{display:flex;align-items:center;gap:6px;background:var(--raised);border:1px solid var(--line-soft);
border-radius:9px;padding:6px 9px;font-size:12px;color:var(--muted)}
.br-file img{width:34px;height:34px;object-fit:cover;border-radius:6px;flex:none}
.br-file button{border:none;background:none;color:var(--muted-2);font-size:14px;cursor:pointer;line-height:1}
.br-file button:hover{color:#d64545}
/* сітка карток проєктів — як у задачах */
.ec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;width:100%}
/* список проєктів: гілки акордеоном прямо в картці */
.pl-toggle{margin-top:10px;font:inherit;font-size:13px;font-weight:600;color:var(--gf-accent,#1a6fc4);
background:none;border:0;padding:4px 0;cursor:pointer;display:flex;align-items:center;gap:6px}
.pl-toggle .chev{display:inline-block;transition:transform .15s}
.pl-toggle.open .chev{transform:rotate(90deg)}
.pl-tree{list-style:none;margin:6px 0 0;padding:0 0 0 10px;border-left:2px solid var(--line)}
.pl-tree li{margin:3px 0}
.pl-tree .pl-tree{margin-left:8px}
/* назва — на повний рядок, виконавець і строк — під нею: у вузькій картці назви не ріжуться */
.pl-node{display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:center;font-size:13px;padding:5px 7px;border-radius:8px;cursor:pointer;min-width:0}
.pl-node:hover{background:var(--bg)}
.pl-node .st-badge{font-size:10.5px;padding:2px 7px;white-space:nowrap}
.pl-node .t{min-width:0;line-height:1.3}
.pl-node .m{grid-column:2;color:var(--muted);font-size:12px}
.pl-node .m:empty{display:none}
.pl-empty{font-size:12.5px;color:var(--muted);padding:6px 0 0}
/* проєктні задачі під списком проєктів */
.pl-tasks{margin-top:22px;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:14px 16px 10px}
.pl-tasks-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pl-tasks-head h3{margin:0;font-size:16px}
.pl-filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.pl-filters select,.pl-filters input{font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--txt)}
.pl-filters input{min-width:160px}
.pl-table{width:100%;border-collapse:collapse;font-size:13.5px}
.pl-table th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);padding:6px 8px;border-bottom:1px solid var(--line)}
.pl-table td{padding:8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.pl-table tr.row{cursor:pointer}
.pl-table tr.row:hover td{background:var(--bg)}
.pl-table .muted{color:var(--muted)}
.pl-count{font-size:12.5px;color:var(--muted);margin-left:8px}
@media (max-width:768px){ .pl-table th:nth-child(1),.pl-table td:nth-child(1),.pl-table th:nth-child(5),.pl-table td:nth-child(5){display:none} }
/* вузол дерева на базі .ecard */
.prj-tree li .ecard.prj-node{width:300px;text-align:left;cursor:pointer;margin:0 auto}
.prj-tree .ec-title{overflow-wrap:break-word}
.prj-tree li .ecard.prj-node.locked{border-style:dashed;opacity:.75}
/* перетягування гілок */
.prj-tree li .ecard.prj-node[draggable='true']{cursor:grab}
.prj-tree li .ecard.prj-node.dragging{opacity:.45; cursor:grabbing}
.prj-tree li .ecard.prj-node.drop-here{border-color:var(--gf-accent,#1a6fc4); border-style:dashed;
box-shadow:0 0 0 4px color-mix(in srgb,var(--gf-accent,#1a6fc4) 22%,transparent)}
/* моя гілка: видно з першого погляду, де саме моя робота */
.prj-tree li .ecard.prj-node.mine-node{border-color:var(--gf-accent,#1a6fc4); border-width:2px;
box-shadow:0 0 0 4px color-mix(in srgb,var(--gf-accent,#1a6fc4) 16%,transparent), var(--gf-card-shadow)}
.prj-tree li .ecard.prj-node.mine-node::after{content:'моя задача'; position:absolute; top:-10px; left:12px;
background:var(--gf-accent,#1a6fc4); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em;
padding:2px 8px; border-radius:20px; white-space:nowrap}
.prj-tree li .ecard.prj-node{position:relative}
/* плашка стоїть над верхнім краєм картки, а базовий .ecard ріже все за межами (overflow:hidden) */
.prj-tree li .ecard.prj-node.mine-node{overflow:visible}
.prj-tree li .ecard.prj-node.locked:hover{border-color:var(--danger);opacity:1;
box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 35%,transparent),var(--gf-card-shadow)}
/* закрита гілка у спокої не кричить кольором — рамка спалахує червоним лише при наведенні */
.prj-tree li .ecard.prj-node.done-card{opacity:1;border-color:var(--ok);
background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.prj-tree li .ecard.prj-node.done-card:hover{border-color:var(--danger);
box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 35%,transparent),var(--gf-card-shadow)}
/* виконана гілка: лінія до неї та вниз від неї — зелена, як і рамка з номером.
Клас br-done вішається на у renderChain: CSS не бачить статус усередині картки. */
.prj-tree li.br-done::before,.prj-tree li.br-done::after{border-top-color:var(--ok)}
.prj-tree li.br-done::after{border-left-color:var(--ok)}
.prj-tree li.br-done:last-child::before{border-right-color:var(--ok)}
.prj-tree li.br-done>ul::before{border-left-color:var(--ok)}
.prj-tree li.br-done>.ecard.prj-node{border-color:var(--ok)}
.prj-tree li.br-done>.ecard.prj-node .ec-num{background:var(--ok);border-color:var(--ok);color:#fff}
.prj-tree li.br-done>.ecard.prj-node.done-card:hover{border-color:var(--danger)}
.prj-tree li .ec-acts{display:flex;gap:6px;margin-top:8px}
/* підпис рівня праворуч у шапці картки */
.stage-badge{margin-left:auto;flex:none;background:var(--bg);border:1px solid var(--line);color:var(--muted);
border-radius:8px;padding:1px 8px;font-size:10.5px;font-weight:700;white-space:nowrap;align-self:center}
.prj-tree li.br-done>.ecard.prj-node .stage-badge{border-color:var(--ok);color:var(--ok)}
.prj-tree li .ecard.lvl0{box-shadow:0 0 0 2px rgba(63,127,174,.25), var(--gf-card-shadow)}
@media (max-width:768px){ .prj-tree li .ecard.prj-node{width:230px} }
/* Маленькі запитання (перейменувати, підтвердити, назва папки) не стають
бічною шторкою навіть на вузькому екрані: повновисока панель заради
одного рядка виглядає безглуздо. Тому окремий клас із вищою вагою. */
.modal.ask{align-items:center;justify-content:center;padding:20px}
.modal.ask .modal-card{width:min(420px,100%);height:auto;max-height:86vh;border-radius:16px}
/* Режим правки таблиці: видно, що клітинки живі й куди саме тицяти. */
table.lb-xledit td{outline:1px solid rgba(59,130,246,.35);cursor:text}
table.lb-xledit td:focus{outline:2px solid var(--ember);background:rgba(59,130,246,.08)}
/* Поле правки текстового файла: на всю картку, моноширинним. */
.lb-txtedit{width:100%;min-height:60vh;border:1px solid var(--line);border-radius:10px;
background:var(--bg);color:var(--txt);padding:12px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;outline:none;resize:vertical}
.lb-txtedit:focus{border-color:var(--ember)}
/* Перетягування файлів: підсвітка області, поки файл над вікном. */
.drop-overlay{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
background:rgba(21,90,146,.14);backdrop-filter:blur(2px);border:2px dashed var(--ember);border-radius:16px;pointer-events:none}
.drop-active{position:relative}
.drop-active > .drop-overlay{display:flex;animation:dropIn .14s ease-out}
.drop-overlay-box{background:var(--panel);color:var(--txt);font-weight:700;font-size:15px;
padding:14px 20px;border-radius:14px;box-shadow:var(--shadow);animation:dropBox .2s ease-out}
@keyframes dropIn{from{opacity:0}to{opacity:1}}
@keyframes dropBox{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
/* Плитка задачі у списку: файл над нею - пунктир, після прийому - зелений спалах.
Без цього не видно ні що плитка приймає файл, ні що вона його прийняла. */
.ecard.file-over{outline:2px dashed var(--ember);outline-offset:3px;background:rgba(21,90,146,.10)}
.ecard.file-took{animation:tookFlash .9s ease-out}
@keyframes tookFlash{0%{box-shadow:0 0 0 0 rgba(46,160,90,.55)}100%{box-shadow:0 0 0 16px rgba(46,160,90,0)}}
/* ---- онбординг: інструкція при першому вході ---- */
.onb-overlay{position:fixed;inset:0;z-index:9000;background:transparent;display:flex;align-items:flex-end;justify-content:center;padding:0 16px 28px}
.onb-overlay.top{align-items:flex-start;padding-top:22px}
.onb-mask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.onb-dim{fill:rgba(4,10,20,.55)}
.onb-ring{fill:none;stroke:var(--ember);stroke-width:2;filter:drop-shadow(0 0 5px var(--ember));animation:onbRing 1.6s ease-in-out infinite}
@keyframes onbRing{0%,100%{stroke-opacity:.95}50%{stroke-opacity:.5}}
.onb-card{position:relative;z-index:1;background:var(--panel);color:var(--txt);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.4);padding:20px 24px 16px;max-width:580px;width:100%;animation:onbIn .25s ease}
.onb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-right:30px}
.onb-dots{display:flex;gap:5px}
.onb-dots i{width:7px;height:7px;border-radius:50%;background:var(--raised-2);display:block;transition:all .2s}
.onb-dots i.on{background:var(--ember);width:20px;border-radius:4px}
.onb-dots i.done{background:var(--ember);opacity:.45}
.onb-n{font-size:12px;color:var(--muted)}
.onb-card h3{margin:0 0 8px;font-size:19px}
.onb-text{font-size:14.5px;line-height:1.5}
.onb-text ul{margin:8px 0 0 18px;padding:0}
.onb-text li{margin:3px 0}
.onb-text a{color:var(--ember)}
.onb-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
/* панель під час екскурсії — над затемненням, але не клікабельна: розділ, про який мова, підсвічений */
body.onb-open #rail{pointer-events:none}
.rail-btn.onb-hl{border-radius:12px;animation:onbPulse 1.3s ease-in-out infinite}
@keyframes onbPulse{0%,100%{box-shadow:0 0 0 3px var(--ember),0 0 0 8px var(--ember-soft)}50%{box-shadow:0 0 0 3px var(--ember),0 0 0 14px transparent}}
@keyframes onbIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:720px){.onb-overlay{align-items:center;padding:16px}.onb-card{padding:18px 18px 14px}}
.onb-card{position:relative}
.onb-x{position:absolute;top:10px;right:12px;border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px}
.onb-x:hover{background:var(--raised);color:var(--txt)}
.onb-dots i{cursor:pointer}
.onb-kb{border:0;background:transparent;color:var(--ember);font-size:13px;cursor:pointer;padding:6px 0}
.onb-kb:hover{text-decoration:underline}
.onb-last{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--raised)}
.onb-chk{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.onb-chk input{width:18px;height:18px;accent-color:var(--ember)}
.onb-hint{font-size:12px;color:var(--muted)}
.kb-onb{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:14px;border-radius:14px;background:var(--ember-soft)}
.kb-onb>div{flex:1;font-size:13.5px;line-height:1.4}.kb-onb span{color:var(--muted)}
.kb-onb .btn-go{white-space:nowrap}
/* ---- онбординг: живий показ ---- */
.onb-cursor{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;transform:translate(-100px,-100px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.onb-cursor.tap svg{animation:onbTap .35s ease}
.onb-cursor.idle{opacity:.55}
@keyframes onbTap{0%{transform:scale(1)}40%{transform:scale(.75)}100%{transform:scale(1)}}
.onb-cap{margin:2px 0 8px;padding:10px 12px;border-radius:10px;background:var(--ember-soft);color:var(--txt);font-size:14.5px;line-height:1.45;min-height:64px;border-left:3px solid var(--ember)}
.onb-cap.flash{animation:onbCap .35s ease}
@keyframes onbCap{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.onb-det{margin:0 0 4px}.onb-det summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none;padding:4px 0}.onb-det summary::before{content:'▸ ';color:var(--ember)}.onb-det[open] summary::before{content:'▾ '}
.onb-det .onb-text{font-size:13.5px;padding:6px 0 4px}
.onb-keys{position:fixed;z-index:9500;transform:translate(-50%,-100%);padding:8px 14px;border-radius:10px;background:#111;color:#fff;font:600 14px/1 ui-monospace,Menlo,monospace;box-shadow:0 8px 24px rgba(0,0,0,.35);animation:onbKeys 1.3s ease;pointer-events:none}
@keyframes onbKeys{0%{opacity:0;transform:translate(-50%,-80%) scale(.9)}20%,80%{opacity:1;transform:translate(-50%,-100%) scale(1)}100%{opacity:0}}
.onb-ghost{position:fixed;left:0;top:0;z-index:9500;padding:10px 14px;border-radius:12px;background:var(--panel);color:var(--txt);box-shadow:0 12px 32px rgba(0,0,0,.35);border:1px solid var(--ember);font-size:13px;pointer-events:none;white-space:nowrap}
.onb-drop{outline:2px dashed var(--ember)!important;outline-offset:3px;background:var(--ember-soft)!important;transition:background .2s}
.onb-pend{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px 12px;padding:7px 12px;border-radius:10px;background:var(--raised);font-size:13px;border:1px solid var(--line-soft,transparent)}
.onb-pend b{color:var(--muted);font-weight:600;margin-left:4px}.onb-pend.rec{color:#e5484d}
.onb-quote{margin:0 12px 6px;padding:8px 12px;border-left:3px solid var(--ember);background:var(--raised);border-radius:8px;font-size:13px;color:var(--muted)}
.onb-q{padding:5px 9px;margin:0 0 6px;border-left:3px solid var(--ember);background:rgba(127,127,127,.12);border-radius:6px;font-size:12.5px;color:var(--muted)}
.onb-ask{margin:0 12px 6px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--ember);font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.onb-ask-b{display:flex;gap:8px;margin-top:8px}.onb-ask-b button{padding:6px 14px;font-size:13px}
.onb-file{display:flex;align-items:center;gap:10px;padding:4px 2px;font-size:13.5px}.onb-file-i{font-size:26px}.onb-file small{color:var(--muted)}
.onb-img{width:220px;height:140px;border-radius:12px;background:linear-gradient(135deg,var(--raised),var(--raised-2));display:flex;align-items:center;justify-content:center;font-size:40px;margin:2px 0 4px}
.onb-voice{font:600 13px/1 ui-monospace,Menlo,monospace;letter-spacing:1px;padding:4px 0}
.msg.onb-show-actions .msg-actions{opacity:1!important;visibility:visible!important;display:flex!important;pointer-events:none}
.msg.onb-demo .reacts .react{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--ember-soft);font-size:12.5px;margin-top:4px}
.onb-post{border:1px solid var(--ember)!important;box-shadow:0 0 0 4px var(--ember-soft)}
.onb-post .post-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}.onb-post .post-head .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ember-soft);color:var(--ember);font-weight:800}
.onb-muted{font-size:12px;color:var(--muted)}
.onb-post .pf-btn.on{color:var(--ember)}
.onb-comments{margin-top:8px}.onb-cbox{display:flex;gap:8px;align-items:flex-end}.onb-cbox textarea{flex:1;resize:none;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft,#ccc);background:var(--raised);color:var(--txt);font:inherit}
.onb-c{padding:8px 10px;border-radius:10px;background:var(--raised);margin-top:6px;font-size:13.5px}.onb-c.reply{margin-left:24px}.onb-c-act{display:flex;gap:12px;margin-top:4px;font-size:12px;color:var(--muted)}
.onb-chip{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ember-soft);color:var(--ember);font-size:12.5px;margin:2px 4px 2px 0}
.onb-task{padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--ember);box-shadow:0 0 0 4px var(--ember-soft);margin-bottom:12px}
.onb-task-top{display:flex;align-items:center;gap:8px;font-size:15px}.onb-task-top b{flex:1}
.onb-pill{padding:3px 8px;border-radius:8px;background:var(--ember-soft);color:var(--ember);font-size:12px;font-weight:700}.onb-pill.pr{background:var(--raised);color:var(--muted)}
.onb-task-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0;font-size:13px;color:var(--muted)}
.onb-task-foot{display:flex;align-items:center;gap:10px}.onb-status{padding:6px 12px;border-radius:999px;background:var(--raised);font-size:13px;font-weight:700}
.onb-status.work{background:var(--ember-soft);color:var(--ember)}.onb-status.review{background:rgba(217,169,60,.18);color:#b8860b}.onb-status.done{background:rgba(46,160,67,.18);color:#2ea043}
.onb-task .onb-act{padding:6px 14px;font-size:13px}
.onb-card.busy .onb-foot .btn-go{opacity:.45;cursor:progress}
.onb-card.nudge{animation:onbNudge .4s ease}
@keyframes onbNudge{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
/* ---- доробка №4: картки задач ---- */
.ec-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.ecard.ecs-submitted{background:color-mix(in srgb,#8a93a3 9%,var(--panel))}
.ecard.ecs-in_progress{background:color-mix(in srgb,#e8be3c 13%,var(--panel));border-color:rgba(232,190,60,.35)}
.ecard.ecs-review{background:color-mix(in srgb,#966edc 13%,var(--panel));border-color:rgba(150,110,220,.35)}
.ecard.ecs-rework{background:color-mix(in srgb,#f0963c 14%,var(--panel));border-color:rgba(240,150,60,.4)}
.ecard.ecs-done{background:color-mix(in srgb,#3fb75e 12%,var(--panel))}
.ecard.ecs-canceled{background:color-mix(in srgb,#e0604d 11%,var(--panel))}
.ecard.ecs-done.done-card,.ecard.ecs-canceled.done-card{opacity:.9}
.tasks-filters .tfs-end{margin-left:auto;order:99}
.tasks-filters .mselect{min-width:170px}
.mselect .csel-btn.has{border-color:var(--ember);color:var(--ember)}
.ms-pop{min-width:220px;right:auto}
.ms-opt{display:flex;align-items:center;gap:8px}
.ms-cb{width:18px;height:18px;border:1px solid var(--line);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--ember);flex:none}
.ms-opt.on .ms-cb{border-color:var(--ember);background:var(--ember-soft)}
.ms-dot{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--muted));flex:none}
.ms-foot{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line-soft);margin-top:4px}
.ms-sep{border-top:1px solid var(--line-soft);margin:4px 2px}
.prod-plat-row{display:flex;flex-wrap:wrap;gap:6px 16px}
.prod-plat-b{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.prod-plat-b:hover{border-color:var(--ember)}
.prod-plat-b.on{background:var(--ember);border-color:var(--ember);color:#fff}
.prod-plat-b.on.android{background:#2f9e5b;border-color:#2f9e5b} .prod-plat-b.on.ios{background:#3b7fd9;border-color:#3b7fd9}
.pi-plat{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle}
.pi-plat-c{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.pi-plat-c.android{color:#3ddc84;border-color:rgba(61,220,132,.4)} .pi-plat-c.ios{color:#7cb7ff;border-color:rgba(124,183,255,.4)} .pi-plat-c.web{color:var(--ember);border-color:color-mix(in srgb,var(--ember) 40%,transparent)}
.ci-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:10px 12px 4px}
.paste-prev{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.paste-prev img{max-width:100%;max-height:320px;border-radius:10px;border:1px solid var(--line)}
.paste-file{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.paste-cap{width:100%;resize:vertical;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--txt);font:inherit}
.ms-btn{flex:1;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:6px;font:inherit;font-size:12.5px;cursor:pointer}
.ms-btn:hover{border-color:var(--ember);color:var(--ember)}
.ec-chat.unread{background:var(--ember);border-color:var(--ember);color:#fff;box-shadow:0 0 0 3px var(--ember-soft)}
/* ---- доробка №2: дії з повідомленням — стрілочка зверху праворуч, смайлик збоку ---- */
.bubble{position:relative}
/* стрілочка — у правому верхньому куті бульбашки; смайлик — по центру висоти бульбашки збоку */
.msg .edited{margin-right:4px}
.td-comment{position:relative}
/* сховані старі елементи фільтрів задач: атрибут hidden програвав класовим display, і обгортки csel живуть окремо */
#tasksViewSeg[hidden],#colBtn[hidden],#taskBucketSeg[hidden],#prioChips[hidden],.tasks-filters label[hidden],.modal-body .field[hidden]{display:none!important}
.csel:has(> #groupBy),.csel:has(> #filterProject),#groupBy[hidden],#filterProject[hidden]{display:none!important}
/* фільтри задач: підписи статусів не обрізаються */
.tasks-filters .csel{min-width:168px}
.tasks-filters .csel-pop{min-width:220px;right:auto}
.tasks-filters .csel-opt{white-space:nowrap;overflow:visible;text-overflow:clip}
/* доробка №6/№8 */
#railTheme[hidden]{display:none!important}
.au-extra{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.au-row{display:flex;gap:6px;align-items:center}.au-row input{flex:1}
.au-x{width:30px;height:30px;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:8px;cursor:pointer;flex:none}
.au-x:hover{color:#e0604d;border-color:#e0604d}
.au-add{margin-top:6px;border:none;background:transparent;color:var(--ember);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 0}
.au-add:hover{text-decoration:underline}
/* доробки Юрія, друга хвиля */
/* 4. пріоритет — кольоровий куток картки, текст по центру; статус — під ним */
.ecard{position:relative;overflow:hidden}
.ec-right{margin:-16px -18px 0 0;align-items:flex-end}
.ec-right .pr-pill{min-width:104px;text-align:center;padding:7px 14px;border-radius:0 15px 0 12px;font-size:12px;font-weight:700;color:#fff}
.ec-right .pr-pill.pr-low{background:#7d8798}.ec-right .pr-pill.pr-normal{background:#3f7fae}.ec-right .pr-pill.pr-high{background:#e0834d}.ec-right .pr-pill.pr-urgent{background:#e0604d}
.ec-right .st-badge{margin:6px 10px 0 0}
/* 3. плашка нових коментарів: одна цифра; «саме вам» — помаранчева */
.ec-chat.unread{background:var(--ember);border-color:var(--ember);color:#fff;box-shadow:0 0 0 3px var(--ember-soft)}
.ec-chat.unread.mention{background:#e0834d;border-color:#e0834d;box-shadow:0 0 0 3px rgba(224,131,77,.28)}
/* 5. лічильники у випадаючих фільтрах */
.ms-opt{padding-right:8px}.ms-opt span:nth-child(2),.ms-opt .ms-cb{flex:none}
.ms-n{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:10px}
/* 6. статуси всередині задачі — у тих самих кольорах */
.td-status-row button.st-submitted{background:rgba(138,147,163,.18);color:#8a93a3;border-color:transparent}
.td-status-row button.st-in_progress{background:rgba(232,190,60,.22);color:#c9962e;border-color:transparent}
.td-status-row button.st-review{background:rgba(150,110,220,.22);color:#9b7de0;border-color:transparent}
.td-status-row button.st-rework{background:rgba(240,150,60,.22);color:#e0834d;border-color:transparent}
.td-status-row button.st-done{background:rgba(76,203,107,.18);color:#3fb75e;border-color:transparent}
.td-status-row button.st-canceled{background:rgba(255,90,70,.18);color:#e0604d;border-color:transparent}
.td-status-row button:hover{filter:brightness(1.12)}
.td-go-review{background:#8b6fd6!important;border-color:#8b6fd6!important;color:#fff!important}
/* ---- доробки: розділ, пункти, історія, «На доробку» (доробка №22) ---- */
.pi-st.rework{background:rgba(214,110,40,.18);color:#d66e28}
.pi-area{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(21,90,146,.12);color:var(--ember);border:1px solid color-mix(in srgb,var(--ember) 35%,transparent);margin-right:8px;vertical-align:middle;white-space:nowrap}
.prod-area-row{display:flex;gap:8px;flex-wrap:wrap}
.prod-area-row select{min-width:160px}
.prod-steps-ed{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.prod-step-ed{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.prod-step-nh{display:flex;align-items:center;justify-content:space-between}
.prod-step-n{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prod-step-drop{padding:10px}
.pi-steps{display:flex;flex-direction:column;gap:8px}
.pi-step{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pi-step.done .pi-step-t{text-decoration:line-through;color:var(--muted)}
.pi-step-h{display:flex;align-items:center;gap:10px}
.pi-step-h input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--ember)}
.pi-step-t{flex:1;font-weight:600;font-size:14px}
.pi-step-b{font-size:13px;color:var(--muted);margin:6px 0 0 26px;white-space:pre-wrap}
.pi-step .att-grid{margin:8px 0 0 26px}
.pi-step-add{font-size:12px;padding:4px 10px;margin:8px 0 0 26px}
.pi-hist{display:flex;flex-direction:column;gap:6px;font-size:13px}
.pi-hist-r{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pi-hist-r.rework{color:#d66e28}
.pi-hist-w{color:var(--muted);font-size:12px;white-space:nowrap;min-width:110px}
.pi-hist-who{color:var(--muted);font-size:12px;margin-left:auto}
.td-meta .td-edit{display:inline-block;width:auto;padding:2px 9px;font-size:11.5px;margin-left:6px;vertical-align:middle}
.td-meta .prod-area-row{display:inline-flex;vertical-align:middle;margin-left:4px}
/* ідея №30: протерміновані — окрема червона група, картки з червонуватим фоном */
.tg-head.overdue .tg-title{font-weight:800}
.tg-head.overdue .tg-count{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.ecard.overdue{background:color-mix(in srgb,var(--danger) 9%,var(--panel));border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
/* ідея №35: файли в коментарі */
.c-files{margin-top:6px}
.c-files .att-img{max-height:220px}
.td-addc .attach-btn{flex:none}
/* №21: шапка групи в бічній панелі «Учасники» */
.cs-head{display:flex;gap:12px;align-items:flex-start;padding:4px 2px 12px;margin-bottom:8px;border-bottom:1px solid var(--line-soft,var(--line))}
/* №46: скріпка й опитування в коментарях задачі — свої іконки, а не смайлик (маска .emj-btn перебивала всі).
Лише в композерах коментарів (.td-addc): у чаті/стрічці .attach-btn — це кнопка емодзі з рамкою */
.td-addc .emj-btn.attach-btn::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.emj-btn.poll-btn::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
/* №41: повний пікер емодзі — сітка не менше чотирьох рядів, щоб було зрозуміло, що гортається */
.emoji-pop.full .emoji-grid{min-height:160px}
.emoji-pop.full{min-height:340px}
/* №42: підказки @згадок */
.mention-pop{position:fixed;z-index:10050;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:4px;overflow:auto;max-height:210px}
.mention-row{padding:7px 10px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--txt)}
.mention-row.on,.mention-row:hover{background:var(--raised);color:var(--ember)}
/* №49: стрілочка дій на повідомленні — видно при наведенні */
.msg{position:relative}
.msg-arrow{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;opacity:0;transition:opacity .12s;
background:var(--panel,#1c2230);color:var(--muted);box-shadow:0 1px 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.msg-arrow::before{content:"";width:11px;height:11px;background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.msg:hover .msg-arrow,.msg.actions-open .msg-arrow{opacity:1}
.msg-arrow:hover{color:var(--ember)}
@media (hover:none){.msg-arrow{opacity:.7}}
/* №49: стрілочка всередині бульбашки, у правому верхньому куті; текст має місце під неї */
.msg .bubble{position:relative;padding-right:34px}
.msg .bubble .msg-arrow{top:4px;right:6px}
/* стрілочка ⌄ у голосових/фото без тексту — статично в рядку з часом */
.att-meta .msg-arrow{position:static;width:18px;height:18px;margin-left:4px;opacity:.85;flex:0 0 auto}
/* голосове без тексту: стрілочка ⌄ справа в рядку плеєра (як у кутку бульбашки в інших повідомленнях), видна завжди */
.att-audio .msg-arrow.in-audio{position:static;flex:0 0 auto;width:22px;height:22px;opacity:.85;margin-left:2px;box-shadow:none;border:1px solid var(--line)}
.att-audio:has(.in-audio){width:min(456px,90vw)} /* +місце під стрілочку, щоб плеєр не стискався */
.att-audio:has(.in-audio) audio{flex:1 1 auto}
.att-grid:has(.in-audio){max-width:min(640px,94%)}
/* фото/файл без тексту: стрілочка у правому верхньому куті */
.arr-host{position:relative}
.arr-wrap{display:inline-block;line-height:0}
.arr-host .msg-arrow.in-photo{top:6px;right:6px;opacity:.9}
/* №48: номер задачі в шапці картки */
.td-num{font-size:13px;font-weight:800;color:var(--ember);margin-right:8px;white-space:nowrap}
#tdTitle{flex:1;min-width:0;margin-right:8px}
/* картка задачі: правка дати/дедлайну — кнопки ✓ ✕ поруч з полями */
.tc-edit{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tc-edit .tc-ok,.tc-edit .tc-no{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--raised,rgba(127,127,127,.12));color:var(--txt);cursor:pointer;font-size:14px;line-height:1}
.tc-edit .tc-ok{background:var(--ember);border-color:var(--ember);color:#fff}
.tc-edit .tc-btns{display:inline-flex;gap:6px}
/* поля дати/часу: текстове поле з курсором + прихований системний (23.09) */
.dtx-wrap{position:relative;display:inline-flex;align-items:center;min-width:0;vertical-align:middle}
.field .dtx-wrap{display:flex;width:100%}
.dt-pair .dtx-wrap.dtx-date,.dt-pair .dtx-wrap.dtx-dt{flex:1}
.dt-pair .dtx-wrap.dtx-time{flex:none;width:96px}
.dtx-wrap>input.dtx{width:100%;min-width:0;font-variant-numeric:tabular-nums}
.dtx-wrap.dtx-date>input.dtx,.dtx-wrap.dtx-dt>input.dtx{padding-right:30px}
.tc-date-pair .dtx-wrap.dtx-date{width:132px}
.tc-date-pair .dtx-wrap.dtx-time{width:74px}
.tc-edit>.dtx-wrap.dtx-date{width:140px}
.dtx-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-width:0!important;opacity:0!important;pointer-events:none;border:0!important;padding:0!important;margin:0!important}
.dtx-cal{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:13px;line-height:1;padding:3px;opacity:.75}
.dtx-cal:hover{opacity:1}
input.dtx.dtx-bad{border-color:#e5484d!important;box-shadow:0 0 0 2px rgba(229,72,77,.18)}
/* №54: @Імʼя в тексті — посилання на профіль */
.mention-link{color:var(--ember);font-weight:700;cursor:pointer;border-radius:4px}
.mention-link[title]:hover{text-decoration:underline}
.msg.me .bubble .mention-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mention-pop{max-height:260px}
/* №53: запит на зміну строку в картці задачі */
.due-req{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:12px;
background:rgba(224,131,77,.12);border:1px solid rgba(224,131,77,.45);font-size:13.5px;line-height:1.45}
.due-req-t{flex:1;min-width:220px}
.due-req-a{display:flex;gap:8px}
.ec-badges .ec-people,.ec-badges .ec-files{margin-left:6px}
/* №58: коментар, що ще йде на сервер / не дійшов */
.td-comment.c-pending{opacity:.55}
.td-comment.c-failed{opacity:1;box-shadow:inset 3px 0 0 #e5484d}
.td-comment.c-failed .c-body::after{content:" · не надіслано";color:#e5484d;font-size:12px}
/* №63/№65: фото з підписом — всередині бульбашки */
.msg .bubble .att-grid.in-bubble{max-width:100%;margin:0 -24px 8px 0;justify-content:flex-start}
.msg.mine .bubble .att-grid.in-bubble{margin-left:0;justify-content:flex-start}
.msg .bubble .msg-reply + .att-grid.in-bubble{margin-top:2px}
/* №61: бульбашка не ширша за повідомлення — довга цитата (nowrap) розпирала її, і текст своїх
повідомлень обрізався зліва; тепер цитата скорочується «…», а довгі слова переносяться */
.msg .bubble{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.msg .bubble .msg-reply{min-width:0;box-sizing:border-box}
/* №60: кнопка «до останніх повідомлень» */
.to-bottom{position:absolute;right:22px;z-index:6;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
background:var(--panel);color:var(--txt);box-shadow:0 6px 18px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .15s,transform .15s}
.to-bottom.show{opacity:1;transform:none;pointer-events:auto}
.to-bottom:hover{color:var(--ember)}
.to-bottom .tb-count{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
background:var(--ember);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
/* №56: сповіщення за розділами */
.notif-cats{display:flex;gap:6px;flex-wrap:wrap;padding:4px 2px 10px;position:sticky;top:0;background:var(--panel);z-index:2}
.nc-chip{font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nc-chip.on{background:var(--ember);border-color:var(--ember);color:#fff}
.nc-chip .nc-n{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--ember);color:#fff;font-size:10.5px;line-height:17px;text-align:center}
.nc-chip.on .nc-n{background:#fff;color:var(--ember)}
.notif-group{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin:12px 4px 6px}
/* коментарі задачі при наведенні на плашку «💬 N нових» */
.task-peek{position:fixed;z-index:80;background:var(--panel,#fff);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:min(460px,70vh);overflow:hidden}
.task-peek .tp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.task-peek .tp-title{flex:1;min-width:0;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-peek .tp-open{font:inherit;font-size:12px;font-weight:700;border:none;background:none;color:var(--gf-accent,#1a6fc4);cursor:pointer;white-space:nowrap}
.task-peek .tp-list{overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.task-peek .tp-empty{color:var(--muted);font-size:13px;padding:10px 0;text-align:center}
.task-peek .tp-c{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:12px}
.task-peek .tp-c.tp-new{background:var(--ember-soft,rgba(26,111,196,.1))}
.task-peek .tp-av{width:28px;height:28px;flex:0 0 28px;font-size:11px}
.task-peek .tp-main{min-width:0;flex:1}
.task-peek .tp-who{font-size:11px;color:var(--muted);margin-bottom:2px}
.task-peek .tp-body{font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.task-peek .tp-files{font-size:12px;color:var(--muted);margin-top:2px}
.task-peek .tp-foot{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.task-peek .tp-foot textarea{flex:1;resize:none;min-height:36px;max-height:120px;font:inherit;font-size:13px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:inherit}
.task-peek .tp-send{white-space:nowrap;flex:0 0 auto;width:auto;padding:8px 14px;border-radius:10px;border:none;font-weight:700;cursor:pointer}
.task-peek .tp-send,.task-peek .tp-write{background:var(--gf-accent,#1a4f8f) !important;color:#fff !important}
.task-peek .tp-send:disabled{opacity:.6}
.task-peek .tp-foot textarea{min-width:0;width:auto}
.task-peek .tp-file{cursor:pointer}
.task-peek .tp-file:hover,.task-peek .tp-c[style*="pointer"]:hover{background:var(--bg)}
.task-peek .tp-ficon{width:36px;height:36px;flex:0 0 36px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--bg);font-size:18px}
.task-peek .tp-ficon img{width:100%;height:100%;object-fit:cover}
.task-peek .tp-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px}
.task-peek .tp-bar{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--line)}
.task-peek .tp-write{font-size:13px;padding:7px 14px}
.task-peek .tp-bar{gap:8px}
.task-peek .tp-read{font:inherit;font-size:13px;font-weight:700;padding:7px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:inherit;cursor:pointer}
.task-peek .tp-read:hover{border-color:var(--gf-accent,#1a4f8f);color:var(--gf-accent,#1a4f8f)}
.task-peek:not(.pinned) .tp-foot{display:none}
.task-peek.pinned .tp-bar{display:none}
/* Картки задач в одному ряду однакової висоти: назва й «від кого» — зверху, а блок
Відповідальний / Виконавець / Дедлайн і рядок 💬 👥 📎 — притиснуті до низу картки.
Так у сусідніх картках дедлайн і плашки стоять на одній лінії, не «скачуть» за довжиною назви. */
.ec-grid > .ecard, .task-cards > .ecard{display:flex;flex-direction:column}
.ec-grid > .ecard > .ec-sub, .task-cards > .ecard > .ec-sub{margin-top:auto;padding-top:10px} /* «Без проєкту · від …» теж унизу, над відповідальним */
.ec-grid > .ecard > .ec-badges, .task-cards > .ecard > .ec-badges{margin-top:9px}
/* календар: вікно-підказка задачі при наведенні */
.cal-peek .cp-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}
.cal-peek .cp-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cal-peek .cp-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.cal-peek .cp-due{font-size:12px;color:var(--muted)}
.cal-peek .cp-desc{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:var(--bg);border-radius:10px;padding:8px 10px}
/* вікно росте під вміст (опис повністю, без прокрутки); прокрутка — лише якщо не влазить в екран */
.cal-peek .tp-list > *{flex-shrink:0}
.cal-peek .tp-list{flex:0 1 auto}
.cal-peek .cp-desc.muted{color:var(--muted);background:none;padding:2px 0}
.cal-peek .cp-people{display:flex;flex-direction:column;gap:4px}
.cal-peek .cp-person{display:flex;align-items:center;gap:6px;font-size:13px}
.cal-peek .cp-person span:last-child{color:var(--muted)}
.cal-peek .cp-person .tp-av{width:22px;height:22px;flex:0 0 22px;font-size:9px}
/* вікно коментарів: «Надіслати» на всю висоту поля, помітна */
.task-peek .tp-foot{align-items:stretch}
.task-peek .tp-foot textarea{min-height:42px}
.task-peek .tp-send{min-height:42px;padding:0 20px !important;font-size:14px !important;border-radius:12px !important;display:flex;align-items:center;justify-content:center}
/* календар: «+N ще» — розгорнутий день */
.cal-more{cursor:pointer;border-radius:6px;padding:1px 4px;display:inline-block}
.cal-more:hover{background:var(--bg);color:var(--txt);text-decoration:underline}
.cal-daypop{position:fixed;z-index:75;background:var(--panel,#fff);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.24);padding:10px 12px 12px;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;gap:6px}
.cal-daypop .cdp-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.cal-daypop .cdp-title{flex:1;font-weight:800;font-size:13px;text-transform:capitalize}
.cal-daypop .cdp-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px}
.cal-daypop .cdp-list{display:flex;flex-direction:column;gap:5px}
.cal-daypop .cal-chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-daypop .cal-chip .ct{white-space:normal;overflow:visible}
.cal-daypop .cdp-add{margin-top:4px;font:inherit;font-size:12px;font-weight:700;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:10px;padding:6px;cursor:pointer}
.cal-daypop .cdp-add:hover{color:var(--gf-accent,#1a4f8f);border-color:var(--gf-accent,#1a4f8f)}
/* календар «Тиждень»: сім рівних колонок — довга назва більше не розпирає колонку під праву панель;
назва переноситься рядками, щоб її було видно повністю */
.cal-week{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-week .cw-col{min-width:0}
.cal-week .cal-chip{white-space:normal;align-items:flex-start;line-height:1.3}
.cal-week .cal-chip .cdot{margin-top:0;align-self:center;flex:0 0 auto}
.cal-week .cal-chip .ctime{flex:0 0 auto}
.cal-week .cal-chip{flex-wrap:wrap;row-gap:1px;padding:4px 7px}
.cal-week .cal-chip .ct{flex:1 1 100%;min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto} /* назва — під часом, на всю ширину, переноситься цілими словами */
@media (max-width:900px){ .cal-week{grid-template-columns:1fr} }
/* №73: імена на картці — клік фільтрує; плашка активного фільтра за людиною */
.ec-person{cursor:pointer;border-radius:4px}
.ec-person:hover{text-decoration:underline;color:var(--gf-accent,#1a6fc4)}
.tp-person-chip{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:10px;background:var(--gf-accent,#1a6fc4);color:#fff;font-size:13px;font-weight:700;white-space:nowrap}
.tp-person-chip[hidden]{display:none}
.tp-person-chip button{border:none;background:rgba(255,255,255,.22);color:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:11px;line-height:20px;padding:0}
/* «Оновити версію» — плашка внизу, поверх усього, як тост */
.ver-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;
background:var(--raised-2);border:1px solid var(--line);color:var(--txt);padding:9px 10px 9px 16px;border-radius:12px;
font-size:14px;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.ver-go{border:none;background:var(--gf-accent,#1a6fc4);color:#fff;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ver-x{border:none;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:4px 6px}
.ver-bar span{flex:1;min-width:0}
@media (max-width:760px){ .ver-bar{left:16px;right:16px;transform:none;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom))} }
/* №75: «в мережі» у списку чатів — зелена крапка внизу праворуч на фото (замість ледь видимого світіння) */
.ci-av{position:relative;flex:none;display:flex}
html .chat-item .avatar.on, html[data-theme] .chat-item .avatar.on{box-shadow:none !important}
.pres-dot{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#2fbf71;
border:2.5px solid var(--bg,#15171c);box-sizing:border-box}
/* «Ще знайдено» під картками: кнопка «Показати ще N» */
.th-more{align-self:flex-start;border:1px solid var(--line);background:transparent;color:var(--gf-accent,#1a6fc4);font-weight:700;font-size:13px;padding:7px 12px;border-radius:9px;cursor:pointer}
.th-more:hover{border-color:var(--gf-accent,#1a6fc4)}
/* №78.4: гілка, що чекає кількох гілок — рядок злиття під ними; лінії малює drawDepLines */
.prj-tree ul.prj-merge{display:block;padding-top:0}
.prj-tree ul.prj-merge::before{display:none}
.prj-tree ul.prj-merge>li{width:max-content;padding-top:28px}
.prj-tree ul.prj-merge>li::before,.prj-tree ul.prj-merge>li::after{display:none}
.prj-tree svg.prj-dep-lines{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
/* вибір гілок, яких чекати (форма гілки й картка) */
.br-deps{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto}
.br-dep{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.br-dep input{accent-color:var(--ember)}
/* №78.6: шаблони проєктів — смуга над списком проєктів */
.tpl-bar{width:100%;margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-soft)}
.tpl-h{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.tpl-row{display:flex;flex-wrap:wrap;gap:8px}
.tpl-chip{border:1px solid var(--line);background:var(--raised);color:var(--txt);border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tpl-chip:hover{border-color:var(--gf-accent,#1a6fc4)}
.tpl-chip.add{color:var(--gf-accent,#1a6fc4);border-style:dashed;background:transparent}
.fhint{font-size:12px;color:var(--muted);margin-top:4px}
/* №84: «На перевірці» лишається фіолетовою й протермінованою — червоним лише строк */
.ecard.ecs-review.overdue{background:color-mix(in srgb,#966edc 13%,var(--panel));border-color:rgba(150,110,220,.45)}
/* №80: структура компанії */
.org-card{max-width:min(1240px,96vw)}
.org-scroll{overflow:auto;max-height:72vh;padding:8px 4px 16px}
.org-tree{min-width:max-content}
.org-tree li .ecard.org-node{width:232px;text-align:left;margin:0 auto;padding:12px 14px;cursor:default}
.org-title{font-weight:800;font-size:14px;margin-bottom:6px}
.org-head{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:4px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px;min-height:22px}
.org-head small,.org-m small{color:var(--muted);font-size:11px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.org-head.muted,.org-m.muted{color:var(--muted);cursor:default;font-size:12.5px}
.org-members{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.org-m{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:2px 0}
.org-m span,.org-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-m:hover span,.org-head:hover span{color:var(--gf-accent,#1a6fc4)}
.org-cnt{margin-top:8px;font-size:11.5px;color:var(--muted)}
.pp-chip.pp-deptchip{background:color-mix(in srgb,var(--gf-accent,#1a6fc4) 16%,transparent);font-weight:700}
/* олівець біля назви проєкту (№78.1) і довгі назви без пробілів у картках */
.prj-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.prj-title-row .gf-title{min-width:0;overflow-wrap:anywhere}
.gf-title.editable{cursor:pointer}
.gf-title.editable:hover{text-decoration:underline dotted rgba(255,255,255,.55);text-underline-offset:6px}
.prj-pen{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:16px;line-height:1;cursor:pointer;margin-top:5px}
.prj-pen:hover{background:rgba(255,255,255,.28)}
.ec-title{overflow-wrap:anywhere}
/* завдання Юрія 08.10: учасники й файли проєкту, меню «Наступний / Супутній етап» */
.prj-pf{display:flex;flex-wrap:wrap;gap:8px 28px;width:100%}
.prj-pf .td-sec{margin:0}
.prj-summary .prj-pf h4{display:block}
.prj-pf h4{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.prj-people,.prj-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.prj-pchip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px}
.prj-file{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px 6px 3px 10px;font-size:12.5px;max-width:260px}
.prj-file a{color:var(--txt);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prj-file a:hover{text-decoration:underline}
.prj-empty{font-size:12.5px;color:var(--muted)}
.stage-menu{position:absolute;z-index:4000;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(13,58,102,.18);padding:6px;display:flex;flex-direction:column;min-width:240px}
.stage-mi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left;color:var(--txt);font-family:inherit}
.stage-mi:hover{background:var(--raised)}
.stage-mi b{font-size:13.5px}
.stage-mi span{font-size:12px;color:var(--muted)}
/* міграція 69: супутній етап — поряд зі «своєю» гілкою, зі стрілкою від неї, без лінії від батька */
.prj-tree li.li-comp::before,.prj-tree li.li-comp::after{display:none}
.prj-tree li.li-only::before,.prj-tree li.li-only::after{display:none}
.prj-tree li.li-last::after{border:0 none}
.prj-tree li.li-last::before{border-right:2px solid var(--line-2);border-radius:0 7px 0 0}
.prj-tree li.li-first::before{border:0 none}
.prj-tree li.li-first::after{border-radius:7px 0 0 0}
.prj-tree ul.has-comp::before{display:none}
.prj-tree ul.has-comp > li::before,.prj-tree ul.has-comp > li::after{display:none}
/* №90: зміни з минулого відкриття задачі */
.ec-chat.ec-changes{white-space:nowrap}
.task-changes-banner{display:block;width:100%;text-align:left;margin:0 0 10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--ember-soft);color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
.tc-cnt.tc-new{background:var(--ember);color:#fff}
.th-row.th-new{background:var(--ember-soft);border-radius:8px}
/* №89: пристрої у профілі */
.dev-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.dev-row:last-child{border-bottom:0}
.dev-ic{font-size:18px;width:24px;text-align:center}
.dev-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dev-tx b{font-size:13px;font-weight:600}
.dev-tx span{font-size:12px;color:var(--muted)}
.dev-forget{font-size:12.5px;padding:5px 10px}
.dev-cur{font-size:12px;color:var(--ok);font-weight:600}
.dev-empty{font-size:12.5px;color:var(--muted);padding:4px 2px}
/* відео: переглядач з діями (09.10) */
.lb-videowrap{display:flex;flex-direction:column;gap:8px;width:min(96vw,1100px);max-height:92vh}
.lb-videowrap video{width:100%;max-height:80vh;background:#000;border-radius:10px}
.att-video-open{display:block;margin:4px 0 0;background:rgba(0,0,0,.18);border:0;border-radius:8px;color:inherit;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 10px;width:100%;text-align:center}
.att-video-open:hover{background:rgba(0,0,0,.28)}
/* «Історія»: що змінилось з минулого відкриття (09.10) */
.td-sec.th-changes h4{color:var(--ember)}
.ae-hist .r.th-new{background:var(--ember-soft);border-radius:6px;padding:2px 6px}
/* відео Юрія 12.10: пошук у чатах — знайдені чати й колеги завжди видно, «Повідомлення та файли» нижче у своїй прокрутці */
.chat-hits:not([hidden]){flex:0 1 auto;min-height:0;max-height:45%;overflow-y:auto;border-top:1px solid var(--line-soft)}
.chatlist{min-height:96px}
/* №92 (13.10): згадка @ у своєму повідомленні — було синє на синьому (правило стояло на .msg.me, а клас — .msg.mine) */
.msg.mine .bubble .mention-link{color:inherit;background:rgba(255,255,255,.22);padding:0 4px;border-radius:5px;text-decoration:none}
/* №94: мітка компанії */
.co-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;white-space:nowrap;letter-spacing:.2px}
.co-pill.co-dynamics{background:rgba(124,92,255,.16);color:#7c5cff;border:1px solid rgba(124,92,255,.35)}
.co-pill.co-technics{background:rgba(22,163,122,.16);color:#16a37a;border:1px solid rgba(22,163,122,.35)}
.co-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.co-filter button{font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer}
.co-filter button.on{background:var(--ember);border-color:var(--ember);color:#fff}
/* №95: фільтри задач згорнуті під «Фільтрація»; пошук і швидкі кнопки лишаються */
.tasks-filters.tf-collapsed > .mselect:not(.tf-ctl){display:none}
.tf-toggle.tf-on,.tf-changes.tf-on{border-color:var(--ember);color:var(--ember);font-weight:700}
.tf-changes.tf-on{background:var(--ember);color:#fff}