:root{
  /* Light theme. Accent blues are taken from the Simplify logo artwork.
     Surfaces step bg -> panel -> raised, each one a little further forward,
     so depth comes from tone rather than from heavy borders. */
  --bg:#FFFFFF; --panel:#F7F9FC; --raised:#EFF3F8; --line:#E3E9F1; --line-soft:#EDF1F6;
  --text:#14202C; --muted:#5A6B7D; --dim:#8A9AAB;
  --signal:#A86C12; --claim:#2E63AC; --claim-deep:#234E88; --live:#1B8B4C; --warn:#BC402C;
  --out:#E4EFFB;            /* outgoing message, logo blue at low strength */
  --accent-soft:#EDF4FC;    /* selected rows and open conversations */
  --accent-line:#C7DCF3;
  --on-accent:#FFFFFF;      /* text sitting on a filled accent */
  --warn-soft:#FDF0ED; --live-soft:#EBF7F0; --signal-soft:#FBF3E4;

  /* One shadow scale, so nothing invents its own. */
  --sh-1:0 1px 2px rgba(20,32,44,.05);
  --sh-2:0 2px 8px rgba(20,32,44,.07);
  --sh-3:0 12px 40px rgba(20,32,44,.16);
  --r-1:5px; --r-2:8px; --r-3:12px;
  color-scheme:light;
}
*{box-sizing:border-box}
/* The hidden attribute must beat any author display rule, otherwise elements
   toggled with el.hidden stay on screen. */
