/* here-rail.css — the conversations, beside the room.
   ────────────────────────────────────────────────────────────────────────────
   Ported from glass/rooms.html, where it was the only place in the product a
   person could see which SCircles they stand in. That is why it moves into the
   package: the door has no rail at all and UNIVERSE has threads, so "which of
   my circles am I in, and what is happening in them" was answerable on exactly
   one surface out of three.

   PORTED, NOT REDESIGNED. Structure, sections and behaviour are rooms.html's;
   only the tokens are the package's, so the rail and the transcript stop
   speaking two different vocabularies.

   THAT TENSION IS RESOLVED. The kind ticks used to carry six hues while
   ROOM-DESIGN.md says colour is "semantic only: green ok/presence, amber warn,
   red destructive" — and two of the six wore reserved colours outright: team was
   a green next to .liv's ok-green, and dm and prime were ambers, so every private
   line flew a caution flag. The section headings already name the kind, which the
   row comment below has said all along. The hues are gone; the tick is a neutral
   rule. Decided 2026-08-06 by the operator, on the design law's own terms.
   ──────────────────────────────────────────────────────────────────────────── */
.here-chat .rail{
  --rail-w:288px;
  width:var(--rail-w);flex:none;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid rgba(255,255,255,.09);
  background:rgba(28,28,33,.66);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);
}
/* Three things now, so the name TAKES the slack rather than the row distributing it:
   space-between with a third child would have parked the way-back in the middle of the
   header, equidistant from everything and belonging to nothing. */
.here-chat .rail .rhd{display:flex;align-items:center;justify-content:flex-start;gap:.4rem;
  padding:11px 12px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
.here-chat .rail .me{flex:1;min-width:0;font-size:13px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The way back. Quiet on purpose: it is the least interesting thing a person can do on
   this surface, and the operator's whole point is that they should not need to leave.
   It reads as a word rather than a control — an arrow with no name is a mystery, and a
   filled button would compete with + room for a job nobody came here to do. */
.here-chat .rail .home{flex:none;color:var(--soft);font:600 11px/1 system-ui;
  text-decoration:none;padding:5px 7px;border-radius:7px;white-space:nowrap;
  transition:color .12s var(--smooth),background .12s var(--smooth)}
.here-chat .rail .home::after{content:"\2197";margin-left:3px;opacity:.7}
.here-chat .rail .home:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.here-chat .rail .home:focus-visible{outline:2px solid var(--tint);outline-offset:1px}
.here-chat .rail .home[hidden]{display:none}
.here-chat .rail .me b{color:var(--ink);font-weight:600}
.here-chat .rail .mk{position:relative;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);color:var(--dim);border-radius:8px;
  font:600 11px/1 system-ui;padding:6px 8px;cursor:pointer;
  transition:transform .12s var(--smooth),border-color .12s var(--smooth)}
.here-chat .rail .mk:hover{border-color:var(--tint);color:var(--ink)}
.here-chat .rail .mk:active{transform:scale(.97)}

.here-chat .rail .find{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.09)}
.here-chat .rail .find input{width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);border-radius:999px;color:var(--ink);
  font:inherit;font-size:16px;padding:8px 12px;outline:0;
  transition:border-color .14s var(--smooth)}
.here-chat .rail .find input:focus{border-color:var(--tint);
  /* #0a84ff is Apple's systemBlue; this package's --tint is #0a6fd8. The halo was
   glowing a different blue than the border it surrounds. */
  box-shadow:0 0 0 3px rgba(10,111,216,.20)}

/* 5px of flank so a selected row reads as let INTO the plate rather than painted
   across it. The row's own padding gives 2px back, and gap 8->6 gives 2 more, so a
   name loses 1px of ellipsis budget, not 10. overscroll-behavior keeps a flick at
   the end of fifty rooms from scrolling the page behind it. */
.here-chat .rail .list{overflow-y:auto;overscroll-behavior:contain;flex:1;
  padding:4px 5px 18px;scrollbar-width:thin}
/* a section heading names the kind, so a row never has to */
/* Fifty rooms in four sections: the heading that tells you which kind you are reading
   scrolls away after six rows, and every row below it is then unlabelled. Sticky costs
   nothing and is the only change here that scales with the list.
   It carries the panel's own frost rather than an opaque bar — a solid swatch inside a
   backdrop-filter makes the blur visibly stop at the header, and matches the ground at
   exactly one scroll position. */
.here-chat .rail .sec{position:sticky;top:0;z-index:2;
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--soft);padding:10px 12px 4px;display:flex;justify-content:space-between;
  align-items:baseline;background:rgba(28,28,33,.72);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35)}
.here-chat .rail .sec em{font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--tint-hi);font-size:11px;font-weight:650;letter-spacing:0;text-transform:none}

