/* Shared shell for the app pages (chat, guardrails, org): the dark rail,
   full-viewport layout, and the small components both surfaces use. Loaded
   BEFORE the page's own stylesheet. Sovereign: no url(), no import — every
   color comes from base.html's tokens. */

/* ------------------------------------------------------------- page shell --- */
/* App pages own the viewport; only inner panes scroll. */
body.app-shell { height: 100vh; display: flex; overflow: hidden; }
body.app-shell main { flex: 1 1 auto; min-width: 0; max-width: none;
                      margin: 0; padding: 0; display: flex; min-height: 0; }

/* ------------------------------------------------------------------- rail --- */
.rail { width: 274px; flex: 0 0 274px; display: flex; flex-direction: column;
        min-height: 0; background: var(--rail); color: var(--rail-ink); }

/* Brand row: the ring aligns to the word's first line (not the block
   center), so a rail subtitle never shifts it — the mark sits at the same
   level as on the public pages (ring center ≈ 39px from the top). */
.rail-brand { display: flex; align-items: flex-start; gap: 10px;
              padding: 28px 16px 13px; text-decoration: none; color: inherit; }
/* The brand ring, light on the dark rail (favicon shape, no dot). */
.rail-mark { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
             border: 3.5px solid var(--canvas); border-radius: 50%; }
.rail-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rail-word { font-family: var(--font-display); font-weight: 650; font-size: 20px;
             color: #ffffff; letter-spacing: .005em; }
.rail-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--rail-muted); margin-top: 2px; }

.rail-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.rail-scroll::-webkit-scrollbar { width: 8px; }
.rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12);
                                        border: 0; border-radius: 8px; }

.rail-links { display: flex; flex-direction: column; gap: 1px;
              padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.rail-links a { display: block; padding: 7px 10px; border-radius: 8px;
                color: var(--rail-muted); text-decoration: none;
                font-size: 12.5px; font-weight: 500; }
.rail-links a:hover { color: var(--rail-ink); background: rgba(255,255,255,.06); }
.rail-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.10);
                                     font-weight: 600; }

.rail-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
             border-top: 1px solid rgba(255,255,255,.08); }
.rail-avatar { width: 33px; height: 33px; flex: 0 0 auto; border-radius: 999px;
               background: var(--rail-avatar); color: var(--rail-ink);
               display: grid; place-items: center; font-size: 11.5px;
               font-weight: 700; letter-spacing: .02em; }
.rail-who { flex: 1; min-width: 0; line-height: 1.3; }
.rail-who-name { display: block; font-size: 13px; font-weight: 600; color: #f2f4f7;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-who-meta { display: block; font-size: 11px; color: var(--rail-muted);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-out { display: grid; place-items: center; width: 28px; height: 28px;
            flex: 0 0 auto; border-radius: 7px; color: var(--rail-muted); }
.rail-out:hover { color: var(--rail-ink); background: rgba(255,255,255,.08); }
.rail :focus-visible { outline-color: var(--rail-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px;
           padding: 0; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap; border: 0; }

/* ---------------------------------------------------------- shared widgets --- */
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px;
            flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border-2);
            background: var(--surface); color: var(--graphite); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--graphite); }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.ghost:hover { background: rgba(28,30,34,.06); }

.mini-btn { border: 1px solid var(--border-2); background: var(--surface);
            color: var(--ink-2); border-radius: 7px; font-size: 11.5px;
            font-weight: 600; padding: 4px 10px; cursor: pointer;
            font-family: var(--font-sans); }
.mini-btn:hover { color: var(--ink); border-color: var(--graphite); }
.mini-btn.strong { background: var(--accent); border-color: var(--accent);
                   color: #fff; }
.mini-btn.strong:hover { background: var(--accent-strong); color: #fff; }

.kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
          text-transform: uppercase; color: var(--faint); }

/* Action badges — text carries the meaning, color reinforces it. */
.act-badge { display: inline-block; font-size: 10px; font-weight: 700;
             letter-spacing: .05em; text-transform: uppercase;
             border-radius: 6px; padding: 3px 8px; }
.act-badge.block, .act-badge.deny { background: var(--bad-tint); color: var(--bad); }
.act-badge.warn { background: var(--warn-tint); color: var(--warn); }
.act-badge.flag { background: rgba(47,61,89,.10); color: var(--accent); }
.act-badge.redact, .act-badge.vault { background: rgba(47,106,74,.11); color: var(--ok-ink); }
.act-badge.catalog { background: rgba(183,154,95,.16); color: #8a713d; }

/* Enable/disable switch (role="switch" buttons). */
.switch { width: 40px; height: 23px; flex: 0 0 auto; border: 0; padding: 0;
          border-radius: 13px; background: var(--border-2); position: relative;
          cursor: pointer; transition: background .18s ease; }
.switch::after { content: ""; width: 17px; height: 17px; border-radius: 50%;
                 background: #fff; position: absolute; top: 3px; left: 3px;
                 box-shadow: 0 1px 3px rgba(28,30,34,.3);
                 transition: left .18s ease; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 20px; }
.switch.grape[aria-checked="true"] { background: var(--layer2); }
.switch[disabled] { opacity: .5; cursor: default; }

/* Scrim for off-canvas rails / drawers. */
#scrim { display: none; }

/* Right-sheet drawer (guardrails/org create). */
.drawer-scrim { position: fixed; inset: 0; z-index: 70;
                background: rgba(28,30,34,.4); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
          width: 480px; max-width: 92vw; background: var(--canvas);
          box-shadow: -18px 0 40px rgba(28,30,34,.18);
          display: flex; flex-direction: column;
          animation: drawer-in .26s cubic-bezier(.22,1,.36,1); }
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; }
                       to { transform: none; opacity: 1; } }

/* Segmented choice row (drawer forms). */
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; margin: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; border: 1px solid var(--border-2);
            background: var(--surface); color: var(--graphite); border-radius: 8px;
            padding: 9px 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.seg input:checked + span { border-color: var(--accent);
                            background: rgba(47,61,89,.08); color: var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent);
                                  outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
  .switch, .switch::after { transition: none; }
}