/* =========================================================================
   Dining Room Shell — Sable draft v0.2 layout wired to live room actions
   ========================================================================= */
:root {
  --obsidian: #0B0B0F;
  --obsidian-2: #050608;
  --emerald: #0E4D30;
  --gold: #C8962A;
  --gold-soft: #e8b84a;
  --teal: #29C4C0;
  --white: #F6F4EC;
  --muted: #9EA39F;
  --line: rgba(200, 150, 42, 0.28);
  /* Shell / panel fills — lighter glass so molecules + room art read through */
  --glass: rgba(8, 12, 11, 0.48);
  --glass-2: rgba(11, 11, 15, 0.48);
  --panel-65: rgba(5, 8, 7, 0.45);
  --bar-h: 0px; /* composer is in-grid now */
  --rail-left: 230px;
  --rail-right: 250px;
  /*
    Z ladder (spread on purpose):
      0    body base
      20   soft dust / molecules — UNDER shell (peek through glass)
      100  app-shell (interactive UI)
      120  house-frame surrounding runes (pointer-events: none)
      135  cursor matrix glitter (pe: none)
      140  corner runes + border fireflies + crystal dragon (pe: none)
      200  site copyright (clickable)
    Inside shell:
      1    #room-bg-layer inside .center-col (45% alpha art between rails)
      5    center column
      6    room-title layer
      7    topbar / HUD
      8    right rail
      9    left rail
      80+  chat-under / wall / inspect
    Inside #scene:
      30   bouncing emblem
      50   avatars
      60+  speech bubbles
    Note: layers above the shell use pointer-events:none so clicks
    still hit Rooms / Favorites / House underneath.
  */
}

/* Themed scrollbars (gold on dark) — never default white/grey system chrome */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 150, 42, 0.55) rgba(8, 12, 11, 0.55);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: rgba(8, 12, 11, 0.55);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.55), rgba(200, 150, 42, 0.4));
  border-radius: 999px;
  border: 1px solid rgba(200, 150, 42, 0.35);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.75), rgba(200, 150, 42, 0.55));
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(110% 90% at 50% -15%, #13211b 0%, var(--obsidian) 48%, var(--obsidian-2) 100%);
  color: var(--white);
  font-family: "Helvetica Neue", Inter, Arial, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(41, 196, 192, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(200, 150, 42, 0.5) 0 1px, transparent 2px);
  background-size: 90px 90px, 130px 130px;
  z-index: 0;
}

/* Room JPEG — middle column only (already between left/right rails) */
#rz-room-plate {
  display: none !important;
}
.room-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.45; /* alpha 45% */
}
body.is-page-room .room-bg-layer {
  display: none !important;
}

#house-frame {
  position: fixed;
  inset: 0;
  /* Bottom gutter ~52px — room for raised bottom runes under the shell */
  padding: 28px 32px 52px;
  pointer-events: none;
  z-index: 120; /* above shell — surrounding RUEZALS runes stay visible */
}
#house-frame .rune-border {
  position: absolute;
  /* Sit in the shell gutter groove (not flush to window chrome) */
  inset: 8px 12px 36px 12px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(200, 150, 42, 0.08), inset 0 0 42px rgba(14, 77, 48, 0.1);
}
#house-frame .rune-line {
  position: absolute;
  left: 22px; right: 26px; top: 8px;
  text-align: center;
  color: rgba(200, 150, 42, 0.62);
  font-size: 11px;
  letter-spacing: 12px;
  white-space: nowrap;
  overflow: hidden;
}
#house-frame .rune-side {
  position: absolute;
  top: 40px; bottom: 44px;
  width: 22px;
  color: rgba(41, 196, 192, 0.38);
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  overflow: hidden;
}
#house-frame .rune-side.left { left: 10px; }
#house-frame .rune-side.right { right: 14px; }

/* Hide old floating chrome */
#brand-lockup { display: none !important; }

#app-shell {
  position: relative;
  z-index: 100;
  isolation: isolate;
  /* ~52px clear strip under the chat bottom (rune groove) */
  height: calc(100vh - 28px - 52px);
  margin: 28px 32px 52px;
  display: grid;
  /* Fixed sidebar widths — center stretches; not mobile-friendly by design */
  grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
  grid-template-rows: 72px minmax(0, 1fr) auto;
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid rgba(200, 150, 42, 0.48);
  border-radius: 14px;
  box-shadow: 0 0 55px rgba(200, 150, 42, 0.1), inset 0 0 75px rgba(14, 77, 48, 0.13);
  overflow: hidden;
}

/* Clickable © line under the shell — links to main site */
#site-copyright {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5px;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 16px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(200, 150, 42, 0.55);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}
#site-copyright:hover {
  color: rgba(232, 184, 74, 0.95);
}

