/* ============================================================================================
   VOLURR — SOVEREIGN UI · V2-C · the ROOM PANEL · the COMPOSER · DIRECT
   (app/static/css/sovereign-room.css — loads after sovereign-shell.css; tokens only)
   ============================================================================================
   The room is a surface for analysis, not a social toy: author, role, time, content, attachment,
   actions on intent. Chrome is a hairline, not a frame. The composer is a command surface: the
   input first, one primary send, secondary actions as ghosts. Direct is the same grammar at the
   same z-order as every other Room OS surface (it used to sit at z 2 147 483 000 over everything,
   including the modal).                                                                          */

/* ── DOCK HEAD ──────────────────────────────────────────────────────────────────────────── */
.lrd-dock .lrd-head{ gap:var(--sv-5); }
.lrd-dock .lrd-hav{ border-radius:var(--sv-r-m); }
.lrd-dock .lrd-head .lrd-hb{ width:32px; height:32px; border-radius:var(--sv-r-s); border:1px solid transparent;
  background:transparent; color:var(--sv-text-secondary); transition:background var(--sv-fast) var(--sv-ease), color var(--sv-fast) var(--sv-ease), border-color var(--sv-fast) var(--sv-ease); }
.lrd-dock .lrd-head .lrd-hb:hover{ background:var(--sv-surface-1); color:var(--sv-text-primary); border-color:var(--sv-border-subtle); }
.lrd-dock .lrd-head .lrd-hb.on{ color:var(--sv-red); background:var(--sv-red-soft); }
.lrd-dock .lrd-head .lrd-hb.danger:hover{ color:var(--sv-danger); background:var(--sv-danger-soft); border-color:transparent; }
.lrd-dock .lrd-head .lrd-hb svg{ width:var(--sv-ic-m); height:var(--sv-ic-m); }
@media (pointer:coarse){ .lrd-dock .lrd-head .lrd-hb{ width:var(--sv-target-touch); height:var(--sv-target-touch); } }
.lrd-dock .lrd-livebadge{ background:var(--sv-red); color:var(--sv-text-on-red); border-radius:var(--sv-r-s); padding:1px 6px; }

/* ── MEDIA ROW (voice · camera · share · ⋯): compact ghosts, one primary ───────────────── */
.lrd-dock .lrd-media{ padding:var(--sv-4) var(--sv-5); gap:var(--sv-3); border-bottom:1px solid var(--sv-border-subtle); }
.lrd-dock .lrd-media .lrd-vbtn{ min-height:32px; padding:0 var(--sv-5); border-radius:var(--sv-r-pill); font:var(--sv-t-label);
  background:transparent; border:1px solid var(--sv-border-subtle); color:var(--sv-text-secondary); }
.lrd-dock .lrd-media .lrd-vbtn:hover{ background:var(--sv-surface-1); color:var(--sv-text-primary); }
.lrd-dock .lrd-media .lrd-vbtn.join{ background:var(--sv-red); border-color:var(--sv-red); color:var(--sv-text-on-red); }
.lrd-dock .lrd-media .lrd-vbtn.join:hover{ background:var(--sv-red-hover); }
.lrd-dock .lrd-media .lrd-vbtn.lrd-share{ background:transparent; color:var(--sv-text-secondary); border-color:var(--sv-border-subtle); }
.lrd-dock .lrd-media .lrd-vbtn svg{ width:var(--sv-ic-s); height:var(--sv-ic-s); }
@media (pointer:coarse){ .lrd-dock .lrd-media .lrd-vbtn{ min-height:var(--sv-target-touch); } }

