*{box-sizing:border-box}
:root{--g:#0f5c4d;--g2:#e7f3ef;--bg:#f4f5f4;--line:#e2e4e3;--txt:#1d2321;--mut:#68716e;--red:#b42318;--amber:#b54708}
html,body{margin:0;height:100%;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Tahoma,sans-serif;color:var(--txt);background:var(--bg)}
button,input,select,textarea{font:inherit}
button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;color:var(--txt)}
button.primary{background:var(--g);border-color:var(--g);color:#fff}
button:disabled{opacity:.5;cursor:not-allowed}
button.link{border:0;background:none;color:var(--g);padding:4px 6px}
button.small,select.small{padding:5px 9px;font-size:13px}
button.danger{color:var(--red)}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;width:100%}
textarea{resize:vertical}
.hidden{display:none!important}
.ok{color:var(--g)}
.muted{color:var(--mut)}.small{font-size:13px}.bold{font-weight:600}.err{color:var(--red);min-height:1em}
.row{display:flex;gap:8px;align-items:center}.row.end{justify-content:flex-end}.col{display:flex;flex-direction:column;gap:4px}
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:#fff;padding:24px;border-radius:14px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 12px #0001}
.card h1{margin:0;color:var(--g);font-size:22px}.card p{margin:0}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.main{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--g);color:#fff}
.top .muted{color:#d7ebe5}.top button.link{color:#fff}
.spacer{flex:1}
.usage{font-size:12px;background:#ffffff22;border-radius:20px;padding:3px 10px}
.usage.warn{background:#fdb022;color:#000}.usage.block{background:var(--red)}
.banner{padding:8px 14px;background:#fffaeb;color:var(--amber);font-size:13px;border-bottom:1px solid #fedf89}
.cols{flex:1;display:flex;min-height:0}
.list-pane{width:340px;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-height:0}
.toolbar{display:flex;gap:6px;padding:8px}
.contacts{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.contacts li{padding:10px 12px;border-top:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.contacts li:hover{background:#fafafa}.contacts li.active{background:var(--g2)}
.contacts .l1{display:flex;gap:6px;align-items:center}
.contacts .nm{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacts .pv{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:11px;border-radius:10px;padding:1px 7px;background:var(--line);color:var(--txt);white-space:nowrap}
.badge.unread{background:var(--g);color:#fff}.badge.open{background:#d1fadf;color:#05603a}.badge.out{background:#fee4e2;color:var(--red)}
.chat-pane{flex:1;display:flex;min-width:0}
.chat-empty{margin:auto}
.chat{flex:1;display:flex;flex-direction:column;min-height:0}
.chat-head{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line)}
.chat-title{flex:1;min-width:0}
.chat-head select{width:auto;max-width:150px}
.back{display:none;font-size:20px}
.menu{position:relative}.menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:5px 9px;background:#fff}
.menu-body{position:absolute;right:0;top:110%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px #0002;display:flex;flex-direction:column;min-width:220px;z-index:5;padding:4px}
.menu-body a,.menu-body button{border:0;text-align:left;padding:9px 10px;color:var(--txt);text-decoration:none;cursor:pointer;background:none;border-radius:6px;font-size:14px}
.menu-body a:hover,.menu-body button:hover{background:var(--bg)}
.chat-status{padding:6px 12px;font-size:13px;background:var(--g2);color:#05603a}
.chat-status.closed{background:#fffaeb;color:var(--amber)}.chat-status.out{background:#fee4e2;color:var(--red)}
.msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px;background:#ece5dd}
.msg{max-width:78%;padding:7px 10px 4px;border-radius:10px;background:#fff;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 1px #0001;unicode-bidi:plaintext}
.msg.out{align-self:flex-end;background:#d9fdd3}
.msg.in{align-self:flex-start}
.msg .meta{font-size:11px;color:var(--mut);text-align:right;margin-top:2px;direction:ltr}
.msg .tpl{font-size:11px;color:var(--g);direction:ltr}
.msg.failed{border:1px solid var(--red)}.msg .errtxt{color:var(--red);font-size:12px;direction:ltr}
.day{align-self:center;font-size:12px;background:#ffffffcc;padding:2px 10px;border-radius:8px;color:var(--mut)}
.composer{background:#fff;border-top:1px solid var(--line);padding:8px}
.tpl-box{display:flex;flex-direction:column;gap:6px}
.tpl-preview{font-size:13px;background:var(--bg);border-radius:8px;padding:8px;white-space:pre-wrap;unicode-bidi:plaintext;min-height:2em}
.text-form{display:flex;gap:8px;align-items:flex-end}
dialog{border:0;border-radius:14px;padding:0;width:min(440px,94vw)}
dialog::backdrop{background:#0006}
.dlg{padding:18px;display:flex;flex-direction:column;gap:10px}.dlg h2{margin:0;font-size:18px}
code{background:var(--bg);padding:1px 4px;border-radius:4px}
[dir=rtl],.rtl{text-align:right}
@media (max-width:760px){
  .list-pane{width:100%;border-right:0}
  .main.chatting .list-pane{display:none}
  .main:not(.chatting) .chat-pane{display:none}
  .back{display:inline-block}
  .msg{max-width:88%}
  #who{display:none}
}
@media (max-width:760px){.tpl-box .row{flex-direction:column;align-items:stretch}}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 12px;background:#fff;border-bottom:1px solid var(--line)}
.tag-list{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:12px;border-radius:12px;padding:2px 4px 2px 9px;background:#eef4ff;color:#1849a9;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.tag button{border:0;background:none;padding:0 4px;color:inherit;font-size:13px;line-height:1}
.tag.ro{padding-right:9px}
.tag-form{flex:1;min-width:140px}.tag-form input{padding:4px 8px;font-size:13px}
.contacts .tg{display:flex;flex-wrap:wrap;gap:3px}
.badge.num{background:#f4ebff;color:#6941c6}
label.check{flex-direction:row;align-items:center;gap:8px}label.check input{width:auto}
.top-menu summary{color:var(--txt)}.top-menu .menu-body{right:0;left:auto}
dialog.wide{width:min(900px,96vw)}
.table-wrap{max-height:60vh;overflow:auto;margin:8px 0}
table.grid{border-collapse:collapse;width:100%;font-size:13px}
table.grid th,table.grid td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
table.grid td.pre{white-space:pre-wrap;max-width:340px}
.st-APPROVED{color:var(--g);font-weight:600}.st-REJECTED{color:var(--red);font-weight:600}.st-PENDING{color:#b7791f;font-weight:600}
.note-form{display:flex;gap:6px;padding:6px 10px;border-top:1px dashed var(--line)}.note-form input{flex:1}
.msg.note{background:#fff8d6;border:1px dashed #e0c76b;align-self:center;max-width:90%}
.msg.note .tpl{color:#8a6d00}
.qr-col{display:flex;flex-direction:column;gap:4px;flex:1}
.perms{border:1px solid var(--line);border-radius:8px;padding:8px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.perms label.check{font-size:13px}
.days{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.plain-list{list-style:none;padding:0;margin:0;max-height:200px;overflow:auto}
.plain-list li{display:flex;gap:6px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}
.plain-list li span.t{flex:1}
.badge.shared{background:#e6f0ff;color:#1f4fa3}.badge.handled{background:#eee;color:#555}
.chat-status.ro{background:#eef2f7;color:#334}