.topbar {
  grid-column: 1 / -1;
  position: relative;
  z-index: 7; /* middle menu layer — under sidebars (8/9) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10, 18, 16, 0.72), rgba(4, 7, 6, 0.52)),
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      rgba(200, 150, 42, 0.035) 18px 19px
    );
}

/* Space-console HUD — thin gold/teal trays, not edge clutter */
.hud-console {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  position: relative;
  z-index: 7;
}
.hud-shell-div1 {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.hud-shell-div2 {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.hud-ext-link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(200, 150, 42, 0.35);
  border-radius: 4px;
  background: rgba(4, 12, 11, 0.65);
  color: var(--gold-soft, #e8b84a);
  font: 700 0.62rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.hud-ext-link:hover {
  border-color: var(--gold);
  color: #fff;
  background: rgba(200, 150, 42, 0.12);
}
.hud-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  width: 118px; /* fixed house — Linked / Retrying / Linking won't shift layout */
  max-width: 100%;
  padding: 0 8px;
  margin: 0;
  border: 1px solid rgba(41, 196, 192, 0.28);
  border-radius: 4px;
  background: rgba(4, 12, 11, 0.75);
  color: #9eb8b4;
  font: 600 0.62rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
  flex: 0 0 118px;
}
#hud-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7a8682;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.hud-link.is-live .hud-dot {
  background: #29c4c0;
  box-shadow: 0 0 8px rgba(41, 196, 192, 0.75);
}
.hud-link.is-down .hud-dot {
  background: #c0392b;
  box-shadow: 0 0 8px rgba(192, 57, 43, 0.55);
}
.hud-menu { position: relative; }
.hud-trigger {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(200, 150, 42, 0.38);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 24, 14, 0.9), rgba(8, 10, 9, 0.92));
  color: var(--gold-soft, #e6c98a);
  font: 700 0.68rem/1 Cinzel, Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hud-trigger:hover,
.hud-menu.is-open .hud-trigger {
  border-color: rgba(200, 150, 42, 0.75);
  color: #fff;
  box-shadow: 0 0 14px rgba(200, 150, 42, 0.18);
}
.hud-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: min(320px, 70vw);
  max-height: min(420px, 60vh);
  overflow: auto;
  padding: 10px;
  z-index: 410;
  border: 1px solid rgba(200, 150, 42, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(8, 12, 11, 0.97), rgba(4, 8, 7, 0.98));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(41, 196, 192, 0.08);
}
.hud-panel[hidden] { display: none !important; }
.hud-panel-label {
  font: 700 0.58rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal, #29c4c0);
  margin: 6px 4px 8px;
}
.hud-panel a,
.hud-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #e8e0d0;
  text-decoration: none;
  font: 600 0.78rem/1.2 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.hud-panel a { padding: 8px 10px; }
.hud-panel a:hover,
.hud-room:hover {
  border-color: rgba(200, 150, 42, 0.35);
  background: rgba(200, 150, 42, 0.08);
  color: #fff;
}
.hud-room.is-active {
  border-color: rgba(200, 150, 42, 0.55);
  background: rgba(200, 150, 42, 0.12);
}
.hud-go {
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 6px 4px;
}
.hud-star {
  border: 0;
  background: transparent;
  color: #7f8984;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  line-height: 1;
}
.hud-star.is-on { color: var(--gold, #c8a96e); }
.room-tab .hud-star {
  margin-left: auto;
  opacity: 0.55;
}
.room-tab:hover .hud-star,
.room-tab .hud-star.is-on { opacity: 1; }
.hud-hint {
  margin: 8px 4px 2px;
  font-size: 0.62rem;
  color: #7f8984;
  line-height: 1.35;
}
.hud-go small {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 500;
  color: #7f8984;
}
.hud-add-friend-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 4px 0 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px dashed rgba(200, 150, 42, 0.45);
  background: rgba(200, 150, 42, 0.06);
  color: var(--gold-soft, #e8b84a);
  font: 700 0.68rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.hud-add-friend-fav:hover {
  border-style: solid;
  background: rgba(200, 150, 42, 0.12);
  color: #fff;
}
.hud-add-friend-picker {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 10px;
  max-height: 160px;
  overflow: auto;
}
.hud-add-friend-picker[hidden] { display: none !important; }
.hud-pick-friend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #e8e0d0;
  font: 600 0.76rem/1.2 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.hud-pick-friend small {
  font-size: 0.56rem;
  font-weight: 500;
  color: #7f8984;
  margin-top: 2px;
}
.hud-pick-friend:hover {
  border-color: rgba(41, 196, 192, 0.4);
  background: rgba(41, 196, 192, 0.1);
  color: #fff;
}

body.rz-chat-console #rz-house-mark,
body.rz-chat-console .rz-rune-nav {
  display: none !important;
}
/* Philosophy letter stream stays off on chat (was leaking into the left edge).
   Dangly border runes + corner runes stay ON. */
body.rz-chat-console .rz-philosophy-banner,
body.rz-chat-console #rz-philosophy-canvas {
  display: none !important;
}
body.rz-chat-console #rz-border-runes {
  display: block !important;
  z-index: 140 !important;
  pointer-events: none !important;
}
body.rz-chat-console .rz-corner-rune {
  display: block !important;
  z-index: 140 !important;
  pointer-events: none !important;
  opacity: 0.55 !important;
}
/* Bottom runes / corners — ~40px up from flush, in the under-shell groove */
body.rz-chat-console .rz-corner-rune.bl,
body.rz-chat-console .rz-corner-rune.br {
  bottom: 40px !important;
}
body.rz-chat-console .rz-rune-nav-row--bottom {
  bottom: 40px !important;
}
/* Soft dust / molecules UNDER shell glass (room art is inside shell now) */
body.rz-chat-console #rz-room-plate {
  display: none !important;
}
body.rz-chat-console #rz-bg-canvas {
  z-index: 20 !important;
  pointer-events: none !important;
}
/* Glitter stays in the hall under the side rails (rails are z 200) */
body.rz-chat-console #rz-glitter-canvas {
  z-index: 90 !important;
  pointer-events: none !important;
}
/* Dragon above shell (clicks pass through); runes hidden above */
body.rz-chat-console .rz-dragon-canvas {
  z-index: 140 !important;
  pointer-events: none !important;
}
/* Floating emblem — hall only (under side rails). pe:none so UI stays clickable */
body.rz-chat-console #rz-float-emblem {
  position: fixed !important;
  z-index: 95 !important; /* below left/right rails (200) — stops “movie” over member list */
  pointer-events: none !important;
  left: 0 !important;
  top: 0 !important;
  max-width: min(120px, 22%) !important;
  max-height: min(120px, 28%) !important;
}
/* Never let realm emblems / floating marks paint over side rails —
   keep the intentional left R + right white dragon watermarks. */
body.rz-chat-console .leftbar img[aria-hidden="true"]:not(#chat-r-wm),
body.rz-chat-console .rightbar img[aria-hidden="true"]:not(#chat-dragon-wm),
body.rz-chat-console .leftbar #rz-float-emblem,
body.rz-chat-console .rightbar #rz-float-emblem {
  display: none !important;
}
body.rz-chat-console .leftbar {
  z-index: 9 !important;
  isolation: isolate;
  overflow: hidden; /* rooms pane scrolls inside .leftbar-rooms */
}
body.rz-chat-console .rightbar {
  z-index: 8 !important;
  isolation: isolate;
  overflow: hidden; /* members list scrolls inside #family-presence */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.rz-chat-console #chat-r-wm,
body.rz-chat-console #chat-dragon-wm {
  display: block !important;
  z-index: 0 !important;
  opacity: 0.22 !important;
  max-width: 140px !important;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  min-width: 0;
  position: relative;
  z-index: 7;
}
.brand-dragon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(200, 150, 42, 0.4));
}
.brand-wordmark {
  height: 34px;
  width: auto;
  max-width: min(220px, 28vw);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 8px rgba(200, 150, 42, 0.3));
}
/* Kill leftover text lockup if any old markup sneaks in */
.brand h1,
.brand small { display: none !important; }

/* Room name + occupancy — own layer (z:6), fixed width so "1 present"↔"0 present"
   never reflows the HUD menus above/beside it */
