bzl

styles.css (87061B)

---

 :root {
   --bg: #060611;
   --panel: #0c0c18;
   --text: #f6f0ff;
   --muted-pct: 65;
   --line-pct: 10;
   --panel2-pct: 2;
   --muted: color-mix(in srgb, var(--text) calc(var(--muted-pct) * 1%), transparent);
   --line: color-mix(in srgb, var(--text) calc(var(--line-pct) * 1%), transparent);
   --panel2: color-mix(in srgb, var(--text) calc(var(--panel2-pct) * 1%), transparent);
   --accent: #ff3ea5;
   --accent2: #b84bff;
   --warn: #ffb84d;
   --warn2: #ff7a18;
   --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --good: #3ddc97;
   --bad: #ff4d8a;
   --sidebar-width: 320px;
   --sidebar-min: 240px;
   --chat-width: 640px;
   --chat-min: 380px;
   --mod-width: 360px;
   --mod-min: 280px;
   --people-width: 360px;
   --people-min: 320px;
   --dur-fast: 110ms;
   --dur-med: 180ms;
   --dur-slow: 260ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
   --shadow-panel: 0 20px 70px rgba(0, 0, 0, 0.45);
   --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.35);
   --font-size-base: 15px;
   --font-size-small: 11px;
   --app-gap: 12px;
   --app-pad: 12px;
   --panel-pad: 14px;
   --panel-header-pad-y: 10px;
   --panel-header-pad-x: 12px;
   --label-font-size: 12px;
   --label-gap: 6px;
   --control-pad-y: 10px;
   --control-pad-x: 10px;
   --btn-pad-y: 10px;
   --btn-pad-x: 12px;
   --chat-rail-inset: 12px;
   --chat-rail-side-max: 66%;
   --chat-rail-center-max: 70%;
   --hotbar-safe-lane: 0px;
 }
 
 :root[data-ui-scale="xs"] {
   --font-size-base: 12px;
   --font-size-small: 9px;
   --app-gap: 7px;
   --app-pad: 7px;
   --panel-pad: 10px;
   --panel-header-pad-y: 8px;
   --panel-header-pad-x: 10px;
   --label-font-size: 11px;
   --label-gap: 5px;
   --control-pad-y: 8px;
   --control-pad-x: 9px;
   --btn-pad-y: 8px;
   --btn-pad-x: 10px;
 }
 
 :root[data-ui-scale="sm"] {
   --font-size-base: 13px;
   --font-size-small: 10px;
   --app-gap: 9px;
   --app-pad: 9px;
   --panel-pad: 12px;
   --panel-header-pad-y: 9px;
   --panel-header-pad-x: 11px;
   --label-font-size: 12px;
   --label-gap: 6px;
   --control-pad-y: 9px;
   --control-pad-x: 10px;
   --btn-pad-y: 9px;
   --btn-pad-x: 11px;
 }
 
 :root[data-ui-scale="md"] {
   --font-size-base: 15px;
   --font-size-small: 11px;
   --app-gap: 12px;
   --app-pad: 12px;
 }
 
 :root[data-ui-scale="lg"] {
   --font-size-base: 16px;
   --font-size-small: 12px;
   --app-gap: 14px;
   --app-pad: 14px;
 }
 
 :root[data-aspect="threeTwo"] {
   --sidebar-width: 300px;
   --sidebar-min: 230px;
   --chat-width: 600px;
   --chat-min: 360px;
   --people-width: 340px;
   --people-min: 300px;
   --mod-width: 340px;
   --mod-min: 280px;
   --app-gap: 10px;
   --app-pad: 10px;
   --chat-rail-side-max: 70%;
   --chat-rail-center-max: 74%;
 }
 
 :root[data-aspect="fourThree"] {
   --sidebar-width: 280px;
   --sidebar-min: 220px;
   --chat-width: 560px;
   --chat-min: 340px;
   --people-width: 320px;
   --people-min: 280px;
   --mod-width: 320px;
   --mod-min: 260px;
   --app-gap: 10px;
   --app-pad: 10px;
   --chat-rail-side-max: 74%;
   --chat-rail-center-max: 78%;
 }
 
 :root[data-aspect="portrait"] {
   --sidebar-width: 300px;
   --sidebar-min: 230px;
   --chat-width: 520px;
   --chat-min: 320px;
   --people-width: 320px;
   --people-min: 260px;
   --mod-width: 320px;
   --mod-min: 260px;
   --app-gap: 10px;
   --app-pad: 10px;
   --chat-rail-inset: 10px;
   --chat-rail-side-max: 88%;
   --chat-rail-center-max: 88%;
 }
 
 :root[data-aspect="ultrawide"] {
   --sidebar-width: 340px;
   --sidebar-min: 260px;
   --chat-width: 720px;
   --chat-min: 420px;
   --people-width: 400px;
   --people-min: 340px;
   --mod-width: 400px;
   --mod-min: 320px;
   --chat-rail-side-max: 62%;
   --chat-rail-center-max: 66%;
 }
 
 :root[data-viewport="xs"] {
   --sidebar-width: 230px;
   --sidebar-min: 210px;
   --chat-width: 480px;
   --chat-min: 300px;
   --people-width: 260px;
   --people-min: 250px;
   --mod-width: 260px;
   --mod-min: 250px;
   --app-gap: 8px;
   --app-pad: 8px;
   --chat-rail-inset: 10px;
   --chat-rail-side-max: 92%;
   --chat-rail-center-max: 92%;
 }
 
 :root[data-viewport="sm"] {
   --sidebar-width: 290px;
   --sidebar-min: 220px;
   --chat-width: 600px;
   --chat-min: 340px;
   --people-width: 320px;
   --people-min: 280px;
   --mod-width: 320px;
   --mod-min: 260px;
   --app-gap: 11px;
   --app-pad: 11px;
   --chat-rail-side-max: 78%;
   --chat-rail-center-max: 82%;
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   height: 100vh;
   font-family: var(--font-body);
   font-size: var(--font-size-base);
   background: radial-gradient(1200px 800px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
     radial-gradient(900px 700px at 90% 10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 50%), var(--bg);
   color: var(--text);
 }
 
 .app * {
   -webkit-tap-highlight-color: transparent;
 }
 
 .app {
   color-scheme: dark;
 }
 
 .app,
 .sidebar,
 .main,
 .chat,
 .moderation,
 .feed,
 .chatMessages,
 .modBody,
 .peopleDrawer,
 .peopleList,
 .modalBody {
   scrollbar-gutter: stable;
 }
 
 * {
   scrollbar-width: thin;
   scrollbar-color: color-mix(in srgb, var(--accent) 28%, transparent) rgba(0, 0, 0, 0);
 }
 
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--accent) 22%, transparent);
   border-radius: 999px;
   border: 2px solid rgba(0, 0, 0, 0);
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: color-mix(in srgb, var(--accent) 34%, transparent);
   border: 2px solid rgba(0, 0, 0, 0);
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
 
 .app ::selection {
   background: color-mix(in srgb, var(--accent) 25%, transparent);
 }
 
 .app a {
   color: #ffd2ea;
   text-decoration: none;
 }
 
 .app a:hover {
   text-decoration: underline;
 }
 
 .app a:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset;
   border-radius: 10px;
 }
 
 .hidden {
   display: none !important;
 }
 
 .small {
   font-size: var(--font-size-small);
 }
 
 .muted {
   color: var(--muted);
 }
 
 .app {
   display: grid;
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px minmax(var(--chat-min), var(--chat-width)) 10px 1fr;
   grid-template-areas: "sidebar sidebarResize chat chatResize main";
   gap: 0;
   padding: var(--app-pad);
   padding-bottom: calc(var(--app-pad) + var(--hotbar-safe-lane));
   height: 100vh;
   overflow: hidden;
   position: relative;
 }
 
 .app.hotbarVisible {
   --hotbar-safe-lane: calc(82px + env(safe-area-inset-bottom, 0px));
 }
 
 .app.rackMode {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
 }
 
 .app.rackMode .peopleToggle {
   display: none !important;
 }
 
 .app.rackMode.rightCollapsed,
 .app.rackMode.hasMod.rightCollapsed {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr;
   grid-template-areas: "sidebar sidebarResize main";
 }
 
 .app.rackMode.rightCollapsed #rightRack {
   display: none !important;
 }
 
 .app.rackMode.rightCollapsed .mainResizeHandle {
   display: none !important;
 }
 
 .app.sideCollapsed #mainSideRack {
   display: none !important;
 }
 
 .app.sideRackEmpty #mainSideRack {
   display: none !important;
 }
 
 .sideRackToggle {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 60;
 }
 
 .app.rackMode.rightCollapsed .sideRackToggle {
   right: 64px;
 }
 
 .app.rackMode.sideCollapsed .sideRackToggle {
   display: block !important;
 }
 
 .app.rackMode:not(.sideCollapsed) .sideRackToggle {
   display: none !important;
 }
 
 .rightRackToggle {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 70;
 }
 
 .app.rackMode.rightCollapsed .rightRackToggle {
   display: block !important;
 }
 
 .app.rackMode:not(.rightCollapsed) .rightRackToggle {
   display: none !important;
 }
 
 .pluginPanel .panelBody {
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
 .pluginRackPanel .pluginRackBody {
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
 .pluginRackToolbar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
 }
 
 .pluginRackWidgets {
   flex: 1;
   min-height: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: var(--app-gap);
   padding: 10px;
 }
 
 .pluginRackWidgets > .rackPanel {
   flex: 0 0 auto;
   min-height: 0;
 }
 
 .app.rackMode.hasMod {
   /* In rack mode, mod is just another panel inside the right rack. */
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
 }
 
 .app.hasMod {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px minmax(var(--chat-min), var(--chat-width)) 10px 1fr 10px minmax(var(--mod-min), var(--mod-width));
   grid-template-areas: "sidebar sidebarResize chat chatResize main mainResize moderation";
 }
 
 .app.chatRight {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--chat-min), var(--chat-width));
   grid-template-areas: "sidebar sidebarResize main chatResize chat";
 }
 
 .app.hasMod.chatRight {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--chat-min), var(--chat-width)) 10px minmax(var(--mod-min), var(--mod-width));
   grid-template-areas: "sidebar sidebarResize main chatResize chat mainResize moderation";
 }
 
 .app.rackMode.chatRight,
 .app.rackMode.hasMod.chatRight {
   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
 }
 
 @media (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
   .app {
     grid-template-columns: 300px 1fr;
     grid-template-rows: 1fr auto;
     grid-template-areas:
       "sidebar main"
       "chat chat";
     gap: var(--app-gap);
   }
   .app.hasMod {
     grid-template-columns: 300px 1fr;
     grid-template-rows: 1fr 45vh;
     grid-template-areas:
       "sidebar main"
       "chat moderation";
   }
   .chat {
     height: 45vh;
   }
   .moderation {
     height: 45vh;
   }
   .panelResizeHandle,
   .peopleResizeHandle {
     display: none;
   }
 
   .mainRack {
     flex-direction: column;
   }
   .sideRack {
     flex: 0 0 auto;
     min-width: 0;
     max-width: none;
   }
 }
 
 @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
   .app.sidebarHidden {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
     grid-template-areas:
       "main"
       "chat";
   }
 }
 
 .sidebar,
 .main,
 .chat,
 .moderation,
 .panelResizeHandle {
   min-width: 0;
   min-height: 0;
 }
 
 .sidebar {
   grid-area: sidebar;
   display: flex;
   flex-direction: column;
   gap: 0;
   overflow: hidden;
 }
 
 .rightRack {
   grid-area: rightRack;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 .rightRack .rackPanel {
   flex: 1;
   min-height: 0;
 }
 
 .sideRack .rackPanel {
   flex: 1;
   min-height: 0;
 }
 
 .rightRack .rackPanel.panelCollapsed,
 .sideRack .rackPanel.panelCollapsed {
   flex: 0 0 auto;
 }
 
 .rightRack .rackPanel > .panelBody,
 .rightRack .rackPanel > .panelFill,
 .rightRack .rackPanel .panelBody,
 .sideRack .rackPanel > .panelBody,
 .sideRack .rackPanel > .panelFill,
 .sideRack .rackPanel .panelBody {
   min-height: 0;
 }
 
 .panel.panelCollapsed {
   overflow: hidden;
 }
 
 .panel.panelCollapsed > :not(.panelHeader) {
   display: none !important;
 }
 
 .rackDragHandle {
   cursor: grab;
   user-select: none;
 }
 
 .rackDragHandle:active {
   cursor: grabbing;
 }
 
 .rackDragging {
   opacity: 0.86;
   box-shadow: 0 26px 90px rgba(0, 0, 0, 0.65);
 }
 
 .rackPlaceholder {
   border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
   border-radius: 18px;
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
 .app.rackMode .panelHeader {
   /* Slightly stronger header affordance in rack mode */
   background: linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent);
 }
 
 .app.rackMode .chat,
 .app.rackMode .moderation,
 .app.rackMode .peopleDrawer {
   position: static;
   grid-area: unset !important;
   height: auto;
   min-height: 0;
 }
 
 .app.rackMode .chatResizeHandle,
 .app.rackMode .peopleResizeHandle {
   display: none !important;
 }
 
 .app.rackMode .peopleDrawer {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
   box-shadow: var(--shadow-panel);
 }
 
 .dockHotbar {
   position: fixed;
   left: 50%;
   bottom: 10px;
   transform: translateX(-50%) translateY(28px);
   opacity: 0;
   pointer-events: none;
   z-index: 60;
   display: flex;
   gap: 12px;
   padding: 10px 12px;
   max-width: calc(100vw - 24px);
   overflow-x: auto;
   overscroll-behavior: contain;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
   background: color-mix(in srgb, var(--panel) 92%, transparent);
   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
   transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
 }
 
 .dockHotbar.show {
   transform: translateX(-50%) translateY(0);
   opacity: 1;
   pointer-events: auto;
 }
 
 .dockHotbar.dockTarget {
   border-color: color-mix(in srgb, var(--accent) 45%, transparent);
   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
 }
 
 .dockOrb.dragging {
   opacity: 0.6;
 }
 
 .dockOrb {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   flex: 0 0 auto;
   max-width: 220px;
   min-height: 38px;
   padding: 8px 13px;
   border-radius: 999px;
   border: 1px solid var(--line);
   background: color-mix(in srgb, var(--text) 6%, transparent);
   color: var(--text);
   cursor: grab;
   user-select: none;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
 }
 
 .dockOrb:hover {
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   border-color: color-mix(in srgb, var(--accent) 25%, transparent);
 }
 
 .dockOrb:active {
   cursor: grabbing;
 }
 
 .dockOrb .dockOrbIcon {
   width: 22px;
   height: 22px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 
 .hotbarHint {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   flex: 0 0 auto;
   min-height: 38px;
   padding: 8px 12px;
   border-radius: 999px;
   border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent);
   background: color-mix(in srgb, var(--text) 4%, transparent);
   color: color-mix(in srgb, var(--text) 82%, transparent);
   font-size: 12px;
   white-space: nowrap;
 }
 
 .hotbarHintGrip {
   font-weight: 700;
   opacity: 0.9;
 }
 
 .hotbarHintSep {
   opacity: 0.66;
 }
 
 .hotbarAddMenu {
   position: fixed;
   z-index: 90;
   width: 260px;
   max-height: min(320px, 70vh);
   overflow: hidden;
   border: 1px solid rgba(246, 240, 255, 0.16);
   border-radius: 14px;
   background: rgba(8, 8, 16, 0.92);
   backdrop-filter: blur(12px);
   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   animation: popFloat var(--dur-med) var(--ease-out) both;
 }
 
 .hotbarAddMenuList {
   overflow: auto;
   padding: 6px;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .dockOrbPlus .dockOrbIcon {
   background: color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 .sidebarScroll {
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding-right: 4px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .sidebarFooter {
   flex: 0 0 auto;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 10px;
   padding: 12px 14px 14px;
   border-top: 1px solid var(--line);
   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
 }
 
 .poweredByTile {
   text-decoration: none;
   color: inherit;
   width: 220px;
   height: 84px;
   border-radius: 16px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.10), rgba(184, 75, 255, 0.06) 55%), rgba(255, 255, 255, 0.02);
   box-shadow: 0 14px 46px rgba(0, 0, 0, 0.32);
   padding: 10px 12px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
 }
 
 a.poweredByTile:hover {
   transform: translateY(-1px);
   border-color: rgba(246, 240, 255, 0.24);
   box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
 }
 
 .poweredByLogo {
   width: 56px;
   height: 56px;
   object-fit: contain;
   border-radius: 14px;
   filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
 }
 
 .poweredByText {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
 
 .poweredByTitle {
   font-weight: 900;
   font-size: 13px;
   letter-spacing: 0.2px;
   line-height: 1.1;
 }
 
 .poweredByByline {
   font-size: 10px;
   color: rgba(246, 240, 255, 0.62);
   line-height: 1.1;
 }
 
 .poweredByVersion {
   font-size: 10px;
   color: rgba(246, 240, 255, 0.82);
   line-height: 1.1;
 }
 
 .appearanceWorkbench {
   margin-top: 12px;
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: color-mix(in srgb, var(--panel2) 80%, transparent);
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .appearanceWorkbenchHeader {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
 }
 
 .appearanceWorkbenchRow {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .appearanceColorGrid {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .appearanceWorkbenchActions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }
 
 @media (max-width: 980px) {
   .appearanceColorGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 .main {
   grid-area: main;
   display: flex;
   flex-direction: column;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 .mainRack {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: row;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 .workspaceRack {
   flex: 1;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   gap: var(--app-gap);
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   padding-bottom: 2px;
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack > .rackPanel {
   flex: 0 0 min(640px, 74vw);
   min-width: 280px;
   max-width: min(96vw, 1120px);
   min-height: 0;
   scroll-snap-align: start;
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack > .rackPanel.workspaceSizeSkinny {
   flex-basis: min(360px, 42vw);
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack > .rackPanel.workspaceSizeHalf {
   flex-basis: min(680px, 74vw);
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack > .rackPanel.workspaceSizeFull {
   flex-basis: min(1040px, 92vw);
 }
 
 .app.rackMode .workspaceRack > .rackPanel.workspaceArrivalGlow {
   animation: workspaceArrivalGlow 780ms ease-out;
 }
 
 .app.rackMode.workspaceInfinite .workspaceRack > .workspaceMinSpacer {
   flex: 0 0 auto;
   width: 0;
   min-width: 0;
   pointer-events: none;
 }
 
 .app.rackMode.workspaceInfinite .workspaceSlot {
   display: none !important;
 }
 
 .app.rackMode.workspaceInfinite .sideRack {
   display: none !important;
 }
 
 .app.rackMode.workspaceInfinite .rightRack {
   display: flex;
 }
 
 .panelSizeControls {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 1px;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
   background: color-mix(in srgb, var(--text) 5%, transparent);
 }
 
 .panelSizeBtn {
   min-width: 24px;
   padding: 4px 7px;
   font-size: 11px;
   line-height: 1;
 }
 
 .panelSizeBtn.isActive {
   border-color: color-mix(in srgb, var(--accent) 30%, transparent);
   background: color-mix(in srgb, var(--accent) 22%, transparent);
   color: var(--text);
 }
 
 /* Workspace 4x2 grid (rack mode) */
 .app.rackMode .workspaceRack {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-template-rows: repeat(2, minmax(0, 1fr));
   gap: var(--app-gap);
 }
 
 .workspaceSlot {
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
 .workspaceSlot.workspaceSlotEmpty {
   border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent);
   border-radius: 14px;
   background: color-mix(in srgb, var(--panel) 88%, transparent);
   align-items: center;
   justify-content: center;
 }
 
 .workspaceEmptyAdd {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border-radius: 999px;
   padding: 10px 14px;
   border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
 .workspaceEmptyAddPlus {
   width: 20px;
   height: 20px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: color-mix(in srgb, var(--accent) 24%, transparent);
   font-weight: 900;
 }
 
 .workspaceSlot > .rackPanel {
   flex: 1;
   min-height: 0;
 }
 
 .workspaceSlot > .rackPanel > .panelBody,
 .workspaceSlot > .rackPanel > .panelFill,
 .workspaceSlot > .rackPanel .panelBody {
   min-height: 0;
 }
 
 .workspaceSlotLeft {
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
 }
 
 .workspaceSlotRight {
   grid-column: 3 / span 2;
   grid-row: 1 / span 2;
 }
 
 .app.rackMode.workspaceExpandedLeft #workspaceLeftSlot,
 .app.rackMode.workspaceExpandedRight #workspaceRightSlot {
   grid-column: 1 / span 4;
 }
 
 .app.rackMode.workspaceExpandedLeft #workspaceRightSlot,
 .app.rackMode.workspaceExpandedRight #workspaceLeftSlot {
   display: none;
 }
 
 .app.rackMode:not(.rackIsDragging).workspaceSingleLeft #workspaceLeftSlot {
   grid-column: 1 / span 4;
 }
 
 .app.rackMode:not(.rackIsDragging).workspaceSingleLeft #workspaceRightSlot {
   display: none;
 }
 
 .app.rackMode:not(.rackIsDragging).workspaceSingleRight #workspaceRightSlot {
   grid-column: 1 / span 4;
 }
 
 .app.rackMode:not(.rackIsDragging).workspaceSingleRight #workspaceLeftSlot {
   display: none;
 }
 
 .app:not(.rackMode) .workspaceSlot {
   display: none;
 }
 
 .sideRack {
   flex: 0 0 min(380px, 30vw);
   min-width: 260px;
   max-width: 420px;
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 .chat {
   grid-area: chat;
   display: flex;
   flex-direction: column;
   gap: 0;
   overflow: hidden;
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
   border: 1px solid var(--line);
   border-radius: 16px;
   box-shadow: var(--shadow-soft);
 }
 
 .moderation {
   grid-area: moderation;
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow: hidden;
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 10px;
   box-shadow: var(--shadow-soft);
 }
 
 .panelResizeHandle {
   grid-area: chatResize;
   display: block;
   position: relative;
   z-index: 3;
   border-radius: 999px;
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.24), rgba(255, 255, 255, 0.12));
   border: 1px solid rgba(246, 240, 255, 0.26);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
   cursor: col-resize;
   align-self: stretch;
 }
 
 .panelResizeHandle:hover {
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.35), rgba(255, 255, 255, 0.16));
 }
 
 .panelResizeHandle::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 2px;
   height: 34px;
   transform: translate(-50%, -50%);
   border-radius: 999px;
   background: rgba(246, 240, 255, 0.55);
 }
 
 .sidebarResizeHandle {
   grid-area: sidebarResize;
 }
 
 .chatResizeHandle {
   grid-area: chatResize;
 }
 
 .mainResizeHandle {
   grid-area: mainResize;
 }
 
 .app.sidebarHidden .sidebarResizeHandle,
 .app:not(.hasMod) .mainResizeHandle {
   display: none;
 }
 
 .app.isResizing {
   user-select: none;
   cursor: col-resize;
 }
 
 .app.isDocking {
   user-select: none;
 }
 
 .chat .panelHeader {
   cursor: grab;
 }
 
 .app.isDocking .chat .panelHeader {
   cursor: grabbing;
 }
 
 .moderation .panelHeader,
 .moderation .modTabs,
 .moderation .modFilters {
   flex: 0 0 auto;
 }
 
 .brand {
   padding: 14px 14px 0;
 }
 
 .smallBtn {
   padding: 6px 10px;
   border-radius: 999px;
   white-space: nowrap;
   line-height: 1;
 }
 
 .mapChatToggle {
   display: inline-flex;
   gap: 6px;
   margin-left: 6px;
   vertical-align: middle;
 }
 
 .sidebarToggle {
   position: fixed;
   bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   left: 12px;
   top: auto;
   z-index: 20;
 }
 
 .peopleToggle {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 70;
 }
 
 .app.sidebarHidden {
   grid-template-columns: minmax(var(--chat-min), var(--chat-width)) 10px 1fr;
   grid-template-areas: "chat chatResize main";
 }
 
 .app.sidebarHidden.hasMod {
   grid-template-columns: minmax(var(--chat-min), var(--chat-width)) 10px 1fr 10px minmax(var(--mod-min), var(--mod-width));
   grid-template-areas: "chat chatResize main mainResize moderation";
 }
 
 .app.rackMode.sidebarHidden,
 .app.rackMode.hasMod.sidebarHidden {
   grid-template-columns: 1fr 10px minmax(var(--people-min), var(--people-width));
   grid-template-areas: "main mainResize rightRack";
 }
 
 .app.rackMode.sidebarHidden.rightCollapsed,
 .app.rackMode.hasMod.sidebarHidden.rightCollapsed {
   grid-template-columns: 1fr;
   grid-template-areas: "main";
 }
 
 .peopleDrawer {
   position: fixed;
   top: 12px;
   right: 12px;
   bottom: 12px;
   width: min(var(--people-width), calc(100vw - 24px));
   z-index: 75;
   display: flex;
   flex-direction: column;
   gap: 10px;
   border: 1px solid var(--line);
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
   box-shadow: var(--shadow-panel);
   overflow: hidden;
 }
 
 .peopleResizeHandle {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 10px;
   z-index: 3;
   cursor: col-resize;
   border-right: 1px solid rgba(246, 240, 255, 0.26);
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.24), rgba(255, 255, 255, 0.12));
 }
 
 .peopleResizeHandle:hover {
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.35), rgba(255, 255, 255, 0.16));
 }
 
 .peopleResizeHandle::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 2px;
   height: 36px;
   transform: translate(-50%, -50%);
   border-radius: 999px;
   background: rgba(246, 240, 255, 0.55);
 }
 
 .peopleDrawer:not(.hidden) {
   animation: drawerIn var(--dur-slow) var(--ease-out) both;
 }
 
 .modal {
   position: fixed;
   inset: 0;
   z-index: 120;
   display: grid;
   place-items: center;
   padding: 16px;
 }
 
 .modal:not(.hidden) .modalBackdrop {
   animation: fadeIn var(--dur-slow) var(--ease-out) both;
 }
 
 .modal:not(.hidden) .modalCard {
   animation: modalIn var(--dur-slow) var(--ease-out) both;
 }
 
 .modalBackdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(6px);
 }
 
 .modalCard {
   position: relative;
   width: min(920px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   z-index: 1;
 }
 
 .modalBody {
   padding: 12px;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-height: 0;
 }
 
 .editModalEditor {
   min-height: 180px;
   max-height: 45vh;
   overflow: auto;
 }
 
 .modalActions {
   justify-content: flex-end;
 }
 
 .shortcutHelpBody {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .editMetaGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }
 
 .checkRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .checkRow input[type="checkbox"] {
   width: 18px;
   height: 18px;
 }
 
 .roleRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .roleRowLeft {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
 }
 
 .roleSwatch {
   width: 12px;
   height: 12px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   flex: 0 0 auto;
 }
 
 .roleMeta {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
 .roleKey {
   font-size: 12px;
   opacity: 0.75;
 }
 
 .roleCreateRow {
   display: grid;
   grid-template-columns: 1fr 1fr 120px auto;
   gap: 8px;
   align-items: end;
 }
 
 .roleCreateRow input[type="color"] {
   height: 40px;
   width: 100%;
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: transparent;
 }
 
 .gateList {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .gateOption {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .gateOptionLeft {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 @media (max-width: 900px) {
   .modal {
     padding: 0;
   }
   .modalCard {
     width: 100%;
     height: 100%;
     border-radius: 0;
   }
   .editModalEditor {
     max-height: none;
     flex: 1;
   }
   .editMetaGrid {
     grid-template-columns: 1fr;
   }
   .roleCreateRow {
     grid-template-columns: 1fr;
   }
 }
 
 .peopleTabs {
   display: flex;
   gap: 8px;
   padding: 0 10px;
 }
 
 .peopleTabs button {
   flex: 1;
   padding: 8px 10px;
 }
 
 .peopleFilters {
   padding: 0 10px;
 }
 
 .peopleList {
   padding: 10px;
   overflow: auto;
   min-height: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 #peopleMembersView {
   display: flex;
   flex-direction: column;
   min-height: 0;
   flex: 1;
 }
 
 .peopleCard {
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 12px;
   padding: 8px;
   background: rgba(255, 255, 255, 0.02);
   display: flex;
   flex-direction: column;
   gap: 4px;
   transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
   cursor: pointer;
 }
 
 .peopleCard:hover {
   border-color: rgba(246, 240, 255, 0.22);
   background: rgba(255, 255, 255, 0.03);
   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
 }
 
 .peopleCard:active {
   transform: scale(0.99);
 }
 
 .peopleCard:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12), 0 12px 34px rgba(0, 0, 0, 0.22);
   border-color: rgba(255, 62, 165, 0.28);
 }
 
 .peopleCardActions {
   display: flex;
   justify-content: flex-end;
 }
 
 .peopleCardTop {
   display: flex;
   justify-content: space-between;
   gap: 8px;
   align-items: center;
 }
 
 .peopleStatus {
   font-size: 11px;
   color: var(--muted);
 }
 
 .peopleDms {
   padding: 12px;
 }
 
 .dmHeader {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
 }
 
 .dmNewRow {
   display: flex;
   gap: 8px;
   align-items: center;
 }
 
 .dmToSelect {
   flex: 1;
   height: 34px;
   padding: 6px 10px;
   border-radius: 10px;
 }
 
 .dmThreadList {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .dmThreadCard {
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 12px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.02);
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .dmThreadTop {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
 }
 
 .dmThreadLeft {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .dmTag {
   font-size: 11px;
   padding: 4px 10px;
   border-radius: 999px;
   border: 1px solid rgba(246, 240, 255, 0.16);
   background: rgba(255, 255, 255, 0.03);
 }
 
 .dmTagIncoming {
   border-color: rgba(61, 220, 151, 0.28);
   background: rgba(61, 220, 151, 0.10);
   color: #c7ffe7;
 }
 
 .dmTagActive {
   border-color: rgba(255, 62, 165, 0.30);
   background: rgba(255, 62, 165, 0.10);
   color: #ffd2ea;
 }
 
 .dmTagPending {
   border-color: rgba(246, 240, 255, 0.16);
   background: rgba(255, 255, 255, 0.03);
   color: var(--muted);
 }
 
 .dmTagDeclined {
   border-color: rgba(255, 77, 138, 0.24);
   background: rgba(255, 77, 138, 0.08);
   color: #ffd2e2;
 }
 
 .profileActions {
   margin-left: auto;
   display: flex;
   align-items: center;
 }
 
 .walkieBar {
   padding: 10px 12px 12px;
   border-top: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .walkieBar button {
   width: 100%;
   font-weight: 800;
 }
 
 .walkieBar.isRecording button {
   background: linear-gradient(180deg, rgba(61, 220, 151, 0.95), rgba(18, 168, 111, 0.90));
   border-color: rgba(61, 220, 151, 0.30);
 }
 
 .walkieHint .tag {
   padding: 2px 8px;
   font-size: 11px;
 }
 
 .chat.walkie .chatForm {
   display: none;
 }
 
 .chat.walkie #typingIndicator {
   display: none;
 }
 
 .streamStage {
   margin: 10px 12px 0;
   padding: 10px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
   display: flex;
   flex-direction: column;
   gap: 8px;
   position: sticky;
   top: 0;
   z-index: 4;
   backdrop-filter: blur(2px);
 }
 
 .streamStageHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 
 .streamStageTitle {
   font-weight: 800;
 }
 
 .streamStageVideo,
 .streamStageAudio {
   width: 100%;
   border-radius: 12px;
   border: 1px solid rgba(246, 240, 255, 0.12);
   background: rgba(0, 0, 0, 0.25);
 }
 
 .streamStageVideo {
   max-height: min(42vh, 320px);
   object-fit: contain;
 }
 
 .streamStagePlaceholder {
   padding: 8px 10px;
   border: 1px dashed rgba(246, 240, 255, 0.16);
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.12);
 }
 
 .streamVoiceControls {
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.16);
   padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .streamVoiceToggleRow {
   padding: 8px 10px;
 }
 
 .streamVoiceButtonsRow {
   gap: 8px;
 }
 
 .streamVoiceUsers {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .streamVoiceUserRow {
   display: grid;
   grid-template-columns: 1fr minmax(90px, 170px);
   align-items: center;
   gap: 8px;
 }
 
 .app.sidebarHidden .sidebar {
   display: none;
 }
 
 .logo {
   font-weight: 900;
   letter-spacing: 0.6px;
   font-size: 20px;
 }
 
 .subtitle {
   font-size: 12px;
   color: var(--muted);
   margin-top: 4px;
 }
 
 .statusBlock {
   padding: 0 14px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .statusBlock .row {
   margin-top: 4px;
 }
 
 .notifOptions {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .notifCheckRow {
   padding: 6px 10px;
   border-radius: 10px;
 }
 
 .notifCheckRow span {
   font-size: 12px;
 }
 
 .toastHost {
   position: fixed;
   right: 16px;
   bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 50;
 }
 
 .toast {
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: rgba(12, 12, 24, 0.92);
   backdrop-filter: blur(10px);
   border-radius: 14px;
   padding: 10px 12px;
   max-width: min(360px, calc(100vw - 32px));
   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   animation: toastIn var(--dur-slow) var(--ease-out) both;
 }
 
 .toastTitle {
   font-weight: 800;
   font-size: 12px;
   margin-bottom: 4px;
 }
 
 .toastBody {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.15rem;
 }
 
 .panel {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--panel);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: var(--panel-pad);
   box-shadow: var(--shadow-soft);
 }
 
 .panelFill {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
 .panelHeader {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
   padding: var(--panel-header-pad-y) var(--panel-header-pad-x) calc(var(--panel-header-pad-y) - 2px);
   border-bottom: 1px solid var(--line);
 }
 
 .panelTitle {
   font-weight: 800;
 }
 
 .uiHint {
   margin-top: 8px;
   margin-bottom: 8px;
   padding: 8px 10px;
   border-radius: 10px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: rgba(120, 50, 190, 0.12);
   color: var(--muted);
   font-size: 12px;
   line-height: 1.1rem;
 }
 
 .app:not(.hintsEnabled) .uiHint {
   display: none !important;
 }
 
 .panelTitleSub {
   font-weight: 800;
   margin-top: 2px;
 }
 
 .panelDivider {
   height: 1px;
   background: var(--line);
   margin: 12px 0;
 }
 
 .pluginInstallRow {
   display: flex;
   gap: 8px;
   align-items: center;
   margin-top: 8px;
 }
 
 .pluginInstallRow input[type="file"] {
   padding: 8px;
 }
 
 .pluginsList {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 10px;
 }
 
 .pluginRow {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.02);
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: flex-start;
 }
 
 .pluginName {
   font-weight: 800;
 }
 
 .pluginDesc {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.05rem;
   margin-top: 4px;
 }
 
 .pluginBadges {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: 8px;
 }
 
 .pluginBadge {
   font-size: 11px;
   color: var(--muted);
   border: 1px solid rgba(246, 240, 255, 0.14);
   padding: 3px 7px;
   border-radius: 999px;
 }
 
 .pluginError {
   color: #ffb3c6;
   font-size: 12px;
   margin-top: 8px;
 }
 
 .form {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .row {
   display: flex;
   gap: 10px;
 }
 
 .grow {
   flex: 1;
 }
 
 .onboardingCard {
   margin-top: 10px;
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .onboardingAbout {
   max-height: 180px;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 8px;
   background: rgba(255, 255, 255, 0.01);
 }
 
 .onboardingRules {
   margin: 8px 0 0 18px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .onboardingPanelBody {
   padding: 10px;
   overflow: auto;
 }
 
 .onbTabs {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }
 
 .onbRuleList,
 .onbRuleEditorList {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .onbRuleViewerCard,
 .onbRuleEditorCard {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .onbRuleEditorBody {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 8px;
 }
 
 .onbRoleGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 8px;
   margin-top: 8px;
 }
 
 .onbSeverityInfo {
   border-color: rgba(61, 220, 151, 0.55);
   color: #9beac7;
 }
 
 .onbSeverityWarn {
   border-color: rgba(255, 166, 0, 0.55);
   color: #ffd28d;
 }
 
 .onbSeverityCritical {
   border-color: rgba(255, 77, 138, 0.65);
   color: #ffb3cb;
 }
 
 .goodText {
   color: var(--good);
 }
 
 .badText {
   color: var(--bad);
 }
 
 label span {
   display: block;
   color: var(--muted);
   font-size: var(--label-font-size);
   margin-bottom: var(--label-gap);
 }
 
 input,
 textarea,
 select {
   width: 100%;
   color: var(--text);
   background: color-mix(in srgb, var(--text) 3%, transparent);
   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   border-radius: 12px;
   padding: var(--control-pad-y) var(--control-pad-x);
   outline: none;
 }
 
 select option,
 select optgroup {
   color: #11131a;
   background: #f4f6fb;
 }
 
 select option:checked {
   color: #0f1724;
   background: #8eb8e6;
 }
 
 select optgroup {
   font-weight: 700;
   background: #e7ebf3;
 }
 
 input:focus,
 textarea:focus,
 select:focus,
 .editor:focus-within {
   border-color: color-mix(in srgb, var(--accent) 45%, transparent);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
 button {
   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   background: color-mix(in srgb, var(--text) 4%, transparent);
   color: var(--text);
   border-radius: 12px;
   padding: var(--btn-pad-y) var(--btn-pad-x);
   cursor: pointer;
   transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft),
     background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
 }
 
 button.primary {
   background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, transparent), color-mix(in srgb, var(--accent2) 90%, transparent));
   border-color: color-mix(in srgb, var(--accent) 30%, transparent);
   color: #120013;
   font-weight: 900;
 }
 
 button.ghost {
   background: transparent;
 }
 
 button.danger {
   border-color: rgba(255, 77, 138, 0.26);
   background: color-mix(in srgb, var(--bad) 10%, transparent);
 }
 
 button.danger:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bad) 14%, transparent);
   border-color: color-mix(in srgb, var(--bad) 35%, transparent);
 }
 
 button:hover {
   transform: translateY(-1px);
 }
 
 button:active {
   transform: translateY(0px) scale(0.985);
 }
 
 button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
   border-color: color-mix(in srgb, var(--accent) 35%, transparent);
 }
 
 button:disabled {
   opacity: 0.55;
   cursor: not-allowed;
   transform: none;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 12px;
   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   background: color-mix(in srgb, var(--text) 2%, transparent);
 }
 
 .badge-good {
   border-color: color-mix(in srgb, var(--good) 25%, transparent);
   background: color-mix(in srgb, var(--good) 10%, transparent);
   color: #baf6dd;
 }
 
 .badge-warn {
   border-color: color-mix(in srgb, var(--accent) 30%, transparent);
   background: color-mix(in srgb, var(--accent) 10%, transparent);
   color: #ffd2ea;
 }
 
 .badge-bad {
   border-color: color-mix(in srgb, var(--bad) 30%, transparent);
   background: color-mix(in srgb, var(--bad) 10%, transparent);
   color: #ffd2e2;
 }
 
 .filters {
   display: flex;
   gap: 6px;
   align-items: center;
   flex-wrap: nowrap;
   padding: 6px;
   border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
   border-radius: 12px;
   background: color-mix(in srgb, var(--text) 2%, transparent);
   overflow-x: auto;
   max-width: 100%;
 }
 
 .filters input,
 .filters select {
   min-width: 0;
   height: 34px;
   padding: 6px 10px;
   border-radius: 10px;
   font-size: 13px;
 }
 
 .filters #filterAuthor {
   width: 170px;
 }
 
 .filters #filterKeywords {
   width: 210px;
 }
 
 .filters #sortBy {
   width: 170px;
 }
 
 .filters button {
   height: 34px;
   padding: 6px 12px;
   border-radius: 10px;
   font-size: 13px;
 }
 
 .hiveTabs {
   display: flex;
   gap: 10px;
   padding: 14px 12px 12px;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--line);
   margin-bottom: 6px;
   position: relative;
 }
 
 .hiveTabs::before {
   content: "";
   position: absolute;
   left: 12px;
   right: 12px;
   top: 0;
   height: 1px;
   background: linear-gradient(90deg, rgba(255, 62, 165, 0.26), rgba(184, 75, 255, 0.12), transparent);
 }
 
 .hiveTabs button {
   padding: 10px 16px;
   font-size: 13px;
   border-radius: 999px;
   font-weight: 700;
 }
 
 .mobileComposerToggle {
   display: inline-flex;
 }
 
 .mobileOnlyHiveControl {
   display: none;
 }
 
 #pollinatePanel.composerCollapsed {
   display: none;
 }
 
 .feed {
   padding: 12px;
   overflow: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
   align-content: start;
   min-height: 0;
 }
 
 .profileViewBody {
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding: 12px;
 }
 
 .profileCard {
   border: 1px solid rgba(246, 240, 255, 0.12);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .profileHeader {
   display: flex;
   gap: 12px;
   align-items: center;
   border: 1px solid rgba(246, 240, 255, 0.12);
   border-radius: 12px;
   padding: 10px;
   background: linear-gradient(180deg, rgba(255, 62, 165, 0.08), rgba(255, 255, 255, 0.02));
 }
 
 .profileHeroPfp {
   width: 72px;
   height: 72px;
   border-radius: 10px;
 }
 
 .profileIdentity {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
 .profileHandle {
   font-size: 21px;
   font-weight: 900;
 }
 
 .profileSection {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .profileBio {
   line-height: 1.35rem;
 }
 
 .profileBio img {
   max-width: 100%;
   max-height: min(420px, 55vh);
   object-fit: contain;
   border-radius: 12px;
   display: block;
   cursor: zoom-in;
 }
 
 .editor img {
   max-width: 100%;
   max-height: min(420px, 55vh);
   object-fit: contain;
   border-radius: 12px;
   display: block;
   margin-top: 8px;
   cursor: zoom-in;
 }
 
 .ytEmbed {
   margin-top: 8px;
   border: 1px solid rgba(246, 240, 255, 0.12);
   border-radius: 14px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.02);
   aspect-ratio: 16 / 9;
   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
 }
 
 .ytEmbed iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
 }
 
 .profileBio audio {
   width: 100%;
   margin-top: 8px;
 }
 
 .profileLinksWrap {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
 
 .profileLinkTag {
   text-decoration: none;
 }
 
 .profileEditPanel {
   border-top: 1px solid var(--line);
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 46vh;
   overflow: auto;
 }
 
 .profileBioEditor {
   min-height: 120px;
   max-height: 260px;
   overflow: auto;
 }
 
 .profileLinksHead {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
 }
 
 .profileLinksEditor {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .profileLinkEditRow {
   display: grid;
   grid-template-columns: 1fr 1.4fr auto;
   gap: 8px;
   align-items: center;
 }
 
 @media (max-width: 1100px) {
   .panelHeader {
     align-items: flex-start;
   }
 
   .filters {
     flex-wrap: wrap;
     overflow-x: visible;
   }
 
   .filters #filterAuthor,
   .filters #filterKeywords,
   .filters #sortBy {
     width: 100%;
   }
 
   .profileLinkEditRow {
     grid-template-columns: 1fr;
   }
 }
 
 .post {
   border: 1px solid rgba(246, 240, 255, 0.12);
   border-radius: 14px;
   padding: 12px;
   background: var(--panel2);
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
   transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
     background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
 }
 
 .feed.hivesListView .post {
   padding: 10px;
   gap: 6px;
 }
 
 .feed.hivesListView .postTop {
   align-items: center;
 }
 
 .feed.hivesListView .postTitleRow {
   gap: 0;
   min-width: 0;
 }
 
 .feed.hivesListView .postTitle {
   margin-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .feed.hivesListView .postMeta,
 .feed.hivesListView .reactionsRow,
 .feed.hivesListView .boostControls,
 .feed.hivesListView .countdown.boost {
   display: none !important;
 }
 
 .feed.hivesListView .postMeta {
   display: flex !important;
   margin-top: 6px;
   flex-wrap: nowrap;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   gap: 6px;
 }
 
 .feed.hivesListView .rightCol {
   gap: 6px;
 }
 
 .post:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 62, 165, 0.22);
   background: rgba(255, 255, 255, 0.03);
   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
 }
 
 .post.isUnread {
   box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.18), 0 14px 40px rgba(255, 62, 165, 0.10);
 }
 
 .post.isNew {
   animation: glowPop 900ms ease-out;
 }
 
 .post.isBuzz {
   animation: buzzPulse 700ms ease-out;
 }
 
 @keyframes glowPop {
   0% {
     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.05), 0 0 0 rgba(255, 62, 165, 0.0);
     transform: translateY(0px);
   }
   40% {
     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.30), 0 18px 60px rgba(255, 62, 165, 0.18);
     transform: translateY(-2px);
   }
   100% {
     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0.0);
     transform: translateY(0px);
   }
 }
 
 @keyframes buzzPulse {
   0% {
     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0);
   }
   40% {
     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.18), 0 8px 22px rgba(255, 62, 165, 0.08);
   }
   100% {
     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0);
   }
 }
 
 @keyframes workspaceArrivalGlow {
   0% {
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 0 0 rgba(255, 62, 165, 0);
   }
   35% {
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent), 0 18px 52px color-mix(in srgb, var(--accent) 22%, transparent);
   }
   100% {
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 0 0 rgba(255, 62, 165, 0);
   }
 }
 
 .badgeDot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: rgba(255, 62, 165, 0.95);
   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.15);
 }
 
 .postTop {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   align-items: flex-start;
 }
 
 .postContent {
   line-height: 1.25rem;
 }
 
 .postTitle {
   font-weight: 900;
   letter-spacing: 0.2px;
   margin-bottom: 6px;
 }
 
 .postTitleRow {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .postContent p {
   margin: 0 0 8px;
 }
 
 .postContent p:last-child {
   margin-bottom: 0;
 }
 
 .postMeta {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 10px;
 }
 
 .postLastChat,
 .postTypingLine {
   margin-top: 6px;
 }
 
 .postStreamLine {
   margin-top: 6px;
   color: color-mix(in srgb, var(--accent) 52%, var(--text));
 }
 
 .reactionsRow {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   align-items: center;
   margin-top: 10px;
 }
 
 .customRoleRow {
   display: inline-flex;
   gap: 4px;
   margin-left: 6px;
   flex-wrap: wrap;
 }
 
 .reactBtn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid rgba(246, 240, 255, 0.12);
   background: rgba(255, 255, 255, 0.02);
   cursor: pointer;
   user-select: none;
   transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft),
     background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
 }
 
 .reactBtn:hover {
   transform: translateY(-1px);
   background: rgba(255, 255, 255, 0.035);
   border-color: rgba(246, 240, 255, 0.18);
 }
 
 .reactBtn:active {
   transform: translateY(0px) scale(0.985);
 }
 
 .reactBtn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12);
   border-color: rgba(255, 62, 165, 0.28);
 }
 
 .reactBtn .count {
   font-size: 12px;
   color: var(--muted);
 }
 
 .reactBtn.isOn {
   border-color: rgba(255, 62, 165, 0.30);
   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.08);
 }
 
 .reactBtn.pulse {
   animation: reactPop 420ms var(--ease-out) both;
 }
 
 .tag {
   font-size: 12px;
   padding: 4px 8px;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
   background: color-mix(in srgb, var(--accent) 10%, transparent);
   color: #ffd2ea;
 }
 
 .rightCol {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end;
 }
 
 .postActionsRow {
   display: flex;
   gap: 6px;
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   position: relative;
 }
 
 .kebabBtn {
   width: 38px;
   height: 34px;
   padding: 0;
   border-radius: 12px;
   line-height: 34px;
   font-weight: 900;
 }
 
 .postMenu {
   position: absolute;
   right: 0;
   top: calc(100% + 6px);
   z-index: 40;
   width: 170px;
   max-width: min(240px, calc(100vw - 48px));
   border: 1px solid rgba(246, 240, 255, 0.16);
   border-radius: 14px;
   background: rgba(8, 8, 16, 0.92);
   backdrop-filter: blur(12px);
   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   padding: 6px;
   animation: popFloat var(--dur-med) var(--ease-out) both;
 }
 
 .postMenu button {
   width: 100%;
   text-align: left;
   padding: 8px 10px;
   border-radius: 12px;
 }
 
 .postMenu button:hover {
   transform: none;
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(246, 240, 255, 0.18);
 }
 
 .postMenu button:active {
   transform: scale(0.99);
 }
 
 .postMenu button.danger {
   border-color: rgba(255, 77, 138, 0.26);
 }
 
 .postMenu button.danger:hover {
   background: rgba(255, 77, 138, 0.10);
   border-color: rgba(255, 77, 138, 0.35);
 }
 
 .countdown {
   font-size: 12px;
   color: var(--muted);
 }
 
 .countdown.boost {
   color: #ffd2ea;
 }
 
 .boostRow {
   display: flex;
   gap: 8px;
   align-items: center;
 }
 
 .boostRow select {
   padding: 6px 8px;
 }
 
 .userLine {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   border-radius: 12px;
   border: 1px solid rgba(246, 240, 255, 0.12);
   background: rgba(255, 255, 255, 0.02);
   margin: 6px 0 10px;
 }
 
 .userPill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 
 .userPillLink {
   background: transparent;
   border: 0;
   padding: 0;
 }
 
 .userPillLink:hover {
   transform: none;
   text-decoration: underline;
 }
 
 .userPillLink:active {
   transform: scale(0.99);
 }
 
 .userPillLink:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12);
   border-radius: 12px;
 }
 
 .postAuthor .userPill {
   gap: 10px;
 }
 
 .pfp {
   width: 34px;
   height: 34px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(246, 240, 255, 0.14);
   overflow: hidden;
 }
 
 .post .pfp {
   width: 64px;
   height: 64px;
   border-radius: 10px;
 }
 
 .pfp img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .pfpBox {
   width: 64px;
   height: 64px;
   border-radius: 12px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: rgba(255, 255, 255, 0.02);
   overflow: hidden;
   flex: 0 0 auto;
 }
 
 .pfpBox img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: none;
 }
 
 .pfpBox img.hasImg {
   display: block;
 }
 
 .editorShell {
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 16px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding: 8px;
   border-bottom: 1px solid var(--line);
 }
 
 .toolbar button {
   padding: 6px 10px;
   border-radius: 10px;
 }
 
 .toolbar .sep {
   width: 1px;
   background: var(--line);
   margin: 4px 6px;
 }
 
 .editor {
   min-height: 110px;
   padding: 10px;
   outline: none;
 }
 
 .editor:empty:before {
   content: "Write something...";
   color: rgba(246, 240, 255, 0.40);
 }
 
 .chatMessages {
   padding: 10px 10px 8px;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 0;
   flex: 1;
   min-height: 0;
   container-type: inline-size;
 }
 
 .typingIndicator {
   padding: 0 12px 10px;
   min-height: 18px;
 }
 
 .typingDots {
   display: inline-flex;
   gap: 2px;
   margin-left: 6px;
 }
 
 .typingDots span {
   opacity: 0.2;
   animation: dotPulse 1.2s infinite;
 }
 
 .typingDots span:nth-child(2) {
   animation-delay: 0.2s;
 }
 
 .typingDots span:nth-child(3) {
   animation-delay: 0.4s;
 }
 
 @keyframes dotPulse {
   0%,
   100% {
     opacity: 0.2;
   }
   50% {
     opacity: 1;
   }
 }
 
 .chatMsg {
   border: 1px solid rgba(246, 240, 255, 0.12);
   background: rgba(255, 255, 255, 0.02);
   border-radius: 14px;
   padding: 8px 9px;
   margin-top: 8px;
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   max-width: min(var(--chat-rail-center-max, 70%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out),
     box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
 }
 
 .chatMsg.railLeft {
   margin-left: var(--chat-rail-inset, 12px);
   margin-right: auto;
   max-width: min(var(--chat-rail-side-max, 66%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
 }
 
 .chatMsg.railCenter {
   margin-left: auto;
   margin-right: auto;
   max-width: min(var(--chat-rail-center-max, 70%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
 }
 
 .chatMsg.railRight {
   margin-left: auto;
   margin-right: var(--chat-rail-inset, 12px);
   max-width: min(var(--chat-rail-side-max, 66%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.02));
   border-color: color-mix(in srgb, var(--accent) 30%, rgba(246, 240, 255, 0.12));
 }
 
 .chatMsg:first-child {
   margin-top: 0;
 }
 
 .chatMsg.isStacked {
   margin-top: 4px;
 }
 
 .chatMsg.railRight .meta {
   justify-content: flex-end;
 }
 
 .chatMsg.mentionMe {
   border-color: rgba(255, 62, 165, 0.45);
   box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.14);
 }
 
 .chatMsg.isModMsg {
   background: linear-gradient(
       180deg,
       color-mix(in srgb, var(--warn) 22%, transparent),
       rgba(255, 255, 255, 0.02)
     ),
     rgba(255, 255, 255, 0.02);
   border-color: color-mix(in srgb, var(--warn2) 38%, rgba(246, 240, 255, 0.12));
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn2) 10%, transparent);
 }
 
 .chatMsg.isModMsg .meta {
   color: color-mix(in srgb, var(--warn) 60%, var(--muted));
 }
 
 .modPill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 900;
   letter-spacing: 0.3px;
   color: color-mix(in srgb, var(--warn) 88%, var(--text));
   border: 1px solid color-mix(in srgb, var(--warn2) 42%, transparent);
   background: color-mix(in srgb, var(--warn2) 10%, transparent);
   padding: 2px 8px;
   border-radius: 999px;
 }
 
 .chatMsg.isNewMsg {
   animation: msgIn 520ms var(--ease-out) both;
 }
 
 /* When the chat container gets narrow, collapse center-lane messages to the left lane.
    Self stays right-aligned; mod/system keep their visual treatment. */
 @container (max-width: 520px) {
   .chatMessages {
     --chat-rail-side-max: 92%;
     --chat-rail-center-max: 92%;
   }
 
   .chatMsg.railCenter {
     margin-left: var(--chat-rail-inset, 12px);
     margin-right: auto;
   }
 
   .chatMsg.railCenter .meta {
     justify-content: flex-start;
   }
 
   .chatMsg.isModMsg {
     margin-left: calc(var(--chat-rail-inset, 12px) + 8px);
   }
 }
 
 .chatMsg:hover {
   border-color: rgba(246, 240, 255, 0.18);
   background: rgba(255, 255, 255, 0.028);
 }
 
 .chatMsg.mentionMe:not(.isNewMsg) {
   animation: mentionPing 720ms var(--ease-out) both;
 }
 
 .chatActionsRow {
   margin-top: 6px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .chatReactions {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
   margin-top: 6px;
 }
 
 .chatActionsRow .chatReactions {
   margin-top: 0;
   flex: 1 1 auto;
 }
 
 .chatReactions .reactionsRow {
   margin-top: 0;
   gap: 4px;
 }
 
 .chatReactions .reactBtn {
   padding: 4px 8px;
 }
 
 .chatMsg .content img {
   max-width: 100%;
   max-height: min(420px, 55vh);
   object-fit: contain;
   border-radius: 10px;
   display: block;
   margin-top: 6px;
   cursor: zoom-in;
 }
 
 .chatReactions:empty {
   display: none;
 }
 
 .chatMsg .content audio,
 .post audio,
 .editor audio {
   width: 100%;
   margin-top: 8px;
 }
 
 #mediaModalImg {
   max-width: min(92vw, 1200px);
   max-height: 78vh;
   width: auto;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.18);
 }
 
 .editor.isDropActive {
   outline: 2px dashed rgba(255, 62, 165, 0.7);
   outline-offset: 6px;
 }
 
 .chatMsg .meta {
   font-size: 11px;
   color: var(--muted);
   margin-bottom: 3px;
   display: flex;
   gap: 6px;
   align-items: center;
   line-height: 1.1;
 }
 
 .chatHeaderInline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }
 
 .chatMsg .content p {
   margin: 0 0 6px;
 }
 
 .chatMsg .content p:last-child {
   margin-bottom: 0;
 }
 
 .mentionToken {
   border: 1px solid rgba(255, 62, 165, 0.28);
   border-radius: 999px;
   padding: 0 6px;
   background: rgba(255, 62, 165, 0.10);
   color: #ffd2ea;
 }
 
 .mentionTokenMe {
   border-color: rgba(61, 220, 151, 0.4);
   background: rgba(61, 220, 151, 0.14);
   color: #baf6dd;
 }
 
 .chatReplyRef {
   margin-bottom: 6px;
   padding: 6px 8px;
   border-left: 3px solid rgba(255, 62, 165, 0.5);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .chatTools {
   margin-top: 6px;
   display: flex;
   justify-content: flex-end;
   gap: 6px;
 }
 
 .chatActionsRow .chatTools {
   margin-top: 0;
   flex: 0 0 auto;
 }
 
 .chatForm {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 12px;
   border-top: 1px solid var(--line);
 }
 
 .app.hotbarVisible .chatForm {
   padding-bottom: 12px;
 }
 
 .chatForm > .primary[type="submit"] {
   align-self: flex-end;
 }
 
 .chat.isSkinnyChat .chatMessages {
   padding: 8px;
 }
 
 .chat.isSkinnyChat .chatMsg {
   width: auto;
   max-width: 100%;
   margin-left: 0;
   margin-right: 0;
   border-radius: 10px;
   padding: 6px 8px;
 }
 
 .chat.isSkinnyChat .chatMsg.railLeft,
 .chat.isSkinnyChat .chatMsg.railCenter,
 .chat.isSkinnyChat .chatMsg.railRight {
   margin-left: 0;
   margin-right: 0;
   max-width: 100%;
 }
 
 .chat.isSkinnyChat .chatMsg .meta {
   font-size: 10px;
   margin-bottom: 2px;
 }
 
 .chat.isSkinnyChat .chatMsg .content {
   font-size: 12px;
   line-height: 1.3;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
 .chat.isSkinnyChat .chatMsg .content img,
 .chat.isSkinnyChat .chatMsg .content audio,
 .chat.isSkinnyChat .chatMsg .content video,
 .chat.isSkinnyChat .chatReplyRef,
 .chat.isSkinnyChat .chatReactions {
   display: none !important;
 }
 
 .chat.isSkinnyChat .chatActionsRow {
   margin-top: 4px;
   gap: 6px;
 }
 
 .chat.isSkinnyChat .chatTools {
   margin-top: 0;
   gap: 4px;
   justify-content: flex-start;
 }
 
 .chat.isSkinnyChat .chatTools .smallBtn {
   padding: 3px 8px;
 }
 
 .chat.isSkinnyChat .toolbar {
   padding: 6px;
   gap: 4px;
 }
 
 .chat.isSkinnyChat .toolbar .sep,
 .chat.isSkinnyChat .toolbar button[data-chatcmd],
 .chat.isSkinnyChat .toolbar button[data-chatemoji] {
   display: none;
 }
 
 .chat.isSkinnyChat .chatEditor {
   min-height: 64px;
 }
 
 .chat.isSkinnyChat .chatForm {
   gap: 8px;
   padding: 8px;
 }
 
 .chatReplyBanner {
   border: 1px solid rgba(246, 240, 255, 0.16);
   border-radius: 12px;
   padding: 6px 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.03);
 }
 
 .chatComposer {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
   position: relative;
 }
 
 .chatEditor {
   min-height: 84px;
   max-height: 160px;
   overflow: auto;
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .mentionMenu {
   position: fixed;
   z-index: 130;
   width: 220px;
   max-height: 220px;
   overflow: auto;
   border: 1px solid rgba(246, 240, 255, 0.16);
   border-radius: 14px;
   background: rgba(8, 8, 16, 0.92);
   backdrop-filter: blur(12px);
   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   padding: 6px;
   animation: popFloat var(--dur-med) var(--ease-out) both;
 }
 
 .mentionItem {
   padding: 8px 10px;
   border-radius: 12px;
   cursor: pointer;
   border: 1px solid transparent;
 }
 
 .mentionItem.isOn {
   border-color: rgba(255, 62, 165, 0.35);
   background: rgba(255, 62, 165, 0.14);
 }
 
 .mentionItem:hover {
   border-color: rgba(246, 240, 255, 0.14);
   background: rgba(255, 255, 255, 0.04);
 }
 
 .modTabs {
   display: flex;
   gap: 8px;
   margin-top: 10px;
 }
 
 .modTabs button {
   flex: 1;
   padding: 8px 10px;
 }
 
 .modFilters {
   margin-top: 10px;
   display: flex;
   gap: 8px;
 }
 
 .modBody {
   margin-top: 10px;
   flex: 1;
   min-height: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding-right: 4px;
 }
 
 .modCard {
   border: 1px solid rgba(246, 240, 255, 0.14);
   border-radius: 12px;
   padding: 8px;
   background: rgba(255, 255, 255, 0.02);
   display: flex;
   flex-direction: column;
   gap: 6px;
   transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out),
     box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
 }
 
 .modCard:hover {
   border-color: rgba(246, 240, 255, 0.20);
   background: rgba(255, 255, 255, 0.03);
   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
 }
 
 .modRowTop {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
 }
 
 .modActions {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
 .modActions button {
   padding: 6px 8px;
   border-radius: 10px;
   font-size: 12px;
 }
 
 .devLogPre {
   margin: 0;
   padding: 10px;
   border-radius: 12px;
   border: 1px solid rgba(246, 240, 255, 0.10);
   background: rgba(0, 0, 0, 0.18);
   max-height: min(52vh, 520px);
   overflow: auto;
   font-size: 12px;
   line-height: 1.2rem;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .modStatus {
   display: inline-flex;
   align-items: center;
   border: 1px solid rgba(255, 62, 165, 0.25);
   background: rgba(255, 62, 165, 0.12);
   border-radius: 999px;
   padding: 2px 8px;
   font-size: 11px;
   margin-left: 6px;
 }
 
 .mobilePager {
   position: fixed;
   left: 50%;
   bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   transform: translateX(-50%);
   z-index: 80;
   display: flex;
   gap: 8px;
   padding: 8px;
   border-radius: 999px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: rgba(8, 8, 16, 0.92);
   backdrop-filter: blur(10px);
 }
 
 .mobilePager button {
   padding: 8px 12px;
   border-radius: 999px;
 }
 
 /* Mobile UX: screens, not racks (see docs/MOBILE_UX.md). */
 .mobileNav {
   position: fixed;
   left: 50%;
   bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   transform: translateX(-50%);
   z-index: 90;
   display: flex;
   gap: 8px;
   padding: 8px;
   width: min(720px, calc(100vw - 24px));
   max-width: calc(100vw - 24px);
   justify-content: space-between;
   border-radius: 999px;
   border: 1px solid rgba(246, 240, 255, 0.14);
   background: rgba(8, 8, 16, 0.92);
   backdrop-filter: blur(10px);
 }
 
 .mobileNav button {
   flex: 1 1 0;
   min-width: 0;
   padding: 10px 0;
   border-radius: 999px;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .mobileMoreSheet {
   position: fixed;
   inset: 0;
   z-index: 95;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }
 
 @media (max-width: 380px) {
   .mobileNav {
     gap: 6px;
     padding: 6px;
   }
 
   .mobileNav button {
     font-size: 12px;
   }
 }
 
 .mobileMoreBackdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
 }
 
 .mobileMoreCard {
   position: relative;
   width: min(720px, 100%);
   max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px));
   max-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px));
   border-radius: 16px 16px 0 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   overflow: hidden;
   box-shadow: var(--shadow-soft);
 }
 
 .mobileMoreBody {
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow: auto;
 }
 
 .mobileMoreBody input {
   width: 100%;
 }
 
 .mobileMoreList {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .mobileMoreItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .mobileScreenHost {
   grid-area: main;
   display: none;
   flex-direction: column;
   gap: var(--app-gap);
   overflow: hidden;
 }
 
 @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
   .app.mobileScreens {
     display: block;
     padding: 0;
     gap: 0;
     height: 100dvh;
     height: 100vh;
   }
 
   .app.mobileScreens .sidebarToggle,
   .app.mobileScreens .peopleToggle,
   .app.mobileScreens .sideRackToggle,
   .app.mobileScreens .rightRackToggle {
     display: none;
   }
 
   .app.mobileScreens > .sidebar,
   .app.mobileScreens > .main,
   .app.mobileScreens > .chat,
   .app.mobileScreens > .panelResizeHandle,
   .app.mobileScreens > #rightRack,
   .app.mobileScreens > .mobileScreenHost,
   .app.mobileScreens > .moderation {
     display: none;
     width: 100%;
     height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
     height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
     border-radius: 0;
     border-left: 0;
     border-right: 0;
   }
 
   /* Core screens */
   .app.mobileScreens[data-mobile-screen="account"] > .sidebar {
     display: flex;
   }
 
   .app.mobileScreens[data-mobile-screen="hives"] > .main,
   .app.mobileScreens[data-mobile-screen="chat"] > .chat,
   .app.mobileScreens[data-mobile-screen="moderation"] > .moderation {
     display: flex;
   }
 
   .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
     display: flex;
   }
 
   /* Force active screen to full width/height regardless of desktop grid. */
   .app.mobileScreens[data-mobile-screen="account"] > .sidebar,
   .app.mobileScreens[data-mobile-screen="hives"] > .main,
   .app.mobileScreens[data-mobile-screen="chat"] > .chat,
   .app.mobileScreens[data-mobile-screen="moderation"] > .moderation,
   .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: calc(56px + env(safe-area-inset-bottom, 0px));
     z-index: 85;
   }
 
   /* People screen is a sibling of .app */
   .app.mobileScreens + .peopleDrawer {
     display: none;
     top: 0;
     right: 0;
     bottom: 56px;
     width: 100%;
     border-radius: 0;
     border-left: 0;
     border-right: 0;
   }
 
   .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
     display: flex;
   }
 
   .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: calc(56px + env(safe-area-inset-bottom, 0px));
     z-index: 85;
   }
 
   /* In mobile hives screen, hide the desktop side rack column. */
   .app.mobileScreens[data-mobile-screen="hives"] #mainSideRack {
     display: none !important;
   }
 
   /* Hide the hotbar unless explicitly shown elsewhere. */
   .app.mobileScreens + .dockHotbar {
     display: none;
   }
 }
 
 /* (Rack-specific mobile styles removed in favor of screen-based mobile UX.) */
 
 /* JS-driven mobile mode: enforce screen behavior by class, even if viewport/media heuristics disagree. */
 .app.mobileScreens {
   display: block;
   padding: 0;
   gap: 0;
   width: 100vw;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
   grid-template-columns: 1fr !important;
   grid-template-areas: "main" !important;
 }
 
 .app.mobileScreens .sidebarToggle,
 .app.mobileScreens .peopleToggle,
 .app.mobileScreens .sideRackToggle,
 .app.mobileScreens .rightRackToggle {
   display: none !important;
 }
 
 .app.mobileScreens.rackMode .sideRackToggle,
 .app.mobileScreens.rackMode .rightRackToggle,
 .app.mobileScreens #showSideRack,
 .app.mobileScreens #showRightRack {
   display: none !important;
 }
 
 .app.mobileScreens > .sidebar,
 .app.mobileScreens > .main,
 .app.mobileScreens > .chat,
 .app.mobileScreens > .panelResizeHandle,
 .app.mobileScreens > #rightRack,
 .app.mobileScreens > .mobileScreenHost,
 .app.mobileScreens > .moderation {
   display: none !important;
   width: 100vw !important;
   max-width: none !important;
   height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
   height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
   border-radius: 0 !important;
   border-left: 0 !important;
   border-right: 0 !important;
 }
 
 .app.mobileScreens[data-mobile-screen="account"] > .sidebar,
 .app.mobileScreens[data-mobile-screen="hives"] > .main,
 .app.mobileScreens[data-mobile-screen="chat"] > .chat,
 .app.mobileScreens[data-mobile-screen="moderation"] > .moderation,
 .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   display: flex !important;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   z-index: 85;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] #mainSideRack {
   display: none !important;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .main,
 .app.mobileScreens[data-mobile-screen="hives"] .mainRack,
 .app.mobileScreens[data-mobile-screen="hives"] #mainWorkspaceRack,
 .app.mobileScreens[data-mobile-screen="hives"] #hivesPanel {
   width: 100% !important;
   max-width: none !important;
   min-width: 0 !important;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .mainRack {
   gap: 0;
 }
 
 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleSideRack),
 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleRightRack),
 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleReactions),
 .app.mobileScreens[data-mobile-screen="account"] .sidebarFooter {
   display: none !important;
 }
 
 .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   gap: 0;
   overflow: auto;
 }
 
 .app.mobileScreens .mobileScreenHost > .peopleDrawer {
   position: relative !important;
   top: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   border-radius: 0 !important;
   border-left: 0 !important;
   border-right: 0 !important;
   box-shadow: none !important;
 }
 
 .app.mobileScreens .mobileScreenHost > .peopleDrawer .peopleResizeHandle {
   display: none !important;
 }
 
 .app.mobileScreens .reactionsRow,
 .app.mobileScreens .chatReactions {
   display: none !important;
 }
 
 .app.mobileScreens .chatMessages {
   font-size: 13px;
   line-height: 1.24;
   padding: 8px 8px 6px;
 }
 
 .app.mobileScreens .streamStage {
   margin: 8px;
   padding: 8px;
   gap: 6px;
 }
 
 .app.mobileScreens .streamStageVideo {
   max-height: min(28vh, 220px);
 }
 
 .app.mobileScreens .chatMsg {
   padding: 6px 7px;
   margin-top: 6px;
   border-radius: 12px;
 }
 
 .app.mobileScreens .chatMsg .meta {
   font-size: 10px;
   margin-bottom: 2px;
 }
 
 .app.mobileScreens .chatComposer .toolbar [data-chatcmd],
 .app.mobileScreens .chatComposer .toolbar [data-chatemoji],
 .app.mobileScreens .chatComposer .toolbar .sep {
   display: none !important;
 }
 
 .app.mobileScreens .chatComposer .toolbar .chatModToggle:not(.hidden) {
   display: inline-flex !important;
   align-items: center;
   gap: 6px;
 }
 
 .app.mobileScreens [data-rackdrag],
 .app.mobileScreens [data-skinny],
 .app.mobileScreens [data-expand],
 .app.mobileScreens [data-minimize] {
   display: none !important;
 }
 
 .app.mobileScreens #pollinatePanel .toolbar [data-cmd],
 .app.mobileScreens #pollinatePanel .toolbar [data-postemoji],
 .app.mobileScreens #pollinatePanel .toolbar .sep {
   display: none !important;
 }
 
 .app.mobileScreens .chatForm > .primary[type="submit"] {
   align-self: stretch;
   width: 100%;
 }
 
 .app.mobileScreens .chatForm {
   gap: 8px;
   padding: 8px;
   padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
 }
 
 .app.mobileScreens .typingIndicator {
   padding: 0 8px 4px;
   min-height: 14px;
 }
 
 .app.mobileScreens .chatHeaderActions {
   margin-left: auto;
 }
 
 .chatContextSelect {
   min-width: 180px;
   max-width: 320px;
 }
 
 .mobileChatSection {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .app.mobileScreens .mobileChatList {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .app.mobileScreens .chatContextSelect {
   min-width: 132px;
   max-width: 180px;
 }
 
 .app.mobileScreens .mobileChatListItem {
   width: 100%;
   text-align: left;
   padding: 10px;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
 
 .app.mobileScreens .mobileChatListTop {
   font-weight: 800;
 }
 
 .app.mobileScreens .mobileChatListMeta {
   font-size: 12px;
   color: var(--muted);
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] #filterAuthor,
 .app.mobileScreens[data-mobile-screen="hives"] #filterKeywords,
 .app.mobileScreens[data-mobile-screen="hives"] #sortBy {
   display: none !important;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .mobileOnlyHiveControl {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   min-width: 68px;
   height: 34px;
   padding: 0 10px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] #mobileHiveSearch {
   min-width: 42px;
   font-size: 15px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .filters {
   gap: 4px;
   padding: 4px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .hiveTabs {
   flex-wrap: nowrap;
   overflow-x: auto;
   gap: 6px;
   padding: 8px 10px 8px;
   margin-bottom: 0;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .hiveTabs button {
   padding: 7px 12px;
   font-size: 12px;
   flex: 0 0 auto;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .feed {
   grid-template-columns: 1fr;
   gap: 8px;
   padding: 8px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .post {
   padding: 8px;
   gap: 6px;
   border-radius: 12px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .postTitle {
   font-size: 14px;
   margin-bottom: 2px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .postTitleRow {
   gap: 2px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .post .pfp {
   display: none;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .post .small {
   font-size: 11px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .postMeta {
   margin-top: 4px;
   gap: 4px;
 }
 
 .app.mobileScreens[data-mobile-screen="hives"] .tag {
   font-size: 11px;
   padding: 2px 7px;
 }
 
 .app.mobileScreens + .peopleDrawer {
   display: none;
 }
 
 .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
   display: flex !important;
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   width: 100vw;
   border-radius: 0;
   border-left: 0;
   border-right: 0;
   z-index: 85;
 }
 
 .app.mobileScreens + .dockHotbar {
   display: none !important;
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
 @keyframes modalIn {
   from {
     opacity: 0;
     transform: translateY(10px) scale(0.985);
   }
   to {
     opacity: 1;
     transform: translateY(0px) scale(1);
   }
 }
 
 @keyframes drawerIn {
   from {
     opacity: 0;
     transform: translateX(10px) scale(0.995);
   }
   to {
     opacity: 1;
     transform: translateX(0px) scale(1);
   }
 }
 
 @keyframes toastIn {
   from {
     opacity: 0;
     transform: translateY(10px) scale(0.995);
   }
   to {
     opacity: 1;
     transform: translateY(0px) scale(1);
   }
 }
 
 @keyframes popFloat {
   from {
     opacity: 0;
     transform: translateY(6px) scale(0.985);
   }
   to {
     opacity: 1;
     transform: translateY(0px) scale(1);
   }
 }
 
 @keyframes msgIn {
   from {
     opacity: 0.75;
     transform: translateY(6px);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   }
   to {
     opacity: 1;
     transform: translateY(0px);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   }
 }
 
 @keyframes mentionPing {
   0% {
     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.12);
   }
   45% {
     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.12), 0 16px 50px rgba(255, 62, 165, 0.12);
   }
   100% {
     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.14);
   }
 }
 
 @keyframes reactPop {
   0% {
     transform: scale(1);
     filter: brightness(1);
   }
   40% {
     transform: scale(1.08);
     filter: brightness(1.15);
   }
   100% {
     transform: scale(1);
     filter: brightness(1);
   }
 }
 
 .guidedTourOverlay {
   position: fixed;
   inset: 0;
   z-index: 1400;
   pointer-events: none;
 }
 
 .guidedTourShade {
   display: none;
 }
 
 .guidedTourFocus {
   display: none;
 }
 
 .onboardingGateHint {
   margin-top: 8px;
   margin-bottom: 8px;
   border-radius: 12px;
   border: 1px solid color-mix(in oklab, var(--bad) 55%, var(--line) 45%);
   background: linear-gradient(180deg, rgba(255, 77, 138, 0.16), rgba(255, 77, 138, 0.07));
   padding: 10px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }
 
 .onboardingGateText {
   color: color-mix(in oklab, var(--text) 92%, white 8%);
   font-size: 13px;
   line-height: 1.35;
 }
 
 .guidedTourCard {
   position: absolute;
   left: 50%;
   bottom: 16px;
   transform: translateX(-50%);
   width: min(760px, calc(100vw - 24px));
   border-radius: 14px;
   border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
   background: color-mix(in oklab, var(--panel) 94%, #020204 6%);
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
   padding: 12px 14px;
   pointer-events: auto;
 }
 
 .guidedTourOverlay[data-cardpos="top"] .guidedTourCard {
   top: 16px;
   bottom: auto;
   left: 50%;
   right: auto;
   transform: translateX(-50%);
 }
 
 .guidedTourOverlay[data-cardpos="left"] .guidedTourCard {
   top: 50%;
   bottom: auto;
   left: 16px;
   right: auto;
   transform: translateY(-50%);
   width: min(560px, calc(100vw - 32px));
 }
 
 .guidedTourOverlay[data-cardpos="right"] .guidedTourCard {
   top: 50%;
   bottom: auto;
   left: auto;
   right: 16px;
   transform: translateY(-50%);
   width: min(560px, calc(100vw - 32px));
 }
 
 .guidedTourStep {
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: color-mix(in oklab, var(--accent2) 55%, var(--text) 45%);
   margin-bottom: 4px;
 }
 
 .guidedTourTitle {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 6px;
 }
 
 .guidedTourBody {
   line-height: 1.45;
 }
 
 .guidedTourTask {
   margin-top: 10px;
   font-size: 13px;
   color: color-mix(in oklab, var(--good) 70%, var(--text) 30%);
 }
 
 .guidedTourStatus {
   margin-top: 6px;
   min-height: 18px;
 }
 
 .guidedTourDontShow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 6px;
   user-select: none;
 }
 
 .guidedTourDontShow input[type="checkbox"] {
   transform: translateY(0.5px);
 }
 
 .guidedTourActions {
   margin-top: 8px;
   justify-content: flex-end;
   gap: 8px;
 }
 
 .tourTargetPulse {
   outline: 4px solid color-mix(in oklab, var(--accent) 88%, white 12%);
   outline-offset: 5px;
   border-radius: 10px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 42px rgba(255, 62, 165, 0.45), 0 0 92px rgba(184, 75, 255, 0.35);
   animation: tourPulse 1.1s ease-in-out infinite alternate;
 }
 
 @keyframes tourPulse {
   from {
     outline-color: color-mix(in oklab, var(--accent) 90%, white 10%);
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 42px rgba(255, 62, 165, 0.45), 0 0 92px rgba(184, 75, 255, 0.35);
   }
   to {
     outline-color: color-mix(in oklab, var(--accent2) 86%, white 14%);
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 58px rgba(255, 62, 165, 0.55), 0 0 120px rgba(184, 75, 255, 0.45);
   }
 }
 
 .app.authLockedWorkspace {
   filter: blur(20px) saturate(0.6) brightness(0.45) contrast(0.9);
   pointer-events: none;
   user-select: none;
 }
 
 .app.authLockedWorkspace .peopleToggle,
 .app.authLockedWorkspace .rightRackToggle,
 .app.authLockedWorkspace .sideRackToggle {
   display: none !important;
 }
 
 .rackPanel.tourContextDim {
   filter: brightness(0.55) saturate(0.75);
   opacity: 0.7;
   transition: filter 180ms ease, opacity 180ms ease;
 }
 
 .bzlSplash {
   position: fixed;
   inset: 0;
   z-index: 1700;
   display: flex;
   align-items: center;
   justify-content: center;
   background:
     radial-gradient(1400px 740px at 50% 28%, rgba(38, 235, 255, 0.24), rgba(4, 9, 22, 0.97)),
     linear-gradient(130deg, rgba(7, 10, 20, 0.98), rgba(4, 7, 16, 0.98));
   overflow: hidden;
   transition: opacity 420ms ease;
 }
 
 .bzlSplash.hidden {
   opacity: 0;
   pointer-events: none;
 }
 
 .bzlSplashFx {
   position: absolute;
   inset: -20%;
   background:
     radial-gradient(circle at 20% 35%, rgba(72, 249, 255, 0.2), transparent 34%),
     radial-gradient(circle at 78% 68%, rgba(255, 60, 186, 0.16), transparent 36%),
     repeating-linear-gradient(
       to bottom,
       rgba(255, 255, 255, 0.02) 0px,
       rgba(255, 255, 255, 0.02) 1px,
       transparent 3px,
       transparent 8px
     );
   filter: blur(0.3px) saturate(1.2);
   animation: splashDrift 9s ease-in-out infinite alternate;
 }
 
 .bzlSplashCore {
   position: relative;
   width: min(380px, calc(100vw - 28px));
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 24px 20px 18px;
   border-radius: 18px;
   border: 1px solid rgba(111, 248, 255, 0.25);
   background:
     linear-gradient(180deg, rgba(18, 28, 44, 0.75), rgba(8, 14, 28, 0.84)),
     rgba(9, 12, 24, 0.86);
   box-shadow:
     0 30px 80px rgba(0, 0, 0, 0.48),
     inset 0 0 0 1px rgba(255, 255, 255, 0.05),
     0 0 40px rgba(66, 239, 255, 0.2);
 }
 
 .bzlSplashRing {
   position: absolute;
   width: 172px;
   height: 172px;
   border-radius: 50%;
   border: 1px solid rgba(95, 246, 255, 0.5);
   box-shadow: 0 0 36px rgba(95, 246, 255, 0.26), inset 0 0 22px rgba(255, 255, 255, 0.06);
   animation: splashRing 1.7s ease-in-out infinite;
   pointer-events: none;
 }
 
 .bzlSplashLogo {
   width: clamp(84px, 13vw, 150px);
   height: auto;
   filter: drop-shadow(0 0 22px rgba(60, 245, 255, 0.6));
   animation: splashBreathe 950ms ease-in-out infinite alternate;
 }
 
 .bzlSplashWord {
   font-size: clamp(28px, 4vw, 36px);
   font-weight: 800;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #effcff;
   text-shadow: 0 0 18px rgba(94, 246, 255, 0.42);
 }
 
 .bzlSplashTag {
   margin-top: -2px;
   color: color-mix(in oklab, var(--text) 72%, #9defff 28%);
 }
 
 .bzlSplashProgress {
   width: 100%;
   height: 7px;
   border-radius: 999px;
   border: 1px solid rgba(111, 248, 255, 0.3);
   background: rgba(6, 11, 20, 0.65);
   overflow: hidden;
 }
 
 .bzlSplashProgressFill {
   width: 100%;
   height: 100%;
   transform: scaleX(0);
   transform-origin: 0 50%;
   background: linear-gradient(90deg, #4df8ff, #6ce9ff, #ff65c8);
   box-shadow: 0 0 14px rgba(103, 240, 255, 0.6);
 }
 
 .bzlSplashStartBtn {
   margin-top: 2px;
 }
 
 @keyframes splashDrift {
   from {
     transform: translate3d(-1.2%, -0.8%, 0) scale(1);
   }
   to {
     transform: translate3d(1.2%, 1.3%, 0) scale(1.03);
   }
 }
 
 @keyframes splashRing {
   0% {
     transform: scale(0.95);
     opacity: 0.72;
   }
   60% {
     transform: scale(1.04);
     opacity: 1;
   }
   100% {
     transform: scale(0.97);
     opacity: 0.8;
   }
 }
 
 @keyframes splashBreathe {
   from {
     transform: scale(0.98);
     opacity: 0.86;
   }
   to {
     transform: scale(1.03);
     opacity: 1;
   }
 }
 
 .authGate {
   position: fixed;
   inset: 0;
   z-index: 1650;
   display: grid;
   place-items: center;
   pointer-events: auto;
   background: rgba(5, 8, 16, 0.42);
   backdrop-filter: blur(12px) saturate(1.05);
   -webkit-backdrop-filter: blur(12px) saturate(1.05);
 }
 
 .authGateInner {
   width: min(880px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
   overflow: auto;
   display: grid;
   grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
   gap: 12px;
 }
 
 .authGateCard,
 .authGateOnboarding {
   border: 1px solid color-mix(in oklab, var(--line) 66%, var(--accent) 34%);
   border-radius: 14px;
   background: color-mix(in oklab, var(--panel) 96%, #010204 4%);
   box-shadow: 0 22px 62px rgba(0, 0, 0, 0.4);
   padding: 12px;
 }
 
 .authGateForm {
   margin-top: 8px;
 }
 
 @media (max-width: 920px) {
   .authGateInner {
     grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 780px) {
   .guidedTourCard {
     width: calc(100vw - 14px);
     left: 7px;
     right: 7px;
     bottom: 8px;
     transform: none;
     padding: 10px;
   }
 
   .guidedTourTitle {
     font-size: 16px;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     animation: none !important;
     transition: none !important;
     scroll-behavior: auto !important;
   }
 }