/* CRM chat layout (TZ §53) — builds on style.css tokens */
body.crm { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.crm main { flex: 1; min-height: 0; }
.navlink { margin-left: 14px; font-weight: 500; color: var(--muted); text-decoration: none; font-size: 13px; }
.navlink:hover { color: inherit; }
.accounts { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 16px 0; font-size: 12.5px; }
.acc { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: #fff; }
.acc .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #9aa; }
.acc.active .dot { background: #2bb673; } .acc.rate_limited .dot { background: #e9a23b; }
.acc.paused .dot, .acc.unauthorized .dot, .acc.offline .dot { background: #d94a4a; }
.acc button { margin-left: 8px; font-size: 11px; padding: 1px 7px; }

.crm-layout { display: grid; grid-template-columns: 320px 1fr 300px; gap: 0; height: 100%; min-height: 0; border-top: 1px solid var(--line); }
.pane { min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.pane.list { border-right: 1px solid var(--line); }
.pane.side { border-left: 1px solid var(--line); }
.filters { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.filters select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.chk { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.convs { overflow-y: auto; flex: 1; }
.conv { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.conv:hover { background: #f7f8fa; } .conv.sel { background: #eef3ff; }
.conv .t { display: flex; justify-content: space-between; gap: 8px; }
.conv .name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .when { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.conv .prev { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conv .prev.out::before { content: "Ви: "; color: #889; }
.badge-ch { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #eef; color: #346; margin-right: 6px; vertical-align: middle; }
.badge-ch.viber { background: #f1e8fb; color: #5b2f8f; }
.unread { background: #2b72e6; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 6px; }

.chat-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.chat-head .sub { color: var(--muted); font-size: 12px; }
.messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #f6f7f9; }
.msg { max-width: 72%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; position: relative; }
.msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); }
.msg.out { align-self: flex-end; background: #dcebff; }
.msg.out.automation { background: #e5f6ea; } .msg.out.telegram_native, .msg.out.viber_native { background: #f1efe6; }
.msg .meta { display: block; font-size: 10.5px; color: #889; margin-top: 4px; text-align: right; }
.msg.failed { border: 1px solid #e07070; } .msg .meta .err { color: #c0392b; }
.msg .type { font-style: italic; color: #778; }
.atts { margin-top: 4px; } .att-img { max-width: 260px; max-height: 320px; border-radius: 8px; display: block; }
.daysep { align-self: center; font-size: 11px; color: #889; background: #e8eaee; padding: 2px 10px; border-radius: 999px; margin: 6px 0; }
.send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.send textarea { flex: 1; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; }

.side-content { padding: 12px 14px; font-size: 13px; overflow-y: auto; }
.side-content h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; }
.side-content .kv { display: grid; grid-template-columns: 90px 1fr; gap: 2px 8px; }
.side-content .kv div:nth-child(odd) { color: var(--muted); }
.side-content ul { padding-left: 16px; margin: 0; } .side-content li { margin: 3px 0; }
.pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eee; }
.pill.sent { background: #e6f7ec; color: #157a3a; } .pill.routing { background: #fff4df; color: #9a6400; }
.pill.exhausted, .pill.failed { background: #fdecec; color: #b42318; }
.linkbox { display: flex; gap: 6px; margin-top: 6px; } .linkbox input { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.srch { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.srch b { background: #fff2a8; }
.att { font-size: 11.5px; color: var(--muted); } .att .ok { color: #157a3a; } .att .bad { color: #b42318; }
@media (max-width: 980px) { .crm-layout { grid-template-columns: 1fr; } .pane.side { display: none; } .pane.list { max-height: 40%; } }

/* fixes: active tab colour (style.css only colours chips with data-st), hidden overrides, main padding */
#tabs .chip.active { background: #334155; border-color: #334155; color: #fff; }
#tabs .chip.active .count { color: #fff; }
.send[hidden], main[hidden], .banner[hidden], .empty[hidden] { display: none !important; }
body.crm main { padding: 0; }
body.crm #view-deliveries { padding: 0 18px 40px; overflow-y: auto; }

/* orders panel in the chat side bar */
.ord { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; background: rgba(127,127,127,.04); }
.ord .hd { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 4px; }
.ord .row { display: grid; grid-template-columns: 84px 1fr; gap: 3px 6px; align-items: center; font-size: 12px; }
.ord .row > div:nth-child(odd) { color: var(--muted); }
.ord input, .ord select { width: 100%; box-sizing: border-box; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
.ord input[type=number] { width: 80px; }
.btn.sm { font-size: 12px; padding: 3px 8px; }
.btn.primary { background: #0f766e; color: #fff; border-color: #0f766e; }
.side-content .err { color: #c0392b; }