.room-title-layer {
  position: relative;
  z-index: 6;
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  isolation: isolate;
}
.room-title {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.room-title strong {
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.room-title span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 7;
}
.icon-btn {
  height: 34px;
  min-width: 34px;
  border: 1px solid rgba(200, 150, 42, 0.35);
  background: rgba(8, 12, 11, 0.66);
  color: #fff;
  border-radius: 8px;
  padding: 0 11px;
  cursor: pointer;
  font-size: 0.8rem;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-soft); }

/* Sidebar shells — div1 skeleton / div2 relative host / div3 absolute content */
.leftbar.shell-div1,
.rightbar.shell-div1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(5, 8, 7, 0.65); /* 65% transparent glass */
  overflow: hidden;
  min-height: 0;
  position: relative;
  width: 100%;
  min-width: 0;
}
.leftbar.shell-div1 {
  z-index: 9;
  border-right: 1px solid rgba(200, 150, 42, 0.42);
}
.rightbar.shell-div1 {
  z-index: 8;
  border-left: 1px solid rgba(200, 150, 42, 0.42);
}
.leftbar .shell-div2,
.rightbar .shell-div2 {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.leftbar .shell-div3,
.rightbar .shell-div3 {
  position: absolute;
  top: 9px;
  left: 9px;
  width: calc(100% - 20px);
  height: calc(100% - 18px);
  margin: 0;
  padding: 5px 3px 5px 3px;
  border: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.leftbar .shell-div3 { overflow: auto; }
.rightbar .shell-div3 { overflow: hidden; }
#family-presence {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  margin-top: 2px;
  /* gold theme scrollbars inherit from global * rules */
}
.rightbar .shell-div3 .section-label,
.rightbar .shell-div3 #char-search-wrap,
.rightbar .shell-div3 .status-edit,
.rightbar .shell-div3 .presence-sort {
  flex-shrink: 0;
}
.leftbar-rooms {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 2;
}

/* R watermark — left rail, raised ~100px so it clears the door controls */
#chat-r-wm {
  position: absolute;
  left: 50%;
  bottom: calc(8% + 150px);
  transform: translateX(-50%);
  width: min(72%, 140px);
  height: auto;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
}
.leftbar .shell-div3 > *:not(#chat-r-wm) {
  position: relative;
  z-index: 2;
}
.rightbar .shell-div3 > *:not(#chat-dragon-wm) {
  position: relative;
  z-index: 2;
}

/* Bottom-left door control — same footprint as a room-tab row */
.room-access-wrap {
  flex-shrink: 0;
  margin-top: auto;
  padding: 8px 0 2px;
  border-top: 1px solid rgba(200, 150, 42, 0.18);
  z-index: 2;
}
.room-access-btn {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  margin: 3px 0;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.room-access-btn .room-access-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 50%;
  background: #090d0c;
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1;
}
.room-access-btn .room-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.room-access-kicker {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  line-height: 1.1;
}
.room-access-status {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.room-access-btn.mode-unlocked {
  background: #4a3424;
  color: #f0d060;
  border-color: rgba(240, 208, 96, 0.42);
}
.room-access-btn.mode-unlocked .room-access-icon {
  border-color: rgba(240, 208, 96, 0.45);
  color: #f0d060;
  background: rgba(9, 13, 12, 0.55);
}
.room-access-btn.mode-friends {
  background: #f0d060;
  color: #4a3424;
  border-color: rgba(74, 52, 36, 0.4);
}
.room-access-btn.mode-friends .room-access-icon {
  border-color: rgba(74, 52, 36, 0.45);
  color: #4a3424;
  background: rgba(255, 248, 220, 0.55);
}
.room-access-btn.mode-locked {
  background: #fff;
  color: #c41212;
  border-color: rgba(196, 18, 18, 0.45);
}
.room-access-btn.mode-locked .room-access-icon {
  border-color: rgba(196, 18, 18, 0.45);
  color: #c41212;
  background: rgba(255, 245, 245, 0.9);
}
.room-access-btn:hover { filter: brightness(1.05); }
.room-access-hint {
  margin: 4px 8px 0;
  font-size: 0.52rem;
  color: #7f8984;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: left;
}

/* Presence icons — horizontal row under "Your info" */
.presence-status-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.presence-status-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(8, 12, 11, 0.55);
  color: #9aa39c;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.presence-status-btn .psi {
  font-size: 0.85rem;
  line-height: 1;
}
.presence-status-btn:hover {
  color: #e8ebe6;
  border-color: rgba(200, 150, 42, 0.5);
}
.presence-status-btn.is-on[data-status="online"] {
  background: rgba(75, 191, 119, 0.22);
  color: #6fd89a;
  border-color: rgba(75, 191, 119, 0.55);
  box-shadow: 0 0 8px rgba(75, 191, 119, 0.35);
}
.presence-status-btn.is-on[data-status="busy"] {
  background: rgba(200, 150, 42, 0.22);
  color: #e0b84a;
  border-color: rgba(200, 150, 42, 0.55);
}
.presence-status-btn.is-on[data-status="dnd"] {
  background: rgba(190, 109, 117, 0.25);
  color: #e09098;
  border-color: rgba(190, 109, 117, 0.55);
}
.presence-status-btn.is-on[data-status="invisible"] {
  background: rgba(246, 244, 236, 0.12);
  color: #d4d0c4;
  border-color: rgba(246, 244, 236, 0.4);
}
.section-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 700;
  margin: 4px 8px 10px;
}

/* Rooms list (replaces #room-rail strip) — single column, readable + themed scrollbar */
#room-rail { display: none !important; }
#shared-rooms, #private-rooms { display: flex; flex-direction: column; gap: 2px; }
.room-tab {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin: 3px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c9cfcb;
  cursor: pointer;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  width: 100%;
  min-width: 0;
}
.room-tab:hover {
  background: rgba(14, 77, 48, 0.18);
  border-color: rgba(41, 196, 192, 0.18);
  color: #fff;
}
.room-tab.active {
  background: linear-gradient(90deg, rgba(14, 77, 48, 0.38), rgba(8, 12, 11, 0.28));
  border-color: rgba(200, 150, 42, 0.42);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--gold);
}
.room-tab .room-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 50%;
  background: #090d0c;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.room-tab .hud-star { flex-shrink: 0; }
