/* BlivoTech — self-hosted styles (no CDN, no runtime compile) */
:root{
  --brand:#4f46e5; --brand-d:#4338ca; --brand-l:#eef2ff;
  --ok:#059669; --okl:#d1fae5; --warn:#b45309; --warnl:#fef3c7;
  --err:#dc2626; --errl:#fee2e2; --sky:#0284c7; --skyl:#e0f2fe;
  --ink:#1e293b; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; --card:#fff;
  --sidebar:264px; --sidebar-c:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:.85em}

/* ---- App shell ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;transition:width .18s ease;z-index:30}
.sidebar.collapsed{width:var(--sidebar-c)}
/* auto-expand on hover while collapsed */
.sidebar.collapsed:hover{width:var(--sidebar);box-shadow:4px 0 24px rgba(0,0,0,.25)}
.sidebar.collapsed:hover .brand .label,
.sidebar.collapsed:hover .nav a .label,
.sidebar.collapsed:hover .nav .group-label{display:inline}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 16px;color:#fff;font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden}
.sidebar .brand .logo{min-width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#a855f7);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.sidebar.collapsed .brand .label,.sidebar.collapsed .nav a .label,.sidebar.collapsed .nav .group-label{display:none}
.sidebar .nav{flex:1;padding:8px;overflow-y:auto}
.sidebar .nav .group-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;padding:14px 12px 4px}
.sidebar .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#cbd5e1;
  white-space:nowrap;overflow:hidden;margin-bottom:2px}
