/* ============================================================
   THE ROOM LIST

   One row per chat a connection can see, with the switch that
   decides whether its messages are read at all.

   Deliberately NOT `.room` — that class is already the board's
   card (16-board.css, with .room-hd and .r-title). Two meanings
   for one class name is how two unrelated screens start
   restyling each other.
   ============================================================ */

.chn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 4px;
  border-bottom:1px solid var(--line-2);
}
.chn:last-child{border-bottom:0}

/*  The one visible difference between a room that is read and one that is
 *  merely known about. Everything else on the row is identical, so the switch
 *  and this edge are the whole signal.  */
.chn.on{
  border-left:2px solid var(--mint);
  padding-left:12px;
  margin-left:-14px;
  background:linear-gradient(90deg,
              color-mix(in oklab, var(--mint) 7%, transparent), transparent 55%);
}

.chn-who{
  flex:1 1 auto;
  min-width:0;                   /* or a long group name pushes the switch out */
  display:flex;
  flex-direction:column;
  gap:3px;
}
.chn-who b{
  font:600 14.5px/1.35 var(--ui);
  color:var(--ink);
  /*  Group names run long and arrive from other people's servers. One line,
   *  cut cleanly, rather than a row that grows to four.  */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chn-who .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chn .toggle{flex:0 0 auto}

/*  The filter tabs already have a .seg rule; this only makes the pressed one
 *  legible, since they were inert buttons until now and nothing styled the
 *  selected state.  */
.seg button[aria-selected="true"]{
  background:var(--lift);
  color:var(--ink);
}

@media (max-width:560px){
  .chn{gap:10px}
  .chn.on{margin-left:-10px;padding-left:8px}
  /*  The mark is decoration; the name and the switch are the row. On a narrow
   *  screen the name needs those 26 pixels more than the badge does.  */
  .chn > .mark{display:none}
}

/* ============================================================
   THE INBOX

   Twenty-six copies of the bell markup, one script filling them.
   ============================================================ */
.inbox-i{
  padding:11px 2px;
  border-bottom:1px solid var(--line-2);
}
.inbox-i:last-child{border-bottom:0}
.inbox-i b{display:block;font:600 13.5px/1.4 var(--ui);color:var(--ink)}
.inbox-i p{margin:3px 0 2px;font:400 12.5px/1.55 var(--ui);color:var(--ash)}
/*  Colour on the WORD, not a coloured block. A red panel for "a signal was
 *  refused" reads as an outage, and most refusals are the engine working. */
.inbox-i.bad  b{color:var(--rose)}
.inbox-i.warn b{color:var(--gold)}

/*  A count would need a number in the markup; a dot only claims "something".
 *  That is all the bell knows before it is opened. */
.iconbtn.bell.has-new{position:relative}
.iconbtn.bell.has-new::after{
  content:"";
  position:absolute;top:6px;right:6px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 2px var(--deep);
}

/* ============================================================
   THE ROUTE BUILDER

   `.pick` already exists (04-components.css). This is only the
   column that holds them: a bounded, scrollable list, because a
   customer with eighty-two rooms should not get a page eighty-two
   rows long before the account column is even visible.
   ============================================================ */
.picklist{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:6px;
  max-height:340px;
  overflow-y:auto;
  background:linear-gradient(160deg,rgba(255,255,255,.04),transparent);
}
.picklist > .pick{margin:0}
.picklist p{padding:12px 8px}

/* ============================================================
   THE LIVE SIGNAL FEED

   One row per signal: when, what was written, what the engine
   read, what happened. The outcome is the only coloured thing —
   a whole row tinted red for "no expiry on a fixed-time trade"
   reads as an outage rather than as a message that needs one
   more word in it.
   ============================================================ */
.sig{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 4px;
  border-bottom:1px solid var(--line-2);
}
.sig:last-child{border-bottom:0}
.sig-when{
  flex:0 0 74px;
  font:500 12px/1.6 var(--mono);
  color:var(--faint);
  white-space:nowrap;
}
.sig-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
/*  The message as they wrote it. pre-wrap because a signal is several lines
 *  and collapsing them loses the shape a trader recognises.  */
.sig-raw{
  font:500 13px/1.55 var(--mono);
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
}
.sig-read{font:400 12.5px/1.5 var(--ui);color:var(--ash)}
.sig-why{font:400 12.5px/1.5 var(--ui);color:var(--gold)}
.sig-out{
  flex:0 0 auto;
  align-self:center;
  font:600 11px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line);
}
.sig-out.ok  {color:var(--mint);border-color:color-mix(in oklab,var(--mint) 45%,var(--line))}
.sig-out.warn{color:var(--gold);border-color:color-mix(in oklab,var(--gold) 45%,var(--line))}
.sig-out.bad {color:var(--rose);border-color:color-mix(in oklab,var(--rose) 45%,var(--line))}

@media (max-width:640px){
  .sig{flex-wrap:wrap;gap:8px}
  .sig-when{flex:1 1 100%}
  .sig-out{align-self:flex-start}
}