.room-tab .room-text { min-width: 0; flex: 1; }
.room-tab .room-text b {
  display: block;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-tab .room-count {
  display: block;
  font-size: 0.58rem;
  color: #7f8984;
  font-weight: 400;
  margin-top: 2px;
}

/* Center column — room art fills this column between the rails */
.center-col {
  display: grid;
  grid-template-rows: minmax(180px, 1fr) minmax(160px, 38%);
  min-height: 0;
  position: relative;
  z-index: 5;
  overflow: visible; /* speech bubbles may spill upward */
  background: transparent;
  grid-row: 2;
  grid-column: 2;
}
.leftbar.shell-div1 {
  grid-row: 2;
  grid-column: 1;
}
.rightbar.shell-div1 {
  grid-row: 2;
  grid-column: 3;
}

#scene {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible; /* speech bubbles sit above heads — don't clip them */
  background: transparent !important;
  z-index: 1;
}
/* In-scene plate disabled — art lives on #room-bg-layer in .center-col */
#cafe-bg,
#room-bg {
  display: none !important;
}
#scene.has-room-art #glow-left,
#scene.has-room-art #glow-right,
#scene.has-room-art .bg-table {
  display: none !important;
}
/* Watermark lives in .chat-under now — keep scene clear for avatars/art */
#scene::after { display: none !important; content: none; }
/* Keep avatars in the open scene strip above the history overlay.
   overflow:visible so speech bubbles above heads are not clipped. */
#avatar-layer {
  z-index: 50; /* above emblem (30), under chat-under / topbar */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 38%;
  padding-bottom: 8px;
  overflow: visible;
}

.chat-under {
  position: relative;
  z-index: 80;
  isolation: isolate;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--line);
  background: rgba(4, 7, 6, 0.42);
  overflow: hidden;
  backdrop-filter: blur(1px);
}
/* No watermark in chat panel */
.chat-under::after { display: none !important; content: none; }

/* White dragon watermark — right rail, matched height to left R mark */
#chat-dragon-wm {
  position: absolute;
  left: 50%;
  bottom: calc(8% + 150px);
  transform: translateX(-50%);
  width: min(78%, 160px);
  height: auto;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0; /* above sidebar bg, below UI */
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
}
/* watermark layering handled under .shell-div3 */
.chat-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 12px 0;
  max-height: none;
}
.chat-filter {
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(8, 12, 11, 0.66);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-filter.active {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(200, 150, 42, 0.1);
}
/* Stack Clear / Write on Wall in 2 rows so the filter strip rarely needs a scrollbar */
.chat-filters-end {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex-shrink: 0;
}
#chat-clear-btn,
#chat-wall-btn {
  display: none;
  border: 1px solid rgba(200, 150, 42, 0.45);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(8, 12, 11, 0.66);
  color: #c8962a;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(74, 52, 36, 0.35);
}
#chat-wall-btn {
  color: var(--gold-soft, #e8b84a);
  border-color: rgba(200, 150, 42, 0.55);
  box-shadow: none;
  text-transform: none; /* "Write on Wall" — not SCREAMING CASE */
  letter-spacing: 0.03em;
}
#chat-clear-btn:hover,
#chat-wall-btn:hover {
  border-color: #c8962a;
  color: #e8b84a;
  background: rgba(200, 150, 42, 0.12);
}
#chat-clear-btn:active,
#chat-wall-btn:active { transform: scale(0.98); }
#chat-clear-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.chat-filters.has-clear #chat-clear-btn { display: inline-flex; align-items: center; }
.chat-filters.has-wall #chat-wall-btn { display: inline-flex; align-items: center; }