/* one row = name, last word, unread. Dense on purpose: a rail is scanned. */
.here-chat .rail .r{display:grid;grid-template-columns:3px 1fr auto;align-items:center;
  gap:6px;padding:5px 10px 5px 7px;cursor:pointer;border:0;background:none;width:100%;
  border-radius:9px;text-align:left;color:inherit;font:inherit;
  transition:background .12s var(--smooth),box-shadow .16s var(--smooth)}
/* WHERE I AM, WHAT IS WAITING, WHAT I AM TOUCHING — three facts that were sharing two
   signals. Measured on the deployed surface: .on and :active both composited to
   #242429, byte-identical, and :hover sat one step below at #1f1f24. So the room you
   are STANDING IN looked like a room being pressed, and nearly like one under the
   mouse. Worse, .on and .unread both set font-weight:640, so "I am here" and "someone
   is waiting" were the same mark.
   Now: hover and press are washes of light and carry no material at all — fifty
   embossed rows would be a jewellery box. The current room is the one OBJECT on the
   plate: the send button's own grammar (a lit top edge, a dark lip, a body that ramps)
   at a tenth of its amplitude, in the rail's dark alloy rather than silver. Unread
   keeps the ink and the weight; being here takes the material. One fact each. */
/* ── THE PHONE RULE ────────────────────────────────────────────────────────────
   Everything in this rail clears WCAG 2.2 SC 2.5.8's floor of 24x24 already. None
   of it clears SC 2.5.5 and Apple's HIG at 44, and this is the surface whose stated
   bar is parity with the messengers people hold in one hand. Measured 2026-08-24 at
   390px: rows 379x40, the search field 371x36, `+ room` and `+ dm` 56x25 and 45x25
   with 4.2px between them.

   ONLY UNDER 760px, which is the same breakpoint the rail already uses to become a
   full-bleed overlay. A pointer is not a thumb and 40px rows on a desk are density
   the reader is choosing; widening them there would cost rooms per screen and buy
   nothing. The rows gain 4px, which is one room lost per twelve screens — and a row
   is the most-tapped thing on the surface.

   The two `mk` buttons get the gap as well as the size: 4.2px between two 25px
   controls is one mis-tap, and it was the tightest pair measured anywhere here.
   ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  /* Under this breakpoint the rail IS the viewport (position:absolute;inset:0), so its
     header sits on the notch and its list runs into the home indicator. Offered by the
     host, 0px when not. This one IS a layout question, so it stays on width. */
  .here-chat .rail .rhd{padding-top:calc(11px + var(--sat,0px));
    padding-left:calc(12px + var(--sal,0px));padding-right:calc(12px + var(--sar,0px))}
  .here-chat .rail .list{padding-bottom:calc(8px + var(--sab,0px))}
}
/* POINTER, NOT WIDTH. These were written under `max-width:760px` — the breakpoint the
   rail already uses to become a full-bleed overlay — and that is a LAYOUT question. The
   size of a target is an INPUT question, and the two do not have the same answer: a
   768px iPad is above the layout breakpoint and is still operated with a thumb, so it
   kept 40px rows and a 28px close control while the phone got 44. `pointer:coarse` asks
   the thing actually being asked. A desk with a touchscreen gets them too, which is
   right. Measured 2026-08-24: every target-size finding that survived the width-gated
   version was on tablet or desk, and every one of them on tablet was wrong. */
@media (pointer:coarse){
  .here-chat .rail .r{min-height:44px}
  .here-chat .rail .find input{padding:12px 14px}
  .here-chat .rail .mk{min-height:44px;padding:6px 12px}
  .here-chat .rail .rhd{gap:8px}
}

.here-chat .rail .r:hover{background:rgba(255,255,255,.045)}
.here-chat .rail .r:active{background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.40)}
.here-chat .rail .r.on{
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.058) 46%,
    rgba(255,255,255,.034) 55%,rgba(255,255,255,.072));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.36),
    0 1px 2px rgba(0,0,0,.35)}
/* declared AFTER :hover so the selected row still answers a mouse — the two rules are
   the same specificity, and a selected row that gives no feedback reads as disabled */
.here-chat .rail .r.on:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075) 46%,
    rgba(255,255,255,.05) 55%,rgba(255,255,255,.09))}
.here-chat .rail .r.on:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.40)}
.here-chat .rail .r .tick{width:3px;height:15px;border-radius:2px;
  background:rgba(255,255,255,.14);opacity:.55}
