/* here-toolbar.css — the room's one global toolbar, top right.
   ────────────────────────────────────────────────────────────────────────────
   What a person spends and what they hold belong at the edge of the surface,
   not under the composer. The budget meters used to sit beneath the input,
   which is where your eye goes LAST and where they compete with the thing you
   are trying to type into. Top right is where a system status lives — and it
   is where the fullscreen control already was, so the two become one object
   instead of two floating controls fighting for the same corner.

   It collapses, because a meter you have read is noise until it changes.
   ──────────────────────────────────────────────────────────────────────────── */
/* The --sa* variables come from the HOST page, which is the only thing that knows
   whether it asked for viewport-fit=cover. They fall back to 0px, so a host that has
   not (the studio, the door) is unaffected — this is the package taking an inset it
   is offered, never one it assumes. */
.here-chat .gtool{
  position:absolute;top:calc(10px + var(--sat,0px));right:calc(12px + var(--sar,0px));
  z-index:6;
  display:flex;align-items:center;gap:6px;
  padding:4px;border-radius:999px;
  background:rgba(30,30,36,.78);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.28);
  transition:gap .2s var(--smooth)}

/* the chips it carries — budget meters and the balance */
.here-chat .gtool .gchips{display:flex;align-items:center;gap:6px;overflow:hidden;
  max-width:60vw;transition:max-width .26s var(--smooth),opacity .18s var(--smooth)}
.here-chat .gtool.folded .gchips{max-width:0;opacity:0}
.here-chat .gtool.folded{gap:0}

/* the budget, relocated here from under the composer */
.here-chat .gtool #hbud{display:flex;gap:6px;align-items:center;margin:0;padding:0}

/* balance — what you hold, as opposed to what you have left today */
.here-chat .gtool .gbal{display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);
  font:600 11px/1 system-ui;color:var(--soft);white-space:nowrap}
.here-chat .gtool .gbal b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}
.here-chat .gtool .gbal i{font-style:normal;color:var(--tint-hi)}

/* the controls: fold, and whatever the host puts beside it (fullscreen) */
.here-chat .gtool .gbtn{width:30px;height:30px;flex:none;display:flex;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);
  color:var(--dim);font-size:13px;line-height:1;
  transition:transform .12s var(--smooth),border-color .12s var(--smooth),color .12s var(--smooth)}
.here-chat .gtool .gbtn:hover{border-color:var(--tint);color:var(--ink)}
.here-chat .gtool .gbtn:active{transform:scale(.94)}

/* A CONTROL WITH A NAME IS NOT A CIRCLE. #hmapbtn carries the word `map`, so it takes a
   pill rather than the 30px round the glyph controls wear — same height, same border,
   same hover, wide enough to hold its label. It is the only control in this bar that
   says what it does, and it is the one that goes somewhere. */
.here-chat .gtool .gbtn#hmapbtn{width:auto;border-radius:999px;padding:0 12px;
  font:600 12px/1 system-ui;letter-spacing:.02em}

/* THE PHONE RULE. 30px clears the AA floor (WCAG 2.2 SC 2.5.8 wants 24) and misses the
   one people actually hold (SC 2.5.5, and Apple's HIG, want 44). On a surface whose whole
   claim is parity with the messengers on a phone, the bar's controls are aimed at with a
   thumb, so under 760px they get the 44 — and the 6px between two 30px circles becomes a
   real gap rather than a mis-tap. */
/* 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 .gtool .gbtn{width:44px;height:44px;font-size:15px}
  .here-chat .gtool .gbtn#hmapbtn{width:auto;height:44px;padding:0 16px;font-size:13px}
  .here-chat .gtool{gap:8px}
}
/* And on a desk the two 30px controls kept the bar's 6px gap, which is under the 8px
   the same rule asks for between sub-44px targets. A pointer is more accurate than a
   thumb, but 6px between two circles is also just tight to look at. */
@media (min-width:761px){
  .here-chat .gtool{gap:8px}
}
.here-chat .gtool .gfold .cv{display:inline-block;transition:transform .22s var(--smooth)}
.here-chat .gtool.folded .gfold .cv{transform:rotate(180deg)}

/* the fullscreen control the prototype already had, adopted rather than
   duplicated — it keeps its id and its handler, it just lives here now */
.here-chat .gtool #hfullbtn,
.here-chat .gtool .hfullbtn{position:static;top:auto;right:auto;margin:0}

.here-chat .gtool :focus-visible{outline:2px solid var(--tint);outline-offset:2px}

/* a phone has no room for meters beside a title; fold by default and let the
   press open them */
@media (max-width:560px){
  /* This tightened the bar against the corner and, in doing so, silently dropped the
     safe-area offset the base rule had just gained — a narrower media query beating
     the general one is how an inset gets lost without anyone editing it. Carry it. */
  .here-chat .gtool{top:calc(8px + var(--sat,0px));right:calc(8px + var(--sar,0px))}
  .here-chat .gtool .gchips{max-width:44vw}
}
/* 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 top-right meter capsule went white and its fold chevron measured 1.40:1.

   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 .gtool{background:rgba(255,255,255,.84);border-color:rgba(0,0,0,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(0,0,0,.08)}
[data-theme=light] .here-chat .gtool .gbtn,
[data-theme=light] .here-chat .gtool .gbal{background:rgba(0,0,0,.045);
  border-color:rgba(0,0,0,.10)}
@media (prefers-reduced-motion:reduce){
  .here-chat .gtool,.here-chat .gtool *{transition-duration:.01ms!important}
}