/* Wall fly-out — tall panel over room art + chat (center-col child) */
.center-col > .wall-flyout {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(400px, 48%);
  z-index: 95; /* above chat-under (80), under inspect (~110+) */
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(200, 150, 42, 0.45);
  border-radius: 12px;
  background: rgba(6, 10, 9, 0.88);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  overflow: hidden;
}
.center-col > .wall-flyout.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.wall-flyout[hidden] { display: none !important; }
.wall-flyout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  color: var(--gold-soft, #e8b84a);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.wall-flyout-head button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
}
.wall-flyout-entries {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 12px;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
}
.wall-flyout-entries .wall-stream {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.wall-author-link {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.wall-author-link:hover { color: var(--gold-soft, #e8b84a); text-decoration: underline; }
.wall-flyout .wall-entry {
  padding: 10px 0;
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
.wall-flyout .wall-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.wall-flyout .wall-entry-meta {
  color: var(--gold);
  font-weight: 700;
  min-width: 0;
  flex: 1;
}
.wall-flyout .wall-entry-msg { color: var(--white, #f6f4ec); line-height: 1.35; }
.wall-flyout .wall-entry-react { color: var(--muted); margin-top: 3px; font-size: 0.68rem; }
.wall-flyout .wall-entry-actions {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}
.wall-flyout .wall-entry-actions button {
  border: 1px solid rgba(200, 150, 42, 0.35);
  background: rgba(8, 12, 11, 0.55);
  color: var(--gold-soft, #e8b84a);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.2;
}
.wall-flyout .wall-entry-actions button:hover {
  border-color: var(--gold);
  background: rgba(200, 150, 42, 0.14);
}
.wall-flyout .wall-entry-actions button[data-wall-del] {
  border-color: rgba(200, 90, 90, 0.45);
  color: #e09090;
}
.wall-flyout .wall-entry-actions button[data-wall-del]:hover {
  border-color: #e07070;
  background: rgba(180, 60, 60, 0.18);
  color: #ffb0b0;
}
.wall-flyout .wall-entry.is-editing .wall-entry-msg { display: none; }
.wall-flyout .wall-edit-input {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.72rem;
  resize: vertical;
}
.wall-flyout-form {
  padding: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  background: rgba(4, 7, 6, 0.55);
}
.wall-flyout-form .wall-form-label {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.wall-flyout-form textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 7px 8px;
  font: inherit;
  font-size: 0.75rem;
}
.wall-flyout-form .wall-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wall-flyout-form .wall-emojis button {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 2px;
  border-radius: 6px;
  opacity: 0.6;
}
.wall-flyout-form .wall-emojis button.is-on {
  opacity: 1;
  border-color: var(--gold);
}
.wall-flyout-form .wall-send-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wall-flyout-form .wall-submit {
  margin-left: auto;
  border: 1px solid var(--gold);
  background: rgba(200, 150, 42, 0.18);
  color: var(--gold-soft, #e8b84a);
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.72rem;
}
.wall-flyout-form .wall-submit:hover { background: rgba(200, 150, 42, 0.3); }
.wall-flyout-hint {
  font-size: 0.58rem;
  color: var(--muted);
  line-height: 1.3;
}
#chat-filter-user-wrap { display: none; padding: 4px 12px 0; }
#chat-filter-user-wrap.visible { display: block; }
#chat-filter-user {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(3, 6, 5, 0.7);
  color: #fff;
  font-size: 0.78rem;
}

#history-panel {
  position: relative !important;
  z-index: 1;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-height: none !important;
  flex: 1;
  min-height: 0;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0;
  padding: 10px 14px 16px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  scroll-behavior: auto;
}
/* Messages live in #chat-stream; margin-top:auto pins them to the bottom
   so short chats start at the bottom and new lines stack upward. */
#chat-stream {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  min-height: min-content;
}
#chat-stream .msg-row {
  line-height: 1.45;
}
#chat-stream .msg-text {
  line-height: 1.45;
}
#load-more {
  flex-shrink: 0;
  align-self: stretch;
}
#history-panel.visible { opacity: 1 !important; }
#scroll-hint { display: none !important; }

#chat-jump-bottom {
  position: absolute !important;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 80 !important;
  border: 1px solid rgba(200, 150, 42, 0.45);
  background: rgba(8, 12, 11, 0.95);
  color: var(--gold-soft, #e8b84a);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  pointer-events: auto !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#chat-jump-bottom:hover {
  border-color: var(--gold);
  color: #fff;
}
#chat-jump-bottom[hidden] { display: none !important; }

/* Enter/leave stack — fixed at page bottom, grows upward */
#presence-toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 36px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse; /* newest nearest the bottom */
  align-items: center;
  gap: 4px;
  width: min(92vw, 520px);
  pointer-events: none;
}
.presence-toast {
  /* text only — no box; fades after 5s via JS */
  max-width: 100%;
  padding: 2px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--gold-soft, #e8b84a);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(6px);
  animation: presence-in 0.25s ease forwards;
}
.presence-toast.is-out {
  animation: presence-out 0.35s ease forwards;
}
@keyframes presence-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes presence-out {
  to { opacity: 0; transform: translateY(8px); }
}

.typing-pill {
  position: absolute;
  bottom: 4px;
  left: 14px;
  font-size: 0.65rem;
  color: var(--teal);
  pointer-events: none;
}
.typing-pill span { animation: blink 1.1s infinite; }
.typing-pill span:nth-child(2) { animation-delay: 0.2s; }
.typing-pill span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Composer footer */
.composer {
  grid-column: 1 / -1;
  position: relative;
  z-index: 300;
  display: grid;
  grid-template-columns: var(--rail-left) 1fr var(--rail-right);
  grid-auto-rows: minmax(44px, auto);
  border-top: 1px solid var(--line);
  background: rgba(4, 7, 6, 0.45);
  align-items: stretch;
  overflow: visible; /* allow speak-box + conductor chips to show */
  min-height: 52px;
}
.composer-left, .composer-right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8984;
  font-size: 0.65rem;
  padding: 0 8px;
  text-align: center;
}
/* Link bay — same composer grid cell as before; above rune groove, inside shell borders */
.composer-right {
  min-height: 44px;
  position: relative;
  z-index: 2;
}
#link-house {
  width: 118px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#link-house .hud-link {
  border-color: rgba(200, 150, 42, 0.35);
  background: rgba(4, 10, 9, 0.92);
}
#chat-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  width: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 14px;
  display: flex;
  gap: 9px;
  align-items: flex-end;
  overflow: visible;
}
/* Speaks here — grows upward over the chat stream (own layer) */
.chat-input-wrap {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 44px;
  height: 44px; /* layout slot stays one line; textarea floats up */
  align-self: flex-end;
  z-index: 40;
}
/* Composer tools: emoji for everyone; image stays mod-only */
.composer-tools {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.composer-tools.is-open { display: flex; }
.composer-tools.is-mod { display: flex; } /* legacy alias */
.composer-tool-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.4);
  background: rgba(8, 12, 11, 0.75);
  color: var(--gold-soft, #e8b84a);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.composer-tool-btn:hover {
  border-color: var(--gold);
  color: #fff;
}
.composer-tool-btn.composer-tool-r {
  padding: 4px;
  display: inline-grid;
  place-items: center;
}
.composer-tool-btn.composer-tool-r img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  /* black plate in the PNG → treat as transparent on dark chrome */
  mix-blend-mode: screen;
}
#emoji-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 14px;
  z-index: 20;
  display: none;
  box-sizing: border-box;
  width: min(252px, calc(100vw - 48px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  overflow: hidden;
  background: rgba(6, 10, 9, 0.96);
  border: 1px solid rgba(200, 150, 42, 0.4);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#emoji-pop.is-open { display: grid; }
#emoji-pop button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
#emoji-pop button:hover,
#emoji-pop button:focus-visible {
  background: rgba(200, 150, 42, 0.15);
  outline: none;
}
/* Images open in the grey inspect panel — stream shows a link, not a big preview */
.msg-text img.msg-inline-img { display: none !important; }
.msg-text .msg-media-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal, #29c4c0);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}
.msg-text .msg-media-link:hover { color: var(--gold-soft, #e8b84a); }
.msg-text .msg-media-kind {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
#chat-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  height: 44px;
  max-height: min(42vh, 280px);
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.34);
  background: rgba(3, 6, 5, 0.92);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  z-index: 41;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#chat-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(41, 196, 192, 0.08);
}
#chat-input.is-expanded {
  background: rgba(4, 8, 7, 0.97);
  border-color: rgba(200, 150, 42, 0.5);
  box-shadow:
    0 -10px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 150, 42, 0.12);
}
#chat-input::placeholder { color: #7f8984; }
#send-btn {
  height: 44px;
  min-width: 80px;
  border-radius: 9px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #d1a33f, #9f741b);
  color: #080908;
  font-weight: 800;
  flex-shrink: 0;
  align-self: flex-end;
}
#btn-ims, #btn-logout, .composer-tools {
  align-self: flex-end;
}

/* Right: find user + presence + status */
#char-search-wrap {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin-bottom: 12px;
  z-index: 5;
}
#char-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.32);
  background: rgba(8, 12, 11, 0.55);
  color: var(--text, #fff);
  font-size: 0.78rem;
}
#char-search-results {
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  background: rgba(8, 12, 11, 0.97);
  border: 1px solid rgba(200, 150, 42, 0.32);
  border-radius: 8px;
}