.sidebar .nav a:hover{background:#1e293b;text-decoration:none;color:#fff}
.sidebar .nav a.active{background:var(--brand);color:#fff}
.sidebar .nav a .ico{min-width:20px;text-align:center;font-size:16px}
.sidebar .foot{padding:10px;border-top:1px solid #1e293b}
.sidebar .foot form{margin:0}
.sidebar .foot #pushBtnDesk[data-state="on"]{color:#4ade80}
.sidebar .foot #pushBtnDesk[data-state="blocked"]{color:#f87171}
.sidebar .foot button{width:100%;background:transparent;border:0;color:#94a3b8;text-align:left;
  padding:8px 12px;cursor:pointer;border-radius:8px;display:flex;gap:12px;align-items:center}
.sidebar .foot button:hover{background:#1e293b;color:#fff}
.collapse-btn{position:absolute;top:18px;right:-12px;width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;border:0;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}

.main{flex:1;margin-left:var(--sidebar);transition:margin .18s ease;min-width:0}
.sidebar.collapsed ~ .main{margin-left:var(--sidebar-c)}
/* the phone-only search block in the top bar was never hidden on a wide screen, so the desktop had a
   second, unstyled search box stacked above the real toolbar (2026-09-21) */
.tb-mobile{display:none}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:14px 24px;font-weight:600;font-size:16px;
  position:sticky;top:0;z-index:10;
  /* 2026-10-01: never a flex container, so the wallet chip's margin-left:auto did
     nothing and it sat against the page title. */
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.tb-co{font-weight:600;color:var(--muted,#64748b);font-size:14px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-wallet{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-weight:600;font-size:13px;cursor:pointer;border:1px solid;font-family:inherit;line-height:1.4}
@media (max-width:860px){ .tb-co{display:none} }
.content{padding:24px}

/* ---- bits ---- */
.card{background:var(--card);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.card .hd{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.card .bd{padding:18px}
.grid{display:grid;gap:14px}
.cols-6{grid-template-columns:repeat(6,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}
/* 2026-09-20: cols-3 and cols-4 were used in views but never defined here, so those cards fell into
   a single column and every stat took its own row. */
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.cols-6,.cols-5{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.cols-6,.cols-5{grid-template-columns:repeat(2,1fr)}.cols-4,.cols-3{grid-template-columns:repeat(2,1fr)}.cols-2{grid-template-columns:1fr}}
.stat{background:var(--card);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:16px}
.stat .n{font-size:26px;font-weight:700}
.stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:9px 16px;font-size:14px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--brand-d);text-decoration:none;color:#fff}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.ghost{background:#f1f5f9;color:var(--ink)}
.btn.danger{background:var(--err)}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;background:#fff;color:var(--ink)}
input:focus,select,textarea:focus{outline:2px solid var(--brand-l);border-color:var(--brand)}
label.fld{display:block;font-weight:500;margin-bottom:6px}
.row{display:flex;gap:10px;align-items:center}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;color:var(--muted);background:#f8fafc;padding:10px 14px;font-weight:600}
tbody td{padding:10px 14px;border-top:1px solid var(--line)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600}
.b-queued{background:var(--warnl);color:var(--warn)} .b-sent{background:var(--skyl);color:var(--sky)}
.b-delivered{background:var(--okl);color:var(--ok)} .b-read{background:#dcfce7;color:#15803d}
.b-failed{background:var(--errl);color:var(--err)}
.alert{border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.alert.ok{background:var(--okl);color:#065f46;border:1px solid #a7f3d0}
.alert.warn{background:var(--warnl);color:var(--warn);border:1px solid #fde68a}
.alert.err{background:var(--errl);color:var(--err);border:1px solid #fecaca}
.muted{color:var(--muted)} .sm{font-size:12px} .mt{margin-top:14px} .mb{margin-bottom:14px}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#faf5ff)}
.login-card{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:32px;width:360px}

/* ---- Inbox ---- */
.inbox{display:flex;height:calc(100vh - 110px);background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.convs{width:300px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.convs .new{padding:12px;border-bottom:1px solid var(--line)}
.convs .list{overflow-y:auto;flex:1}
.conv{display:block;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.conv:hover{background:#f8fafc;text-decoration:none}
.conv.active{background:var(--brand-l)}
.conv .top{display:flex;justify-content:space-between;align-items:center}
.conv .nm{font-weight:600}
.conv .num{font-size:12px;color:var(--muted)}
.conv .unread{background:var(--ok);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}
.thread-pane{flex:1;display:flex;flex-direction:column;min-width:0}
.thread-hd{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.thread{flex:1;overflow-y:auto;padding:18px;background:#efeae2;display:flex;flex-direction:column;gap:8px}
.bub{max-width:68%;padding:7px 10px;border-radius:9px;box-shadow:0 1px 1px rgba(0,0,0,.08);font-size:14px;word-wrap:break-word}
.bub.in{align-self:flex-start;background:#fff}
.bub.out{align-self:flex-end;background:#d9fdd3}
.bub img{max-width:230px;border-radius:6px;display:block;margin-bottom:4px}
.bub .meta{font-size:10px;color:#64748b;text-align:right;margin-top:3px}
.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:20px}

/* composer */
.composer{border-top:1px solid var(--line);padding:12px 14px;position:relative}
.composer .free{display:flex;gap:10px;align-items:center}
.composer input.msg{border-radius:999px;flex:1}
.composer .send{background:var(--brand);color:#fff;border:0;border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:16px;min-width:42px}
.attach-btn{background:#f1f5f9;border:0;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;min-width:42px}
.attach-menu{position:absolute;bottom:62px;left:14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.15);padding:6px;width:220px;display:none}
.attach-menu.open{display:block}
.attach-menu button{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;
  padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;text-align:left;color:var(--ink)}
.attach-menu button:hover{background:#f1f5f9}
.attach-menu .ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.qr-pop{position:absolute;bottom:64px;left:64px;right:64px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.15);max-height:240px;overflow-y:auto;display:none;z-index:5}
.qr-pop.open{display:block}
.qr-item{display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.qr-item:hover{background:var(--brand-l)}
.qr-item b{color:var(--brand);min-width:90px}
.qr-item span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:4px;margin-top:8px}
.tabs a{flex:1;text-align:center;padding:6px;border-radius:8px;font-size:13px;color:var(--muted);background:#f1f5f9;font-weight:500}
.tabs a:hover{text-decoration:none}
.tabs a.on{background:var(--brand);color:#fff}
.details{width:300px;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;background:#fff;flex-shrink:0}
.details .sec{padding:14px;border-bottom:1px solid var(--line)}
.details .sec h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.details label.fld{font-size:12px;margin-bottom:3px}
.details input,.details select,.details textarea{padding:6px 9px;font-size:13px;margin-bottom:8px}
.note{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:13px}
.note .meta{font-size:11px;color:var(--muted);margin-top:3px}
.tag-chip{display:inline-block;background:var(--brand-l);color:var(--brand);border-radius:999px;padding:1px 9px;font-size:11px;margin:2px}
.close-btn{background:#fee2e2;color:#dc2626;border:0;border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;font-weight:600}
.win-pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.win-pill.open{background:var(--okl);color:var(--ok)}
.win-pill.closed{background:var(--warnl);color:var(--warn)}
.window-open{color:var(--ok);font-size:12px;font-weight:600}
.window-closed{color:var(--warn);font-size:12px;font-weight:600}
.tpl-box .note{background:var(--warnl);color:var(--warn);border:1px solid #fde68a;border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:12px}
.tpl-box form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:50}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:14px;padding:22px;width:420px;max-width:92vw}
.modal h3{margin:0 0 14px}

/* ---- Mobile / PWA ---- */
.bottom-nav{display:none}
.mobile-only{display:none}
@media(max-width:768px){
  .sidebar,.collapse-btn{display:none}
  .main{margin-left:0!important}
  /* the bar is sticky at the very top, so on a notched phone the status bar was sitting on top of the
     search field - keep clear of it the same way the chat header does (2026-09-21) */
  .topbar{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));font-size:15px;
    position:sticky;top:0;z-index:20;background:var(--card);display:flex;align-items:center;gap:8px}
  .tb-title{display:none}
  .tb-mobile{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
  .tb-mobile .tb-head{flex:1;min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-mobile form{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#f1f5f9;border-radius:999px;padding:4px 6px 4px 12px}
  .tb-mobile form input{flex:1;min-width:0;border:0;background:transparent;padding:6px 0;font-size:15px;box-shadow:none}
  .tb-mobile form input:focus{outline:none}
  .tb-mobile form button{border:0;background:transparent;font-size:17px;padding:4px 6px;cursor:pointer;line-height:1}
  .tb-dots{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:#f1f5f9;
    font-size:20px;line-height:1;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .tb-dots:active{background:#e2e8f0}
  .content{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .grid.cols-2{grid-template-columns:1fr!important}
  .grid.cols-6,.grid.cols-5,.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr)!important}
  .grid .stat,.grid .card .bd{padding:12px}
  .card table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .modal{width:94vw!important}
  .login-card{width:92vw}

  /* 2026-09-20: the bottom tab bar is gone on phones - the ⋮ menu in the top bar replaces it and
     the screen it used to take now belongs to the chat. */
  .bottom-nav{display:none}

  /* inbox: stack list -> thread -> details */
  .inbox{height:calc(100vh - 92px);height:calc(100dvh - 92px);border-radius:0;box-shadow:none}
  .inbox .convs{width:100%;border-right:0}
  .inbox .thread-pane,.inbox .details{display:none}
  .inbox.has-active .convs{display:none}
  .inbox.has-active .thread-pane{display:flex;width:100%}
  .inbox .details{position:fixed;top:0;right:0;bottom:0;width:88%;max-width:360px;z-index:60;
    box-shadow:-6px 0 30px rgba(0,0,0,.3);transform:translateX(100%);transition:transform .2s;border-left:0}
  .inbox.show-details .details{display:flex;transform:translateX(0)}
  .mobile-only{display:inline-flex}
  .bub{max-width:82%}

  /* ---- 2026-09-21: an open chat owns the whole phone screen -----------------------------------
     The app top bar (search + the menu) belongs to the conversation LIST, not to a conversation.
     With a chat open it is hidden, the chat header is the only thing above the messages, and
     everything that used to crowd that header (AI, orders, close, details) lives in the drawer
     you pull in from the right edge. */
  body.chat-open .topbar{display:none}
  body.chat-open .content{padding:0}
  body.chat-open .inbox-wrap{height:100vh;height:100dvh;gap:0}
  body.chat-open .inbox{height:100%;border-radius:0}

  /* no app bar above us any more, so keep clear of the notch / status bar */
  .thread-hd{padding:8px 6px 8px 2px;padding-top:max(8px,env(safe-area-inset-top));gap:6px;
    position:sticky;top:0;z-index:5;background:var(--card)}
  .hd-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);text-transform:uppercase}
  .thread-hd .hd-back{font-size:26px;line-height:1;padding:4px 6px;color:var(--ink);text-decoration:none;flex:0 0 auto}
  .thread-hd .hd-id{min-width:0;flex:1}
  .thread-hd .hd-id > div:first-child{font-size:15.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread-hd .hd-id .num{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread-hd{flex-wrap:nowrap;overflow:hidden}
  .thread-hd .hd-desk{display:none !important}      /* AI / Orders / Close live in the drawer */
  .thread-hd .win-pill{font-size:11px;padding:3px 8px;flex:0 0 auto}
  .hd-more{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:#f1f5f9;
    font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .hd-more:active{background:#e2e8f0}

  /* the drawer: a proper sheet, and a scrim you can tap to dismiss */
  .inbox .details{width:86%;max-width:340px;box-shadow:-8px 0 34px rgba(15,23,42,.28)}
  .dt-scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  .inbox.show-details ~ .dt-scrim,.dt-scrim.on{opacity:1;pointer-events:auto}
  /* the drawer: a title row, then the actions as plain icon buttons - the words were doing no work
     and made four buttons wrap onto three lines (2026-09-21) */
  .dt-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line);
    font-weight:650;font-size:15px;position:sticky;top:0;background:#fff;z-index:2}
  .dt-x{border:0;background:#f1f5f9;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
  .dt-actions{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .dt-act{flex:1 1 0;min-width:0;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;
    font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .dt-act:active{background:#f1f5f9}
  .dt-act.danger{border-color:#fecaca;background:#fef2f2}

  /* the six detail sections are two swipeable pages instead of one long scroll (2026-09-21) */
  .dt-tabs{display:flex;gap:6px;padding:8px 14px 10px;border-bottom:1px solid var(--line);background:#fff;
    position:sticky;top:0;z-index:2}
  .dt-tabs button{flex:1;border:0;background:#f1f5f9;border-radius:9px;padding:8px 6px;font-size:13px;
    font-weight:600;color:var(--muted);cursor:pointer}
  .dt-tabs button.on{background:var(--brand);color:#fff}
  .dt-pages{display:flex;flex:1;min-height:0;transition:transform .22s ease;width:200%}
  .dt-page{width:50%;flex:0 0 50%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .dt-hint{padding:8px 14px 14px;text-align:center;font-size:11px;color:var(--muted)}

  /* the panel scrolls on its own and taps inside it must not reach the chat behind */
  /* the pages are moved with a transform, so the panel itself must not scroll sideways as well -
     the two fight each other and the second page never appears (2026-09-21) */
  .inbox .details{overflow-x:hidden;overflow-y:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .inbox .details .sec{padding:14px}
  .inbox .details button,.inbox .details select,.inbox .details input{min-height:38px}

  /* composer: the send button is the only way to send, so Enter is free to make a new line */
  .composer .msg{font-size:15px}
}

@media (min-width:761px){ .hd-more,.dt-actions,.dt-scrim{display:none} }

/* the reply icon on a message - appears on hover, always visible on touch (2026-09-22) */
.bub{position:relative}
.bub .q-reply{position:absolute;top:2px;right:4px;border:0;background:rgba(255,255,255,.82);color:#475569;
  width:24px;height:24px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;padding:0;
  opacity:0;transition:opacity .12s;box-shadow:0 1px 3px rgba(15,23,42,.18)}
.bub:hover .q-reply,.bub .q-reply:focus{opacity:1}
.bub.out .q-reply{background:rgba(255,255,255,.9)}
.bub .q-reply:hover{color:var(--brand)}
@media (hover:none){ .bub .q-reply{opacity:.62} }     /* no hover on a phone - keep it visible */

/* links a customer or Bridgepal sent are real links, not text to copy by hand */
.bub a{color:#1d4ed8;text-decoration:underline;word-break:break-word}
.bub.out a{color:#0b6b2f}

/* a quoted reply, drawn inside the bubble above the message itself (2026-09-21) */
.bub .q{display:block;border-left:3px solid var(--brand);background:rgba(99,102,241,.08);border-radius:6px;
  padding:5px 8px;margin-bottom:5px;font-size:12px;line-height:1.35;max-height:52px;overflow:hidden}
.bub .q b{display:block;color:var(--brand);font-size:11px;margin-bottom:1px}
.bub .q span{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bub.out .q{border-left-color:#16a34a;background:rgba(22,163,74,.10)}
.bub.out .q b{color:#15803d}
.bub.can-reply{cursor:pointer}

/* the message you are replying to, shown above the composer until you send or cancel */
.reply-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);
  background:#f8fafc}
.reply-chip .rc-body{flex:1;min-width:0;border-left:3px solid var(--brand);padding-left:8px;font-size:12px;line-height:1.35}
.reply-chip .rc-body b{display:block;color:var(--brand);font-size:11px}
.reply-chip .rc-body span{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-chip .rc-x{border:0;background:#e2e8f0;width:28px;height:28px;border-radius:50%;font-size:17px;line-height:1;
  cursor:pointer;color:var(--ink);flex:0 0 auto}

/* a reaction someone tapped on a message - a pill, not a full bubble (2026-09-21) */
.rx{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:15px}
.rx.out{justify-content:flex-end}
.rx span:first-child{background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px;line-height:1.3;
  box-shadow:0 1px 2px rgba(15,23,42,.06)}
.rx.out span:first-child{background:#eafff0;border-color:#bbf7d0}
.rx .rx-t{font-size:10px;color:var(--muted)}

/* interactive menu chips shown under a bot menu bubble in the inbox */
.menu-pills{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.menu-pills .mp-label{flex-basis:100%;font-size:10px;color:#64748b;margin-bottom:2px}
.menu-pills .mp{background:#fff;border:1px solid #25d366;color:#075e54;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.bub.out .menu-pills .mp{background:#eafff0}

/* ---- Checkbox / radio sizing fix -----------------------------------------
   The global `input,select,textarea{width:100%}` rule above also stretched
   checkboxes and radios to the full row, so their labels overlapped them. */
input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto;margin:0;padding:0}
input[type=file]{padding:8px 10px}

/* ---- Publish (SOCIAL > Publish) ---- */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices .choice{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;
  font-size:14px;line-height:1;white-space:nowrap;transition:border-color .12s,background .12s}
.choices .choice:hover{border-color:var(--brand)}
.choices .choice span{display:inline-flex;align-items:center;gap:6px}
.choices .choice:has(input:checked){border-color:var(--brand);background:var(--brand-l);font-weight:500}
.choices .choice.off{opacity:.5;cursor:not-allowed}
.pub-acct{display:flex;gap:10px;align-items:center;flex-wrap:wrap}


/* ---- Mobile ⋮ menu (2026-09-20): the whole left-hand menu as a grid of icons ---- */
.mmenu{display:none}
@media(max-width:768px){
  .mmenu{display:block;position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.45);
    opacity:0;visibility:hidden;transition:opacity .16s}
  .mmenu.open{opacity:1;visibility:visible}
  .mmenu .mm-sheet{position:absolute;left:0;right:0;top:0;background:#0f172a;color:#e2e8f0;
    border-radius:0 0 18px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);
    padding:calc(8px + env(safe-area-inset-top)) 10px 14px;
    transform:translateY(-102%);transition:transform .2s ease;
    max-height:88vh;max-height:88dvh;display:flex;flex-direction:column}
  .mmenu.open .mm-sheet{transform:translateY(0)}
  .mmenu .mm-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;font-weight:700;color:#fff}
  .mmenu .mm-head .mm-x{margin-left:auto;background:#1e293b;border:0;color:#cbd5e1;width:34px;height:34px;
    border-radius:50%;font-size:17px;cursor:pointer;line-height:1}
  /* four across, scroll for the rest */
  .mmenu .mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px}
  .mmenu .mm-grid a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;
    padding:11px 3px;border-radius:12px;color:#cbd5e1;text-align:center;min-height:80px}
  .mmenu .mm-grid a:hover,.mmenu .mm-grid a:active{background:#1e293b;text-decoration:none;color:#fff}
  .mmenu .mm-grid a.active{background:var(--brand);color:#fff}
  .mmenu .mm-grid a .mi{font-size:23px;line-height:1}
  .mmenu .mm-grid a .ml{font-size:10px;line-height:1.22;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  .mmenu .mm-grid .mm-sep{grid-column:1/-1;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:#64748b;padding:8px 6px 2px}
  .mmenu .mm-foot{border-top:1px solid #1e293b;margin-top:8px;padding-top:8px}
  .mmenu .mm-foot button{width:100%;background:transparent;border:0;color:#94a3b8;padding:10px;
    font-size:14px;cursor:pointer;border-radius:10px;text-align:center}
  .mmenu .mm-foot button:active{background:#1e293b;color:#fff}
  body.mm-open{overflow:hidden}
}

/* Short ids the owner can copy and quote back to us - AD-7K3M / IG-4M9Q (2026-09-22). */
.idchip{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;
  color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:5px;
  padding:3px 6px;margin-right:6px;cursor:pointer;vertical-align:middle}
.idchip:hover{background:#e0e7ff}
.idchip.copied{color:#166534;background:#dcfce7;border-color:#bbf7d0}