:root { --ink:#16202c; --dim:#5b6878; --line:#dde3ea; --bg:#f5f7fa; --card:#fff; --brand:#123c69; --brand2:#1f5fa3; --red:#c62828; --amber:#b26a00; --green:#2e7d32; --side:#0f2236; --sideink:#cfe0f2; }
@media (prefers-color-scheme: dark) { :root { --ink:#e6edf4; --dim:#9aa8b8; --line:#2c3a4a; --bg:#111820; --card:#18222d; --brand:#5d9be0; --brand2:#7fb2ec; --side:#0b141d; } }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; }
button:hover { border-color:var(--brand2); } button:disabled { opacity:.6; cursor:default; }
button.primary { background:var(--brand); color:#fff; border-color:var(--brand); } button.danger, .primary.danger { background:var(--red); border-color:var(--red); color:#fff; }
button.link { border:0; background:none; color:var(--brand2); padding:2px 6px; } button.link.danger { color:var(--red); background:none; }
button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
input, select, textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:7px 10px; max-width:100%; }
a { color:var(--brand2); cursor:pointer; }
small { color:var(--dim); display:block; font-size:12px; }
.error { color:var(--red); } .dim, .fine { color:var(--dim); font-size:13px; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing:.06em; } .code.big { font-size:24px; font-weight:600; }
.auth { min-height:100%; display:grid; place-items:center; padding:16px; }
.auth .card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; }
.auth h1 { font-size:22px; margin:12px 0 18px; } .auth button { margin:6px 6px 0 0; }
.brand { font-weight:700; color:var(--brand); } .logo { color:var(--brand); }
.field { display:block; margin-bottom:14px; } .field span { display:block; font-weight:600; margin-bottom:4px; } .field input { width:100%; }
.app { display:flex; height:100vh; }
.side { width:250px; flex:none; background:var(--side); color:var(--sideink); display:flex; flex-direction:column; }
.side .org { display:flex; gap:10px; align-items:center; padding:16px; border-bottom:1px solid #ffffff1a; } .side .org small { color:#9fb6cc; } .side .logo { color:#fff; font-size:22px; }
.side nav { flex:1; overflow:auto; padding:8px; } .side h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#8ea6be; margin:16px 8px 4px; display:flex; justify-content:space-between; align-items:center; }
.side a { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-radius:6px; color:var(--sideink); text-decoration:none; }
.side a:hover { background:#ffffff12; } .side a.on { background:#ffffff22; color:#fff; font-weight:600; }
.mini { padding:0 7px; background:transparent; color:#cfe0f2; border-color:#ffffff33; }
.badge { background:#ffffff30; color:#fff; border-radius:10px; padding:0 7px; font-size:12px; } .badge.red { background:var(--red); }
.conn { padding:8px 16px; font-size:12px; color:#f0b37e; } .conn.ok { color:#8fd19e; }
.pane { flex:1; min-width:0; display:flex; flex-direction:column; }
.view { flex:1; min-height:0; display:flex; flex-direction:column; }
.bar { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--card); flex-wrap:wrap; }
.bar h2 { margin:0; font-size:18px; } .bar .actions { margin-left:auto; display:flex; gap:6px; } .tabs { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.e2ee { color:var(--green); font-size:13px; }
.banner { background:#e8f1fb; color:#0d2a47; padding:10px 20px; border-bottom:1px solid var(--line); } .banner.warn { background:#fff4e0; color:#4d2e00; }
.banner p { margin:4px 0; } .banner button { margin-right:6px; } .banner a { color:inherit; font-weight:600; text-decoration:underline; }
.scroll { flex:1; overflow:auto; padding:16px 20px; } .empty { padding:40px 20px; color:var(--dim); text-align:center; }
.body-row { flex:1; min-height:0; display:flex; }
.messages { flex:1; overflow:auto; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.msg { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; max-width:720px; }
.msg.mine { border-left:3px solid var(--brand2); } .msg .who span { color:var(--dim); font-size:12px; margin-left:4px; }
.msg .text { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0 0; } .msg h4 { margin:6px 0 0; }
.msg.event { background:transparent; border-style:dashed; color:var(--dim); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.msg.sev-urgent { border-left:4px solid var(--red); } .msg.sev-warning { border-left:4px solid var(--amber); } .msg.sev-info { border-left:4px solid var(--brand2); }
.pill { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 8px; border-radius:10px; background:var(--line); color:var(--ink); margin-left:6px; }
.pill.sys { background:#ede7f6; color:#4527a0; } .pill.esc { background:var(--red); color:#fff; }
.alert-status { font-size:13px; color:var(--dim); margin:6px 0 0; } .mini-btn { padding:2px 8px; font-size:13px; }
.task { display:flex; gap:6px; align-items:center; font-size:13px; margin-top:6px; }
.composer { border-top:1px solid var(--line); background:var(--card); padding:10px 20px; }
.composer .modes { display:flex; gap:4px; margin-bottom:8px; } .composer .modes button { padding:3px 10px; font-size:13px; }
.composer .opts { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:8px; font-size:14px; }
.composer .num { width:70px; } .composer .multi { min-width:160px; height:60px; vertical-align:middle; }
.composer .row { display:flex; gap:8px; } .composer textarea { flex:1; resize:vertical; }
.readonly { padding:14px 20px; color:var(--dim); border-top:1px solid var(--line); }
.panel { width:300px; flex:none; border-left:1px solid var(--line); background:var(--card); overflow:auto; padding:12px 16px; }
.panel h3 { margin:8px 0; font-size:15px; } .member { padding:10px 0; border-bottom:1px solid var(--line); } .member button { margin-top:6px; }
.trust { font-size:13px; } .t-ok, .t-extra { color:var(--green); } .t-changed { color:var(--red); font-weight:600; } .t-none { color:var(--dim); }
.addm { display:flex; gap:6px; margin:12px 0; } .task-row { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); } .sched { font-size:13px; padding:4px 0; }
.alert { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--brand2); border-radius:10px; padding:12px 16px; margin-bottom:12px; }
.alert.sev-urgent { border-left-color:var(--red); } .alert.sev-warning { border-left-color:var(--amber); } .alert.st-resolved { opacity:.75; }
.alert header { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .alert header .pill:first-child { margin-left:0; }
.alert.sev-urgent header .pill:first-child { background:var(--red); color:#fff; } .alert.sev-warning header .pill:first-child { background:var(--amber); color:#fff; }
.alert .meta { color:var(--dim); font-size:13px; margin-left:8px; } .alert h4 { margin:8px 0 4px; font-size:17px; } .alert .body { white-space:pre-wrap; margin:0 0 8px; }
.alert footer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .alert .status { flex:1; color:var(--dim); font-size:13px; }
.overlay { position:fixed; inset:0; background:#0009; display:grid; place-items:center; padding:16px; z-index:10; }
.overlay.urgent { background:#7f0000cc; animation:pulse 1.2s infinite alternate; } @keyframes pulse { to { background:#b71c1ccc; } }
.overlay .sheet { width:100%; max-width:560px; } .overlay .flash { color:#fff; font-weight:800; font-size:20px; text-align:center; letter-spacing:.04em; }
.overlay .sheet > a { color:#fff; display:block; text-align:center; }
.callbox { width:100%; max-width:1100px; height:90vh; background:var(--card); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; }
.callbox .bar button { margin-left:auto; } .call-mount { flex:1; min-height:0; }
.form { padding:16px 20px; max-width:860px; } .form h3 { margin:20px 0 8px; }
.inline { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .copy { width:100%; font-family:ui-monospace, monospace; }
pre { background:var(--bg); padding:10px; border-radius:8px; overflow:auto; font-size:12px; }
table { border-collapse:collapse; width:100%; font-size:14px; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--dim); font-weight:600; }
td.acts { white-space:nowrap; } .audit td { font-size:13px; }
.picker { display:flex; flex-direction:column; gap:4px; } .pick { display:flex; gap:8px; align-items:baseline; padding:6px; border-radius:6px; } .pick:hover { background:var(--bg); } .pick small { display:inline; }
.mback, .tabbar { display:none; }
@media (max-width: 760px) {
  html, body { height:100%; }
  .app { flex-direction:column; height:100dvh; }
  .m-pane .side { display:none; }
  .m-list .pane { display:none; }
  .side { width:100%; flex:1; min-height:0; padding-top:env(safe-area-inset-top, 0px); }
  .side nav { padding:4px 8px 12px; }
  .side a { padding:12px 12px; font-size:16px; border-radius:10px; }
  .side h3 { margin:18px 8px 6px; }
  .mini { padding:4px 11px; font-size:16px; }
  .conn { display:none; }
  .pane { flex:1; min-height:0; padding-top:env(safe-area-inset-top, 0px); }
  .bar { padding:10px 12px; gap:8px; flex-wrap:nowrap; }
  .bar h2 { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .bar .e2ee { display:none; }
  .bar .actions { gap:4px; flex:none; } .bar .actions button { padding:6px 10px; font-size:15px; white-space:nowrap; }
  .bar .actions .lbl { display:none; }
  .tabs { overflow-x:auto; flex-wrap:nowrap; } .tabs button { padding:5px 9px; font-size:14px; white-space:nowrap; }
  .mback { display:grid; place-items:center; width:34px; height:34px; margin-left:-6px; font-size:30px; line-height:1; text-decoration:none; color:var(--brand2); flex:none; }
  .messages, .scroll, .form { padding:12px; }
  .msg { max-width:100%; }
  .composer { padding:8px 10px; }
  .composer .modes { overflow-x:auto; } .composer .modes button { white-space:nowrap; }
  .composer .opts { font-size:14px; gap:8px; } .composer .opts input:not([type=checkbox]):not(.num), .composer .opts select:not(.multi) { flex:1 1 100%; }
  .composer textarea { font-size:16px; }
  .panel { position:fixed; inset:auto 0 calc(58px + env(safe-area-inset-bottom, 0px)) 0; width:auto; max-height:60vh; border-top:1px solid var(--line); border-radius:14px 14px 0 0; box-shadow:0 -8px 24px #0003; z-index:5; }
  .banner { padding:10px 12px; }
  table { font-size:13px; } .form table { display:block; overflow-x:auto; }
  .inline > * { flex:1 1 100%; }
  .tabbar { display:flex; flex:none; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px); }
  .tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 0 6px; font-size:11.5px; color:var(--dim); text-decoration:none; position:relative; }
  .tabbar a.on { color:var(--brand2); font-weight:600; }
  .tabbar .ti { font-size:20px; line-height:1.1; }
  .tabbar .badge { position:absolute; top:3px; left:calc(50% + 8px); font-size:10.5px; padding:0 5px; }
  .callbox { height:100%; max-height:none; border-radius:0; } .overlay:has(.callbox) { padding:0; }
  .overlay .flash { font-size:17px; }
  .auth .card { padding:22px; }
}

/* call centre */
.cc-host { flex:1; min-height:0; display:flex; flex-direction:column; } .cc-host.hidden { display:none; } .cc-host .view { flex:1; min-height:0; display:flex; flex-direction:column; }
.stats { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; } .stat { flex:1; min-width:110px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); }
.stat b { display:block; font-size:22px; } .stat span { color:var(--dim); font-size:13px; }
.pill { display:inline-block; border:1px solid var(--line); border-radius:10px; padding:1px 8px; font-size:12.5px; margin:2px 0; } .pill.ok { border-color:#2e9e5b; color:#2e9e5b; } .pill.busy { border-color:var(--red); color:var(--red); }
.line { border:1px solid var(--line); border-radius:10px; padding:4px 14px 12px; margin:14px 0; } .checks { display:flex; flex-wrap:wrap; gap:6px 16px; } .checks label { display:flex; gap:6px; align-items:center; }
.cc-split { flex:1; min-height:0; display:flex; } .cc-split .call-mount { flex:1; min-width:0; } .cc-wrap { width:320px; flex:none; border-left:1px solid var(--line); padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.cc-wrap textarea, .cc-wrap select { width:100%; } .auth .card.wide { max-width:720px; } .call-mount.public { height:420px; margin:12px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
@media (max-width: 760px) { .cc-split { flex-direction:column; } .cc-wrap { width:auto; border-left:0; border-top:1px solid var(--line); max-height:45vh; } }
/* booking and video */
.daypick, .slotpick { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; } .slotpick button { min-width:74px; } .bookset { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:8px; } .bookset .copy, .bookset small, .bookset .checks { flex-basis:100%; }
label.check { display:flex; gap:6px; align-items:center; } input.copy.small { width:150px; font-size:12px; } textarea.copy { width:100%; font-family:ui-monospace, monospace; font-size:12.5px; }
a.button { display:inline-block; padding:8px 14px; border-radius:8px; text-decoration:none; } a.button.primary { background:var(--brand); color:#fff; } .call-mount.public.video { height:520px; }
input.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* live chat */
.chatwrap { display:flex; gap:14px; min-height:420px; } .chatlist { width:270px; flex:none; display:flex; flex-direction:column; gap:6px; overflow:auto; max-height:70vh; }
.chatrow { text-align:left; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; } .chatrow.on { background:var(--card); border-color:var(--brand); color:inherit; } .chatrow .who { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .chatrow small { color:var(--dim); } .chatrow .prev { font-size:13px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.chatpane { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; } .chatpane header small { display:block; color:var(--dim); }
.msgs { flex:1; overflow:auto; max-height:52vh; display:flex; flex-direction:column; gap:8px; padding:8px 2px; } .msgs.public { min-height:220px; max-height:46vh; border:1px solid var(--line); border-radius:10px; padding:10px; }
.bubble { max-width:78%; padding:8px 11px; border-radius:12px; background:var(--card); border:1px solid var(--line); align-self:flex-start; white-space:pre-wrap; overflow-wrap:anywhere; } .bubble.agent { align-self:flex-end; background:var(--brand); color:#fff; border-color:var(--brand); }
.bubble small { display:block; font-size:11px; opacity:.75; margin-top:3px; } .chatsend { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; } .chatsend textarea { flex:1; min-width:200px; resize:vertical; }
@media (max-width: 760px) { .chatwrap { flex-direction:column; } .chatlist { width:auto; max-height:30vh; } }
/* staff screens on a phone (and in the Android app) */
@media (max-width: 760px) {
  .ccbar { flex-wrap:wrap; row-gap:6px; } .ccbar h2 { flex:1; } .ccbar .avail { white-space:nowrap; order:2; } .ccbar .tabs { order:3; flex-basis:100%; margin-left:0; padding-bottom:2px; }
  .cc-split .call-mount { min-height:52vh; } .cc-wrap { max-height:none; }
  .chatwrap { min-height:0; } .msgs { max-height:none; }
}
.qr { width:200px; height:200px; display:block; margin:8px 0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.banner.elsewhere { margin:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.callchat { border:1px solid var(--line); border-radius:10px; padding:6px 10px 8px; margin:8px 0; background:var(--card); } .callchat-head { display:flex; justify-content:space-between; align-items:center; width:100%; border:0; background:none; padding:4px 0; font-weight:600; color:inherit; } .callchat-head span:last-child { font-weight:400; color:var(--dim); font-size:13px; }
.callchat .badge { background:var(--red); color:#fff; border-radius:10px; padding:0 7px; font-size:12px; margin-left:6px; } .msgs.small { max-height:190px; min-height:0; flex:none; padding:4px 0; } .callchat .chatsend textarea { min-width:0; } .callchat .fine { margin:6px 0 0; font-size:12px; }