[hidden]{display:none !important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;   /* times and totals line up in columns */
  letter-spacing:-.005em;
}
h1,h2,h3,h4{letter-spacing:-.02em}
::selection{background:var(--accent-line)}
/* A calmer scrollbar than the platform default, which is heavy on Windows. */
*{scrollbar-width:thin;scrollbar-color:#C9D4E0 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#C9D4E0;border-radius:6px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#AEBDCD}
*::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
:focus-visible{outline:2px solid var(--claim);outline-offset:2px}

/* login */
.centre{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:32px}
.card h1{font-size:19px;font-weight:600;margin:0 0 4px}
.card .sub{color:var(--muted);margin:0 0 24px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input{width:100%;padding:9px 11px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px}
.primary{width:100%;padding:10px;background:var(--claim);color:var(--on-accent);border-radius:4px;font-weight:600;margin-top:6px}
.primary:hover{filter:brightness(1.08)}
.err{color:var(--warn);font-size:12px;margin-top:12px;min-height:18px}

/* shell */
#app{display:grid;height:100vh;grid-template-columns:188px 1fr}
.rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand{padding:16px;border-bottom:1px solid var(--line)}
.brand b{display:block;font-size:13px;font-weight:600}
.brand span{font-size:11px;color:var(--dim)}
.wa-state{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.dot.up{background:var(--live)} .dot.warn{background:var(--signal)} .dot.down{background:var(--warn)}
.nav{padding:8px 0;flex:1}
.nav button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;color:var(--muted);font-size:13px;text-align:left}
.nav button:hover{color:var(--text);background:var(--raised)}
.nav button.sel{color:var(--claim);font-weight:600;box-shadow:inset 3px 0 0 var(--claim);background:var(--accent-soft)}
.pill{background:var(--signal);color:var(--on-accent);border-radius:9px;padding:0 6px;font-size:11px;font-weight:600;min-width:18px;text-align:center}
.whoami{border-top:1px solid var(--line);padding:12px 16px;font-size:12px;color:var(--muted)}
.whoami b{display:block;color:var(--text);font-weight:500}
.whoami button{color:var(--claim);font-size:12px;padding:0;margin-top:6px}

.view{display:none;min-width:0;overflow:hidden}
.view.on{display:grid}
#v-inbox{grid-template-columns:270px 1fr 216px}
#v-link,#v-team,#v-log{grid-template-columns:1fr;overflow-y:auto}
/* min-height:0 is load-bearing. A flex item defaults to min-height:auto, which
   refuses to shrink below its content, so a long thread makes .msgs grow past
   the viewport instead of scrolling and pushes the composer off screen. */
.col{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.col:last-child{border-right:0}
.colhead{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.colhead h2{font-size:13px;font-weight:600;margin:0}
.colhead .sub{font-size:11px;color:var(--dim)}
.colhead button{font-size:12px;color:var(--claim)}
.scroll{overflow-y:auto;flex:1}

.chat{width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:3px 8px}
.chat:hover{background:var(--raised)}
.chat.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--claim)}
.chat .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat .tm{font-size:11px;color:var(--dim);white-space:nowrap}
.chat .pv{grid-column:1/2;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat .rt{grid-column:2/3;display:flex;align-items:center;gap:5px}
.owner{font-size:10px;color:var(--claim);border:1px solid var(--claim);border-radius:3px;padding:0 4px}
.owner.me{background:var(--claim);color:var(--on-accent)}

.thead{padding:11px 16px;border-bottom:1px solid var(--line);flex:none}
.thead .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.thead h2{font-size:14px;font-weight:600;margin:0}
.thead .meta{font-size:11px;color:var(--dim);margin-top:2px}
.claimbtn{border:1px solid var(--claim);color:var(--claim);border-radius:4px;padding:5px 11px;font-size:12px;white-space:nowrap}
.claimbtn:hover{background:var(--claim);color:var(--on-accent)}
.claimbtn.held{border-color:var(--line);color:var(--muted)}
.claimbtn.held:hover{background:transparent;color:var(--text);border-color:var(--muted)}

.msgs{flex:1;min-height:0;overflow-y:auto;padding:20px 16px 16px;display:flex;flex-direction:column;gap:9px}
.msg{position:relative;max-width:min(560px,74%);padding:7px 11px;border-radius:7px;background:var(--raised);border:1px solid transparent}
.msg.out{align-self:flex-end;background:var(--out);border-color:var(--accent-line)}
.msg .by{font-size:11px;color:var(--claim);margin-bottom:2px;font-weight:500}
.msg .tx{white-space:pre-wrap;word-break:break-word}
.msg .tm{font-size:10px;color:var(--dim);margin-top:3px;text-align:right}
.msg .att{font-size:12px;color:var(--signal)}
.empty{margin:auto;color:var(--dim);font-size:13px;text-align:center;max-width:34ch}
.typing{align-self:flex-start;font-size:12px;color:var(--signal);padding:4px 2px}

.composer{border-top:1px solid var(--line);padding:11px 14px;flex:none}
.lockbar{background:#FDF6E7;border:1px solid #E8D6A8;border-radius:4px;padding:7px 10px;font-size:12px;color:var(--signal);margin-bottom:9px}
.cbox{display:flex;gap:9px;align-items:flex-end}
.cbox textarea{flex:1;resize:none;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:9px 11px;min-height:40px;max-height:140px}
.send{background:var(--claim);color:var(--on-accent);border-radius:4px;padding:10px 16px;font-weight:600}
.send[disabled]{opacity:.45;cursor:not-allowed}
.csub{font-size:11px;color:var(--dim);margin-top:7px}

.rblock{padding:13px 14px;border-bottom:1px solid var(--line)}
.rblock h3{font-size:11px;color:var(--dim);margin:0 0 9px;font-weight:500}
.person{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.person .dot{width:6px;height:6px;background:var(--live)}
.person .where{color:var(--dim);font-size:11px;margin-left:auto}

.pad{padding:28px;max-width:760px;margin:0 auto;width:100%}
.pad h2{font-size:17px;margin:0 0 6px}
.pad p{color:var(--muted);margin:0 0 20px;max-width:64ch}
.qrwrap{background:#fff;padding:14px;border-radius:6px;width:236px;height:236px;display:grid;place-items:center}
.qrwrap img{width:208px;height:208px;image-rendering:pixelated}
.steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:7px 0 7px 30px;position:relative;color:var(--muted);font-size:13px}
.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:19px;height:19px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--dim)}
.notice{border:1px solid var(--line);border-left:2px solid var(--warn);border-radius:4px;padding:12px 14px;margin-top:26px;font-size:13px;color:var(--muted)}
.notice b{color:var(--text);font-weight:600}
button.danger:not(.iconbtn){border:1px solid var(--warn);color:var(--warn);border-radius:4px;padding:7px 13px;font-size:12px;margin-top:20px}
button.danger:not(.iconbtn):hover{background:var(--warn);color:var(--on-accent)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;color:var(--dim);font-weight:500;padding:8px 12px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tag{font-size:11px;border:1px solid var(--line);border-radius:3px;padding:1px 6px;color:var(--muted)}
.tag.adm{border-color:var(--claim);color:var(--claim)}
.rowform{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px}
.rowform input,.rowform select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:8px 10px}
.rowform button{background:var(--claim);color:var(--on-accent);border-radius:4px;padding:8px 15px;font-weight:600}
.linkbtn{color:var(--claim);font-size:12px}
.linkbtn.warn{color:var(--warn)}

}

/* chat list filters and search */
.filters{display:flex;gap:4px;padding:8px 10px 6px;border-bottom:1px solid var(--line);flex:none}
.fbtn{font-size:12px;color:var(--muted);padding:3px 9px;border-radius:3px;border:1px solid transparent}
.fbtn:hover{color:var(--text);background:var(--raised)}
.fbtn.sel{color:var(--text);border-color:var(--line);background:var(--raised)}
.searchrow{padding:8px 10px;border-bottom:1px solid var(--line);flex:none}
.searchrow input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:6px 9px;font-size:12px}
.theadbtns{display:flex;align-items:center;gap:12px}
.chat.muted .nm{color:var(--muted)}
.chat .grp{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:0 4px}
.pill.quiet{background:transparent;color:var(--dim);border:1px solid var(--line);font-weight:400}

/* ---------- sign-in code step ---------- */
.codelead{color:var(--muted);font-size:13px;margin:0 0 16px}
.codelead b{color:var(--text)}
.codeinput{width:100%;padding:11px;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:4px;font-size:22px;letter-spacing:6px;text-align:center}
.coderow{display:flex;justify-content:space-between;margin-top:12px}

/* ---------- notifications opt-in ---------- */
.notifybtn{margin:0 12px 10px;padding:7px 9px;border:1px solid var(--line);border-radius:4px;
  background:var(--raised);color:var(--muted);font-size:12px;text-align:left}
.notifybtn:hover{color:var(--text);border-color:var(--claim)}

/* ---------- group name / description ---------- */
.groupdesc{padding:8px 0 0;color:var(--muted);font-size:13px;white-space:pre-wrap;
  max-height:96px;overflow:auto}
.groupdesc .nodesc{color:var(--dim);font-style:italic}
.groupedit{padding:12px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.groupedit label{display:block;font-size:12px;color:var(--muted);margin:8px 0 4px}
.groupedit input,.groupedit textarea{width:100%;padding:8px 10px;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:4px;resize:vertical}
.gbtns{display:flex;align-items:center;gap:14px;margin-top:10px}
.primary.sm{width:auto;padding:7px 14px;margin:0;font-size:13px}

/* ---------- attachments ---------- */
.attach{width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:4px;
  background:var(--raised);color:var(--muted);font-size:18px;line-height:1}
.attach:hover:not([disabled]){color:var(--text);border-color:var(--claim)}
.attach[disabled]{opacity:.4;cursor:not-allowed}
.attachbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 10px;margin-bottom:8px;background:var(--raised);border:1px solid var(--line);
  border-radius:4px;font-size:12px;color:var(--muted)}
.media{display:block;max-width:280px;max-height:280px;border-radius:4px;margin:2px 0 6px}
.media img{display:block;max-width:280px;max-height:280px;border-radius:4px}
.media.audio{width:260px;height:36px;max-height:none}
.doc{display:flex;align-items:center;gap:9px;padding:9px 11px;margin:2px 0 6px;
  background:var(--raised);border:1px solid var(--line);border-radius:4px;
  text-decoration:none;color:var(--text);max-width:300px}
.doc:hover{border-color:var(--claim)}
.docicon{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:2px 5px;flex:none}
.docname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.docsize{color:var(--dim);font-size:11px;flex:none}

/* ---------- internal team chat ---------- */
#v-chat{grid-template-columns:250px 1fr}
#v-att{grid-template-columns:1fr}
.internal{display:flex;flex-direction:column;height:100vh;max-width:860px;margin:0 auto;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.ihead{padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.ihead h2{font-size:16px;font-weight:600;margin:0 0 4px}
.ihead p{margin:0;color:var(--muted);font-size:13px}
.internal .msgs{flex:1}
.internal .composer{border-top:1px solid var(--line)}

/* ---------- smtp status ---------- */
.smtpbar{padding:11px 13px;border-radius:4px;font-size:13px;margin-bottom:18px;
  border:1px solid var(--line);background:var(--raised);color:var(--muted)}
.smtpbar.warn{border-color:var(--signal);color:var(--text)}
.smtpbar.ok{border-color:var(--line)}
.smtpbar b{color:var(--text)}

/* ---------- loading earlier history ---------- */
.loadmore{align-self:center;flex:none;margin-bottom:10px;padding:7px 14px;border:1px solid var(--line);
  border-radius:4px;background:var(--raised);color:var(--claim);font-size:12px}
.loadmore:hover:not([disabled]){border-color:var(--claim)}
.loadmore[disabled]{color:var(--dim);cursor:default}
.threadstart{align-self:center;flex:none;margin-bottom:12px;padding:0 20px;color:var(--dim);
  font-size:11px;text-align:center;max-width:420px}

/* ---------- attachment that could not be stored ---------- */
.att.missing{border:1px dashed var(--line);border-radius:4px;padding:8px 10px;margin:2px 0 6px;max-width:320px}
.att.missing .attline{color:var(--signal);font-size:12px;font-weight:500}
.att.missing .attnote{color:var(--dim);font-size:11px;margin-top:3px;line-height:1.45}
.refetch{margin-top:7px;padding:4px 9px;border:1px solid var(--line);border-radius:3px;
  background:var(--raised);color:var(--claim);font-size:11px}
.refetch:hover:not([disabled]){border-color:var(--claim)}
.refetch[disabled]{color:var(--dim);cursor:default}

/* ==========================================================================
   Simplify Networks branding
   Blues sampled from the logo artwork itself.
   ========================================================================== */
:root{
  --brand-deep:#2E63AC; --brand-mid:#4FA3D7; --brand-light:#88D3F1;
}

/* ---------- sign-in ---------- */
body.signin{min-height:100vh}
.split{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

.brandside{
  position:relative;overflow:hidden;padding:56px 56px 40px;
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(120% 90% at 10% 6%, rgba(79,163,215,.22), transparent 60%),
    radial-gradient(95% 75% at 92% 98%, rgba(46,99,172,.16), transparent 62%),
    #F2F7FC;
  border-right:1px solid var(--line);
}
/* a large, very faint swoosh sitting behind the copy */
.brandside::after{
  content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;background:url("/img/mark.png") no-repeat center/contain;
  opacity:.08;pointer-events:none;
}
.brandside > *{position:relative;z-index:1}
.blogo{width:290px;max-width:70%;height:auto;margin-bottom:34px}
.brandside h1{font-size:27px;font-weight:600;margin:0 0 14px;letter-spacing:-.2px}
.lead{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 26px;max-width:46ch}
.points{list-style:none;margin:0 0 40px;padding:0}
.points li{position:relative;padding:6px 0 6px 24px;color:var(--muted);font-size:13px}
.points li::before{
  content:"";position:absolute;left:2px;top:15px;width:5px;height:5px;border-radius:50%;
  background:var(--brand-mid);box-shadow:0 0 0 3px rgba(79,163,215,.14);
}
.brandfoot{margin-top:auto;color:var(--muted);font-size:11.5px;line-height:1.8}

.formside{display:grid;place-items:center;padding:40px 32px;background:var(--bg)}
.formside .smallprint{margin:18px auto 0;max-width:376px;color:var(--dim);font-size:11px;
  line-height:1.7;text-align:center;display:none}
.formbox{
  width:100%;max-width:376px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:34px 32px 30px;
  box-shadow:0 1px 2px rgba(22,32,43,.04), 0 14px 34px rgba(22,32,43,.07);
}
.mlogo{display:none;width:210px;height:auto;margin:0 auto 28px}
.formbox h2{font-size:20px;font-weight:600;margin:0 0 5px}
.formbox .sub{color:var(--muted);font-size:13px;margin:0 0 26px}
.formbox .primary{background:linear-gradient(135deg,var(--brand-mid),var(--brand-deep));color:#fff}
.formbox .primary:hover{filter:brightness(1.06)}
.formbox .primary:hover{filter:brightness(1.1)}

@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .brandside{display:none}
  .mlogo{display:block}
  .formside{min-height:100vh;align-content:center}
  .formside .smallprint{display:block}
}

/* ---------- logo in the rail ---------- */
.brand{display:flex;flex-direction:column;gap:9px;padding:18px 16px 15px}
.brand .raillogo{width:146px;height:auto;align-self:flex-start}
.brand .railnum{font-size:11px;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- branded empty states ---------- */
.emptystate{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:32px 24px;max-width:40ch}
.emptystate img{width:58px;height:auto;opacity:.26;margin-bottom:18px}
.emptystate b{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.emptystate span{color:var(--dim);font-size:12.5px;line-height:1.6}

/* ---------- right rail footer mark ---------- */
.railmark{margin-top:auto;padding:16px 14px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px;opacity:.5}
.railmark img{width:18px;height:auto}
.railmark span{font-size:10.5px;color:var(--dim);line-height:1.4}

/* ---------- @ mentions ---------- */
.mention{color:var(--claim);background:var(--accent-soft);border-radius:3px;padding:0 3px;font-weight:500}
.msg.out .mention{background:rgba(46,99,172,.10)}
.mentionmenu{
  margin-bottom:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);
  box-shadow:0 8px 22px rgba(22,32,43,.12);max-height:330px;overflow-y:auto;
}
.mentionmenu button{display:flex;width:100%;align-items:center;gap:9px;padding:8px 11px;text-align:left;
  border-bottom:1px solid var(--line)}
.mentionmenu button:last-child{border-bottom:0}
.mentionmenu button:hover,.mentionmenu button.on{background:var(--accent-soft)}
.mentionmenu .mname{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;max-width:60%}
.mentionmenu .mnum{font-size:11px;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace}
.mentionmenu .mhead{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);
  padding:6px 11px;font-size:11px;color:var(--dim);z-index:1}
.mentionmenu .madm{margin-left:auto;font-size:10px;color:var(--claim);border:1px solid var(--accent-line);
  border-radius:3px;padding:0 4px}

/* ---------- reactions ---------- */
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.react{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;
  padding:3px 6px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--muted)}
.react.mine{border-color:var(--claim);background:var(--accent-soft);color:var(--claim)}
/* Always present so people know reactions exist, and unmistakable on hover. */
.reactbtn{position:absolute;top:-9px;right:8px;display:inline-flex;align-items:center;gap:4px;
  font-size:12px;line-height:1;padding:3px 8px;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;opacity:.85;transition:all .12s;
  box-shadow:0 1px 3px rgba(22,32,43,.08)}
.reactbtn span{display:none;font-size:11px;font-weight:500}
.msg:hover .reactbtn{opacity:1;border-color:var(--claim);color:var(--claim)}
.msg:hover .reactbtn span{display:inline}
.reactbtn:hover{background:var(--accent-soft)}
.reactpick{position:absolute;top:-8px;right:0;transform:translateY(-100%);z-index:5;
  display:flex;gap:2px;padding:5px;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;box-shadow:0 8px 22px rgba(22,32,43,.14)}
.reactpick button{font-size:16px;line-height:1;padding:4px 5px;border-radius:50%}
.reactpick button:hover,.reactpick button.on{background:var(--accent-soft)}
.reactpick .clear{font-size:12px;color:var(--dim)}
.reactpick.below{top:auto;bottom:-8px;transform:translateY(100%)}

/* ---------- telling senders apart ---------- */
/* Incoming messages carry a per-sender colour on the name and a matching edge,
   so a group with several people in it is readable without reading names. */
.msg:not(.out){border-left:3px solid var(--sender,var(--line))}
.msg:not(.out) .by{color:var(--sender,var(--claim))}
/* Ours sit right, in the brand blue, and say so. */
.msg.out{border-left:0;border-right:3px solid var(--claim)}
.msg.out .by{color:var(--claim)}

/* ---------- delivery ticks ---------- */
.msg .tm{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.ticks{font-size:11px;line-height:1;padding:1px 4px;border-radius:3px;color:var(--dim);letter-spacing:-1px}
.ticks:hover{background:var(--bg);color:var(--claim)}
.ticks.read{color:var(--claim);font-weight:600}

/* ---------- message info panel ---------- */
.infopanel{position:absolute;right:18px;top:96px;z-index:20;width:290px;max-height:60vh;overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px 15px;
  box-shadow:0 14px 36px rgba(22,32,43,.16)}
.infohead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.infohead b{font-size:13px}
.infohead span{font-size:11px;color:var(--claim);font-weight:600}
.inforow{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:3px 0}
.inforow b{color:var(--text);font-weight:500}
.infoblock{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.infoblock h4{margin:0 0 6px;font-size:11px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.infoblock ul{margin:0;padding:0;list-style:none}
.infoblock li{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:3px 0}
.infoblock li span{color:var(--dim);font-size:11px;white-space:nowrap}
.infonone{margin:0;font-size:12px;color:var(--dim)}
.infonote{margin:10px 0 0;font-size:10.5px;color:var(--dim);line-height:1.5}
.infoload{font-size:12px;color:var(--muted)}
.thread{position:relative}

/* --- ticket links ------------------------------------------------------- */
.linkrow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;
  padding:7px 0;font-size:12px;border-bottom:1px solid var(--line)}
.linkrow:last-of-type{border-bottom:0}
.linkrow a{color:var(--claim);font-weight:500;text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.linkrow a:hover{text-decoration:underline}
.linkrow .linkmeta{grid-column:1/-1;color:var(--dim);font-size:11px}
.linkrow .linkacts{display:flex;gap:8px}
.linkrow .linkacts button{color:var(--dim);font-size:11px}
.linkrow .linkacts button:hover{color:var(--claim)}
.linkform{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.linkform input{width:100%;padding:7px 9px;font-size:12px;border:1px solid var(--line);
  border-radius:4px;background:var(--bg);color:var(--text)}
.linkform input:focus{outline:none;border-color:var(--claim)}
.linkbtns{display:flex;gap:7px}
.linkbtns button{font-size:12px;padding:6px 11px;border-radius:4px;border:1px solid var(--line);
  background:var(--raised);color:var(--text)}
.linkbtns button.primary{background:var(--claim);border-color:var(--claim);color:var(--on-accent)}
.linkerr{color:var(--warn);font-size:11px;margin:0}
.addlink{margin-top:9px;font-size:12px;color:var(--claim);text-align:left}
.addlink:hover{text-decoration:underline}

/* --- per-message info button -------------------------------------------- */
.infobtn{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:3px;
  padding:0 5px;margin-left:7px;line-height:15px;background:var(--bg)}
.infobtn:hover{color:var(--claim);border-color:var(--claim)}
.msg.out .infobtn{background:transparent}
.mention.unknown{color:var(--dim);background:var(--raised);font-weight:400;
  border-bottom:1px dotted var(--dim);cursor:help}

/* --- team and backup notices -------------------------------------------- */
.dupwarn{font-size:12px;color:var(--text);background:var(--accent-soft);
  border:1px solid var(--line);border-left:3px solid var(--signal);
  padding:9px 12px;border-radius:4px;margin:0 0 14px}
.backupbar{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:4px;
  font-size:13px;margin-bottom:18px;border:1px solid var(--line);background:var(--panel)}
.backupbar div{display:flex;flex-direction:column;gap:2px}
.backupbar span{color:var(--muted);font-size:12px}
.backupbar button{margin-left:auto;font-size:12px;padding:6px 12px;border-radius:4px;
  border:1px solid var(--claim);background:var(--claim);color:var(--on-accent)}
.backupbar button:disabled{opacity:.6}

/* --- internal notes ------------------------------------------------------ */
.noterow{padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.noterow:last-of-type{border-bottom:0}
.notebody{white-space:pre-wrap;line-height:1.5;color:var(--text)}
.notemeta{display:flex;align-items:baseline;gap:8px;color:var(--dim);font-size:11px;margin-top:4px}
.notemeta .linkacts{margin-left:auto;display:flex;gap:8px}
.notemeta button{color:var(--dim);font-size:11px}
.notemeta button:hover{color:var(--claim)}
.linkform textarea{width:100%;padding:7px 9px;font-size:12px;border:1px solid var(--line);
  border-radius:4px;background:var(--bg);color:var(--text);font-family:inherit;resize:vertical}
.linkform textarea:focus{outline:none;border-color:var(--claim)}

/* --- reply, forward, deleted --------------------------------------------- */
.replybar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);
  background:var(--accent-soft)}
.replybody{display:flex;flex-direction:column;gap:1px;font-size:12px;min-width:0}
.replybody b{color:var(--claim)}
.replybody span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replybar .linkbtn{margin-left:auto;flex:none}
.quoted{display:flex;flex-direction:column;gap:1px;padding:5px 9px;margin:0 0 6px;
  border-left:3px solid var(--claim);background:rgba(46,99,172,.07);border-radius:3px;
  font-size:12px;cursor:pointer;text-align:left}
.quoted:hover{background:rgba(46,99,172,.13)}
.quoted.faded{cursor:default;color:var(--dim)}
.quoted b{color:var(--claim);font-weight:500}
.quoted span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwdtag{font-size:11px;color:var(--dim);font-style:italic;margin-bottom:3px}
.msg.deleted .tomb{color:var(--dim);font-style:italic}
.msg.deleted .gone{margin-top:6px;font-size:12px}
.msg.deleted .gone summary{color:var(--claim);cursor:pointer;font-style:normal}
.msg.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.infobtn.danger{color:var(--warn);border-color:transparent}
.infobtn.danger:hover{border-color:var(--warn)}
.msg .tm{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.whobtn{font:inherit;color:inherit;text-align:left;border-bottom:1px dotted currentColor}
.whobtn:hover{color:var(--claim)}

/* --- forward picker ------------------------------------------------------ */
.modal{position:fixed;inset:0;background:rgba(16,32,43,.35);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:20px}
.modalbox{background:var(--bg);border:1px solid var(--line);border-radius:6px;width:min(420px,100%);
  max-height:80vh;display:flex;flex-direction:column;gap:11px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.modalbox h3{margin:0;font-size:15px}
.modalbox input{padding:8px 10px;font-size:13px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--text)}
.fwdlist{overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.fwdlist button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;
  padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.fwdlist button:hover{background:var(--accent-soft)}
.fwdlist button span{color:var(--dim);font-size:11px;flex:none}

/* --- team chat ----------------------------------------------------------- */
.col.people{flex:0 0 250px;border-right:1px solid var(--line)}
.mention.atme{background:#FFF0C2;color:#7A4B00}
.seen{margin-left:8px;color:var(--dim);font-size:11px}
.seen.none{color:var(--dim);opacity:.7}

/* --- attendance ---------------------------------------------------------- */
.attwrap{overflow-y:auto}
.shiftchip{margin:0 13px 8px;padding:6px 10px;border-radius:4px;font-size:11px;text-align:center;
  background:var(--accent-soft);color:var(--claim);border:1px solid var(--line)}
.shiftchip.onbreak{background:#FFF4D6;color:#7A4B00}
.clockcard{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);margin:6px 0 22px;flex-wrap:wrap}
.clockcard.on{border-left:4px solid var(--live)}
.clockcard.onbreak{border-left:4px solid var(--signal)}
.clockcard.off{border-left:4px solid var(--line)}
.clockmain{display:flex;flex-direction:column;gap:3px;min-width:0}
.clockmain b{font-size:15px}
.clockmain .bigclock{font-size:30px;font-weight:600;letter-spacing:-.5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.clockmain span{color:var(--muted);font-size:12px}
.clockcard button.big{margin-left:auto;font-size:13px;padding:10px 20px;border-radius:4px;
  border:1px solid var(--claim);background:var(--claim);color:var(--on-accent)}
.clockcard button.warnbtn{background:var(--bg);color:var(--warn);border-color:var(--warn);margin-left:0}
.breakpick{display:flex;gap:7px;margin-left:auto}
.breakpick button{font-size:12px;padding:9px 14px;border-radius:4px;border:1px solid var(--line);
  background:var(--raised);color:var(--text)}
.atttabs{display:flex;gap:7px;margin-bottom:16px}
.attpane{display:none}
.attpane.on{display:block}
.atth{font-size:12px;color:var(--dim);font-weight:500;margin:20px 0 8px}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:3px;border:1px solid var(--line);
  color:var(--muted)}
.tag.warnt{border-color:var(--warn);color:var(--warn)}
.tag.okt{border-color:var(--live);color:var(--live)}
.subtle{color:var(--dim);font-size:11px}
tr.quiet td{color:var(--dim)}

/* ==========================================================================
   Refinement pass. Everything below tightens the existing components rather
   than restyling them: softer surfaces, one shadow scale, calmer borders,
   and consistent control sizing so the portal reads as one piece of software.
   ========================================================================== */

/* --- shell ---------------------------------------------------------------- */
.rail{background:linear-gradient(180deg,var(--panel),#F3F6FA)}
.nav button{border-radius:0 var(--r-1) var(--r-1) 0;margin-right:10px;transition:background .12s,color .12s}
.nav button.sel{box-shadow:inset 3px 0 0 var(--claim)}
.pill{background:var(--warn);box-shadow:var(--sh-1);letter-spacing:0}
.colhead{align-items:center}
.colhead button{font-size:12px;color:var(--claim);font-weight:500}
.colhead button:hover{text-decoration:underline}

.quicklinks{padding:10px 16px;border-top:1px solid var(--line-soft)}
.quicklinks h4{margin:0 0 6px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.quicklinks a{display:block;padding:4px 0;font-size:12px;color:var(--muted);text-decoration:none}
.quicklinks a:hover{color:var(--claim)}
.quicklinks a::after{content:"↗";font-size:9px;margin-left:5px;color:var(--dim)}

.notifybtn{margin:6px 12px 0;font-size:12px;padding:7px 10px;border-radius:var(--r-1);
  border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.notifybtn:hover{border-color:var(--claim);color:var(--claim)}
.shiftchip{border-radius:var(--r-1);font-weight:500}

/* --- conversation and people lists ---------------------------------------- */
.chat{border-bottom:1px solid var(--line-soft);transition:background .12s}
.chat.sel{box-shadow:inset 3px 0 0 var(--claim)}
.listlabel{padding:12px 14px 5px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.searchrow input{border-radius:var(--r-1)}

/* --- messages ------------------------------------------------------------- */
.msg{border-radius:var(--r-2);box-shadow:var(--sh-1);border-color:var(--line-soft)}
.msg.out{border-color:var(--accent-line)}
.msg .tm{color:var(--dim);font-size:11px;margin-top:5px}
.msg .by{letter-spacing:-.01em}
.infobtn{border-radius:4px;transition:color .12s,border-color .12s;padding:1px 6px}
.msglink{color:var(--claim);text-decoration:none;border-bottom:1px solid var(--accent-line);word-break:break-word}
.msglink:hover{border-bottom-color:var(--claim)}
.msg.out .msglink{color:var(--claim-deep)}
.media{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-1);overflow:hidden}
.media img{display:block;max-width:100%;border-radius:var(--r-1);transition:opacity .15s}
.media:hover img{opacity:.92}
.reacts{margin-top:5px}
.react{transition:border-color .12s,background .12s}
.react:hover{border-color:var(--claim)}

/* --- lightbox ------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;background:rgba(12,20,28,.82);z-index:80;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;
  animation:fade .14s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:min(1100px,92vw);max-height:80vh;object-fit:contain;border-radius:var(--r-2);
  box-shadow:var(--sh-3);background:#fff}
.lbbar{display:flex;align-items:center;gap:16px;color:#fff;font-size:13px;max-width:92vw}
.lbname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbdl,.lbclose{color:#fff;font-size:12px;padding:7px 14px;border-radius:var(--r-1);
  border:1px solid rgba(255,255,255,.35);text-decoration:none;background:rgba(255,255,255,.08)}
.lbdl:hover,.lbclose:hover{background:rgba(255,255,255,.18)}

/* --- composer ------------------------------------------------------------- */
.cbox{border-radius:var(--r-2)}
.attach{display:flex;align-items:center;justify-content:center;color:var(--dim);
  width:34px;height:34px;border-radius:var(--r-1);transition:color .12s,background .12s}
.attach:hover{color:var(--claim);background:var(--accent-soft)}
.send{border-radius:var(--r-1);font-weight:600;box-shadow:var(--sh-1)}

/* --- modals --------------------------------------------------------------- */
.modal{backdrop-filter:blur(2px);animation:fade .12s ease-out}
.modalbox{border-radius:var(--r-3);box-shadow:var(--sh-3);padding:22px}
.modalbox.wide{width:min(760px,100%)}
.modalsub{margin:-4px 0 4px;color:var(--muted);font-size:12px}
.memberrow{display:flex;align-items:center;gap:10px;padding:9px 10px;font-size:13px;
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.memberrow:hover{background:var(--accent-soft)}
.memberrow span{margin-left:auto;color:var(--dim);font-size:11px}
.linkbtns button{transition:filter .12s,border-color .12s}
.linkbtns button.primary{width:auto;margin-top:0;box-shadow:var(--sh-1)}

/* --- tables --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  font-weight:600;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:var(--panel)}
.tag{background:var(--panel);margin-left:5px}
.tag.warnt{background:var(--warn-soft)}
.tag.okt{background:var(--live-soft)}

/* --- attendance ----------------------------------------------------------- */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.monthnav{display:flex;align-items:center;gap:4px}
.monthnav b{min-width:150px;text-align:center;font-size:14px;font-weight:600}
.monthnav button{width:30px;height:30px;border-radius:var(--r-1);border:1px solid var(--line);
  color:var(--muted);background:var(--bg)}
.monthnav button:hover{border-color:var(--claim);color:var(--claim)}

.clockcard{border-radius:var(--r-3);box-shadow:var(--sh-2);border-color:var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--panel))}
.clockcard .bigclock{font-variant-numeric:tabular-nums;letter-spacing:-1.5px}
.clockcard .overbreak{color:var(--warn)}
.clockcard button.big{box-shadow:var(--sh-1);font-weight:600}
.clockcard button.big:hover{filter:brightness(1.07)}
.breakpick button{border-radius:var(--r-1)}
.breakpick button:hover{border-color:var(--claim);color:var(--claim)}

.statrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{flex:1;min-width:104px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-2);
  background:var(--panel);display:flex;flex-direction:column;gap:1px}
.stat b{font-size:19px;font-weight:600;letter-spacing:-.03em}
.stat span{font-size:11px;color:var(--muted)}
.stat.bad b{color:var(--warn)}

.calwrap{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--bg)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.calhead{padding:9px 8px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  font-weight:600;background:var(--panel);border-bottom:1px solid var(--line);text-align:center}
.calcell{min-height:86px;padding:7px 8px;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px;font-size:11px}
.calcell:nth-child(7n){border-right:0}
.calcell.blank{background:var(--panel)}
.calnum{font-size:12px;font-weight:600;color:var(--muted)}
.calcell.today{box-shadow:inset 0 0 0 2px var(--claim)}
.calcell.today .calnum{color:var(--claim)}
.calcell.ok{background:var(--live-soft)}
.calcell.late{background:var(--signal-soft)}
.calcell.miss{background:var(--warn-soft)}
.calcell.leave{background:var(--accent-soft)}
.calcell.off{background:var(--panel)}
.cworked{font-weight:600;font-size:13px;letter-spacing:-.02em}
.ctime{color:var(--dim)}
.cbadge{display:inline-block;padding:0 5px;border-radius:3px;font-size:10px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);align-self:flex-start}
.cbadge.warnb{border-color:var(--warn);color:var(--warn)}
.cbadge.okb{border-color:var(--live);color:var(--live)}
.cbadge.leave{border-color:var(--claim);color:var(--claim)}
.callegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted)}
.callegend span{display:flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;border:1px solid var(--line);display:inline-block}
.sw.ok{background:var(--live-soft)} .sw.late{background:var(--signal-soft)}
.sw.miss{background:var(--warn-soft)} .sw.leave{background:var(--accent-soft)}
.sw.off{background:var(--panel)}

.balancecard{display:flex;align-items:center;gap:22px;padding:16px 18px;border-radius:var(--r-2);
  border:1px solid var(--line-soft);background:var(--panel);margin-bottom:6px;flex-wrap:wrap}
.balmain{display:flex;align-items:baseline;gap:9px}
.balmain b{font-size:30px;font-weight:600;letter-spacing:-.04em;color:var(--claim)}
.balmain span{color:var(--muted);font-size:12px}
.balbits{display:flex;flex-direction:column;gap:1px;font-size:12px;color:var(--muted)}

.fieldlab{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.fieldlab input,.fieldlab select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-1);
  background:var(--bg);color:var(--text);font-size:13px}
.rowform{align-items:flex-end}
.schedgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.daypick{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.daybox{display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-1);font-size:12px;cursor:pointer;color:var(--muted)}
.daybox.on{border-color:var(--claim);background:var(--accent-soft);color:var(--claim);font-weight:500}
.daybox input{margin:0}
p.ok{color:var(--live);font-size:12px;margin-top:12px;min-height:18px}

/* --- narrow screens ------------------------------------------------------- */
@media (max-width:900px){
  .statrow .stat{min-width:calc(50% - 5px)}
  .schedgrid{grid-template-columns:1fr}
  .calcell{min-height:64px;font-size:10px}
}

/* ==========================================================================
   Graphics pass. Avatars, iconography, depth and a properly designed sign-in.
   ========================================================================== */

/* --- avatars -------------------------------------------------------------- */
/* Initials on a tinted disc. Hue comes from the name so somebody keeps the same
   colour everywhere; the light-background / dark-text pairing is fixed, so
   contrast never depends on which hue came up. */
.avatar{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:hsl(var(--ah) 62% 93%);
  color:hsl(var(--ah) 58% 30%);
  border:1px solid hsl(var(--ah) 45% 85%);
  font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;user-select:none;
}
.avatar.sm{width:24px;height:24px;font-size:10px}
.avatar.group{background:hsl(var(--ah) 55% 95%)}
/* A presence ring rather than a dot: it reads at a glance and costs no width. */
.avwrap{position:relative;flex:none;display:inline-flex}
.avwrap.on::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
  border-radius:50%;background:var(--live);border:2px solid var(--bg);
}
.rblock .avwrap.on::after{width:8px;height:8px}

/* --- navigation ----------------------------------------------------------- */
.nav button{gap:10px;padding:9px 14px}
.navico{flex:none;opacity:.62;transition:opacity .12s}
.nav button:hover .navico{opacity:.9}
.nav button.sel .navico{opacity:1}
.nav button span:first-of-type{flex:1}
.brand{padding:18px 16px 14px}
.raillogo{width:100%;max-width:140px;height:auto;display:block}
.railnum{display:block;margin-top:7px;font-size:11px;color:var(--dim);
  font-family:"IBM Plex Mono",ui-monospace,monospace}

/* --- list rows ------------------------------------------------------------ */
/* Avatar in a fixed left column, everything else flowing beside it. */
.chat{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"av nm rt" "av pv rt";
  gap:1px 11px;align-items:center;padding:11px 14px;
}
.chat .avatar,.chat .avwrap{grid-area:av;align-self:center}
.chat .nm{grid-area:nm;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat .tm{grid-area:rt;align-self:start;font-size:11px;color:var(--dim)}
.chat .pv{grid-area:pv;font-size:12px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chat .rt{grid-area:rt;align-self:center;display:flex;align-items:center;gap:6px;justify-self:end}
.chat.sel .nm{color:var(--claim)}
.people .chat{grid-template-areas:"av nm rt" "av pv rt"}

.person{gap:9px}
.person .where{margin-left:auto}

/* --- message avatars ------------------------------------------------------ */
.msgav{position:absolute;left:-32px;top:2px}
#imsgs .msg:not(.out){margin-left:34px}

/* --- empty states --------------------------------------------------------- */
.emptystate{padding:48px 28px;gap:10px}
.emptystate img{width:52px;height:auto;opacity:.34;margin-bottom:4px}
.emptystate b{font-size:14px;font-weight:600}
.emptystate span{max-width:330px;color:var(--muted);font-size:12.5px;line-height:1.6}

/* --- headers -------------------------------------------------------------- */
.thead{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg)}
.thead h2{font-size:15px;font-weight:600}
.colhead{padding:15px 14px 11px}
.colhead h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.rblock h3{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.filters{padding:0 14px 10px}
.fbtn{padding:5px 11px;border-radius:99px;font-size:12px;border:1px solid transparent;color:var(--muted)}
.fbtn:hover{background:var(--raised)}
.fbtn.sel{background:var(--accent-soft);color:var(--claim);border-color:var(--accent-line);font-weight:500}

/* --- sign-in -------------------------------------------------------------- */
.brandside{position:relative;overflow:hidden;padding:56px 52px;display:flex;
  flex-direction:column;justify-content:center}
/* A soft wash of the logo blues behind the copy, so the panel has depth
   without competing with the text sitting on it. */
.bglow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% 18%, rgba(136,211,241,.30), transparent 62%),
    radial-gradient(680px 620px at 88% 88%, rgba(46,99,172,.20), transparent 64%),
    linear-gradient(160deg,#FBFDFF 0%,#EFF5FC 55%,#E6EFF9 100%);
}
.brandside h1{font-size:31px;line-height:1.2;font-weight:600;letter-spacing:-.03em;margin:0 0 16px}
.brandside .lead{max-width:46ch;color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 30px}
.points li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;color:var(--text);
  font-size:13px;font-weight:500}
.points li::before{display:none}
.points li svg{flex:none;margin-top:2px;color:var(--live)}
.brandfoot{color:var(--dim);font-size:11.5px;line-height:1.8}
.formbox{box-shadow:var(--sh-2);border-radius:var(--r-3);padding:34px}
.formbox h2{font-size:21px;letter-spacing:-.02em}
.field input{border-radius:var(--r-1);padding:10px 12px;transition:border-color .12s,box-shadow .12s}
.field input:focus{outline:none;border-color:var(--claim);box-shadow:0 0 0 3px var(--accent-soft)}
.primary{border-radius:var(--r-1);padding:11px;box-shadow:var(--sh-1)}

/* --- shared control polish ------------------------------------------------ */
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--claim);
  box-shadow:0 0 0 3px var(--accent-soft)}
.searchrow input,.linkform input,.linkform textarea,.fieldlab input,.fieldlab select,
.modalbox input,.rowform input,.rowform select{transition:border-color .12s,box-shadow .12s}
.claimbtn{border-radius:99px;padding:6px 14px;font-size:12px;font-weight:500}
.owner{border-radius:99px;padding:0 8px;font-size:10px}

/* --- message footer actions ----------------------------------------------- */
/* Boxed buttons on every message made the thread look like a form. These are
   quiet text until you hover the message, which keeps them discoverable on
   touch (they are always present, never display:none) without shouting. */
.msg .tm{gap:9px;flex-wrap:nowrap;align-items:baseline}
.infobtn{border:0;padding:0;background:none;color:var(--dim);font-size:11px;
  border-bottom:1px solid transparent;border-radius:0;transition:color .12s,border-color .12s}
.infobtn:hover{color:var(--claim);border-bottom-color:var(--claim);background:none}
.infobtn.danger{color:var(--dim)}
.infobtn.danger:hover{color:var(--warn);border-bottom-color:var(--warn)}
.msg .tm .ticks{margin-right:0}
/* Push the actions to the right so the timestamp anchors the row. */
.msg .tm > .infobtn:first-of-type{margin-left:auto}

/* The reaction button sits inside the bubble's top-right rather than over its
   edge, so bubbles keep a clean silhouette. */
.reactbtn{top:4px;right:6px;opacity:0;transition:opacity .12s}
.msg:hover .reactbtn,.reactbtn:focus-visible{opacity:1}
@media (hover:none){.reactbtn{opacity:.5}}

/* A sender's name is a link to their direct chat; say so on hover, not always. */
.whobtn{border-bottom:1px solid transparent}
.whobtn:hover{border-bottom-color:currentColor}

/* --- thread canvas -------------------------------------------------------- */
/* A faint tint behind the messages separates the conversation from the header
   and composer without drawing a hard line across the screen. */
.msgs{background:linear-gradient(180deg,#FCFDFF,#F7FAFD)}
.thead,.composer{background:var(--bg)}
.composer{border-top:1px solid var(--line);box-shadow:0 -1px 0 rgba(20,32,44,.02)}
.threadstart{color:var(--dim);font-size:11.5px;padding:18px 0 6px}

/* --- sign-in right panel -------------------------------------------------- */
.formside{background:linear-gradient(180deg,#FAFCFE,#F3F7FB)}
.formbox{background:var(--bg);border:1px solid var(--line)}

/* --- misc polish ---------------------------------------------------------- */
.groupdesc{font-size:12.5px;color:var(--muted);margin-top:6px}
.csub{font-size:11.5px;color:var(--dim);margin:7px 0 0}
.railmark{opacity:.55}
.railmark img{width:18px}
.infopanel{box-shadow:var(--sh-2);border-radius:var(--r-2)}
.reactpick{box-shadow:var(--sh-2);border-radius:99px;padding:4px 6px}
.reactpick button{font-size:16px;padding:3px 5px;border-radius:50%;transition:transform .1s,background .12s}
.reactpick button:hover{transform:scale(1.18);background:var(--accent-soft)}

/* ==========================================================================
   Themes, photo avatars, icon actions, seen-by faces.
   Every colour in the app comes from the tokens below, so a theme is a token
   swap and nothing else has to know a theme exists.
   ========================================================================== */

[data-theme="dark"]{
  --bg:#141A21; --panel:#19212A; --raised:#212B36; --line:#2A3540; --line-soft:#222C36;
  --text:#E8EEF4; --muted:#9BABBA; --dim:#6E7F8F;
  --signal:#E0A63C; --claim:#6FAFEE; --claim-deep:#8CC2F6; --live:#48C98A; --warn:#F0705C;
  --out:#1E3550; --accent-soft:#1C2A3A; --accent-line:#2F4A68; --on-accent:#0E1620;
  --warn-soft:#33201D; --live-soft:#17301F; --signal-soft:#332A15;
  --sh-1:0 1px 2px rgba(0,0,0,.34);
  --sh-2:0 2px 10px rgba(0,0,0,.40);
  --sh-3:0 16px 48px rgba(0,0,0,.58);
  color-scheme:dark;
}
[data-theme="midnight"]{
  --bg:#0E1626; --panel:#131F33; --raised:#1A2941; --line:#243651; --line-soft:#1C2C44;
  --text:#E6EDF8; --muted:#98A9C4; --dim:#6B7C99;
  --signal:#E3AC4A; --claim:#7CB8F5; --claim-deep:#9ACBFA; --live:#4ACF92; --warn:#F47C68;
  --out:#1D3557; --accent-soft:#182742; --accent-line:#2D4970; --on-accent:#0A1120;
  --warn-soft:#33201E; --live-soft:#132F22; --signal-soft:#332B17;
  --sh-1:0 1px 2px rgba(0,0,0,.40);
  --sh-2:0 2px 12px rgba(0,0,0,.46);
  --sh-3:0 16px 52px rgba(0,0,0,.64);
  color-scheme:dark;
}
/* Surfaces that were hard-coded light get their tone back from the tokens. */
[data-theme="dark"] .rail,[data-theme="midnight"] .rail{
  background:linear-gradient(180deg,var(--panel),var(--bg))}
[data-theme="dark"] .msgs,[data-theme="midnight"] .msgs{
  background:linear-gradient(180deg,var(--bg),var(--panel))}
[data-theme="dark"] .clockcard,[data-theme="midnight"] .clockcard{
  background:linear-gradient(180deg,var(--raised),var(--panel))}
[data-theme="dark"] .formside,[data-theme="midnight"] .formside{
  background:linear-gradient(180deg,var(--panel),var(--bg))}
[data-theme="dark"] .bglow,[data-theme="midnight"] .bglow{
  background:
    radial-gradient(760px 520px at 12% 18%, rgba(111,175,238,.16), transparent 62%),
    radial-gradient(680px 620px at 88% 88%, rgba(46,99,172,.22), transparent 64%),
    linear-gradient(160deg,var(--panel) 0%,var(--bg) 100%)}
[data-theme="dark"] .raillogo,[data-theme="midnight"] .raillogo,
[data-theme="dark"] .blogo,[data-theme="midnight"] .blogo{filter:brightness(0) invert(1) opacity(.92)}
[data-theme="dark"] .avatar,[data-theme="midnight"] .avatar{
  background:hsl(var(--ah) 34% 26%);color:hsl(var(--ah) 64% 82%);border-color:hsl(var(--ah) 30% 34%)}
[data-theme="dark"] *,[data-theme="midnight"] *{scrollbar-color:#31404F transparent}
[data-theme="dark"] *::-webkit-scrollbar-thumb,[data-theme="midnight"] *::-webkit-scrollbar-thumb{
  background:#31404F;border-color:var(--bg)}
[data-theme="dark"] .mention.atme,[data-theme="midnight"] .mention.atme{
  background:#43370F;color:#F5D98A}

/* --- theme switcher ------------------------------------------------------- */
#themeBtn{display:flex;align-items:center;gap:8px}
.swatches{display:inline-flex;gap:3px}
.swatches i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.sw-light{background:#F7F9FC} .sw-dark{background:#1B242E} .sw-midnight{background:#16233A}
.swatches i.on{outline:2px solid var(--claim);outline-offset:1px}

/* --- photo avatars -------------------------------------------------------- */
.avatar{position:relative;overflow:hidden}
.avatar.xs{width:20px;height:20px;font-size:9px}
.avimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* --- message name row ----------------------------------------------------- */
/* The sender sits on its own line with the avatar inline, so a long name or a
   number can never collide with the message body underneath it. */
.msg .by{display:flex;align-items:center;gap:7px;margin-bottom:5px;min-width:0}
.msg .whoname{display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .whonum{color:var(--dim);font-weight:400;font-size:10.5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.msg .whorole{color:var(--dim);font-weight:400;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em}
#imsgs .msg:not(.out){margin-left:0}
.msgav{display:none}

/* The sender's name opens a direct chat: a chat glyph appears on hover so the
   affordance is discoverable without underlining every name permanently. */
.whobtn{display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit;
  border-bottom:0;border-radius:4px;padding:0 3px;margin:0 -3px;
  transition:background .12s,color .12s}
.whobtn svg{opacity:0;transition:opacity .12s;flex:none}
.whobtn:hover{background:var(--accent-soft);color:var(--claim)}
.whobtn:hover svg{opacity:.85}
@media (hover:none){.whobtn svg{opacity:.5}}

/* --- icon actions --------------------------------------------------------- */
.msg .tm{display:flex;align-items:center;gap:8px}
.acts{display:flex;align-items:center;gap:2px;margin-left:auto}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
  border:0;border-radius:var(--r-1);color:var(--muted);opacity:.7;
  transition:opacity .12s,color .12s,background .12s}
.msg:hover .iconbtn,.iconbtn:focus-visible{opacity:1}
.iconbtn:hover{color:var(--claim);background:var(--accent-soft)}
.iconbtn.del{color:var(--dim)}
.iconbtn.del:hover{color:var(--warn);background:var(--warn-soft)}
@media (hover:none){.iconbtn{opacity:.75}}

/* --- seen-by faces -------------------------------------------------------- */
.seenby{display:inline-flex;align-items:center;margin-left:2px}
.seenby .avatar{width:18px;height:18px;font-size:8px;margin-left:-6px;
  border:1.5px solid var(--bg);box-shadow:none}
.seenby .avatar:first-child{margin-left:0}
.seenmore{margin-left:3px;font-size:10px;color:var(--dim)}
.seen.none{font-size:10.5px}

/* --- who am I ------------------------------------------------------------- */
.whoami{display:flex;align-items:center;gap:10px}
.meav{flex:none;padding:0;border-radius:50%;position:relative;line-height:0}
.meav::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 17.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2l1.5-2h5L16 7h2a2 2 0 0 1 2 2Z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E") center/13px no-repeat;
  opacity:0;transition:opacity .12s}
.meav:hover::after{opacity:1}
.mewho{min-width:0;flex:1}
.mewho b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mewho span{font-size:11px;color:var(--dim)}
.whoami #signout{flex:none;width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-1);color:var(--dim);margin:0}
.whoami #signout:hover{color:var(--warn);background:var(--warn-soft)}

/* --- claimed-by badge no longer collides with the timestamp --------------- */
.chat .rt{flex-wrap:wrap;justify-content:flex-end;max-width:52%}
.chat .owner{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- overnight shifts ----------------------------------------------------- */
.nextday{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;font-size:9px;
  font-weight:600;background:var(--accent-soft);color:var(--claim);vertical-align:1px;
  font-family:"Inter",system-ui,sans-serif}
.schedpreview{margin:2px 0 0;font-size:12px;color:var(--muted);min-height:18px}
.schedpreview b{color:var(--claim)}
.dayhint{margin:8px 0 0;font-size:11px;color:var(--dim);line-height:1.5}

/* ==========================================================================
   Glass pass — "take inspiration from Apple's glass view".

   The idea worth taking from that look is not frosted panels everywhere; it is
   that chrome recedes and content sits forward. So the surfaces that frame
   content — rail, headers, composer, modals — become translucent and blurred
   over a soft ambient wash, while the things you actually read (messages,
   tables, cards) stay opaque and high contrast. Two rules keep it honest:
   nothing carrying body text gets a blur behind it, and every blurred surface
   still has a solid colour underneath for browsers that decline the filter.
   ========================================================================== */

:root{
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.72);
  --glass-edge:rgba(20,32,44,.07);
  --wash-a:rgba(46,99,172,.10);
  --wash-b:rgba(27,139,76,.07);
  --blur:saturate(180%) blur(20px);
}
[data-theme="dark"],[data-theme="midnight"]{
  --glass:rgba(26,35,45,.60);
  --glass-2:rgba(26,35,45,.80);
  --glass-line:rgba(255,255,255,.10);
  --glass-edge:rgba(0,0,0,.34);
  --wash-a:rgba(111,175,238,.13);
  --wash-b:rgba(72,201,138,.08);
}

/* Something for the glass to blur. Fixed, so it does not scroll with content
   and does not repaint on every message. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% -6%, var(--wash-a), transparent 60%),
    radial-gradient(760px 700px at 102% 104%, var(--wash-b), transparent 62%),
    var(--bg);
}
#app{background:transparent}

.rail{
  background:var(--panel);
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border-right:1px solid var(--glass-edge);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
[data-theme="dark"] .rail,[data-theme="midnight"] .rail{
  background:linear-gradient(180deg,var(--glass-2),var(--glass))}

.thead,.colhead{
  background:var(--glass-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-edge);
  position:relative;z-index:2;
}
.composer{
  background:var(--glass-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-edge);
}
.modal{background:rgba(16,32,43,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modalbox{
  background:var(--bg);
  border:1px solid var(--glass-line);
  box-shadow:0 24px 70px rgba(10,20,32,.28),0 0 0 1px var(--glass-edge);
}
/* Selected nav and chat rows lift rather than fill: a soft tint, a hairline,
   and the accent bar that was already there. */
.nav button.sel{background:linear-gradient(90deg,var(--accent-soft),transparent 82%)}
.chat.sel{background:linear-gradient(90deg,var(--accent-soft),transparent 88%)}
.fbtn.sel{backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.msg{box-shadow:var(--sh-1)}
.msg.out{box-shadow:0 1px 2px rgba(46,99,172,.10)}

/* --- apps ----------------------------------------------------------------- */
#v-apps{grid-template-columns:1fr;overflow-y:auto}
#v-apps .pad{max-width:1000px}
.padhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.padhead .primary{width:auto;margin:0;padding:8px 14px;font-size:13px;border-radius:var(--r-2);
  box-shadow:var(--sh-1);flex:none}
.searchrow.wide{padding:0;border:0;margin:0 0 22px;max-width:340px}
.searchrow.wide input{padding:9px 12px;font-size:13px;border-radius:var(--r-2)}

.appgroup{margin-bottom:26px}
.appgroup h3 .subtle{background:var(--raised);border-radius:99px;padding:1px 7px;font-size:10px;letter-spacing:0}
.appgroup h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.appcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.appcard{
  position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  border:1px solid var(--glass-edge);border-radius:var(--r-3);text-decoration:none;color:inherit;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-1);transition:transform .14s ease,box-shadow .14s ease,border-color .14s;
}
.appcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent-line)}
.appico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;color:var(--claim);
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.appbody{min-width:0;display:flex;flex-direction:column;gap:1px}
.appbody b{font-size:13px;font-weight:600}
.appnote{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apphost{font-size:10.5px;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.appedit{position:absolute;top:8px;right:8px;width:24px;height:24px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-1);color:var(--dim);
  opacity:0;transition:opacity .12s,color .12s,background .12s}
.appcard:hover .appedit{opacity:1}
.appedit:hover{color:var(--claim);background:var(--accent-soft)}
@media (hover:none){.appedit{opacity:.7}}

.quicklinks h4{display:flex;align-items:center;justify-content:space-between}
.qlall{font-size:10px;letter-spacing:.06em;color:var(--claim);text-transform:none;font-weight:600}
.qlall:hover{text-decoration:underline}

/* --- forms inside modals -------------------------------------------------- */
.flab{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow .flab{margin-top:10px}
.modalbox textarea{width:100%;padding:8px 10px;font-size:13px;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--bg);color:var(--text);resize:vertical;font:inherit}
.modalbox input:not([type="checkbox"]):not([type="radio"]){border-radius:var(--r-2);width:100%}
.modalbox .err{margin-top:10px;min-height:0}
.linkbtns button.warn{color:var(--warn);border-color:var(--line)}
.linkbtns button.warn:hover{border-color:var(--warn);background:var(--warn-soft)}
#profClose{margin-left:auto}

/* --- profile card --------------------------------------------------------- */
.profhead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.profhead h3{margin:0 0 2px}
.profav{padding:0;border-radius:50%;line-height:0;position:relative;flex:none}
.avatar.lg{width:58px;height:58px;font-size:19px}
.profav .avatar::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.proflist{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.proflist dt{font-size:11px;color:var(--dim);margin:0}
.proflist dd{margin:1px 0 0;font-size:13px}
.profabout{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
/* The name block is a button now, so it must not inherit the link styling the
   sign-out control uses. */
.whoami .mewho{text-align:left;padding:0;margin:0;border-radius:var(--r-1);color:var(--muted);flex:1;min-width:0}
.whoami .meav{margin:0}
.mewho:hover b{color:var(--claim)}

/* --- clickable names in the rota ------------------------------------------ */
.namebtn{padding:0;font:inherit;color:inherit;font-weight:500;
  border-bottom:1px dotted var(--dim);transition:color .12s,border-color .12s}
.namebtn:hover{color:var(--claim);border-bottom-color:var(--claim)}

/* --- a person's month, day by day ----------------------------------------- */
.segtabs{display:inline-flex;align-self:flex-start;gap:2px;padding:3px;margin:12px 0 14px;border-radius:99px;
  background:var(--raised);border:1px solid var(--glass-edge)}
.segtabs button{padding:5px 14px;border-radius:99px;font-size:12px;color:var(--muted)}
.segtabs button.on{background:var(--bg);color:var(--text);font-weight:600;box-shadow:var(--sh-1)}
.dayscroll{max-height:56vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-2)}
.daytable{width:100%;border-collapse:collapse;font-size:12.5px}
.daytable th{position:sticky;top:0;z-index:1;text-align:left;padding:8px 10px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line)}
.daytable td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.daytable tr:last-child td{border-bottom:0}
.daytable tr:hover td{background:var(--raised)}
.daytable tr.today td{background:var(--accent-soft)}
.daytable .tag{margin-left:0;margin-right:4px}

/* --- pin ------------------------------------------------------------------ */
#pinChat{display:inline-flex;align-items:center;gap:5px}
#pinChat.held{color:var(--signal)}
.pinmark{display:inline-flex;color:var(--signal);opacity:.9}

/* Motion is a preference, not a decision we get to make for everyone. */
@media (prefers-reduced-motion:reduce){
  .appcard{transition:none}
  .appcard:hover{transform:none}
}

/* ==========================================================================
   Searching inside a conversation.
   The bar lives under the thread title and the results hang below it as a
   panel, so the thread stays where it is and a hit can be read in place before
   deciding to jump to it.
   ========================================================================== */

.findbar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:6px 10px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel)}
.findico{display:inline-flex;color:var(--dim);flex:none}
.findbar input{flex:1;min-width:0;border:0;background:none;color:var(--text);
  font-size:13px;padding:2px 0}
.findbar input:focus{outline:none}
.findcount{flex:none;font-size:11px;color:var(--dim);white-space:nowrap}
.findbar .linkbtn{flex:none}

.findresults{max-height:44vh;overflow-y:auto;margin-top:8px;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--bg);box-shadow:var(--sh-2)}
.findhit{display:block;width:100%;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line-soft)}
.findhit:last-child{border-bottom:0}
.findhit:hover{background:var(--accent-soft)}
.findwho{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:600;
  color:var(--claim);margin-bottom:2px}
.findwhen{font-weight:400;color:var(--dim);font-size:11px}
.findsnip{display:-webkit-box;font-size:12.5px;color:var(--muted);line-height:1.5;
  overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.findnone{padding:14px 12px;color:var(--dim);font-size:12.5px}

/* One highlight style for both the results panel and the thread itself. It has
   to survive on an incoming bubble, an outgoing one and all three themes, so it
   is a real fill rather than a tint of the surface it happens to sit on. */
:root{--hit:#FFD87A;--hit-text:#3A2A05}
[data-theme="dark"],[data-theme="midnight"]{--hit:#8A6A16;--hit-text:#FFF3D6}
mark.hitmark{background:var(--hit);color:var(--hit-text);border-radius:3px;
  padding:0 2px;font-weight:600}

/* The header buttons carry a glyph now, so they need to line their text up. */
#findChat,#ifindChat{display:inline-flex;align-items:center;gap:5px}

/* ==========================================================================
   Chat pass — cues from Google Chat, plus the one thing the team asked for
   directly: sender and receiver must be obviously different, green for the
   sender. So an outgoing message is a green card on the right and an incoming
   one is a plain card on the left, and the coloured bars that used to run down
   the edge of every bubble are gone — the avatar and the coloured name already
   say who is speaking, and the bars competed with them.
   ========================================================================== */

:root{
  --mine:#E4F6E9;          /* outgoing fill — green, per the team's own note */
  --mine-line:#BCE3C8;
  --mine-link:#1B6B3A;
  --theirs:#FFFFFF;
  --theirs-line:#E6ECF3;
}
[data-theme="dark"],[data-theme="midnight"]{
  --mine:#1B3A29; --mine-line:#2C5A40; --mine-link:#8FDCA9;
  --theirs:#1E2830; --theirs-line:#2C3742;
}
[data-theme="midnight"]{--theirs:#18263C; --theirs-line:#243651}

.msgs{padding:22px 18px 18px;gap:6px}
.msg{
  max-width:min(600px,76%);padding:9px 13px 7px;
  border-radius:14px;border:1px solid var(--theirs-line);
  background:var(--theirs);box-shadow:0 1px 2px rgba(20,32,44,.05);
}
/* The squared corner points at whoever is speaking, the way every chat app
   does it. It is the cheapest possible direction cue. */
.msg:not(.out){border-bottom-left-radius:5px}
.msg.out{
  align-self:flex-end;background:var(--mine);border-color:var(--mine-line);
  border-bottom-right-radius:5px;border-bottom-left-radius:14px;
}
.msg:not(.out),.msg.out{border-left-width:1px;border-right-width:1px}
.msg.out .msglink,.msg.out .mention{color:var(--mine-link)}
.msg.out .mention{background:rgba(27,107,58,.10)}
.msg .tm{color:var(--dim);font-size:10.5px;margin-top:4px}
.msg .by{margin-bottom:4px}

/* Consecutive messages from the same person read as one block: the gap closes
   and the repeated name drops away, which is most of what makes Google Chat
   feel calm rather than busy. */
.msg.cont{margin-top:-4px}
.msg.cont .by{display:none}
.msg.cont:not(.out){border-top-left-radius:6px}
.msg.cont.out{border-top-right-radius:6px}

.msg.deleted{background:var(--panel);border-style:dashed;box-shadow:none}
.msg.deleted .tx{color:var(--dim);font-style:italic;font-size:12.5px}

/* --- motion ---------------------------------------------------------------
   Movement is used where it explains something: a message arriving, a panel
   opening, a row responding to the pointer. Nothing loops, nothing bounces,
   and everything here is switched off for anyone who has asked for less. */

@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.msg{animation:riseIn .18s cubic-bezier(.2,.7,.3,1) both}
/* Only the newest few animate. Re-rendering a long thread should not make the
   whole history flutter. */
.msg:nth-last-child(n+9){animation:none}

.view.on{animation:fadeIn .16s ease-out}
.modalbox{animation:popIn .16s cubic-bezier(.2,.7,.3,1)}
.findresults{animation:riseIn .16s ease-out}
.mentionmenu:not([hidden]){animation:riseIn .12s ease-out}
.reactpick{animation:popIn .12s ease-out}

.chat,.nav button,.fbtn,.appcard,.findhit,.linkbtn,.iconbtn,.claimbtn{
  transition:background .14s ease,color .14s ease,border-color .14s ease,
             box-shadow .14s ease,transform .14s ease,opacity .14s ease;
}
.chat:active,.findhit:active{transform:scale(.995)}
.primary,.send{transition:filter .14s ease,transform .1s ease,box-shadow .14s ease}
.primary:active,.send:active{transform:translateY(1px)}
.pill{transition:transform .16s cubic-bezier(.2,1.5,.4,1)}
.chat:hover .pill{transform:scale(1.08)}

/* The live dot should read as live. */
.dot.up{box-shadow:0 0 0 0 rgba(27,139,76,.45);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(27,139,76,.40)}
  70%{box-shadow:0 0 0 6px rgba(27,139,76,0)}
  100%{box-shadow:0 0 0 0 rgba(27,139,76,0)}
}

.typing{display:flex;align-items:center;gap:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .chat:active,.findhit:active,.primary:active,.send:active{transform:none}
}

/* --- assigning a conversation --------------------------------------------- */
#assignList button{justify-content:flex-start;align-items:center;gap:10px}
#assignList .fwdname{flex:1;min-width:0;color:var(--text);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#assignList button.sel{background:var(--accent-soft)}
#assignList .clearrow{color:var(--muted);font-size:12.5px;justify-content:flex-start}
#assignChat{white-space:nowrap}

/* --- rota: one shift, not a month ----------------------------------------- */
#teamAttRows td .subtle{display:block;margin-top:1px}

/* Tightening. A one-line message was running to 89px tall once the name row,
   the text and the footer had each taken their own line — nearly three times
   the height of what it was actually saying. The rows stay (the actions have to
   be reachable on a touchscreen, not hidden behind a hover) but each one gives
   back the space it did not need. */
.msg{padding:7px 12px 5px;max-width:min(560px,68%)}
.msg .by{margin-bottom:2px;font-size:11.5px}
.msg .tm{margin-top:1px}
.msg .acts .iconbtn{width:24px;height:20px}
.msg .tx{line-height:1.45}
.msgs{gap:5px}
.msg.cont{margin-top:-2px}

/* Who is handling a conversation, in the list. A name in a chip was being cut
   to "U…" in a 270px column; a face is unambiguous at a tenth of the width,
   and the name still travels in the tooltip. */
.chat .owner{display:inline-flex;padding:0;border:0;background:none;line-height:0}
.chat .owner .avatar{width:19px;height:19px;font-size:8.5px;
  box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px var(--line)}
.chat .owner.me .avatar{box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px var(--claim)}
.chat .rt{max-width:none;flex-wrap:nowrap}

/* The rota's two actions belong side by side, not stacked. */
#teamAttRows td:last-child{white-space:nowrap}
#teamAttRows td:last-child .linkbtn{margin-left:10px}

/* The header now carries Find, Pin, Assign and the rest; without this they
   break mid-word ("Edit / group") as soon as the window narrows. */
.theadbtns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.theadbtns > *{white-space:nowrap}

/* ==========================================================================
   Video meetings.
   The call takes the whole window when it is open — a call you are half
   looking at is a call nobody is in. Everything else here is the way in and
   the way back out.
   ========================================================================== */

#callmount:empty{display:none}
.callroot{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:#0E1318;color:#EEF3F8;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  animation:fadeIn .18s ease-out;
}
body.incall{overflow:hidden}

.callhead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.callwho{display:flex;align-items:baseline;gap:10px;min-width:0}
.calltitle{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callcount{font-size:12px;color:#93A3B3}
.callhbtns{display:flex;gap:8px;flex:none}
.callghost{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;
  border:1px solid rgba(255,255,255,.18);color:#DCE5EE;font-size:12.5px;
  transition:background .14s,border-color .14s}
.callghost:hover{background:rgba(255,255,255,.10)}
.callghost.danger{border-color:rgba(240,112,92,.55);color:#F0705C}
.callghost.danger:hover{background:rgba(240,112,92,.14)}

.callbody{flex:1;min-height:0;display:flex;gap:12px;padding:12px 14px;overflow:hidden}
/* The tiles share out whatever height is going rather than each claiming a
   fixed shape — a single tile that sized itself by aspect ratio grew past the
   bottom of the window and sat on top of the lobby. */
.calltiles{flex:1;min-width:0;min-height:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.calltiles[data-n="1"],.calltiles[data-n="2"]{grid-template-columns:minmax(0,1fr)}
.calltiles[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.calltiles[data-n="3"],.calltiles[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.calltiles[data-n="5"],.calltiles[data-n="6"],
.calltiles[data-n="7"],.calltiles[data-n="8"],.calltiles[data-n="9"]{
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* Somebody sharing takes the room; the faces line up down the side. */
/* Auto-placement will happily drop a face into the presenter's column, so in
   stage mode both columns are assigned rather than left to chance. */
.calltiles.stage{grid-template-columns:minmax(0,1fr) 210px}
.calltiles.stage .calltile{grid-column:2}
.calltiles.stage .presenting{grid-column:1;grid-row:1 / span 20}  /* -1 means the end of the EXPLICIT grid, and these rows are implicit */

.calltile{
  position:relative;overflow:hidden;border-radius:14px;min-height:0;min-width:0;
  background:hsl(var(--h,210) 22% 16%);
  animation:popIn .2s cubic-bezier(.2,.7,.3,1);
}
.calltile video{width:100%;height:100%;object-fit:cover;display:block;background:#0B1015}
.calltile.me video{transform:scaleX(-1)}          /* a mirror, like every other app */
.calltile.me.presenting video{transform:none}      /* except when it is your screen */
.calltile.presenting video{object-fit:contain;background:#080C10}
.tileposter{position:absolute;inset:0;display:grid;place-items:center}
.tileav{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:hsl(var(--h,210) 30% 30%);color:#fff;font-size:24px;font-weight:600;letter-spacing:.02em}
.calltile.live:not(.camoff) .tileposter{opacity:0;transition:opacity .2s}
.calltile.camoff video{opacity:0}
.tilebar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;
  padding:16px 12px 9px;font-size:12.5px;
  background:linear-gradient(transparent,rgba(6,10,14,.72))}
.tilename{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tileguest{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(224,166,60,.22);color:#F0C775;border-radius:3px;padding:1px 5px}
.tilemic{display:inline-flex;color:#F0705C}
.tilemic svg{width:15px;height:15px}
.tileshare{font-size:10px;color:#6FD39B}
.tilenote{position:absolute;top:10px;left:10px;right:10px;font-size:11.5px;
  background:rgba(240,112,92,.18);color:#FFC9BF;border-radius:8px;padding:5px 9px}
.calltile[data-state="connecting"]::after,.calltile[data-state="new"]::after{
  content:"Connecting…";position:absolute;top:10px;left:12px;font-size:11px;color:#93A3B3}

.callside{width:280px;flex:none;display:flex;flex-direction:column;border-radius:14px;
  background:#151C24;border:1px solid rgba(255,255,255,.08);overflow:hidden;
  animation:riseIn .18s ease-out}
.callsidehead{display:flex;align-items:center;justify-content:space-between;
  padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px}
.callsidehead button{color:#93A3B3;font-size:12px}
.callchat{flex:1;min-height:0;overflow-y:auto;padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.callmsg{font-size:12.5px;line-height:1.45}
.callmsg b{display:block;font-size:11px;color:#7FB6EC;font-weight:600;margin-bottom:1px}
.callmsg.mine b{color:#6FD39B}
.callmsg span{color:#DCE5EE;word-break:break-word;white-space:pre-wrap}
.callchatform{display:flex;gap:7px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.callchatform input{flex:1;min-width:0;background:#0F151B;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:8px 10px;color:#EEF3F8;font-size:12.5px}
.callchatform input:focus{outline:none;border-color:#4E8ED0}
.callchatform button{padding:0 13px;border-radius:8px;background:#2E63AC;color:#fff;font-size:12.5px}
.callsidenote{margin:0;padding:0 13px 11px;font-size:10.5px;color:#7A8A9A;line-height:1.5}

.calllobby{position:relative;z-index:3;padding:0 18px 10px;display:flex;flex-direction:column;gap:7px;flex:none}
.knock{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px;
  background:rgba(224,166,60,.12);border:1px solid rgba(224,166,60,.32);font-size:12.5px;
  animation:riseIn .2s ease-out}
.knock span{flex:1;min-width:0}

.callctl{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px 18px}
.callbtn{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.10);color:#EEF3F8;position:relative;
  transition:background .14s,transform .1s,color .14s}
.callbtn:hover{background:rgba(255,255,255,.18)}
.callbtn:active{transform:scale(.94)}
.callbtn.off{background:#F0705C;color:#fff}
.callbtn.on{background:#2E63AC;color:#fff}
.callbtn.hangup{background:#D93B28;color:#fff;width:66px;border-radius:26px}
.callbtn.hangup:hover{background:#EE4B37}
.callpip{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;
  background:#E0A63C;color:#1A1205;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px}

.callnote{margin:0 18px 14px;padding:9px 13px;border-radius:10px;font-size:12.5px;
  background:rgba(255,255,255,.08);color:#DCE5EE}
.callnote.warn{background:rgba(224,166,60,.16);color:#F0C775}
.callnote.bad{background:rgba(240,112,92,.16);color:#FFC9BF}

.callwait{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:50px 20px;text-align:center;color:#93A3B3}
.callwait b{font-size:15px;color:#EEF3F8}
.callwaitspin{width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.14);
  border-top-color:#7FB6EC;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* --- ringing -------------------------------------------------------------- */
.ringing{position:fixed;right:20px;bottom:20px;z-index:110;animation:riseIn .2s ease-out}
.ringcard{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-3);min-width:300px}
.ringav{flex:none;animation:ringpulse 1.6s ease-out infinite}
@keyframes ringpulse{
  0%{box-shadow:0 0 0 0 rgba(46,99,172,.42);border-radius:50%}
  70%{box-shadow:0 0 0 10px rgba(46,99,172,0);border-radius:50%}
  100%{box-shadow:0 0 0 0 rgba(46,99,172,0);border-radius:50%}
}
.ringwho{flex:1;min-width:0}
.ringwho b{display:block;font-size:13px}
.ringwho span{font-size:11.5px;color:var(--muted)}
.ringbtns{display:flex;gap:7px;flex:none}
.ringbtns button{padding:7px 13px;border-radius:99px;font-size:12.5px;border:1px solid var(--line);width:auto;margin:0}
.ringbtns .primary{border-color:var(--claim)}

/* --- the Meetings screen -------------------------------------------------- */
#v-meet{grid-template-columns:1fr;overflow-y:auto}
#v-meet .pad{max-width:840px}
.meetcard{padding:14px 16px;border:1px solid var(--glass-edge);border-radius:var(--r-3);
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-1);margin-bottom:10px}
.meethead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meethead b{font-size:14px}
.meetwho{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 12px;align-items:center}
.mpip{font-size:11.5px;padding:2px 9px;border-radius:99px;background:var(--accent-soft);
  color:var(--claim);border:1px solid var(--accent-line)}
.mpip.guest{background:var(--signal-soft);color:var(--signal);border-color:var(--signal)}
.mpip.waiting{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.meetbtns{display:flex;align-items:center;gap:14px}
.meetbtns .primary.sm{width:auto;margin:0;padding:7px 18px;border-radius:99px;font-size:12.5px}
.meetbtns .primary.sm:disabled{opacity:.5;cursor:not-allowed}
.linkrow{display:flex;gap:8px;margin:10px 0 4px}
.linkrow input{flex:1;min-width:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
.linkrow .primary.sm{width:auto;margin:0;padding:8px 16px;flex:none}

/* --- starting a call from a thread ---------------------------------------- */
.callstart{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:99px;
  border:1px solid var(--live);color:var(--live);font-size:12px;white-space:nowrap;
  transition:background .14s,color .14s}
.callstart:hover{background:var(--live);color:var(--on-accent)}

.msg.callcard .calltx{display:flex;align-items:center;gap:9px;font-size:13px;padding:3px 0}
.msg.callcard .callico{display:inline-flex;color:var(--live)}
.msg.callcard.live{border-color:var(--live);background:var(--live-soft)}
.joincall{margin-left:auto;padding:3px 12px;border-radius:99px;background:var(--live);
  color:var(--on-accent);font-size:11.5px;font-weight:600}
.joincall:hover{filter:brightness(1.08)}

/* --- the guest's way in --------------------------------------------------- */
.meetpage{background:var(--panel)}
.prejoin{min-height:100vh;display:grid;place-items:center;padding:24px}
.prebox{width:100%;max-width:460px;background:var(--bg);border:1px solid var(--line);
  border-radius:18px;padding:28px;box-shadow:var(--sh-2)}
.prelogo{width:132px;height:auto;display:block;margin-bottom:18px}
.prebox h1{font-size:19px;margin:0 0 4px}
.presub{color:var(--muted);font-size:13px;margin:0 0 18px}
.preview{position:relative;border-radius:14px;overflow:hidden;background:#0E1318;
  aspect-ratio:16/10;margin-bottom:16px}
.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.previewoff{position:absolute;inset:0;display:grid;place-items:center;color:#93A3B3;font-size:13px}
.prebtns{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.prechip{padding:6px 14px;border-radius:99px;background:rgba(10,16,22,.68);color:#EEF3F8;
  font-size:12px;border:1px solid rgba(255,255,255,.16)}
.prechip.off{background:#D93B28;border-color:#D93B28;color:#fff}
.prechip:disabled{opacity:.5}
#preForm .primary{margin-top:14px;border-radius:10px;padding:11px}
.prenote{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.prefoot{margin:18px 0 0;font-size:11px;color:var(--dim);line-height:1.6}
body.callover .callroot{opacity:.55;pointer-events:none}

@media (max-width:820px){
  .callbody{flex-direction:column}
  .callside{width:auto;max-height:44vh}
  .calltiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .calltiles.stage{grid-template-rows:1fr auto}
}

/* A modal opened from inside a call has to sit on top of it. The invite panel
   is reached from the call's own Invite button, so without this it opens
   underneath the very thing that opened it. */
.modal{z-index:140}
.ringing{z-index:130}
.prebox input{width:100%;padding:10px 12px;font-size:13px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--text)}
.prebox input:focus{outline:none;border-color:var(--claim);box-shadow:0 0 0 3px var(--accent-soft)}
.prebox input[readonly]{background:var(--panel);color:var(--muted)}

/* ==========================================================================
   Meetings — scheduling, the diary, and the bits of the call added since.
   ========================================================================== */

.meetpad{max-width:900px}
.meethero{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  flex-wrap:wrap;margin-bottom:22px}
.meethero h2{margin-bottom:6px}
.meethero p{max-width:46ch;margin:0}
.meetactions{display:flex;gap:10px;flex-wrap:wrap}
.bigbtn{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:var(--r-3);
  border:1px solid var(--glass-edge);background:var(--glass-2);text-align:left;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-1);
  transition:transform .14s,box-shadow .14s,border-color .14s}
.bigbtn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent-line)}
.bigbtn b{display:block;font-size:13.5px}
.bigbtn small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.bigico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.bigbtn.now .bigico{background:var(--live-soft);color:var(--live);border:1px solid var(--live)}
.bigbtn.later .bigico{background:var(--accent-soft);color:var(--claim);border:1px solid var(--accent-line)}

/* --- the scheduling card -------------------------------------------------- */
.schedcard{padding:20px 22px;border:1px solid var(--glass-edge);border-radius:16px;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-2);margin-bottom:24px;animation:riseIn .2s cubic-bezier(.2,.7,.3,1)}
.schedhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.schedhead h3{margin:0;font-size:15px}
.schedcard input,.schedcard textarea,.schedcard select{width:100%;padding:9px 12px;font-size:13px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
.schedcard textarea{resize:vertical}
.schedcard input:focus,.schedcard textarea:focus,.schedcard select:focus{
  outline:none;border-color:var(--claim);box-shadow:0 0 0 3px var(--accent-soft)}
.schedrow{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:12px}
.schedwhen{margin:8px 0 0;font-size:12.5px;color:var(--claim);min-height:18px}
.sendernote{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}

.chipbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);min-height:42px}
.chipbox input{flex:1;min-width:180px;border:0 !important;box-shadow:none !important;padding:4px 4px !important}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:99px;
  background:var(--accent-soft);color:var(--claim);border:1px solid var(--accent-line);font-size:12px;
  animation:popIn .14s ease-out}
.chip button{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  color:var(--claim);font-size:14px;line-height:1;opacity:.7}
.chip button:hover{opacity:1;background:var(--accent-line)}
.peoplepick{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--sh-2);background:var(--bg);animation:riseIn .14s ease-out}
.peoplepick button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;text-align:left}
.peoplepick button:hover{background:var(--accent-soft)}
.peoplepick b{display:block;font-size:13px;font-weight:500}
.peoplepick small{display:block;font-size:11px;color:var(--dim)}

/* --- the diary ------------------------------------------------------------ */
.meetsec{margin-bottom:26px}
.meetsech{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(27,139,76,.5);animation:pulse 2.4s ease-out infinite}
.daygroup{margin-bottom:16px}
.daygroup h4{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.meettitle{display:flex;align-items:baseline;gap:10px;min-width:0}
.meetclock{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:500;
  color:var(--claim);flex:none}
.meetcard.soon{border-color:var(--live);background:var(--live-soft)}
.meetcard.soon .meetclock{color:var(--live)}
.meetagenda{margin:8px 0 0;font-size:12.5px;color:var(--muted);white-space:pre-wrap;line-height:1.6}

/* --- a confirmation that goes away by itself ------------------------------ */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:150;
  max-width:min(520px,92vw);padding:12px 18px;border-radius:12px;font-size:13px;
  background:var(--text);color:var(--bg);box-shadow:var(--sh-3);animation:riseIn .2s ease-out}
.toast.going{opacity:0;transition:opacity .3s}

/* --- the Google-Chat-shaped composer -------------------------------------- */
.cbox.pill{display:flex;align-items:flex-end;gap:6px;padding:5px 6px 5px 5px;
  border:1px solid var(--line);border-radius:26px;background:var(--bg);
  transition:border-color .14s,box-shadow .14s}
.cbox.pill:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.cbox.pill textarea{flex:1;min-width:0;border:0;background:none;resize:none;padding:9px 4px;
  font:inherit;color:var(--text);max-height:140px}
.cbox.pill textarea:focus{outline:none}
.cplus{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--claim);background:var(--accent-soft);transition:background .14s,transform .12s}
.cplus:hover{background:var(--accent-line)}
.cplus:active{transform:scale(.92)}
.ctools{display:flex;align-items:center;gap:2px;flex:none;position:relative}
.ctool{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--dim);
  transition:color .14s,background .14s}
.ctool:hover{color:var(--claim);background:var(--accent-soft)}
.ctool.meetnow:hover{color:var(--live);background:var(--live-soft)}
.csend{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--claim);color:var(--on-accent);transition:filter .14s,transform .12s,opacity .14s}
.csend:hover{filter:brightness(1.08)}
.csend:active{transform:scale(.94)}
.csend:disabled{opacity:.45;cursor:not-allowed}

.emojipop{position:absolute;bottom:calc(100% + 10px);right:0;z-index:60;width:296px;max-height:232px;
  overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:var(--sh-3);
  animation:riseIn .14s ease-out}
.emojipop button{height:30px;border-radius:7px;font-size:18px;line-height:1;
  transition:background .1s,transform .1s}
.emojipop button:hover{background:var(--accent-soft);transform:scale(1.18)}

/* --- who is in the call --------------------------------------------------- */
.callsidetabs{display:flex;align-items:center;gap:2px;padding:7px 8px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.callsidetabs button{padding:6px 12px;border-radius:99px;font-size:12px;color:#93A3B3}
.callsidetabs button.on{background:rgba(255,255,255,.12);color:#EEF3F8;font-weight:600}
.callsidetabs .sideclose{margin-left:auto;font-size:19px;line-height:1;padding:2px 9px}
.sidecount{opacity:.75}
.sidepane{flex:1;min-height:0;display:flex;flex-direction:column}
.callroster{flex:1;min-height:0;overflow-y:auto;padding:8px}
.rosterrow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;font-size:12.5px}
.rosterrow:hover{background:rgba(255,255,255,.05)}
.rosterav{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:hsl(var(--h,210) 34% 30%);color:#fff;font-size:10.5px;font-weight:600}
.rostername{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rostername .subtle{color:#7A8A9A}
.rostertag{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:3px;padding:1px 5px;flex:none}
.rostertag.host{background:rgba(46,99,172,.28);color:#9CC8F5}
.rostertag.guest{background:rgba(224,166,60,.22);color:#F0C775}
.rostertag.share{background:rgba(27,139,76,.24);color:#6FD39B}
.rostermic{display:inline-flex;color:#F0705C;flex:none}
.rostermic svg{width:14px;height:14px}
.chatemoji{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:#93A3B3}
.chatemoji:hover{color:#EEF3F8;background:rgba(255,255,255,.10)}
.callchatform{position:relative}
.callchatform .emojipop{background:#151C24;border-color:rgba(255,255,255,.12);
  bottom:calc(100% + 8px);left:8px;right:8px;width:auto}
.callchatform .emojipop button:hover{background:rgba(255,255,255,.12)}

/* --- reactions ------------------------------------------------------------ */
.reactbar{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  display:flex;gap:4px;padding:7px 9px;border-radius:99px;background:#1B242E;
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-3);animation:popIn .14s ease-out}
.callctl{position:relative}
.reactbar button{width:38px;height:38px;border-radius:50%;font-size:21px;line-height:1;
  transition:transform .12s,background .12s}
.reactbar button:hover{transform:scale(1.22);background:rgba(255,255,255,.10)}
.callflies{position:fixed;inset:0;pointer-events:none;z-index:125}
.fly{position:fixed;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  font-size:34px;animation:flyup 2.2s cubic-bezier(.25,.6,.35,1) forwards}
.fly span{font-size:10.5px;color:#EEF3F8;background:rgba(10,16,22,.7);border-radius:99px;
  padding:2px 9px;margin-top:2px}
@keyframes flyup{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  14%{opacity:1;transform:translate(-50%,0) scale(1.1)}
  30%{transform:translate(-50%,-12px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-150px) scale(.92)}
}

/* Whoever is talking. At fifteen tiles this is what stops it being a wall. */
.calltile.speaking{box-shadow:inset 0 0 0 3px var(--live),0 0 18px rgba(27,139,76,.35)}

/* --- who is already in, on the way in ------------------------------------- */
.prehere{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;
  border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:12.5px}
.hereav{display:inline-flex;flex:none}
.heredot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent-soft);color:var(--claim);border:2px solid var(--bg);
  font-size:9.5px;font-weight:600;margin-left:-8px}
.heredot:first-child{margin-left:0}

@media (max-width:760px){
  .schedrow{grid-template-columns:1fr 1fr}
  .meetactions{width:100%}
  .bigbtn{flex:1}
}

/* --- email addresses and remote support ----------------------------------- */
.emailnudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;
  padding:11px 14px;border-radius:12px;background:var(--signal-soft);
  border:1px solid var(--signal);font-size:12.5px}
.emailnudge b{flex:none}
.emailnudge span{flex:1;min-width:220px;color:var(--muted)}
.emailnudge .linkbtn{flex:none;font-weight:600}

.dirscroll{max-height:52vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--r-2);margin:14px 0 4px}
.dirtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dirtable th{position:sticky;top:0;z-index:1;text-align:left;padding:8px 10px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line)}
.dirtable td{padding:6px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dirtable tr:last-child td{border-bottom:0}
.dirtable td:first-child{white-space:nowrap}
.dirtable input{width:100%;padding:7px 10px;font-size:12.5px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--text);font-family:"IBM Plex Mono",ui-monospace,monospace}
.dirtable input:focus{outline:none;border-color:var(--claim);box-shadow:0 0 0 3px var(--accent-soft)}

.remotebtn{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;
  border:1px solid var(--claim);font-size:11.5px;font-weight:600;
  transition:background .14s,color .14s}
.remotebtn:hover{background:var(--claim);color:var(--on-accent)}
#teamRows td .subtle.mono{display:block;margin-top:2px;font-size:10.5px}
/* The row you arrived at, so a "Set up" from one person's line does not drop
   you into a table of ten identical boxes. */
.dirtable tr.flash td{animation:flashrow 1.6s ease-out}
@keyframes flashrow{0%,40%{background:var(--accent-soft)}100%{background:transparent}}
#v-team .padhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
#v-team .padhead p{max-width:60ch;margin:0}
#v-team .padhead .linkbtn{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:99px}
.rdnote{margin-top:6px;line-height:1.6}
.rdnote b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.rdsteps{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line)}
.rdget{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:99px;
  background:var(--claim);color:var(--on-accent);font-size:12.5px;font-weight:600;
  text-decoration:none;transition:filter .14s,transform .12s}
.rdget:hover{filter:brightness(1.08)}
.rdget:active{transform:scale(.97)}
.rdlist{margin:12px 0 4px;padding-left:20px;font-size:12px;color:var(--muted);line-height:1.7}
.rdlist li{margin-bottom:5px}
.rdlist b{color:var(--text)}
.rdsteps .modalsub{margin:6px 0 0;font-size:11.5px}

/* A modal has to stay usable when its content is taller than the window.
   Adding the remote-support steps to the profile pushed Save off the bottom
   of a laptop screen, where it could not be reached at all. */
.modalbox{max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}
.modal{padding:24px 16px;align-items:flex-start}
/* Centring is a desktop behaviour. On a phone the dialog is a sheet that comes
   up from the bottom edge, and this rule was quietly cancelling that. */
@media (min-height:760px) and (min-width:861px){ .modal{align-items:center} }

/* Deployed but not restarted. Admin-only, because only an admin can fix it. */
.stalebar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--warn);color:#1A1205;font-size:12.5px;box-shadow:var(--sh-2)}
.stalebar b{flex:none}
.stalebar span{flex:1;min-width:0}
.stalebar code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  background:rgba(0,0,0,.14);border-radius:4px;padding:1px 6px}
.stalebar button{flex:none;width:24px;height:24px;border-radius:50%;font-size:17px;line-height:1;
  color:#1A1205}
.stalebar button:hover{background:rgba(0,0,0,.12)}
body.hasbar #app{padding-top:40px}
/* The call takes the whole window and its own controls live at the top edge.
   A fixed bar above it covers Invite and Minimise, and a restart is not
   something anybody acts on mid-call anyway. */
body.incall .stalebar{display:none}

/* --- reactions you cannot miss --------------------------------------------- */
.fly{font-size:60px}
.fly span{font-size:12px;padding:3px 11px;margin-top:4px;font-weight:600}
@keyframes flyup{
  0%{opacity:0;transform:translate(-50%,18px) scale(.5)}
  12%{opacity:1;transform:translate(-50%,0) scale(1.25)}
  24%{transform:translate(-50%,-8px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-190px) scale(.9)}
}
.fly{animation-duration:3s}
/* A chip that stays put, for anyone who blinked. */
.tilereact{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;
  background:rgba(10,16,22,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.tilereact.pop{animation:reactpop .4s cubic-bezier(.2,.8,.3,1)}
@keyframes reactpop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* --- choosing a background ------------------------------------------------- */
.bgbar{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:min(440px,92vw);padding:12px 14px;border-radius:16px;background:#1B242E;
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-3);animation:popIn .14s ease-out}
.bgtitle{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#93A3B3;
  margin-bottom:9px;font-weight:600}
.bgnote{text-transform:none;letter-spacing:0;color:#F0C775;font-weight:400}
.bgopts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bgopts button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 4px;
  border-radius:10px;font-size:10.5px;color:#93A3B3;transition:background .14s,color .14s}
.bgopts button:hover{background:rgba(255,255,255,.08);color:#EEF3F8}
.bgopts button.on{background:rgba(46,99,172,.28);color:#EEF3F8}
.bgswatch{width:100%;aspect-ratio:16/10;border-radius:7px;border:1px solid rgba(255,255,255,.14)}
.bg-none{background:linear-gradient(135deg,#3A4550,#20272E)}
.bg-none{position:relative}
.bg-none::after{content:"—";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.5);font-size:13px}
.bg-blur{background:linear-gradient(135deg,#3A4550,#20272E);filter:blur(2px)}
.bg-blur-strong{background:linear-gradient(135deg,#3A4550,#20272E);filter:blur(4px)}
.bg-slate{background:linear-gradient(135deg,#243240,#0E1318)}
.bg-simplify{background:linear-gradient(135deg,#2E63AC,#14243A)}
.bg-warm{background:linear-gradient(135deg,#4A4643,#1C1A18)}
.bg-forest{background:linear-gradient(135deg,#1B5E43,#0C1F18)}
@media (max-width:520px){ .bgopts{grid-template-columns:repeat(3,1fr)} }

/* ==========================================================================
   Phones.
   The desktop layout is columns side by side; a phone has room for one at a
   time. The rail becomes a bottom tab bar where a thumb can reach it, lists
   and threads take turns, and tables become cards.
   ========================================================================== */
@media (max-width: 860px) {
  /* The status bar sits on top of the page in the home-screen app — that is
     what black-translucent means — so the grid starts below it. border-box
     keeps 100dvh honest while the padding does it. */
  #app{grid-template-columns:1fr;height:100dvh;padding-top:env(safe-area-inset-top,0px)}

  /* --- the rail becomes a bottom bar -------------------------------------- */
  .rail{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    flex-direction:row;align-items:stretch;border-right:0;
    border-top:1px solid var(--glass-edge);
    /* Two things at once: clear the iPhone's home indicator, which is drawn
       over the bottom of the screen and was sitting across the tab labels; and
       keep a few pixels of breathing room on a device that reports no inset at
       all, where the labels were otherwise touching the edge of the glass. */
    padding-bottom:max(env(safe-area-inset-bottom,0px),6px);
    background:var(--bg);
    box-shadow:0 -2px 16px rgba(16,32,43,.10);
  }
  .brand,.wa-state,.quicklinks,.shiftchip,.notifybtn{display:none}
  /* An id beats a class, so this one needs naming explicitly. It stays — just
     as the swatches, without the label — because dark mode matters more on a
     phone than on a desk. */
  #themeBtn{display:flex;width:auto;margin:0;padding:6px 8px;border:0;background:none}
  #themeBtn .btnlabel{display:none}
  /* The right-hand panel is desktop furniture. Hiding it with the list was not
     enough: list mode showed every non-thread column, which brought it back
     underneath the conversations. */
  #v-inbox .col.side{display:none !important}
  .nav{flex:1;display:flex;padding:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  /* Share the width rather than each demanding a minimum — five tabs plus the
     avatar cluster added up to more than a 412px phone, and the last tab was
     pushed off the edge where it could not be tapped at all. */
  .nav button{
    flex:1 1 0;min-width:0;flex-direction:column;gap:3px;
    padding:8px 2px 6px;border-radius:0;border-left:0;font-size:9.5px;
    justify-content:flex-start;text-align:center;overflow:hidden;
  }
  .nav button > span:not(.pill){
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav button .navico{width:21px;height:21px}
  .nav button.sel{background:none;color:var(--claim);border-left:0;box-shadow:inset 0 2px 0 var(--claim)}
  .nav .pill{position:absolute;top:4px;left:50%;margin-left:4px}
  .nav button{position:relative}
  /* The avatar is how you reach your own profile, and sign-out has to stay
     reachable — hiding both left no way out of the app on a phone. Only the
     name and role text go, because there is no room for them. */
  .whoami{flex:none;border-top:0;padding:0 6px;display:flex;align-items:center;gap:5px}
  .whoami .mewho{display:none}
  .meav{width:32px;height:32px}
  #signout{width:32px;height:32px;display:grid;place-items:center}

  /* Content sits above the bar — all of it, not most of it.
     --barh is the bar measured after it has been laid out (measureBar in
     app.js), because its height depends on the device's inset and on how the
     labels wrap, neither of which can be written down here. The 62px is only
     what to use for the one frame before that lands. */
  .view{padding-bottom:calc(var(--barh,62px) + 6px)}
  body.hasbar #app{padding-top:0}
  body.hasbar .view{padding-top:calc(44px + env(safe-area-inset-top,0px))}

  /* --- one pane at a time -------------------------------------------------- */
  #v-inbox,#v-chat{grid-template-columns:1fr}
  #v-inbox .col,#v-chat .col{border-right:0}
  /* The side panel is desktop furniture; its contents live in the thread head
     and the modals on a phone. */
  #v-inbox > .col:last-child{display:none}
  #v-inbox .col:not(.thread),#v-chat .col:not(.thread){display:none}
  #v-inbox.list .col:not(.thread),#v-chat.list .col:not(.thread){display:flex}
  #v-inbox.list .thread,#v-chat.list .thread{display:none}

  /* --- touch sizing -------------------------------------------------------- */
  .chat{padding:11px 12px}
  .chat .nm{font-size:14px}
  .linkbtn,.claimbtn,.fbtn{min-height:34px}
  .theadbtns{gap:4px;flex-wrap:wrap}
  .thead{padding:9px 12px}
  .thead h2{font-size:15px}
  .msgs{padding:10px 12px}
  .msg{max-width:88%}
  .cbox.pill{border-radius:22px}
  .cbox.pill textarea{font-size:16px}   /* 16px stops iOS zooming on focus */
  input,select,textarea{font-size:16px}
  .pad{padding:16px 14px}

  /* --- tables become cards ------------------------------------------------- */
  #v-team table,#v-att table,.dirtable{display:block}
  #v-team thead,#v-att thead{display:none}
  #v-team tbody,#v-att tbody{display:block}
  #v-team tr,#v-att tr{
    display:block;margin-bottom:10px;padding:12px 14px;border-radius:var(--r-3);
    border:1px solid var(--glass-edge);background:var(--glass-2);
  }
  #v-team td,#v-att td{display:flex;justify-content:space-between;gap:12px;
    padding:4px 0;border:0;text-align:right}
  #v-team td:first-child,#v-att td:first-child{
    font-weight:600;font-size:14px;display:block;text-align:left;margin-bottom:6px}
  #v-team td:last-child,#v-att td:last-child{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;
    text-align:left;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
  .rowform{flex-direction:column;align-items:stretch}
  .rowform input,.rowform select,.rowform button{width:100%}

  /* --- modals become sheets ------------------------------------------------ */
  .modal{padding:0;align-items:flex-end}
  .modalbox,.modalbox.wide{
    width:100%;max-width:100%;max-height:92dvh;
    border-radius:18px 18px 0 0;border-bottom:0;
    /* A sheet comes up to the bottom edge, so its last button was landing
       under the home indicator. */
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
    animation:sheetup .22s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes sheetup{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
  .linkbtns{position:sticky;bottom:0;background:var(--bg);padding-top:10px;
    margin-top:4px;border-top:1px solid var(--line-soft)}

  /* --- the call, in portrait ----------------------------------------------- */
  .callhead{padding:9px 12px}
  .callhbtns .callghost span{display:none}
  .calltiles{grid-template-columns:1fr !important;gap:8px}
  .calltiles[data-n="2"],.calltiles[data-n="3"],.calltiles[data-n="4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .calltiles.stage{grid-template-columns:1fr !important;grid-template-rows:1fr auto}
  .calltiles.stage .calltile{grid-column:1}
  .calltiles.stage .presenting{grid-row:1;grid-column:1}
  .callctl{gap:7px;padding:10px 10px 16px;flex-wrap:wrap}
  .callbtn{width:46px;height:46px}
  .callbtn.hangup{width:58px}
  .callghost.danger{width:100%;order:9;margin-top:4px}
  .callside{position:absolute;inset:auto 0 0 0;height:60dvh;width:auto;z-index:5;
    border-radius:16px 16px 0 0}
  .bgbar,.reactbar{width:min(92vw,400px)}
  .bgopts{grid-template-columns:repeat(3,1fr)}

  /* --- odds and ends ------------------------------------------------------- */
  .meethero{flex-direction:column}
  .meetactions{width:100%}
  .bigbtn{flex:1}
  .schedrow{grid-template-columns:1fr}
  .stalebar{font-size:11.5px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
  .stalebar span{display:none}
  /* Above the tab bar, whatever the tab bar turns out to be. */
  .toast{bottom:calc(var(--barh,62px) + 12px);left:12px;right:12px;transform:none;max-width:none}
}

/* The back arrow only exists on a phone; on a desktop both panes are visible. */
.backbtn{display:none;place-items:center;width:34px;height:34px;border-radius:50%;
  flex:none;margin-right:2px;color:var(--muted)}
.backbtn:hover{background:var(--raised);color:var(--text)}

/* Declared after the base rule above so source order puts it on top. */
@media (max-width: 860px){ .backbtn{display:grid} }

/* --- four tabs and a More sheet -------------------------------------------- */
.morebtn{display:none}
@media (max-width: 860px){
  /* Only the first four screens get a tab. */
  .nav button[data-v]:nth-of-type(n+5){display:none}
  .morebtn{
    display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:3px;
    padding:8px 2px 6px;font-size:9.5px;position:relative;color:var(--muted);
  }
  .nav{overflow:visible}
}
.morelist{display:grid;gap:4px;margin:14px 0 10px}
.morelist button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px;
  border-radius:12px;font-size:14px;color:var(--text);text-align:left}
.morelist button:hover{background:var(--raised)}
.morelist button .pill{margin-left:auto}
.moretools{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line-soft)}
.moretools button{flex:1;min-width:92px;padding:10px;border-radius:10px;
  border:1px solid var(--line);font-size:12.5px}
.moretools button.warn{color:var(--warn);border-color:var(--warn)}

/* A group join or leave. Not a bubble: it is the conversation reporting on
   itself, so it sits centred between messages rather than taking a side, and
   stays quiet enough not to compete with what people actually said. */
.msg.notice{align-self:center;max-width:min(420px,86%);background:transparent;
  border:1px solid var(--line);color:var(--dim);border-radius:20px;
  padding:5px 14px;text-align:center;font-size:12.5px}
.msg.notice .tx{white-space:normal;font-style:italic}
.msg.notice .tm{text-align:center;margin-top:1px;opacity:.8}


/* ===========================================================================
   Phone: take the furniture off the screen
   ---------------------------------------------------------------------------
   Every message was carrying four icon buttons and a floating emoji button,
   permanently, on a 6in screen. That was my doing: on a desktop those appear on
   hover, and when the phone layout went in I kept them visible on touch because
   there is no hover to reveal them with - which turned "appears when you want
   it" into "five controls per message, forever". On a thread of ten messages
   that is fifty controls competing with the words.

   A touch screen already has the right gesture: tap the message you mean. One
   message is selected at a time and only that one shows its actions. Nothing is
   removed, and nothing needs learning - the icons appear where they always did.
   =========================================================================== */

@media (hover: none) {
  /* display, not opacity: at opacity 0 they still take the space, which is
     what pushed the timestamp around and made the rows feel cramped. */
  .msg .acts { display: none; }
  .msg.sel .acts { display: flex; }
  .msg .reactbtn { display: none; }
  .msg.sel .reactbtn { display: inline-flex; opacity: 1; }

  .msg.sel { box-shadow: 0 0 0 2px var(--accent-line); }
  .msg .acts .iconbtn, .msg .reactbtn { opacity: 1; }
}

@media (max-width: 860px) {
  /* Bubbles were close to full width with desktop padding, so two short
     messages filled the screen. */
  .msg { max-width: 86%; padding: 6px 10px; border-radius: 10px; font-size: 14.5px; }
  .msg .by { font-size: 10.5px; margin-bottom: 1px; }
  .msg .tx { font-size: 14.5px; line-height: 1.42; }
  .msg .tm { font-size: 9.5px; margin-top: 2px; }
  .whorole { font-size: 9px; letter-spacing: .04em; opacity: .75; }
  .msg .avatar.xs { width: 20px; height: 20px; font-size: 9px; }

  /* The composer had five controls in one row, two of which did the same
     thing: the + and the upload arrow both open the file picker. */
  #iUploadBtn { display: none; }
  .cbox { gap: 5px; padding: 5px 7px; }
  .cbox textarea { font-size: 15px; min-width: 0; }
  .ctools { gap: 2px; }
  .ctool { width: 32px; height: 32px; }
  .cplus, .attach { width: 34px; height: 34px; flex: 0 0 auto; }
  .csend, .send { flex: 0 0 auto; }

  /* Useful, but not worth two lines under every composer. */
  .csub {
    font-size: 10.5px; margin-top: 3px; opacity: .7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}


/* Editing a message, in the bubble it lives in. */
.msg .edited{margin-left:5px;font-style:italic;opacity:.75}
.msg.editing{box-shadow:0 0 0 2px var(--accent-line)}
.editbox{
  width:100%;min-height:38px;max-height:40vh;resize:none;box-sizing:border-box;
  font:inherit;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:6px 8px;line-height:1.4;
}
.editbox:focus{outline:none;border-color:var(--claim)}
.editrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:6px}
.editsave{
  background:var(--claim);color:var(--on-accent);border:0;border-radius:6px;
  padding:5px 14px;font-size:12.5px;font-weight:600;
}
.editsave:disabled{opacity:.6}
@media (max-width:860px){
  .editrow{gap:14px}
  .editsave{padding:8px 18px;font-size:13.5px}
}



/* ===========================================================================
   Calling
   ---------------------------------------------------------------------------
   One panel that is a keypad when idle and the call when busy. Controls used to
   live in a strip along the bottom of the window, which meant looking in two
   places for one phone. The strip survives only for the case it was actually
   good at: you have walked off to read the customer's messages and still need
   to hang up.
   =========================================================================== */
.callstate{font-size:12px;color:var(--dim);border:1px solid var(--line);
  border-radius:20px;padding:4px 12px;white-space:nowrap}
.callstate.on{color:var(--live);border-color:var(--live)}
/* Connected but not registered on the SIP gateway: outbound calls work,
   incoming ones never arrive. It deserves its own colour, because for days it
   looked exactly like "Ready". */
.callstate.warn{color:var(--warn);border-color:var(--warn)}

.dialwrap{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.dialer{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}

#callNumber{width:100%;box-sizing:border-box;font-size:24px;text-align:center;
  letter-spacing:.01em;padding:13px 10px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg);color:var(--text);font-family:inherit}
#callNumber:focus{outline:none;border-color:var(--claim)}

.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.keys button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:10px 0 8px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--text);font-family:inherit;line-height:1}
.keys button b{font-size:19px;font-weight:500}
.keys button i{font-style:normal;font-size:8.5px;letter-spacing:.12em;color:var(--dim);height:9px}
.keys button:active{background:var(--raised);transform:scale(.97)}

.dialrow{display:flex;gap:9px;align-items:stretch}
.wipe{flex:0 0 52px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--muted);font-size:17px;font-family:inherit}
.callgo{flex:1 1 auto;background:var(--live);color:#fff;border:0;border-radius:11px;
  padding:14px;font-size:16px;font-weight:600;font-family:inherit}
.callgo:disabled{opacity:.55}

/* --- the same panel, mid-call ------------------------------------------- */
#dialLive{text-align:center;padding:4px 0 2px}
.livewho{font-size:19px;font-weight:600;margin-bottom:2px;word-break:break-word}
.livenum{font-size:13px;color:var(--muted);min-height:16px}
.livetime{font-size:14px;color:var(--live);font-variant-numeric:tabular-nums;margin-top:8px;font-weight:500}
.callflow{font-size:11px;color:var(--dim);margin-top:4px}
.callflow.bad{color:var(--warn);font-weight:600}

.livegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 0}
.livebtn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0 10px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  color:var(--text);font-size:11.5px;font-family:inherit}
.livebtn span{font-size:16px;line-height:1}
.livebtn.on{background:var(--claim);border-color:var(--claim);color:var(--on-accent)}
.keys.tone{margin:12px 0 0}
.keys.tone button b{font-size:17px}
.callend{width:100%;margin-top:14px;background:var(--warn);color:#fff;border:0;
  border-radius:11px;padding:14px;font-size:16px;font-weight:600;font-family:inherit}

/* --- audio settings, folded away ---------------------------------------- */
.audioset{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}
.audioset summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:12px;color:var(--muted);list-style:none}
.audioset summary::-webkit-details-marker{display:none}
.micbar{flex:1 1 auto;height:5px;border-radius:4px;background:var(--raised);overflow:hidden}
.micbar span{display:block;height:100%;width:0;background:var(--live);transition:width .06s linear}
.microw{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:12px;color:var(--muted)}
.microw span{flex:0 0 72px}
.microw select{flex:1 1 auto;min-width:0;font-size:12px;padding:6px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--text)}

/* --- the log ------------------------------------------------------------- */
.calllog{min-width:0}
.loghead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.loghead h3{margin:0;font-size:14px}
.callrow{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:11px 2px;
  border-bottom:1px solid var(--line-soft)}
.callrow.missed .callstatus{color:var(--warn)}
.callwho b{font-weight:600}
.callwho .dim{color:var(--dim);font-size:12.5px;margin-left:8px}
.callmeta{grid-column:1;display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.callacts{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:12px}

/* --- recent calls / voicemail -------------------------------------------- */
.logtabs{display:flex;gap:4px;min-width:0}
.logtab{background:none;border:0;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--dim);padding:6px 2px;margin-right:12px;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.logtab.on{color:var(--text);border-bottom-color:var(--live)}
/* The count of messages nobody has listened to. Hidden at zero rather than
   showing a nought, because an empty mailbox should look empty. */
.vmdot{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums}

.vmrow{display:grid;gap:6px;padding:13px 2px;border-bottom:1px solid var(--line-soft)}
.vmrow audio{width:100%;height:34px;margin-top:2px}
.vmrow .callacts{grid-column:1;grid-row:auto;margin-top:2px}
/* A message nobody has heard carries a mark down its edge. Nothing shouts —
   the count on the tab is what you notice from across the room. */
.vmrow.unheard{border-left:3px solid var(--warn);padding-left:10px;margin-left:-13px}
.vmrow.unheard .callwho b{font-weight:700}
/* What the caller said. Set smaller and quieter than the name deliberately:
   it is a machine's best guess, useful for knowing whether a message needs
   listening to, not a substitute for having listened. */
.vmtext{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  white-space:pre-wrap;overflow-wrap:anywhere}
.vmtext.waiting{color:var(--dim);font-style:italic}
.linkbtn.danger{color:var(--warn)}

/* --- the strip, for when you are somewhere else -------------------------- */
.callbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:200;
  display:flex;align-items:center;gap:14px;background:var(--live);color:#fff;
  border-radius:30px;padding:9px 10px 9px 20px;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.callbarwho{font-weight:600;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbartime{font-variant-numeric:tabular-nums;opacity:.9;font-size:13.5px}
.callbarbtn{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:22px;
  padding:8px 16px;font-size:13.5px;font-family:inherit;font-weight:500}
.callbarbtn.hang{background:var(--warn)}

@media (max-width:860px){
  .dialwrap{grid-template-columns:1fr;gap:20px}
  .keys button{padding:13px 0 11px}
  .keys button b{font-size:21px}
  .callbar{left:12px;right:12px;bottom:76px;transform:none;justify-content:space-between;
    padding:9px 10px 9px 16px}
  .callacts{grid-column:1;grid-row:auto;margin-top:5px}
  .callrow{grid-template-columns:1fr}
}


/* --- somebody is ringing -------------------------------------------------- */
.ringing{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;background:rgba(8,14,22,.55);backdrop-filter:blur(3px)}
.ringinner{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px 30px;text-align:center;min-width:280px;max-width:min(360px,92vw);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ringlabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ringwho{font-size:22px;font-weight:600;margin:8px 0 2px;word-break:break-word}
.ringnum{font-size:13.5px;color:var(--muted);min-height:18px}
.ringacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ringno,.ringyes{border:0;border-radius:11px;padding:13px;font-size:15px;
  font-weight:600;font-family:inherit;color:#fff}
.ringno{background:var(--warn)}
.ringyes{background:var(--live)}
@media (max-width:860px){ .ringinner{padding:22px 20px} }

.calldebug{font-size:10.5px;color:var(--dim);margin:8px 0 0;text-align:center;
  font-variant-numeric:tabular-nums;min-height:13px}

/* ---------- canned replies ---------- */
/* The menu is the mention menu's box with a two-line row in it: the name and
   its group on top, the first line of the message underneath, because the name
   alone is not enough to tell two "engineer" replies apart. */
.cannedmenu button{display:block;padding:9px 11px}
.cannedmenu .cnhead{display:flex;align-items:center;gap:8px}
.cannedmenu .cnhead b{font-size:13px;font-weight:600}
.cannedmenu .cnbody{display:block;margin-top:2px;font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cncat{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:3px;
  padding:0 5px;white-space:nowrap}

.cnrow{display:flex;gap:14px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);margin-bottom:9px}
.cnrow.off{opacity:.62}
.cnmain{flex:1;min-width:0}
.cnrowhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cnrowhead b{font-size:14px}
.cnretired{font-size:10px;color:var(--warn,#a2662a);border:1px solid var(--line);
  border-radius:3px;padding:0 5px}
.cnfull{margin:5px 0 3px;font-size:12.5px;color:var(--dim);white-space:pre-wrap;line-height:1.5}
.cnacts{flex:none;display:flex;align-items:center;gap:4px}
.cnmove{width:26px;height:26px;border-radius:5px;border:1px solid var(--line);color:var(--dim);
  line-height:1;font-size:13px}
.cnmove:hover:not(:disabled){color:var(--claim);background:var(--accent-soft)}
.cnmove:disabled{opacity:.3}
.cnsub{margin:20px 0 9px;font-size:12px;color:var(--dim);font-weight:500}

/* The priority box on a signing party row. Narrow on purpose: it holds 1 or 2,
   and a wide box invites somebody to type a date into it. */
.sgpprio{display:flex;align-items:center;gap:4px;flex:none}
.sgpprio>span{font-size:12px;color:var(--dim)}
.sgpprio input{width:46px;text-align:center;padding:6px 4px}

/* ---------- departments: the three kinds of module ---------- */
.deptgroup{margin-bottom:18px}
.deptgroup h5{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;font-size:12.5px;font-weight:600}
.deptgroup h5 span{font-size:11px;font-weight:400;color:var(--dim)}
.deptpicks{display:grid;gap:6px}
.deptpick.adminonlypick{opacity:.55;cursor:not-allowed}
.deptpick.base{opacity:.72}
.deptpick.base input,.deptpick.adminonlypick input{cursor:not-allowed}

/* ---------- rearranging your own menu ---------- */
.navorder{display:grid;gap:6px;margin:4px 0 14px;max-height:52vh;overflow-y:auto;padding:2px}
.navrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-1,8px);background:var(--panel);cursor:grab;user-select:none;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .12s}
.navrow:hover{background:var(--raised);border-color:var(--accent-line,var(--line))}
.navrow:active{cursor:grabbing}
/* The row being carried. Faded and lifted, so the gap it will drop into is the
   thing the eye follows rather than the row itself. */
.navrow.dragging{opacity:.45;box-shadow:0 8px 20px rgba(22,32,43,.16);transform:scale(1.01)}
.navgrip{color:var(--dim);font-size:15px;line-height:1;letter-spacing:-2px;flex:none}
.navlabel{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- a little more give in the interface ---------- */
/* Nothing restyled. These are the places where something moved instantly and
   reads better moving over a sixth of a second — and every one of them is
   already switched off by the prefers-reduced-motion block above. */
.nav button{transition:background .14s ease,color .14s ease,box-shadow .18s ease}
.nav button:active{transform:translateX(1px)}
.navico{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.nav button.sel .navico{transform:scale(1.06)}

/* A long list should come to rest rather than stop dead. */
.opsscroll,.msgs,.navorder,.deptpicks,#cannedList,#appGrid{scroll-behavior:smooth}

/* Thin scrollbars that match the panel they sit in, instead of the browser's. */
.opsscroll,.msgs,.navorder,.mentionmenu,#cannedList{scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.opsscroll::-webkit-scrollbar,.msgs::-webkit-scrollbar,.navorder::-webkit-scrollbar,
.mentionmenu::-webkit-scrollbar,#cannedList::-webkit-scrollbar{width:9px;height:9px}
.opsscroll::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb,
.navorder::-webkit-scrollbar-thumb,.mentionmenu::-webkit-scrollbar-thumb,
#cannedList::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
.opsscroll::-webkit-scrollbar-thumb:hover,.msgs::-webkit-scrollbar-thumb:hover,
.navorder::-webkit-scrollbar-thumb:hover{background:var(--dim);border:2px solid transparent;
  background-clip:content-box}

/* A visible ring for anybody driving this from the keyboard, and only for
   them — :focus-visible, not :focus, so a mouse click does not draw one. */
.nav button:focus-visible,.linkbtn:focus-visible,.primary:focus-visible,
.ctool:focus-visible,.csend:focus-visible,.navrow:focus-visible,
.opsbtn:focus-visible{outline:2px solid var(--claim);outline-offset:2px;border-radius:6px}

/* Buttons that do something irreversible should feel like they took the press. */
.primary:active,.opsbtn:active,.fbtn:active{transform:translateY(1px)}

/* A dialog appearing out of nowhere is the one piece of motion people notice
   the absence of. popIn already exists; this puts it on the boxes that were
   still snapping in. */
#navModal:not([hidden]) .modalbox,#cannedModal:not([hidden]) .modalbox,
#appModal:not([hidden]) .modalbox{animation:popIn .14s cubic-bezier(.2,.7,.3,1) both}

/* ---------- accounting ---------- */
.acctbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.acctbar select{max-width:220px}
.acctspace{flex:1}
.acctseg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.acctseg button{padding:6px 12px;font-size:12.5px;color:var(--dim);border-right:1px solid var(--line)}
.acctseg button:last-child{border-right:0}
.acctseg button.on{background:var(--accent-soft);color:var(--claim);font-weight:600}
.accttiles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.accttile{border:1px solid var(--line);border-radius:9px;padding:12px 16px;background:var(--panel);
  min-width:200px}
.accttile span{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.04em}
.accttile b{display:block;font-size:19px;font-weight:700;margin:2px 0}
.accttile i{font-size:11.5px;color:var(--dim);font-style:normal}
.acctbadge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.acctbadge.s-paid{color:#1e7a45;background:rgba(46,160,90,.13)}
.acctbadge.s-overdue{color:#a4301f;background:rgba(190,60,45,.13)}
.acctbadge.s-part{color:#8a5a11;background:rgba(190,140,30,.15)}
.acctbadge.s-pending{color:var(--claim);background:var(--accent-soft)}
.acctbadge.s-void{color:var(--dim);background:var(--raised)}
tr.acct-overdue td{background:rgba(190,60,45,.045)}
.acctrec.under td{background:rgba(190,60,45,.06)}
.acctrec.over td{background:rgba(190,140,30,.07)}
.acctrec.matched td{background:rgba(46,160,90,.05)}

.invlines{display:grid;gap:6px;margin:6px 0 10px}
.invline{display:grid;grid-template-columns:1fr 70px 110px 64px 110px 28px;gap:6px;align-items:center}
.invline input{padding:7px 9px;font-size:13px}
.invline .ilq,.invline .ilv{text-align:center}
.invline .ilu{text-align:right}
.invline .iltot{text-align:right;font-size:13px;font-weight:600;white-space:nowrap}
.invline .ildrop{color:var(--dim);font-size:17px;line-height:1;padding:0}
.invline .ildrop:hover{color:var(--warn,#a4301f)}
@media (max-width:720px){.invline{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .invline .ild{grid-column:1/-1}.invline .iltot{grid-column:1/-1;text-align:left}}
.invtotals{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;max-width:320px;
  margin-left:auto}
.invtotals div{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px}
.invtotals div span{color:var(--dim)}
.invtotals div.big{font-size:16px;font-weight:700;border-top:1px solid var(--line);margin-top:6px;
  padding-top:8px}
.invtotals div.big span{color:var(--ink,var(--text))}
.acctsetup details{margin-bottom:8px}

/* ---------- bank accounts ---------- */
.bankpicks{display:grid;gap:6px;margin:4px 0 12px}
.bankpick{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:7px;cursor:pointer;transition:background .12s,border-color .12s}
.bankpick.on{border-color:var(--accent-line,var(--claim));background:var(--accent-soft)}
.bankpick span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bankpick b{font-size:13px}
.bankpick i{font-size:10.5px;color:var(--dim);font-style:normal}
.bankpick small{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.banklist{display:grid;gap:6px;margin-bottom:10px}
.bankrow{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:7px;
  padding:9px 11px}
.bankmain{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.bankmain pre{flex-basis:100%;margin:4px 0 0;font:11.5px/1.5 inherit;color:var(--dim);
  white-space:pre-wrap}
.bankadd{display:grid;grid-template-columns:1fr 90px auto;gap:7px;align-items:center;
  margin-bottom:12px}
.bankadd textarea,.bankadd button{grid-column:1/-1}