.status-edit {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(200, 150, 42, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.status-edit label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.status-edit textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(3, 6, 5, 0.48);
  color: #fff;
  padding: 7px 8px;
  font-size: 0.75rem;
  font-family: inherit;
}
.status-edit #my-status-save {
  margin-top: 6px;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #d1a33f, #9f741b);
  color: #080908;
  font-weight: 800;
  font-size: 0.72rem;
  cursor: pointer;
}

.presence-sort {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0 0 10px;
  align-items: center;
}
.presence-sort-btn {
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(8, 12, 11, 0.55);
  color: #76807b;
  border-radius: 8px;
  width: 32px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.presence-sort-btn span { pointer-events: none; }
.presence-sort-btn.is-on {
  border-color: var(--gold);
  color: var(--gold-soft, #e8b84a);
  background: rgba(200, 150, 42, 0.14);
  box-shadow: inset 0 0 0 1px rgba(200, 150, 42, 0.18);
}
.presence-sort-btn[data-sort="offline"].is-on {
  color: #9aa39e;
  border-color: rgba(154, 163, 158, 0.55);
}
.family-card {
  display: block;
  padding: 8px 6px;
  margin: 6px 0;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-color: rgba(200, 150, 42, 0.12);
}
.family-card:hover { background: rgba(255, 255, 255, 0.03); }
.family-card-top { display: none; } /* name lives beside avatar */
.family-name {
  display: block;
  font-size: 0.72rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  margin: 0;
}
.family-name.is-dnd { text-decoration: line-through; color: #e0a070; }
.family-name.is-offline { color: #6a706c; }
.family-card-body {
  display: flex;
  align-items: flex-start; /* name top aligns with avatar top */
  gap: 9px;
}
/* DND quiet inbox — unanswered IM (teal) vs friend request (amber) */
.family-card.has-unread-im {
  background: rgba(41, 196, 192, 0.14);
  border-color: rgba(41, 196, 192, 0.55);
  box-shadow: inset 3px 0 0 #29c4c0;
}
.family-card.has-unread-im .family-info span { color: #7ee0dc; }
.family-card.has-friend-req {
  background: rgba(200, 150, 42, 0.16);
  border-color: rgba(200, 150, 42, 0.55);
  box-shadow: inset 3px 0 0 var(--gold);
}
.family-card.has-friend-req .family-info span { color: #e0b84a; }
.mini-avatar {
  width: 30px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.34);
  display: grid; place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--gold);
  background: #0c100f;
  overflow: hidden;
  flex-shrink: 0;
}
.mini-avatar.glow-online {
  box-shadow: 0 0 0 1px rgba(75, 191, 119, 0.35), 0 0 10px rgba(75, 191, 119, 0.35);
}
.mini-avatar.glow-busy {
  box-shadow: 0 0 0 1px rgba(232, 184, 74, 0.4), 0 0 10px rgba(232, 184, 74, 0.35);
}
.mini-avatar.glow-dnd {
  box-shadow: 0 0 0 1px rgba(224, 120, 70, 0.45), 0 0 10px rgba(224, 120, 70, 0.35);
}
.mini-avatar.glow-off {
  filter: grayscale(0.75) brightness(0.75);
  opacity: 0.75;
  box-shadow: none;
}
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.family-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 0;
}
.family-info b { font-size: 0.72rem; color: #fff; }
.family-info span {
  display: block;
  font-size: 0.58rem;
  color: #76807b;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* In-room avatar soft presence + AFK badge */
.avatar-wrap.glow-online .av-circle {
  box-shadow: 0 0 0 1px rgba(75, 191, 119, 0.28), 0 0 12px rgba(75, 191, 119, 0.22);
}
.avatar-wrap.glow-busy .av-circle {
  box-shadow: 0 0 0 1px rgba(232, 184, 74, 0.3), 0 0 12px rgba(232, 184, 74, 0.22);
}
.avatar-wrap.glow-dnd .av-circle {
  box-shadow: 0 0 0 1px rgba(224, 120, 70, 0.35), 0 0 12px rgba(224, 120, 70, 0.22);
}
.avatar-afk-badge {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font: 800 0.62rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.12em;
  color: #c77dff;
  text-shadow:
    0 0 1px #000,
    0 0 2px #000,
    0 0 8px rgba(180, 80, 255, 0.75);
  pointer-events: none;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4bbf77;
  box-shadow: 0 0 8px rgba(75, 191, 119, 0.5);
  flex-shrink: 0;
  display: none; /* glow on avatar replaces the green dot */
}
.status-dot.busy,
.status-dot.away,
.status-dot.idle {
  background: #e0b84a;
  box-shadow: 0 0 8px rgba(224, 184, 74, 0.55);
}
.status-dot.dnd { background: #be6d75; box-shadow: none; }
.status-dot.invisible { background: #8a8a8a; box-shadow: none; opacity: 0.7; }

/* Permissions dropdown */
.perms-pop {
  position: absolute;
  min-width: 180px;
  background: linear-gradient(160deg, rgba(8, 12, 11, 0.98), rgba(5, 8, 7, 0.99));
  border: 1px solid rgba(200, 150, 42, 0.4);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 520;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  display: none;
}
.perms-pop.visible { display: block; }
.perms-pop h4 {
  margin: 0 0 8px;
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.perms-pop label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #d5d9d6;
  margin: 6px 0;
  cursor: pointer;
}
.perms-pop input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px; height: 14px;
}
.perms-pop .perms-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.msg-row[data-hidden="1"] { display: none !important; }

/* ── Split panel — floats over chat hall (.center-col), top-right mid ── */
.center-col > .inspect-panel,
.inspect-panel {
  --inspect-w: 300px;
  --inspect-h: 380px;
  position: absolute;
  /* High on the hall (under topbar seam); still top+right anchored for resize */
  top: 8px;
  right: 10px;
  left: auto;
  bottom: auto;
  /* Above .chat-under (80) so IM compose isn't sliced by the hall stream */
  z-index: 220;
  display: flex;
  flex-direction: column;
  width: var(--inspect-w);
  height: var(--inspect-h);
  max-width: calc(100% - 20px);
  max-height: calc(100% - 24px);
  border: 1px solid rgba(200, 150, 42, 0.45);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(10, 14, 13, 0.97), rgba(4, 7, 6, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(41, 196, 192, 0.06);
  overflow: hidden;
}
#btn-logout.btn-logout,
.btn-logout {
  height: 44px;
  min-width: 72px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(190, 109, 117, 0.45);
  background: rgba(8, 12, 11, 0.75);
  color: #e09098;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#btn-logout.btn-logout:hover,
.btn-logout:hover {
  border-color: #e09098;
  color: #fff;
  background: rgba(190, 109, 117, 0.2);
}
#btn-ims.btn-ims,
.btn-ims {
  height: 44px;
  min-width: 48px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(200, 150, 42, 0.45);
  background: rgba(8, 12, 11, 0.85);
  color: var(--gold-soft, #e8b84a);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  flex-shrink: 0;
}
#btn-ims.btn-ims:hover,
.btn-ims:hover {
  border-color: var(--gold);
  color: #fff;
}
#btn-ims.has-unread {
  border-color: rgba(41, 196, 192, 0.7);
  color: #5fd4cf;
  animation: inspect-tab-blink 1.1s ease-in-out infinite;
}
.inspect-panel[hidden] { display: none !important; }
.inspect-panel.is-collapsed {
  height: auto;
  max-height: none;
}
.inspect-panel.is-collapsed .inspect-body,
.inspect-panel.is-collapsed .inspect-resize-y,
.inspect-panel.is-collapsed .inspect-resize-xy { display: none; }
.inspect-panel.is-docked {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.22s ease;
}
.inspect-panel:not(.is-docked) {
  transition: transform 0.28s ease, opacity 0.22s ease;
}
/* Pulsing peeker when viewer is slid closed but tabs remain */
.inspect-dock {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 221;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(200, 150, 42, 0.55);
  background: linear-gradient(160deg, rgba(12, 16, 14, 0.96), rgba(4, 7, 6, 0.98));
  color: var(--gold-soft, #e8b84a);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(200, 150, 42, 0.35);
}
.inspect-dock[hidden] { display: none !important; }
.inspect-dock-glyph {
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}
.inspect-dock.is-pulse {
  animation: inspect-dock-pulse 2.8s ease-in-out infinite;
}
@keyframes inspect-dock-pulse {
  0%, 100% {
    box-shadow: 0 0 6px 0 rgba(200, 150, 42, 0.18), 0 0 0 0 rgba(41, 196, 192, 0.05);
    border-color: rgba(200, 150, 42, 0.4);
    filter: brightness(0.92);
  }
  50% {
    box-shadow: 0 0 18px 4px rgba(200, 150, 42, 0.55), 0 0 28px 2px rgba(41, 196, 192, 0.18);
    border-color: rgba(232, 184, 74, 0.9);
    filter: brightness(1.12);
  }
}
.inspect-resize { position: absolute; z-index: 2; }
.inspect-resize-x {
  left: 0; top: 0; bottom: 14px;
  width: 6px;
  cursor: ew-resize;
}
.inspect-resize-y {
  left: 14px; right: 0; bottom: 0;
  height: 6px;
  cursor: ns-resize;
}
.inspect-resize-xy {
  left: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nesw-resize;
}
.inspect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(0, 0, 0, 0.25);
  min-height: 44px;
}
.inspect-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  align-items: center;
}
.inspect-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 120px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 6px;
  background: rgba(8, 12, 11, 0.65);
  color: #9a9284;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspect-tab.is-active {
  border-color: rgba(200, 150, 42, 0.7);
  color: var(--gold-soft, #e6c98a);
  background: rgba(200, 150, 42, 0.12);
}
.inspect-tab.is-unread {
  color: #5fd4cf;
  border-color: rgba(41, 196, 192, 0.55);
  animation: inspect-tab-blink 1.1s ease-in-out infinite;
}
.inspect-tab .inspect-tab-x {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0 0 2px;
  flex-shrink: 0;
}
.inspect-tab .inspect-tab-x:hover { opacity: 1; color: #fff; }
@keyframes inspect-tab-blink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.inspect-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.inspect-icon {
  width: 28px; height: 28px;
  border: 1px solid rgba(200, 150, 42, 0.3);
  border-radius: 6px;
  background: rgba(8, 12, 11, 0.7);
  color: #d8d0c0;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.inspect-icon:hover { border-color: var(--gold); color: var(--gold); }
.inspect-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
/* IM tabs: pin compose; don't scroll the input under the message list */
.inspect-body:has(.inspect-im),
.inspect-body:has(.inspect-media) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
}
.inspect-body:has(.inspect-media) {
  overflow: hidden;
}
.inspect-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.inspect-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.32);
  background: rgba(3, 6, 5, 0.75);
  color: #fff;
  font-size: 0.78rem;
}
.inspect-search::placeholder { color: #7f8984; }
.inspect-people-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.inspect-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin: 0 0 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #e8e0d0;
  text-align: left;
  font: inherit;
}
.inspect-user:hover {
  border-color: rgba(200, 150, 42, 0.28);
  background: rgba(200, 150, 42, 0.06);
}
.inspect-user .mini-avatar {
  width: 32px; height: 36px;
  flex-shrink: 0;
}
.inspect-user .inspect-user-main {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.inspect-user b {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
}
/* Friends = teal; not-yet-friends = soft gold/muted */
.inspect-user.is-friend b {
  color: #5fd4cf;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 0.02em;
}
.inspect-user.not-friend b {
  color: #c9b896;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
}
.inspect-user span {
  display: block;
  font-size: 0.65rem;
  color: #7f8984;
}
.inspect-user-acts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.inspect-act {
  border: 1px solid rgba(200, 150, 42, 0.35);
  border-radius: 6px;
  background: rgba(8, 12, 11, 0.75);
  color: var(--gold-soft, #e6c98a);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.inspect-act:hover {
  border-color: var(--gold);
  color: #fff;
}
.inspect-act.danger {
  border-color: rgba(192, 57, 43, 0.45);
  color: #e07070;
}
.inspect-act.danger:hover {
  border-color: #c0392b;
  color: #ffb0a8;
}
.inspect-empty {
  color: #7f8984;
  font-size: 0.75rem;
  padding: 12px 6px;
  line-height: 1.45;
}
.inspect-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
.inspect-media .inspect-media-frame {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: #000;
  overflow: hidden;
}
.inspect-media img {
  /* Never stretch a tiny thumb into a pixelated wall */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(48vh, 360px);
  object-fit: contain;
  display: block;
  image-rendering: auto;
}
.inspect-media-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inspect-media .inspect-full-link {
  color: #c8a96e;
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.inspect-media .inspect-full-link:hover {
  color: #e4c57a;
}
.inspect-media-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #7f8984;
}
.inspect-ims-hub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.inspect-ims-hub .inspect-ims-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.inspect-ims-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin: 0 0 4px;
  border: 1px solid rgba(200, 150, 42, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}
.inspect-ims-row button.inspect-ims-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  color: #e8e0d0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.inspect-ims-row button.inspect-ims-open b {
  display: block;
  color: var(--gold-soft, #e8b84a);
  font-size: 0.78rem;
}
.inspect-ims-row button.inspect-ims-open span {
  display: block;
  font-size: 0.65rem;
  color: #7f8984;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspect-ims-row .inspect-ims-remove {
  flex-shrink: 0;
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(8, 12, 11, 0.7);
  color: #9a9284;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.65rem;
  cursor: pointer;
}
.inspect-ims-row .inspect-ims-remove:hover {
  color: #e07070;
  border-color: #c0392b;
}
.inspect-media a {
  color: var(--teal, #29c4c0);
  font-size: 0.78rem;
  word-break: break-all;
}
.inspect-md {
  color: #c8c2b4;
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.2);
  background: rgba(0, 0, 0, 0.25);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.inspect-md-loading { opacity: 0.65; font-style: italic; }
.inspect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.inspect-actions .profile-btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  padding: 7px 10px;
}
.inspect-im {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.inspect-im-msgs {
  flex: 1;
  min-height: 120px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.22);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inspect-im-msgs .im-row { margin: 0 0 8px; color: #e8e0d0; overflow-wrap: anywhere; }
.inspect-im-msgs .im-row strong { color: var(--gold); }
.inspect-im-compose {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-top: 2px;
  padding-top: 6px;
  background: linear-gradient(180deg, rgba(4, 7, 6, 0.92), rgba(4, 7, 6, 1));
}
.inspect-im-compose input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.3);
  background: rgba(3, 6, 5, 0.95);
  color: #fff;
  font-size: 0.78rem;
}
.inspect-im-compose button {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.meta-link {
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.meta-link:hover { color: #fff; }

/* ── House webpage rooms (FAQ / Terms / Policy / Contact) ── */
.page-room-doc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 38%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  pointer-events: none;
}
.page-room-doc:not([hidden]) {
  pointer-events: auto;
}
.page-room-doc[hidden] { display: none !important; }
.page-room-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 22px 28px;
  margin: 8px 10px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 12px;
  background: rgba(4, 8, 7, 0.55);
  backdrop-filter: blur(2px);
  color: #e8e0d0;
  font-size: 0.86rem;
  line-height: 1.55;
}
.page-room-scroll h1 {
  font-family: Cinzel, Georgia, serif;
  font-size: 1.35rem;
  color: var(--gold-soft, #e8b84a);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.page-room-scroll h2 {
  font-family: Cinzel, Georgia, serif;
  font-size: 1.02rem;
  color: var(--gold);
  margin: 22px 0 8px;
}
.page-room-scroll h3 {
  font-size: 0.92rem;
  color: #29c4c0;
  margin: 16px 0 6px;
}
.page-room-scroll p,
.page-room-scroll li { color: #d8d4c8; margin: 0 0 8px; }
.page-room-scroll ul { margin: 0 0 10px; padding-left: 1.2rem; }
.page-room-scroll a {
  color: var(--gold-soft, #e8b84a);
}
.page-room-scroll .lead { color: #9aa49e; margin-bottom: 16px; }
.page-room-scroll .rz-rule {
  padding: 10px 0;
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
.page-room-scroll .rz-rule:last-child { border-bottom: 0; }
.page-room-scroll .contact-form label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 10px 0 4px;
}
.page-room-scroll .contact-form input,
.page-room-scroll .contact-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
}
.page-room-scroll .contact-form .actions { margin-top: 12px; }
.page-room-scroll .contact-form button {
  border: 1px solid var(--gold);
  background: rgba(200, 150, 42, 0.18);
  color: var(--gold-soft, #e8b84a);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.page-room-scroll .hint { font-size: 0.78rem; color: #8a9088; }

/* Page-room layout: dock side rails to bottom tray, document in center */
body.is-page-room #site-copyright { display: none !important; }
body.is-page-room #app-shell {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 72px minmax(0, 1fr) auto minmax(180px, 240px);
}
body.is-page-room .topbar { grid-column: 1 / -1; grid-row: 1; }
body.is-page-room .center-col {
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 5;
}
body.is-page-room .composer {
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: 120px minmax(0, 1fr) 140px;
}
body.is-page-room .leftbar.shell-div1 {
  grid-column: 1;
  grid-row: 4;
  z-index: 9 !important;
  max-height: 240px;
  border-top: 1px solid rgba(200, 150, 42, 0.28);
  border-right: 1px solid rgba(200, 150, 42, 0.42);
}
body.is-page-room .rightbar.shell-div1 {
  grid-column: 2;
  grid-row: 4;
  z-index: 8 !important;
  max-height: 240px;
  border-top: 1px solid rgba(200, 150, 42, 0.28);
  border-left: 1px solid rgba(200, 150, 42, 0.42);
}
body.is-page-room .leftbar .shell-div3,
body.is-page-room .rightbar .shell-div3 {
  overflow-y: auto;
}
body.is-page-room .center-col {
  grid-template-rows: minmax(220px, 1fr) minmax(140px, 34%);
}
body.is-page-room #scene { opacity: 0.15; pointer-events: none; }
body.is-page-room #avatar-layer { display: none !important; }
body.is-page-room .page-room-doc {
  bottom: 34%;
}
body.is-page-room .chat-under { z-index: 6; }

.page-doc-visibility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 10px;
  border: 1px solid rgba(200, 150, 42, 0.35);
  background: rgba(3, 10, 7, 0.55);
  border-radius: 6px;
  font-size: 0.72rem;
}
.page-doc-visibility label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8962a;
  font-weight: 800;
}
.page-doc-visibility select {
  appearance: none;
  background: rgba(8, 16, 12, 0.9);
  border: 1px solid rgba(200, 150, 42, 0.4);
  color: #e8d9ba;
  padding: 4px 8px;
  border-radius: 4px;
}
.page-doc-visibility #page-doc-vis-status {
  color: #6b8574;
}

@media (max-width: 1200px) {
  .room-title-layer { display: none; }
}

/* Desktop-fixed rails — narrow viewports do not collapse the house
   (phones/tablets are redirected to /unsupported.html) */
@media (max-width: 980px) {
  #app-shell {
    grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
  }
  .composer { grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right); }
  .brand-wordmark { height: 26px; max-width: min(140px, 34vw); }
  .brand-dragon { width: 38px; height: 38px; }
  .hud-trigger { letter-spacing: 0.06em; padding: 0 8px; }
}