:root{
  --bg:#f4f6f3;--card:#fff;--ink:#1d2621;--muted:#66726b;--line:#e1e6e2;--brand:#1f5f3f;--brand2:#e8f2ec;
  --fl:#1f5f3f;--flbg:#e3f1e8;--ob:#8a4b14;--obbg:#fbeedd;--aup:#33507a;--aupbg:#e5ecf7;--red:#b42318;--redbg:#fdecea;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand)}
.layout{display:flex;min-height:100vh}
.side{width:230px;flex:none;background:#173d2a;color:#e8f0eb;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.logo{font-weight:700;font-size:18px;padding:4px 10px 2px}
.logo small{display:block;font-weight:400;font-size:12px;color:#a9c2b3}
.nav{margin-top:22px;display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;color:#e8f0eb;text-decoration:none}
.nav a:hover{background:#21513a}
.nav a.on{background:#2c6a4b;font-weight:600}
.badge{background:#e5484d;color:#fff;border-radius:10px;font-size:12px;padding:1px 7px;font-weight:600}
.me{margin-top:auto;padding:10px 12px;border-top:1px solid #2c5540;font-size:13px}
.me b{display:block;font-size:14px}
.me button{margin-top:8px;background:none;border:1px solid #4d7a62;color:#e8f0eb;border-radius:8px;padding:5px 10px}
.main{flex:1;min-width:0;padding:24px 28px 40px}
h1{font-size:22px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 18px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.seg{display:inline-flex;background:#e6ebe7;border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.inp{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 11px;min-width:0}
.btn{border:0;background:var(--brand);color:#fff;border-radius:9px;padding:8px 14px;font-weight:600}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.danger{background:var(--redbg);color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.note{background:#fff8e6;border:1px solid #f1dfae;color:#6b5312;border-radius:10px;padding:9px 12px;margin-bottom:12px;font-size:14px}
.chip{display:inline-block;font-size:12px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}
.chip.foodlink{background:var(--flbg);color:var(--fl)}
.chip.obshchepit{background:var(--obbg);color:var(--ob)}
.chip.aup,.chip.both{background:var(--aupbg);color:var(--aup)}
.chip.st-new{background:#e5ecf7;color:#33507a}.chip.st-in_progress{background:#fff1d6;color:#8a5a00}
.chip.st-done{background:#e3f1e8;color:#1f5f3f}.chip.st-canceled{background:#eee;color:#777}
.chip.pr-high{background:#fdecea;color:#b42318}.chip.pr-urgent{background:#b42318;color:#fff}
.staff{width:100%;border-collapse:collapse}
.staff th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line)}
.staff td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.staff tr:last-child td{border-bottom:0}
.who{display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:50%;background:#dfe7e2;color:#355;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.muted{color:var(--muted)}
.count{color:var(--muted);font-size:14px}
.tasks{display:flex;flex-direction:column;gap:8px}
.task{padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;cursor:pointer}
.task:hover{border-color:#bfd0c5}
.task .t{font-weight:600}
.task .meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.task .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.task.unseen{border-left:4px solid #3a7bd5}
.overdue{color:var(--red);font-weight:600}
.empty{padding:30px;text-align:center;color:var(--muted)}
.modal-bg{position:fixed;inset:0;background:rgba(15,25,20,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 14px;overflow:auto;z-index:20}
.modal{background:#fff;border-radius:14px;width:100%;max-width:620px;padding:20px 22px}
.modal h2{margin:0 0 12px;font-size:19px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:13px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.hist{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.comment{background:#f5f7f5;border-radius:9px;padding:7px 10px;margin:6px 0;font-size:14px}
.comment b{font-weight:600}
.err{color:var(--red);font-size:14px;min-height:20px}
/* чат */
.chatwrap{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 120px);min-height:420px;overflow:hidden}
.chatlist{border-right:1px solid var(--line);overflow:auto}
.ci{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:center}
.ci:hover{background:#f6f8f6}.ci.on{background:var(--brand2)}
.ci .n{font-weight:600;display:flex;justify-content:space-between;gap:6px}
.ci .l{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci>div{min-width:0;flex:1}
.conv{display:flex;flex-direction:column;min-width:0}
.convhead{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:8px}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:#fafbfa}
.msg{max-width:75%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 11px;align-self:flex-start;white-space:pre-wrap;word-wrap:break-word}
.msg.mine{align-self:flex-end;background:#e3f1e8;border-color:#cfe5d7}
.msg .a{font-size:12px;font-weight:700;color:var(--brand);margin-bottom:2px}
.msg .tm{font-size:11px;color:var(--muted);text-align:right;margin-top:2px}
.msg img{max-width:260px;max-height:260px;border-radius:8px;display:block;margin-top:4px}
.day{align-self:center;font-size:12px;color:var(--muted);background:#eef1ee;border-radius:8px;padding:2px 10px;margin:6px 0}
.compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.compose textarea{flex:1;resize:none;max-height:140px}
.back{display:none}
.nowrap{white-space:nowrap}
.show-m{display:none;font-size:13px}
html,body{overflow-x:hidden}
/* вход */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:100%;max-width:380px;padding:26px}
.login h1{margin-bottom:2px}
.login .inp{width:100%}
@media (max-width:820px){
  .layout{flex-direction:column}
  .side{width:auto;height:auto;position:sticky;top:0;z-index:10;flex-direction:row;align-items:center;padding:8px 10px;gap:8px}
  .logo{display:none}
  .nav{margin:0;flex-direction:row;flex:1;gap:2px;overflow:auto}
  .nav a{padding:7px 9px;gap:5px;font-size:14px;flex:none}
  .me{margin:0;border:0;padding:0;flex:none}.me button{padding:5px 8px;font-size:13px}.me b,.me span{display:none}.me button{margin:0}
  .main{padding:16px 12px 30px}
  .staff .hide-m{display:none}
  .show-m{display:block;margin-top:2px}
  .av{width:28px;height:28px;font-size:12px}
  .bar>.inp{flex:1 1 100%!important;max-width:none!important}
  .seg{max-width:100%;overflow-x:auto}
  .seg button{white-space:nowrap}
  .staff td,.staff th{padding:8px 10px}
  .chatwrap{grid-template-columns:1fr;height:calc(100vh - 150px)}
  .chatwrap.open .chatlist{display:none}
  .chatwrap:not(.open) .conv{display:none}
  .back{display:inline-block}
  .row2{grid-template-columns:1fr}
  .msg{max-width:88%}
}
/* единый чат */
.chatwrap{grid-template-columns:320px 1fr}
.chatlist{display:flex;flex-direction:column}
.chatlist #cl{overflow:auto;flex:1}
.chatbar{padding:10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:#fbfcfb}
.chatbar-row{display:flex;gap:6px}.chatbar-row .inp{flex:1;min-width:0}
.seg-sm{display:flex}.seg-sm button{flex:1;padding:5px 6px;font-size:13px}
.tags{display:flex;gap:6px;align-items:center;margin:2px 0 1px;flex-wrap:wrap}
.kind{font-size:12px;color:var(--muted)}
.convhead .kind{font-weight:400}
.chip.xs{font-size:10px;padding:1px 5px;vertical-align:1px}
.ci .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av.grp{border-radius:9px}
.av-foodlink{background:var(--flbg);color:var(--fl)}.av-obshchepit{background:var(--obbg);color:var(--ob)}.av-aup{background:var(--aupbg);color:var(--aup)}
.sys{align-self:center;font-size:12px;color:var(--muted);text-align:center;max-width:85%}
.note.small{margin:8px 10px 0;font-size:13px;padding:7px 10px}
.plist{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pi{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.pi:last-child{border-bottom:0}.pi:hover{background:#f5f8f6}
.convhead{flex-wrap:wrap}
@media (max-width:820px){.chatwrap{grid-template-columns:1fr}}
.stk{display:inline-block;background:#fff3c4;color:#6b5312;border-radius:6px;padding:0 6px;font-size:12px;margin:0 2px}
.msg a{word-break:break-all}
#ch{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ch-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.members-btn{background:none;border:0;padding:0;text-align:left;font-size:13px;font-weight:400;color:var(--brand);text-decoration:underline dotted;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.members-btn:hover{text-decoration:underline}