.here-chat .rail .r.on .tick{opacity:1}
.here-chat .rail .r .nm{min-width:0}
.here-chat .rail .r .n1{display:block;font-size:13.5px;line-height:1.3;font-weight:500;
  letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.here-chat .rail .r .n2{display:block;font-size:11px;line-height:1.25;color:var(--soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-1px}
.here-chat .rail .r.unread .n1{color:var(--ink);font-weight:640}
.here-chat .rail .r .end{display:flex;align-items:center;gap:5px;flex:none}
/* presence is the ONLY thing wearing ok-green, and it has one source */
.here-chat .rail .r .liv{width:5px;height:5px;border-radius:50%;background:#30d158;flex:none}
.here-chat .rail .mk.nt[disabled]{opacity:.5;cursor:default}
.here-chat .rail .r .atm{font:650 11px/1 system-ui;color:var(--tint-hi);letter-spacing:.03em}
/* unread is yours, so it wears the interaction colour, like own bubbles */
.here-chat .rail .pill{font:650 11px/1 system-ui;font-variant-numeric:tabular-nums;
  color:#fff;background:var(--tint);border-radius:999px;padding:3px 6px;min-width:18px;
  text-align:center}

/* the app hub — HERE is the app store, so the doors live beside the rooms */
.here-chat .rail .app-row{display:grid;grid-template-columns:18px 1fr;align-items:center;
  gap:8px;padding:5px 12px 5px 7px;color:inherit;text-decoration:none;
  transition:background .12s var(--smooth)}
.here-chat .rail .app-row:hover{background:rgba(255,255,255,.04)}
.here-chat .rail .app-row .ic{font-size:14px;text-align:center;opacity:.9}
.here-chat .rail .app-row .an{font-size:13px;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.here-chat .rail .app-row .ab{display:block;font-size:11px;line-height:1.25;
  color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-1px}

/* a keyboard must be able to see where it is — every row here is a button */
/* --tint is 3.67:1 on the rail's ground: it clears WCAG 1.4.11's 3:1 for a non-text
   indicator by two thirds of a point and nothing more. --tint-hi is 8.7:1 and is the
   token the law already names for exactly this ("text-on-dark variant"). A focus ring
   is the one thing on screen that has to be found by someone who cannot see where the
   mouse is, so it should not be scraping a floor.
   The border-radius is dropped: it rounded the ELEMENT, so a circular control took a
   6px rectangle the instant a keyboard reached it. Each control already has its own. */
.here-chat .rail :focus-visible{outline:2px solid var(--tint-hi);outline-offset:-2px}

/* two panes on a wide surface, one at a time on a phone: the rail slides away
   and the room comes in from where it came (rooms.html WAY-051) */
.here-chat.railed{display:flex;align-items:stretch;min-height:0;
  /* a railed room is a SURFACE, not a card floating on the host's page, so it
     owns its ground. Without this the transcript shows whatever the host's body
     happens to be — which in a light theme on a dark host looked broken. */
  background:#0b0b0f}
.here-chat.railed > .panel{flex:1;min-width:0;border-radius:0;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;
  /* a room is a COLUMN that fills its pane: transcript above, composer pinned
     below. Every messenger worth copying does this — Telegram, iMessage,
     WhatsApp, Slack — and the reason is that a composer is where your hands
     already are, at the bottom edge, not floating under a short transcript. */
  display:flex;flex-direction:column;padding:0}

/* The prototype pins max-height:340px INLINE on the transcript, because it was a
   card on a page and had to stop somewhere. In a full-height room that caps the
   scroll region and leaves the composer sitting directly under it, near the top
   of a tall empty pane — which is exactly what it looked like. An inline style
   only yields to !important, so this is one of the few places that earns it. */
.here-chat.railed > .panel > .rows{
  flex:1;min-height:0;max-height:none!important;overflow-y:auto;
  display:flex;flex-direction:column;padding:14px 16px 4px}
/* messages sit at the BOTTOM and grow upward. margin-top:auto on the first child
   rather than justify-content:flex-end, which in a scroll container can push
   content out of reach at the top. */
.here-chat.railed > .panel > .rows > :first-child{margin-top:auto}

/* and the composer keeps the edge */
.here-chat.railed > .panel > .ask{margin:0;padding:10px 16px 6px}
.here-chat.railed > .panel > #hbud{padding:0 16px 12px}
.here-chat.railed > .panel > #htyping,
.here-chat.railed > .panel > #hthink{padding:0 16px}
/* ── the sheet: making a room, and opening a line ────────────────────────────────
   Not a modal. It opens between the search box and the list, so the rooms you
   already have stay visible while you name a new one — the list is the thing you
   check before you decide, and covering it would be covering the answer. */
.here-chat .rail .sheet{border-bottom:1px solid rgba(255,255,255,.09);
  padding:10px 9px 11px;display:flex;flex-direction:column;gap:7px;
  background:rgba(255,255,255,.04)}
.here-chat .rail .sheet[hidden]{display:none}
.here-chat .rail .shhd{display:flex;align-items:center;justify-content:space-between}
.here-chat .rail .shttl{font:600 12px/1 system-ui;letter-spacing:.02em;color:var(--ink)}
.here-chat .rail .shx{width:22px;height:22px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:var(--soft);font-size:11px;line-height:1;padding:0}
.here-chat .rail .shx:active{transform:scale(.92)}
.here-chat .rail .shname,
.here-chat .rail .shfind{width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);border-radius:9px;padding:7px 9px;
  color:var(--ink);font:500 13px/1.2 system-ui;outline:none}
.here-chat .rail .shname:focus,
.here-chat .rail .shfind:focus{border-color:var(--tint)}
.here-chat .rail .shname[hidden]{display:none}
.here-chat .rail .shppl{display:flex;flex-direction:column;gap:2px;
  max-height:184px;overflow-y:auto}
.here-chat .rail .shp{display:flex;align-items:center;gap:7px;width:100%;
  padding:6px 8px;border:0;border-radius:8px;background:none;cursor:pointer;
  color:var(--ink);font:500 13px/1.2 system-ui;text-align:left}
.here-chat .rail .shp:hover{background:rgba(255,255,255,.06)}
/* chosen is a STATE, so it is a filled mark and not a hover tint — a person who
   scrolled past a name must be able to see they picked it, without hovering. */
.here-chat .rail .shp.pick{background:rgba(255,255,255,.10)}
.here-chat .rail .shp.pick .shpn::before{content:"\2713 ";color:var(--tint);font-weight:700}
.here-chat .rail .shpn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.here-chat .rail .shpon{width:6px;height:6px;flex:none;border-radius:50%;
  background:#30d158}
.here-chat .rail .shnone{padding:8px 9px;color:var(--faint);font:500 12px/1.45 system-ui}
.here-chat .rail .shft{display:flex;align-items:center;gap:8px;min-height:30px}
.here-chat .rail .sherr{flex:1;min-width:0;color:var(--faint);font:500 11.5px/1.35 system-ui}

/* THE BUTTON IS THE COMPOSER'S. Deliberately the same metal as the send control in
   here-chat.css (`.ask .field>button`) — a specular sweep over a brushed body, a
   white top edge, a dark lip and a drop. The operator singled that button out, and a
   second primary action in a second material would make the surface look assembled
   from two products. Duplicated rather than shared because here-chat.css is
   GENERATED from the prototype and cannot be hand-edited to hold a common class; if
   the composer's metal is ever retuned, this moves with it. */
.here-chat .rail .shgo{flex:none;padding:0 14px;height:30px;border:none;border-radius:999px;
  cursor:pointer;font:600 12px/1 system-ui;color:#0a0a0a;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 43%,
    rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#fdfdfe,#dfdfe6 42%,#c9c9d2 58%,#efeff3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.22),
    0 2px 8px -2px rgba(0,0,0,.4);
  transition:transform .22s var(--smooth)}
.here-chat .rail .shgo:active{transform:scale(.94)}
.here-chat .rail .shgo[hidden]{display:none}

/* ── a search result ─────────────────────────────────────────────────────────────
   Takes over the list, because a hit IS a way into a room and the list is where
   rooms are. Two lines: where it was said and by whom, then the words themselves. */
.here-chat .rail .hit{display:flex;flex-direction:column;gap:2px;width:100%;
  padding:8px 10px;border:0;border-left:3px solid transparent;background:none;
  cursor:pointer;text-align:left;color:var(--ink)}
/* A paper hit is a link OUT, not a way into a room, so it renders as an anchor and
   arrives wearing the UA underline the buttons never had. */
.here-chat .rail a.hit{text-decoration:none}
.here-chat .rail .hit:hover{background:rgba(255,255,255,.06)}
.here-chat .rail .hit:active{background:rgba(255,255,255,.10)}
.here-chat .rail .hitw{font:600 11px/1.3 system-ui;color:var(--faint);
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.here-chat .rail .hits{font:500 12.5px/1.4 system-ui;color:var(--dim)}

@media (max-width:760px){
  .here-chat.railed{position:relative;overflow:hidden}
  .here-chat.railed > .rail{position:absolute;inset:0;width:auto;z-index:3;
    transition:transform .22s var(--smooth)}
  .here-chat.railed > .panel{transition:transform .26s var(--smooth)}
  .here-chat.railed.open > .rail{transform:translateX(-100%)}
  .here-chat.railed:not(.open) > .panel{transform:translateX(9%)}
}
@media (prefers-reduced-motion:reduce){
  .here-chat .rail *,.here-chat.railed > *{transition-duration:.01ms!important}
}