:root { --ink:#1B1F27; --ink2:#4A4F59; --ink3:#868B94; --bg:#F3F0E9; --card:#FFFFFF; --line:#E3DED3; --gold:#A97C19; --mine:#FFFFFF; --desk:#DDEFE3; --amber:#FFF4DC; --amberline:#E9C979; color-scheme: light; }
* { box-sizing:border-box; }
/* iPhone: the strip behind the clock and the toolbar takes the body colour, which is the page colour top and bottom */
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust:100%; }
button, input, textarea { font:inherit; color:inherit; }
.top { max-width:1120px; margin:0 auto; padding:22px 20px 8px; }
.kick { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
h1 { font:600 26px/1.2 "Iowan Old Style", "Palatino", Georgia, serif; margin:6px 0 6px; }
h2 { font:600 20px/1.25 "Iowan Old Style", "Palatino", Georgia, serif; margin:0 0 6px; }
.sub { color:var(--ink2); font-size:13.5px; margin:0; max-width:760px; }
.tabs { display:flex; gap:6px; margin-top:16px; }
.tabs button { border:1px solid var(--line); background:transparent; padding:7px 14px; border-radius:999px; cursor:pointer; font-size:14px; color:var(--ink2); }
.tabs button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:4px; vertical-align:middle; }
.phone-only { display:none; }
main { max-width:1120px; margin:0 auto; padding:10px 20px 40px; }
.view[hidden] { display:none !important; }
#v-desk { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:20px; align-items:start; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; }
/* the chat */
.phone { background:#EFEAE0; border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; height:min(720px, calc(100vh - 190px)); min-height:520px; }
.phead { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--card); border-bottom:1px solid var(--line); }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; }
.pname { font-weight:600; }
.pstat { font-size:12px; color:var(--ink3); }
.reset { margin-left:auto; border:1px solid var(--line); background:transparent; border-radius:999px; padding:4px 12px; font-size:13px; cursor:pointer; color:var(--ink2); }
.msgs { flex:1; overflow-y:auto; padding:14px 12px 8px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:84%; padding:8px 11px; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.msg.user { align-self:flex-end; background:var(--mine); border-bottom-right-radius:4px; }
.msg.desk { align-self:flex-start; background:var(--desk); border-bottom-left-radius:4px; }
.msg .t { display:block; text-align:right; font-size:11px; color:var(--ink3); margin-top:2px; }
.msg.note { align-self:center; background:transparent; box-shadow:none; color:var(--ink3); font-size:12.5px; text-align:center; }
.typing { align-self:flex-start; background:var(--desk); border-radius:14px; padding:10px 14px; }
.typing i { display:inline-block; width:6px; height:6px; margin:0 2px; border-radius:50%; background:#6E8F7A; animation:b 1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes b { 0%,80%,100%{ opacity:.3; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }
.starters { padding:10px 12px 14px; display:flex; flex-wrap:wrap; gap:6px; }
.starters[hidden] { display:none; }
.slabel { width:100%; font-size:12px; color:var(--ink3); margin-bottom:2px; }
.starters button { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 12px; font-size:13.5px; cursor:pointer; }
/* the composer floats inside the chat on a computer, and above the page bottom on a phone */
.composer { position:fixed; z-index:5; display:flex; gap:8px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:0 6px 24px rgba(27,31,39,.12); }
.composer[hidden] { visibility:hidden; }
.composer input { flex:1; min-width:0; border:0; outline:0; background:transparent; padding:8px 12px; font-size:16px; }
.composer button { border:0; background:var(--ink); color:#fff; border-radius:999px; padding:8px 16px; cursor:pointer; font-weight:600; }
.composer button:disabled { opacity:.45; cursor:default; }
/* the lead record */
.side { display:flex; flex-direction:column; gap:14px; }
.lead { padding:16px 18px; }
.lhead { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:10px; }
.lkind { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); font-weight:700; }
.lname { font:600 20px/1.25 "Iowan Old Style", "Palatino", Georgia, serif; margin-top:2px; }
.pill { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#EEE; }
.pill.Hot { background:#FBE3D6; color:#9A3B12; } .pill.Warm { background:#FFF1CC; color:#7A5A00; } .pill.Cold { background:#E6EBF2; color:#3D4E66; }
.fields { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px; margin:0; }
.fields div { min-width:0; }
.fields dt { font-size:11.5px; color:var(--ink3); }
.fields dd { margin:1px 0 0; font-size:14px; overflow-wrap:anywhere; min-height:1.3em; }
.fields dd.empty { color:#C2C5CB; }
.fields .wide { grid-column:1 / -1; }
.fields dd.flash { animation:fl 1.6s ease-out; }
@keyframes fl { 0%{ background:#FFE9A8 } 100%{ background:transparent } }
.tasks { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
.tlabel { font-size:12px; color:var(--ink3); margin-bottom:6px; }
.tasks ol { margin:0; padding-left:18px; font-size:13.5px; color:var(--ink2); }
.hand { padding:14px 18px; background:var(--amber); border-color:var(--amberline); }
.htitle { font-weight:700; font-size:14px; }
.hand p { margin:4px 0 0; font-size:14px; color:var(--ink2); }
.facts { padding:14px 18px; }
.facts ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.facts li { font-size:13px; color:var(--ink2); }
.facts li b { color:var(--ink); font-weight:600; margin-right:4px; }
.facts a { color:var(--gold); }
.fine { font-size:12px; color:var(--ink3); margin:0 4px; }
/* fact check */
.checkcard { padding:20px; max-width:820px; }
.checkcard textarea { width:100%; margin-top:14px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px; resize:vertical; background:#FCFBF8; }
.crow { display:flex; gap:8px; margin-top:10px; }
.go { border:0; background:var(--ink); color:#fff; border-radius:999px; padding:9px 18px; font-weight:600; cursor:pointer; }
.go:disabled { opacity:.5; cursor:default; }
.ghost { border:1px solid var(--line); background:transparent; border-radius:999px; padding:9px 16px; cursor:pointer; color:var(--ink2); }
.finding { border-top:1px solid var(--line); padding:12px 0; }
.finding q { display:block; font-style:italic; quotes:none; }
.finding .p { color:#9A3B12; font-size:14px; margin-top:4px; }
.finding .a { font-size:14px; margin-top:4px; }
.finding .a a { color:var(--gold); }
.csum { margin-top:16px; font-weight:600; }
.err { color:#9A3B12; font-size:13.5px; }
/* the code gate */
.gate { position:fixed; inset:0; z-index:-1; display:grid; place-items:center; padding:20px; }
.gate[hidden] { display:none; }
.gate.on { z-index:10; background:var(--bg); }
.gate .card { padding:24px; width:min(420px,100%); display:flex; flex-direction:column; gap:12px; }
.gate input { border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px; }

@media (min-width:821px) {
  /* on a computer the composer sits inside the bottom of the phone frame (placed by desk.js) */
  .composer { box-shadow:none; border-radius:999px; }
}
@media (max-width:820px) {
  .top { padding:16px 14px 4px; }
  h1 { font-size:21px; }
  .sub { font-size:12.5px; }
  .phone-only { display:inline-block; }
  main { padding:8px 14px 96px; }
  #v-desk { display:block; }
  #v-desk .side { display:none; }
  #v-desk.show-lead .chatcol { display:none; }
  #v-desk.show-lead .side { display:flex; }
  .phone { height:auto; min-height:0; border-radius:18px; }
  .msgs { overflow:visible; min-height:46vh; }
  .composer { left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.composer.inframe { position:static; margin:6px 12px 12px; box-shadow:none; }