/* here-launcher.css — the tray, and the surface an app opens into.
   The tile is the prototype's (.atile/.ai2/.an2, squircle mask, never
   border-radius); what is new is that a tile now says HOW it opens, because a
   person should know before they press whether a word arrives in the thread or
   a machine starts costing them money. */
.here-chat .ltray .atray{gap:10px}
.here-chat .ltray .atile{position:relative}
.here-chat .ltray .akind{display:block;font:600 9px/1 system-ui;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soft);margin-top:3px}
/* a machine is the one kind that spends — it says so before the press */
.here-chat .ltray .atile[data-kind="machine"] .akind{color:var(--tint-hi)}
.here-chat .ltray .atile[data-kind="machine"]::after{content:"";position:absolute;
  top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--tint)}

/* an app opens INSIDE the room, never in a tab: leaving the room to use an app
   is how a person stops being in the conversation. */
.here-chat .lsurface{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  background:var(--bg,#0b0b0f);animation:lsin .22s var(--smooth) both}
@keyframes lsin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.here-chat .lsurface .lshead{display:flex;align-items:center;gap:10px;flex:none;
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.10)}
.here-chat .lsurface .lstitle{font:600 13px/1 system-ui;color:var(--ink)}
.here-chat .lsurface .lsclose{margin-left:auto;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--dim);
  cursor:pointer;font-size:12px;line-height:1;
  transition:transform .12s var(--smooth),border-color .12s var(--smooth)}
.here-chat .lsurface .lsclose:hover{border-color:var(--tint);color:var(--ink)}
.here-chat .lsurface .lsclose:active{transform:scale(.94)}
.here-chat .lsurface iframe{flex:1;width:100%;border:0;background:#fff}
.here-chat .lsurface :focus-visible{outline:2px solid var(--tint);outline-offset:2px}

/* DAYLIGHT IS ONE SWITCH, NOT FIVE OPINIONS.
   These rules used to fire on @media (prefers-color-scheme:light) alone, while the
   package's master light sheet (here-chat-light.css) ships media="not all" by the
   standing decision of 2026-07-31 — "daylight is an explicit act, never the OS's
   choice". So a member on a light-mode OS got THIS object turned to paper inside a
   room that stayed night, with the package's light-on-dark text still on it.
   Measured 2026-08-24 on /rooms at 1280x800: the map panel went white on white — 26 elements between 1.01:1 and 1.10:1,
   including the close control, so it could not be read OR dismissed.

   Gated on the explicit pick instead, which is the door the page's own comment
   already names. Nothing is deleted: when [data-theme=light] is wired, every one of
   these comes on together with the master sheet, which is the only way a theme has
   ever worked. */
[data-theme=light] .here-chat .lsurface{background:#f7f7f4}
[data-theme=light] .here-chat .lsurface .lshead{border-bottom-color:rgba(0,0,0,.10)}
[data-theme=light] .here-chat .lsurface .lsclose{background:rgba(0,0,0,.045);border-color:rgba(0,0,0,.10)}

/* THE WAY OUT OF A FULL-SCREEN OVERLAY IS NOT A 28px CIRCLE. `.lsurface` covers the
   whole panel — the map, an app the reader started — and this is the only control on
   it. Escape closes it too, which a phone does not have. 28x28 clears the AA floor
   and misses the phone rule; on the surface where the overlay is the entire screen,
   that is the wrong one to miss. 44 under 760px, 32 above it. Measured 2026-08-24. */
@media (pointer:coarse){
  .here-chat .lsurface .lsclose{width:44px;height:44px;font-size:16px}
}
@media (max-width:760px){
  /* .lsurface is inset:0 — on a covered viewport that is under the notch at the top
     and the home indicator at the bottom, and the head carries the only way out. */
  .here-chat .lsurface .lshead{padding-top:calc(10px + var(--sat,0px));
    padding-left:calc(12px + var(--sal,0px));padding-right:calc(12px + var(--sar,0px))}
  .here-chat .lsurface .mapbody,
  .here-chat .lsurface .lsbody{padding-bottom:calc(14px + var(--sab,0px))}
}
/* AND pointer:fine, or this beats the coarse rule above it on a tablet — 768px is
   over the width breakpoint and still a thumb, and the later rule wins a specificity
   tie. A width query and a pointer query in the same file have to agree about which
   one is asking, or the cascade decides and it decides by source order. */
@media (min-width:761px) and (pointer:fine){
  .here-chat .lsurface .lsclose{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .here-chat .lsurface{animation:none}
}