/* ── FEED: author · time · content, hairline actions on intent ─────────────────────────── */
.lrd-dock .lrd-body{ padding:var(--sv-5) var(--sv-5) var(--sv-4); }
.lrm{ margin-top:var(--sv-5); }
.lrm.same{ margin-top:var(--sv-1); }
.lrm-av{ width:28px; height:28px; border-radius:var(--sv-r-s); box-shadow:none; font:var(--sv-t-caption); }
.lrm-col{ max-width:86%; }
.lrm-nm{ margin:0 var(--sv-2) var(--sv-1); }
.lrm-bub{ padding:var(--sv-3) var(--sv-4); }
.lrm.in .lrm-bub{ border-start-start-radius:var(--sv-r-s); border-inline-start:2px solid var(--avc, var(--sv-border-subtle)); }
.lrm.out .lrm-bub{ border-start-end-radius:var(--sv-r-s); }
.lrm-t{ color:var(--sv-text-muted); }
.lrm-act, .lrm-pinbtn{ background:var(--sv-surface-floating); border-color:var(--sv-border-subtle); color:var(--sv-text-secondary); }
.lrm-act:hover, .lrm-pinbtn:hover{ color:var(--sv-red); border-color:var(--sv-red-line); }
.lrm-sys span{ background:transparent; border:1px solid var(--sv-border-subtle); color:var(--sv-text-muted); }
.lrm-pin{ background:var(--sv-surface-1); -webkit-backdrop-filter:none; backdrop-filter:none; border-inline-start:2px solid var(--sv-red); }

/* ── COMPOSER: a command surface ────────────────────────────────────────────────────────── */
.lrd-dock .lrd-foot{ padding:var(--sv-4) var(--sv-5) var(--sv-5); border-top:1px solid var(--sv-border-subtle); }
.lrd-compose .lrd-crow{ background:var(--sv-surface-1); border:1px solid var(--sv-border-subtle); border-radius:var(--sv-r-m); padding:var(--sv-1) var(--sv-2) var(--sv-1) var(--sv-1);
  min-height:var(--sv-target); box-shadow:none; gap:var(--sv-1);
  transition:border-color var(--sv-fast) var(--sv-ease), box-shadow var(--sv-fast) var(--sv-ease); }
.lrd-compose .lrd-crow:focus-within{ border-color:var(--sv-border-active); box-shadow:0 0 0 3px var(--sv-red-soft); }
.lrd-compose input#lrdChatIn{ font:var(--sv-t-body); color:var(--sv-text-primary); padding:0 var(--sv-3); min-height:calc(var(--sv-target) - 2px); }
.lrd-compose input#lrdChatIn::placeholder{ color:var(--sv-text-muted); }
.lrd-compose .lrd-attach{ width:32px; height:32px; border-radius:var(--sv-r-s); color:var(--sv-text-muted); }
.lrd-compose .lrd-attach:hover{ color:var(--sv-text-primary); background:var(--sv-surface-2); }
.lrd-compose .lrd-attach svg{ width:var(--sv-ic-m); height:var(--sv-ic-m); }
.lrd-send{ width:34px; height:34px; border-radius:var(--sv-r-s); background:var(--sv-red); color:var(--sv-text-on-red);
  transition:background var(--sv-fast) var(--sv-ease), transform var(--sv-fast) var(--sv-ease); }
