/* static/userinfo/user-info.css - NEW FILE (2026-10-07, role-based tool
   access, stage 3 of 3).

   THE BOTTOM-RIGHT READOUT: who you are signed in as, what your roles let
   you use, which hooks are watching, and what they have actually done for
   you. The mirror image of static/stackinfo/, deliberately - same collapse
   behaviour, same tokens, same pointer-events discipline, opposite corner.

   WHY IT EXISTS, WHICH IS NOT "because a panel is nice". Stage 2b made a
   denied tool SAY SO, as a `notice` frame in the transcript. That notice is
   an EVENT REPORT - "a tool call was just refused" - and it only appears
   when a call is actually attempted. Measured on 2026-10-07: asking the same
   question twice produced a notice the first time and none the second,
   because the model had been told not to retry and obeyed. Both outcomes
   were correct, and neither tells a user what their account can do.

   This panel is the STATE REPORT. It is true on page load regardless of what
   the model attempts, which is the one thing a hook can never be.

   NO HEX COLOURS. Every value is a brand.css token, so dark mode is free -
   the same rule stack-info.css follows.

   =========================================================================
   `pointer-events` IS LOAD-BEARING HERE TOO AND MUST NOT BE SIMPLIFIED
   =========================================================================
   The container is `pointer-events: none` so it can never intercept a click
   meant for the composer behind it. The toggle button and the open body opt
   back in individually. A blanket `auto` on the container would put an
   invisible rectangle over the bottom-right of the composer - the bug
   stack-info.css's header comment documents, not worth rediscovering. */

#user-info {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.88;
  pointer-events: none;          /* see the header comment - do not change */
  max-width: min(26rem, calc(100vw - 1.5rem));
}

#user-info strong { color: var(--ink); font-weight: 500; }

#user-info a,
#user-info button { pointer-events: auto; }

#user-info a { color: var(--accent); }

/* ---------------------------------------------------------------------------
   THE HEADER ROW. Always visible, and it is the whole box when collapsed.
   One line, and the three facts worth seeing without asking: who, which
   roles, and whether the policy is actually enforcing.
   --------------------------------------------------------------------------- */
.uinfo-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
}

.uinfo-toggle {
  font: inherit;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.uinfo-toggle:hover { background: var(--accent-soft); }

.uinfo-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.uinfo-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   THE BODY. Hidden when collapsed, which is the default.
   --------------------------------------------------------------------------- */
.uinfo-body {
  padding: 0 0.55rem 0.45rem 0.55rem;
  max-height: min(60vh, 32rem);
  overflow-y: auto;
}

#user-info[data-open="false"] .uinfo-body { display: none; }

/* Scrolling the body needs pointer events, or the wheel goes to the page
   behind it. Granted only while the box is open. */
#user-info[data-open="true"] .uinfo-body { pointer-events: auto; }

.uinfo-section {
  margin: 0.35rem 0 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.uinfo-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.uinfo-label {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0.1rem;
}

.uinfo-row { display: block; }

.uinfo-key { color: var(--muted); }

/* ---------------------------------------------------------------------------
   ALLOWED vs DENIED. The only place this file uses colour to carry meaning,
   and it carries the thing the panel exists to answer: "why can't I".
   Both are brand tokens with light and dark values already defined.
   --------------------------------------------------------------------------- */
.uinfo-allow { color: var(--accent); }
.uinfo-deny { color: var(--error); }

/* A denied name is not an error - the app is working and the answer is no.
   Same distinction .msg.notice draws in index.html. */
.uinfo-tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 0.25rem;
  margin: 0.05rem 0.15rem 0.05rem 0;
  white-space: nowrap;
}

.uinfo-tag.uinfo-deny { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.uinfo-tag.uinfo-allow { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--ink); }

/* The hidden-picker explanation, and any section that could not be read. */
.uinfo-note {
  display: block;
  color: var(--warn-ink);
  margin-top: 0.15rem;
}

.uinfo-unavailable { display: block; color: var(--muted); font-style: italic; }

/* The session id and replica: long, monospace, and worth being able to
   select. `user-select: text` needs pointer events, so it is only useful
   while the box is open - which is exactly when it is granted above. */
.uinfo-id {
  display: block;
  overflow-wrap: anywhere;
  user-select: text;
}