:root {
  --bg: #f5f6f8; --panel: #fff; --ink: #1c2330; --muted: #667085; --line: #e3e6ec;
  --brand: #2456d6; --brand-ink: #fff; --green: #18794e; --green-bg: #e3f5ec; --amber: #8a5a00; --amber-bg: #fdf0d0;
  --red: #b42318; --red-bg: #fde7e4; --grey-bg: #eceef2; --side: #131a29; --side-ink: #c9d1e0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); display: flex; }
a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; } h2 { font-size: 16px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 18px 0 8px; }
code { background: var(--grey-bg); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.muted { color: var(--muted); } .tiny { font-size: 12px; color: var(--muted); font-weight: 400; } .err { color: var(--red); }
.hidden { display: none !important; } .pad { padding: 12px; } .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side { width: 216px; flex: none; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; }
.brand { color: #fff; font-weight: 700; font-size: 18px; padding: 18px 18px 12px; display: block; }
.side nav { flex: 1; overflow: auto; }
.side nav a { display: block; padding: 9px 18px; color: var(--side-ink); }
.side nav a:hover { background: #1d2740; text-decoration: none; } .side nav a.on { background: #24304f; color: #fff; }
.side-foot { padding: 14px 18px; border-top: 1px solid #263150; font-size: 13px; }
.side-foot select { width: 100%; margin: 4px 0 10px; } .side-foot .tiny { color: #8d98b0; } .who { color: #fff; }
main { flex: 1; min-width: 0; padding: 22px 26px 60px; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
details.card > summary { cursor: pointer; } details.card[open] > summary { margin-bottom: 12px; }
details > summary { cursor: pointer; color: var(--brand); margin: 10px 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.card .stat { background: var(--bg); }
.stat span { display: block; color: var(--muted); font-size: 12px; } .stat b { font-size: 22px; } .stat b.sm { font-size: 15px; } .stat i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }

label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
label .tiny { display: block; margin-top: 3px; }
input, select, textarea { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid #cfd4dd; border-radius: 7px; background: #fff; color: var(--ink); margin-top: 3px; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0 6px 0 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b9cbff; border-color: var(--brand); }
textarea { resize: vertical; }
.check { font-weight: 400; display: flex; align-items: baseline; flex-wrap: wrap; } .check .tiny { flex-basis: 100%; margin-left: 20px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 14px; margin-bottom: 10px; }
.choice { display: flex; gap: 10px; font-weight: 400; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.choice p { margin: 2px 0 8px; color: var(--muted); } .choice select { width: auto; min-width: 150px; } .choice input[type=radio] { margin-top: 4px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; margin: 8px 0; } .inline-form label { flex: 1; margin-bottom: 0; }
.inline-form.wrap { flex-wrap: wrap; } .inline-form.wrap label { flex: 1 1 150px; }
.inline-form.tight { margin: 0; gap: 6px; } .inline-form.tight input { margin: 0; } .narrow { width: 64px !important; }
.stack > * { margin-bottom: 10px; }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 7px 13px; border-radius: 7px; border: 1px solid #cfd4dd; background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { background: #f1f3f7; text-decoration: none; } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.primary:hover { background: #1c47b5; }
.btn.small { padding: 3px 9px; font-size: 12.5px; } .btn:disabled { opacity: .6; cursor: progress; }
.link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; } .link.danger { color: var(--red); } .side .link { color: #8fb0ff; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fixed { display: inline-block; padding: 5px 9px; background: var(--grey-bg); border-radius: 6px; font-weight: 600; white-space: nowrap; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--grey-bg); color: #475467; white-space: nowrap; }
.pill.green { background: var(--green-bg); color: var(--green); } .pill.amber { background: var(--amber-bg); color: var(--amber); } .pill.red { background: var(--red-bg); color: var(--red); }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; background: var(--green-bg); color: #0f5132; }
.flash.pre { white-space: pre-line; }
.flash.error { background: var(--red-bg); color: #7a1a12; } .flash.warn { background: var(--amber-bg); color: #5c3d00; }
.note { background: #f3f6ff; border: 1px solid #d6e0ff; border-radius: 8px; padding: 10px 12px; } .note ol { margin: 6px 0; padding-left: 20px; }

.tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tbl th, .tbl td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .tbl tr:last-child td { border-bottom: 0; }
.tbl.small td { font-size: 12.5px; } .tbl td.actions { display: table-cell; } .tbl td.actions form { display: inline-block; margin-right: 6px; }
.tbl.models select, .tbl.models input[type=number] { min-width: 78px; margin: 0; } .tbl.models select[data-model] { min-width: 190px; } .tbl.models td:first-child { min-width: 190px; } .tbl.models td { padding: 7px 5px; }
.price { width: 110px; margin: 0; }
.scroll { overflow-x: auto; }
.bar { height: 7px; background: var(--grey-bg); border-radius: 9px; min-width: 70px; overflow: hidden; margin-top: 5px; } .bar i { display: block; height: 100%; background: var(--brand); }
.bar i.amber { background: #e0a100; } .bar i.red { background: var(--red); } .bar i.green { background: #2f9e6a; }
.spark { display: flex; align-items: flex-end; gap: 5px; height: 130px; } .spark .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.spark i { display: block; width: 100%; background: var(--brand); border-radius: 3px 3px 0 0; } .spark span { font-size: 10.5px; color: var(--muted); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 10px 0 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 13px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; } .tabs a.on { color: var(--brand); border-color: var(--brand); } .tabs a:hover { text-decoration: none; color: var(--ink); }
.alert-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .alert-row:last-of-type { border: 0; } .alert-row.read { opacity: .6; }
.hit { border-top: 1px solid var(--line); padding: 9px 0; }

.inbox { display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 14px; height: calc(100vh - 44px); }
.conv-list, .thread, .profile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.conv-list .head { padding: 12px 12px 0; } .conv-list .card { margin: 8px; }
.conv { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); } .conv:hover { background: #f6f8fc; text-decoration: none; } .conv.on { background: #eaf0ff; }
.conv .row { display: flex; justify-content: space-between; gap: 8px; }
.thread { display: flex; flex-direction: column; } .thread.empty { align-items: center; justify-content: center; }
.thread-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.thread .flash { margin: 10px 14px 0; }
.msgs { flex: 1; overflow: auto; padding: 14px; background: #f3f1ec; }
.msg { margin-bottom: 12px; max-width: 78%; } .msg.out { margin-left: auto; text-align: right; }
.bubble { display: inline-block; text-align: left; padding: 8px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; }
.msg.out .bubble { background: #dff5d4; border-color: #c6e6b8; } .msg.out.agent .bubble { background: #dbe7ff; border-color: #c1d3fb; }
.composer { border-top: 1px solid var(--line); padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.composer form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .composer .sim textarea { background: #fffbea; }
.profile { padding: 14px; } .profile h2 { margin-bottom: 8px; }
.cat { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 2px; }
.fact { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); } .fact .k { font-weight: 600; margin-right: 4px; }
.audit { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }

body.bare { align-items: center; justify-content: center; flex-direction: column; } .login { width: 340px; } .login h1 { margin-bottom: 2px; } .login .btn { width: 100%; }
@media (max-width: 1100px) { .inbox { grid-template-columns: 1fr; height: auto; } .msgs { max-height: 60vh; } }
@media (max-width: 760px) { body { flex-direction: column; } .side { width: 100%; height: auto; position: static; } .side nav { display: flex; flex-wrap: wrap; } main { padding: 14px; } .two, .composer { grid-template-columns: 1fr; } }