.lrd-send:hover{ filter:none; background:var(--sv-red-hover); }
.lrd-send:active{ transform:scale(.96); }
.lrd-send svg{ width:var(--sv-ic-m); height:var(--sv-ic-m); }
.lrd-compose :is(input, button):focus-visible{ outline:none; box-shadow:var(--sv-focus); }
@media (pointer:coarse){
  .lrd-compose .lrd-crow{ min-height:var(--sv-target-touch); }
  .lrd-compose input#lrdChatIn{ min-height:var(--sv-target-touch); }
  /* the members pane's role selects and the seat cap are controls too */
  .lrd-dock .lrd-rolesel, .lrd-dock #lrdSeatCap, .lrd-dock .lrd-seatcap{ min-height:var(--sv-target-touch); }
  .lrd-compose .lrd-attach, .lrd-send{ width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce){ .lrd-send, .lrd-compose .lrd-crow, .lrd-dock .lrd-head .lrd-hb{ transition:none; } }

/* ── the AGI launcher keeps clear of the room (the audit: it sat on the send button) ─────── */
body.lr-docked .agi-launcher{ inset-inline-end:calc(var(--lr-dock) + 16px); }
body.sv-rail-on.lr-docked .agi-launcher{ inset-inline-end:calc(var(--lr-dock) + var(--sv-rail-w) + 16px); }
body.sv-rail-on:not(.lr-docked) .agi-launcher{ inset-inline-end:calc(var(--sv-rail-w) + 16px); }
@media (max-width:760px){
  body.lr-docked .agi-launcher{ inset-inline-end:max(16px, env(safe-area-inset-right)); bottom:calc(var(--lr-sheet, 55dvh) + 12px); }
}

/* ── DIRECT: the same grammar, the same order ───────────────────────────────────────────── */
#lrdm{ z-index:var(--sv-z-menu); background:var(--sv-scrim); -webkit-backdrop-filter:none; backdrop-filter:none; }
#lrdm .lrdm-card{ background:var(--sv-surface-0); box-shadow:var(--sv-el-overlay); }
body.sv-rail-on #lrdm .lrdm-card{ inset-inline-end:var(--sv-rail-w); }
#lrdm .lrdm-head{ padding:var(--sv-5) var(--sv-6); }
#lrdm .lrdm-htitle{ font:var(--sv-t-panel); color:var(--sv-text-primary); }
#lrdm .lrdm-head-m b{ font:var(--sv-t-panel); }
#lrdm .lrdm-head-m span{ font:var(--sv-t-meta); color:var(--sv-text-muted); }
#lrdm .lrdm-back, #lrdm .lrdm-x{ width:32px; height:32px; border-radius:var(--sv-r-s); color:var(--sv-text-secondary); font-size:var(--sv-fs-lg); }
#lrdm .lrdm-back:hover, #lrdm .lrdm-x:hover{ background:var(--sv-surface-1); color:var(--sv-text-primary); }
#lrdm .lrdm-av{ border-radius:var(--sv-r-m); }
#lrdm .lrdm-body{ padding:var(--sv-4) var(--sv-5); }
#lrdm .lrdm-thr{ padding:var(--sv-4) var(--sv-4); border-radius:var(--sv-r-s); border-bottom:1px solid var(--sv-border-subtle); transition:background var(--sv-fast) var(--sv-ease); }
#lrdm .lrdm-thr:hover{ background:var(--sv-surface-1); }
#lrdm .lrdm-thr-top b{ font:var(--sv-t-card); }
#lrdm .lrdm-thr-t{ font:var(--sv-t-caption); color:var(--sv-text-muted); }
#lrdm .lrdm-thr-last{ font:var(--sv-t-secondary); color:var(--sv-text-muted); }
#lrdm .lrdm-unread{ background:var(--sv-red); color:var(--sv-text-on-red); font:var(--sv-t-caption); border-radius:var(--sv-r-pill); padding:1px 6px; }
#lrdm .lrdm-composer{ padding:var(--sv-4) var(--sv-5) var(--sv-5); gap:var(--sv-3); }
#lrdm .lrdm-composer input{ font:var(--sv-t-body); background:var(--sv-surface-1); border:1px solid var(--sv-border-subtle); border-radius:var(--sv-r-m); padding:0 var(--sv-5); min-height:var(--sv-target); color:var(--sv-text-primary); }
#lrdm .lrdm-composer input:focus{ border-color:var(--sv-border-active); box-shadow:0 0 0 3px var(--sv-red-soft); outline:none; }
#lrdm .lrdm-send{ width:34px; height:34px; border-radius:var(--sv-r-s); background:var(--sv-red); color:var(--sv-text-on-red); font-size:0; display:grid; place-items:center; }
#lrdm .lrdm-send:hover{ filter:none; background:var(--sv-red-hover); }
#lrdm .lrdm-empty{ color:var(--sv-text-muted); }
#lrdm .lrdm-empty span{ font:var(--sv-t-secondary); }
#lrdm :is(button, input, [tabindex]):focus-visible{ outline:none; box-shadow:var(--sv-focus); }
@media (pointer:coarse){ #lrdm .lrdm-composer input{ min-height:var(--sv-target-touch); } #lrdm .lrdm-send, #lrdm .lrdm-back, #lrdm .lrdm-x{ width:var(--sv-target-touch); height:var(--sv-target-touch); } }

/* ── hub search input fills its 40 px field (DR-7: the input measured 20 px inside it) ───── */
html #lrhub .lrh-search input{ min-height:36px !important; }