styles.css - bzl - self-hosted ephemeral community engine

styles.css (73312B)
      1 :root {
      2   --bg: #060611;
      3   --panel: #0c0c18;
      4   --text: #f6f0ff;
      5   --muted-pct: 65;
      6   --line-pct: 10;
      7   --panel2-pct: 2;
      8   --muted: color-mix(in srgb, var(--text) calc(var(--muted-pct) * 1%), transparent);
      9   --line: color-mix(in srgb, var(--text) calc(var(--line-pct) * 1%), transparent);
     10   --panel2: color-mix(in srgb, var(--text) calc(var(--panel2-pct) * 1%), transparent);
     11   --accent: #ff3ea5;
     12   --accent2: #b84bff;
     13   --warn: #ffb84d;
     14   --warn2: #ff7a18;
     15   --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
     16   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     17   --good: #3ddc97;
     18   --bad: #ff4d8a;
     19   --sidebar-width: 320px;
     20   --sidebar-min: 240px;
     21   --chat-width: 640px;
     22   --chat-min: 380px;
     23   --mod-width: 360px;
     24   --mod-min: 280px;
     25   --people-width: 360px;
     26   --people-min: 320px;
     27   --dur-fast: 110ms;
     28   --dur-med: 180ms;
     29   --dur-slow: 260ms;
     30   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
     31   --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
     32   --shadow-panel: 0 20px 70px rgba(0, 0, 0, 0.45);
     33   --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.35);
     34   --font-size-base: 15px;
     35   --font-size-small: 11px;
     36   --app-gap: 12px;
     37   --app-pad: 12px;
     38   --panel-pad: 14px;
     39   --panel-header-pad-y: 10px;
     40   --panel-header-pad-x: 12px;
     41   --label-font-size: 12px;
     42   --label-gap: 6px;
     43   --control-pad-y: 10px;
     44   --control-pad-x: 10px;
     45   --btn-pad-y: 10px;
     46   --btn-pad-x: 12px;
     47   --chat-rail-inset: 12px;
     48   --chat-rail-side-max: 66%;
     49   --chat-rail-center-max: 70%;
     50 }
     51 
     52 :root[data-ui-scale="xs"] {
     53   --font-size-base: 12px;
     54   --font-size-small: 9px;
     55   --app-gap: 7px;
     56   --app-pad: 7px;
     57   --panel-pad: 10px;
     58   --panel-header-pad-y: 8px;
     59   --panel-header-pad-x: 10px;
     60   --label-font-size: 11px;
     61   --label-gap: 5px;
     62   --control-pad-y: 8px;
     63   --control-pad-x: 9px;
     64   --btn-pad-y: 8px;
     65   --btn-pad-x: 10px;
     66 }
     67 
     68 :root[data-ui-scale="sm"] {
     69   --font-size-base: 13px;
     70   --font-size-small: 10px;
     71   --app-gap: 9px;
     72   --app-pad: 9px;
     73   --panel-pad: 12px;
     74   --panel-header-pad-y: 9px;
     75   --panel-header-pad-x: 11px;
     76   --label-font-size: 12px;
     77   --label-gap: 6px;
     78   --control-pad-y: 9px;
     79   --control-pad-x: 10px;
     80   --btn-pad-y: 9px;
     81   --btn-pad-x: 11px;
     82 }
     83 
     84 :root[data-ui-scale="md"] {
     85   --font-size-base: 15px;
     86   --font-size-small: 11px;
     87   --app-gap: 12px;
     88   --app-pad: 12px;
     89 }
     90 
     91 :root[data-ui-scale="lg"] {
     92   --font-size-base: 16px;
     93   --font-size-small: 12px;
     94   --app-gap: 14px;
     95   --app-pad: 14px;
     96 }
     97 
     98 :root[data-aspect="threeTwo"] {
     99   --sidebar-width: 300px;
    100   --sidebar-min: 230px;
    101   --chat-width: 600px;
    102   --chat-min: 360px;
    103   --people-width: 340px;
    104   --people-min: 300px;
    105   --mod-width: 340px;
    106   --mod-min: 280px;
    107   --app-gap: 10px;
    108   --app-pad: 10px;
    109   --chat-rail-side-max: 70%;
    110   --chat-rail-center-max: 74%;
    111 }
    112 
    113 :root[data-aspect="fourThree"] {
    114   --sidebar-width: 280px;
    115   --sidebar-min: 220px;
    116   --chat-width: 560px;
    117   --chat-min: 340px;
    118   --people-width: 320px;
    119   --people-min: 280px;
    120   --mod-width: 320px;
    121   --mod-min: 260px;
    122   --app-gap: 10px;
    123   --app-pad: 10px;
    124   --chat-rail-side-max: 74%;
    125   --chat-rail-center-max: 78%;
    126 }
    127 
    128 :root[data-aspect="portrait"] {
    129   --sidebar-width: 300px;
    130   --sidebar-min: 230px;
    131   --chat-width: 520px;
    132   --chat-min: 320px;
    133   --people-width: 320px;
    134   --people-min: 260px;
    135   --mod-width: 320px;
    136   --mod-min: 260px;
    137   --app-gap: 10px;
    138   --app-pad: 10px;
    139   --chat-rail-inset: 10px;
    140   --chat-rail-side-max: 88%;
    141   --chat-rail-center-max: 88%;
    142 }
    143 
    144 :root[data-aspect="ultrawide"] {
    145   --sidebar-width: 340px;
    146   --sidebar-min: 260px;
    147   --chat-width: 720px;
    148   --chat-min: 420px;
    149   --people-width: 400px;
    150   --people-min: 340px;
    151   --mod-width: 400px;
    152   --mod-min: 320px;
    153   --chat-rail-side-max: 62%;
    154   --chat-rail-center-max: 66%;
    155 }
    156 
    157 :root[data-viewport="xs"] {
    158   --sidebar-width: 230px;
    159   --sidebar-min: 210px;
    160   --chat-width: 480px;
    161   --chat-min: 300px;
    162   --people-width: 260px;
    163   --people-min: 250px;
    164   --mod-width: 260px;
    165   --mod-min: 250px;
    166   --app-gap: 8px;
    167   --app-pad: 8px;
    168   --chat-rail-inset: 10px;
    169   --chat-rail-side-max: 92%;
    170   --chat-rail-center-max: 92%;
    171 }
    172 
    173 :root[data-viewport="sm"] {
    174   --sidebar-width: 290px;
    175   --sidebar-min: 220px;
    176   --chat-width: 600px;
    177   --chat-min: 340px;
    178   --people-width: 320px;
    179   --people-min: 280px;
    180   --mod-width: 320px;
    181   --mod-min: 260px;
    182   --app-gap: 11px;
    183   --app-pad: 11px;
    184   --chat-rail-side-max: 78%;
    185   --chat-rail-center-max: 82%;
    186 }
    187 
    188 * {
    189   box-sizing: border-box;
    190 }
    191 
    192 body {
    193   margin: 0;
    194   height: 100vh;
    195   font-family: var(--font-body);
    196   font-size: var(--font-size-base);
    197   background: radial-gradient(1200px 800px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    198     radial-gradient(900px 700px at 90% 10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 50%), var(--bg);
    199   color: var(--text);
    200 }
    201 
    202 .app * {
    203   -webkit-tap-highlight-color: transparent;
    204 }
    205 
    206 .app {
    207   color-scheme: dark;
    208 }
    209 
    210 .app,
    211 .sidebar,
    212 .main,
    213 .chat,
    214 .moderation,
    215 .feed,
    216 .chatMessages,
    217 .modBody,
    218 .peopleDrawer,
    219 .peopleList,
    220 .modalBody {
    221   scrollbar-gutter: stable;
    222 }
    223 
    224 * {
    225   scrollbar-width: thin;
    226   scrollbar-color: color-mix(in srgb, var(--accent) 28%, transparent) rgba(0, 0, 0, 0);
    227 }
    228 
    229 ::-webkit-scrollbar {
    230   width: 10px;
    231   height: 10px;
    232 }
    233 
    234 ::-webkit-scrollbar-thumb {
    235   background: color-mix(in srgb, var(--accent) 22%, transparent);
    236   border-radius: 999px;
    237   border: 2px solid rgba(0, 0, 0, 0);
    238   background-clip: content-box;
    239 }
    240 
    241 ::-webkit-scrollbar-thumb:hover {
    242   background: color-mix(in srgb, var(--accent) 34%, transparent);
    243   border: 2px solid rgba(0, 0, 0, 0);
    244   background-clip: content-box;
    245 }
    246 
    247 ::-webkit-scrollbar-corner {
    248   background: transparent;
    249 }
    250 
    251 .app ::selection {
    252   background: color-mix(in srgb, var(--accent) 25%, transparent);
    253 }
    254 
    255 .app a {
    256   color: #ffd2ea;
    257   text-decoration: none;
    258 }
    259 
    260 .app a:hover {
    261   text-decoration: underline;
    262 }
    263 
    264 .app a:focus-visible {
    265   outline: none;
    266   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;
    267   border-radius: 10px;
    268 }
    269 
    270 .hidden {
    271   display: none !important;
    272 }
    273 
    274 .small {
    275   font-size: var(--font-size-small);
    276 }
    277 
    278 .muted {
    279   color: var(--muted);
    280 }
    281 
    282 .app {
    283   display: grid;
    284   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px minmax(var(--chat-min), var(--chat-width)) 10px 1fr;
    285   grid-template-areas: "sidebar sidebarResize chat chatResize main";
    286   gap: 0;
    287   padding: var(--app-pad);
    288   height: 100vh;
    289   overflow: hidden;
    290   position: relative;
    291 }
    292 
    293 .app.rackMode {
    294   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
    295   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
    296 }
    297 
    298 .app.rackMode .peopleToggle {
    299   display: none !important;
    300 }
    301 
    302 .app.rackMode.rightCollapsed,
    303 .app.rackMode.hasMod.rightCollapsed {
    304   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr;
    305   grid-template-areas: "sidebar sidebarResize main";
    306 }
    307 
    308 .app.rackMode.rightCollapsed #rightRack {
    309   display: none !important;
    310 }
    311 
    312 .app.rackMode.rightCollapsed .mainResizeHandle {
    313   display: none !important;
    314 }
    315 
    316 .app.sideCollapsed #mainSideRack {
    317   display: none !important;
    318 }
    319 
    320 .app.sideRackEmpty #mainSideRack {
    321   display: none !important;
    322 }
    323 
    324 .sideRackToggle {
    325   position: absolute;
    326   top: 12px;
    327   right: 12px;
    328   z-index: 60;
    329 }
    330 
    331 .app.rackMode.rightCollapsed .sideRackToggle {
    332   right: 64px;
    333 }
    334 
    335 .app.rackMode.sideCollapsed .sideRackToggle {
    336   display: block !important;
    337 }
    338 
    339 .app.rackMode:not(.sideCollapsed) .sideRackToggle {
    340   display: none !important;
    341 }
    342 
    343 .rightRackToggle {
    344   position: absolute;
    345   top: 12px;
    346   right: 12px;
    347   z-index: 70;
    348 }
    349 
    350 .app.rackMode.rightCollapsed .rightRackToggle {
    351   display: block !important;
    352 }
    353 
    354 .app.rackMode:not(.rightCollapsed) .rightRackToggle {
    355   display: none !important;
    356 }
    357 
    358 .pluginPanel .panelBody {
    359   display: flex;
    360   flex-direction: column;
    361   min-height: 0;
    362 }
    363 
    364 .pluginRackPanel .pluginRackBody {
    365   display: flex;
    366   flex-direction: column;
    367   min-height: 0;
    368 }
    369 
    370 .pluginRackToolbar {
    371   display: flex;
    372   align-items: center;
    373   gap: 10px;
    374   padding: 8px 10px;
    375   border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    376 }
    377 
    378 .pluginRackWidgets {
    379   flex: 1;
    380   min-height: 0;
    381   overflow: auto;
    382   display: flex;
    383   flex-direction: column;
    384   gap: var(--app-gap);
    385   padding: 10px;
    386 }
    387 
    388 .pluginRackWidgets > .rackPanel {
    389   flex: 0 0 auto;
    390   min-height: 0;
    391 }
    392 
    393 .app.rackMode.hasMod {
    394   /* In rack mode, mod is just another panel inside the right rack. */
    395   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
    396   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
    397 }
    398 
    399 .app.hasMod {
    400   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));
    401   grid-template-areas: "sidebar sidebarResize chat chatResize main mainResize moderation";
    402 }
    403 
    404 .app.chatRight {
    405   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--chat-min), var(--chat-width));
    406   grid-template-areas: "sidebar sidebarResize main chatResize chat";
    407 }
    408 
    409 .app.hasMod.chatRight {
    410   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));
    411   grid-template-areas: "sidebar sidebarResize main chatResize chat mainResize moderation";
    412 }
    413 
    414 .app.rackMode.chatRight,
    415 .app.rackMode.hasMod.chatRight {
    416   grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) 10px 1fr 10px minmax(var(--people-min), var(--people-width));
    417   grid-template-areas: "sidebar sidebarResize main mainResize rightRack";
    418 }
    419 
    420 @media (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
    421   .app {
    422     grid-template-columns: 300px 1fr;
    423     grid-template-rows: 1fr auto;
    424     grid-template-areas:
    425       "sidebar main"
    426       "chat chat";
    427     gap: var(--app-gap);
    428   }
    429   .app.hasMod {
    430     grid-template-columns: 300px 1fr;
    431     grid-template-rows: 1fr 45vh;
    432     grid-template-areas:
    433       "sidebar main"
    434       "chat moderation";
    435   }
    436   .chat {
    437     height: 45vh;
    438   }
    439   .moderation {
    440     height: 45vh;
    441   }
    442   .panelResizeHandle,
    443   .peopleResizeHandle {
    444     display: none;
    445   }
    446 
    447   .mainRack {
    448     flex-direction: column;
    449   }
    450   .sideRack {
    451     flex: 0 0 auto;
    452     min-width: 0;
    453     max-width: none;
    454   }
    455 }
    456 
    457 @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
    458   .app.sidebarHidden {
    459     grid-template-columns: 1fr;
    460     grid-template-rows: 1fr auto;
    461     grid-template-areas:
    462       "main"
    463       "chat";
    464   }
    465 }
    466 
    467 .sidebar,
    468 .main,
    469 .chat,
    470 .moderation,
    471 .panelResizeHandle {
    472   min-width: 0;
    473   min-height: 0;
    474 }
    475 
    476 .sidebar {
    477   grid-area: sidebar;
    478   display: flex;
    479   flex-direction: column;
    480   gap: 0;
    481   overflow: hidden;
    482 }
    483 
    484 .rightRack {
    485   grid-area: rightRack;
    486   min-width: 0;
    487   min-height: 0;
    488   display: flex;
    489   flex-direction: column;
    490   gap: var(--app-gap);
    491   overflow: hidden;
    492 }
    493 
    494 .rightRack .rackPanel {
    495   flex: 1;
    496   min-height: 0;
    497 }
    498 
    499 .sideRack .rackPanel {
    500   flex: 1;
    501   min-height: 0;
    502 }
    503 
    504 .rightRack .rackPanel.panelCollapsed,
    505 .sideRack .rackPanel.panelCollapsed {
    506   flex: 0 0 auto;
    507 }
    508 
    509 .rightRack .rackPanel > .panelBody,
    510 .rightRack .rackPanel > .panelFill,
    511 .rightRack .rackPanel .panelBody,
    512 .sideRack .rackPanel > .panelBody,
    513 .sideRack .rackPanel > .panelFill,
    514 .sideRack .rackPanel .panelBody {
    515   min-height: 0;
    516 }
    517 
    518 .panel.panelCollapsed {
    519   overflow: hidden;
    520 }
    521 
    522 .panel.panelCollapsed > :not(.panelHeader) {
    523   display: none !important;
    524 }
    525 
    526 .rackDragHandle {
    527   cursor: grab;
    528   user-select: none;
    529 }
    530 
    531 .rackDragHandle:active {
    532   cursor: grabbing;
    533 }
    534 
    535 .rackDragging {
    536   opacity: 0.86;
    537   box-shadow: 0 26px 90px rgba(0, 0, 0, 0.65);
    538 }
    539 
    540 .rackPlaceholder {
    541   border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    542   border-radius: 18px;
    543   background: color-mix(in srgb, var(--accent) 10%, transparent);
    544 }
    545 
    546 .app.rackMode .panelHeader {
    547   /* Slightly stronger header affordance in rack mode */
    548   background: linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent);
    549 }
    550 
    551 .app.rackMode .chat,
    552 .app.rackMode .moderation,
    553 .app.rackMode .peopleDrawer {
    554   position: static;
    555   grid-area: unset !important;
    556   height: auto;
    557   min-height: 0;
    558 }
    559 
    560 .app.rackMode .chatResizeHandle,
    561 .app.rackMode .peopleResizeHandle {
    562   display: none !important;
    563 }
    564 
    565 .app.rackMode .peopleDrawer {
    566   display: flex;
    567   flex-direction: column;
    568   overflow: hidden;
    569   border: 1px solid var(--line);
    570   border-radius: 18px;
    571   background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
    572   box-shadow: var(--shadow-panel);
    573 }
    574 
    575 .dockHotbar {
    576   position: fixed;
    577   left: 50%;
    578   bottom: 10px;
    579   transform: translateX(-50%) translateY(28px);
    580   opacity: 0;
    581   pointer-events: none;
    582   z-index: 60;
    583   display: flex;
    584   gap: 10px;
    585   padding: 8px 10px;
    586   max-width: calc(100vw - 24px);
    587   overflow-x: auto;
    588   overscroll-behavior: contain;
    589   border-radius: 999px;
    590   border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    591   background: color-mix(in srgb, var(--panel) 92%, transparent);
    592   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
    593   transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
    594 }
    595 
    596 .dockHotbar.show {
    597   transform: translateX(-50%) translateY(0);
    598   opacity: 1;
    599   pointer-events: auto;
    600 }
    601 
    602 .dockHotbar.dockTarget {
    603   border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    604   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    605 }
    606 
    607 .dockOrb.dragging {
    608   opacity: 0.6;
    609 }
    610 
    611 .dockOrb {
    612   display: inline-flex;
    613   align-items: center;
    614   gap: 8px;
    615   flex: 0 0 auto;
    616   max-width: 220px;
    617   padding: 7px 12px;
    618   border-radius: 999px;
    619   border: 1px solid var(--line);
    620   background: color-mix(in srgb, var(--text) 6%, transparent);
    621   color: var(--text);
    622   cursor: pointer;
    623   user-select: none;
    624   font-size: 12px;
    625   white-space: nowrap;
    626 }
    627 
    628 .dockOrb:hover {
    629   background: color-mix(in srgb, var(--accent) 14%, transparent);
    630   border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    631 }
    632 
    633 .dockOrb .dockOrbIcon {
    634   width: 18px;
    635   height: 18px;
    636   border-radius: 6px;
    637   display: inline-flex;
    638   align-items: center;
    639   justify-content: center;
    640   background: color-mix(in srgb, var(--accent) 22%, transparent);
    641 }
    642 
    643 .hotbarAddMenu {
    644   position: fixed;
    645   z-index: 90;
    646   width: 260px;
    647   max-height: min(320px, 70vh);
    648   overflow: hidden;
    649   border: 1px solid rgba(246, 240, 255, 0.16);
    650   border-radius: 14px;
    651   background: rgba(8, 8, 16, 0.92);
    652   backdrop-filter: blur(12px);
    653   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
    654   animation: popFloat var(--dur-med) var(--ease-out) both;
    655 }
    656 
    657 .hotbarAddMenuList {
    658   overflow: auto;
    659   padding: 6px;
    660   display: flex;
    661   flex-direction: column;
    662   gap: 6px;
    663 }
    664 
    665 .dockOrbPlus .dockOrbIcon {
    666   background: color-mix(in srgb, var(--accent) 30%, transparent);
    667 }
    668 
    669 .sidebarScroll {
    670   flex: 1;
    671   min-height: 0;
    672   overflow: auto;
    673   padding-right: 4px;
    674   display: flex;
    675   flex-direction: column;
    676   gap: 12px;
    677 }
    678 
    679 .sidebarFooter {
    680   flex: 0 0 auto;
    681   display: flex;
    682   align-items: flex-end;
    683   justify-content: space-between;
    684   gap: 10px;
    685   padding: 12px 14px 14px;
    686   border-top: 1px solid var(--line);
    687   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
    688 }
    689 
    690 .poweredByTile {
    691   width: 220px;
    692   height: 84px;
    693   border-radius: 16px;
    694   border: 1px solid rgba(246, 240, 255, 0.14);
    695   background: linear-gradient(180deg, rgba(255, 62, 165, 0.10), rgba(184, 75, 255, 0.06) 55%), rgba(255, 255, 255, 0.02);
    696   box-shadow: 0 14px 46px rgba(0, 0, 0, 0.32);
    697   padding: 10px 12px;
    698   display: flex;
    699   flex-direction: row;
    700   align-items: center;
    701   justify-content: flex-start;
    702   gap: 12px;
    703 }
    704 
    705 .poweredByLogo {
    706   width: 56px;
    707   height: 56px;
    708   object-fit: contain;
    709   border-radius: 14px;
    710   filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
    711 }
    712 
    713 .poweredByText {
    714   display: flex;
    715   flex-direction: column;
    716   gap: 2px;
    717   min-width: 0;
    718 }
    719 
    720 .poweredByTitle {
    721   font-weight: 900;
    722   font-size: 13px;
    723   letter-spacing: 0.2px;
    724   line-height: 1.1;
    725 }
    726 
    727 .poweredByByline {
    728   font-size: 10px;
    729   color: rgba(246, 240, 255, 0.62);
    730   line-height: 1.1;
    731 }
    732 
    733 .main {
    734   grid-area: main;
    735   display: flex;
    736   flex-direction: column;
    737   gap: var(--app-gap);
    738   overflow: hidden;
    739 }
    740 
    741 .mainRack {
    742   flex: 1;
    743   min-height: 0;
    744   display: flex;
    745   flex-direction: row;
    746   gap: var(--app-gap);
    747   overflow: hidden;
    748 }
    749 
    750 .workspaceRack {
    751   flex: 1;
    752   min-width: 0;
    753   min-height: 0;
    754   display: flex;
    755   flex-direction: column;
    756   gap: var(--app-gap);
    757   overflow: hidden;
    758 }
    759 
    760 /* Workspace 4x2 grid (rack mode) */
    761 .app.rackMode .workspaceRack {
    762   display: grid;
    763   grid-template-columns: repeat(4, minmax(0, 1fr));
    764   grid-template-rows: repeat(2, minmax(0, 1fr));
    765   gap: var(--app-gap);
    766 }
    767 
    768 .workspaceSlot {
    769   min-width: 0;
    770   min-height: 0;
    771   display: flex;
    772   flex-direction: column;
    773   overflow: hidden;
    774 }
    775 
    776 .workspaceSlot.workspaceSlotEmpty {
    777   border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent);
    778   border-radius: 14px;
    779   background: color-mix(in srgb, var(--panel) 88%, transparent);
    780   align-items: center;
    781   justify-content: center;
    782 }
    783 
    784 .workspaceEmptyAdd {
    785   display: inline-flex;
    786   align-items: center;
    787   gap: 8px;
    788   border-radius: 999px;
    789   padding: 10px 14px;
    790   border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    791   background: color-mix(in srgb, var(--accent) 10%, transparent);
    792 }
    793 
    794 .workspaceEmptyAddPlus {
    795   width: 20px;
    796   height: 20px;
    797   border-radius: 999px;
    798   display: inline-flex;
    799   align-items: center;
    800   justify-content: center;
    801   background: color-mix(in srgb, var(--accent) 24%, transparent);
    802   font-weight: 900;
    803 }
    804 
    805 .workspaceSlot > .rackPanel {
    806   flex: 1;
    807   min-height: 0;
    808 }
    809 
    810 .workspaceSlot > .rackPanel > .panelBody,
    811 .workspaceSlot > .rackPanel > .panelFill,
    812 .workspaceSlot > .rackPanel .panelBody {
    813   min-height: 0;
    814 }
    815 
    816 .workspaceSlotLeft {
    817   grid-column: 1 / span 2;
    818   grid-row: 1 / span 2;
    819 }
    820 
    821 .workspaceSlotRight {
    822   grid-column: 3 / span 2;
    823   grid-row: 1 / span 2;
    824 }
    825 
    826 .app.rackMode.workspaceExpandedLeft #workspaceLeftSlot,
    827 .app.rackMode.workspaceExpandedRight #workspaceRightSlot {
    828   grid-column: 1 / span 4;
    829 }
    830 
    831 .app.rackMode.workspaceExpandedLeft #workspaceRightSlot,
    832 .app.rackMode.workspaceExpandedRight #workspaceLeftSlot {
    833   display: none;
    834 }
    835 
    836 .app.rackMode:not(.rackIsDragging).workspaceSingleLeft #workspaceLeftSlot {
    837   grid-column: 1 / span 4;
    838 }
    839 
    840 .app.rackMode:not(.rackIsDragging).workspaceSingleLeft #workspaceRightSlot {
    841   display: none;
    842 }
    843 
    844 .app.rackMode:not(.rackIsDragging).workspaceSingleRight #workspaceRightSlot {
    845   grid-column: 1 / span 4;
    846 }
    847 
    848 .app.rackMode:not(.rackIsDragging).workspaceSingleRight #workspaceLeftSlot {
    849   display: none;
    850 }
    851 
    852 .app:not(.rackMode) .workspaceSlot {
    853   display: none;
    854 }
    855 
    856 .sideRack {
    857   flex: 0 0 min(380px, 30vw);
    858   min-width: 260px;
    859   max-width: 420px;
    860   min-height: 0;
    861   display: flex;
    862   flex-direction: column;
    863   gap: var(--app-gap);
    864   overflow: hidden;
    865 }
    866 
    867 .chat {
    868   grid-area: chat;
    869   display: flex;
    870   flex-direction: column;
    871   gap: 0;
    872   overflow: hidden;
    873   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
    874   border: 1px solid var(--line);
    875   border-radius: 16px;
    876   box-shadow: var(--shadow-soft);
    877 }
    878 
    879 .moderation {
    880   grid-area: moderation;
    881   display: flex;
    882   flex-direction: column;
    883   gap: 10px;
    884   overflow: hidden;
    885   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
    886   border: 1px solid var(--line);
    887   border-radius: 16px;
    888   padding: 10px;
    889   box-shadow: var(--shadow-soft);
    890 }
    891 
    892 .panelResizeHandle {
    893   grid-area: chatResize;
    894   display: block;
    895   position: relative;
    896   z-index: 3;
    897   border-radius: 999px;
    898   background: linear-gradient(180deg, rgba(255, 62, 165, 0.24), rgba(255, 255, 255, 0.12));
    899   border: 1px solid rgba(246, 240, 255, 0.26);
    900   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
    901   cursor: col-resize;
    902   align-self: stretch;
    903 }
    904 
    905 .panelResizeHandle:hover {
    906   background: linear-gradient(180deg, rgba(255, 62, 165, 0.35), rgba(255, 255, 255, 0.16));
    907 }
    908 
    909 .panelResizeHandle::before {
    910   content: "";
    911   position: absolute;
    912   left: 50%;
    913   top: 50%;
    914   width: 2px;
    915   height: 34px;
    916   transform: translate(-50%, -50%);
    917   border-radius: 999px;
    918   background: rgba(246, 240, 255, 0.55);
    919 }
    920 
    921 .sidebarResizeHandle {
    922   grid-area: sidebarResize;
    923 }
    924 
    925 .chatResizeHandle {
    926   grid-area: chatResize;
    927 }
    928 
    929 .mainResizeHandle {
    930   grid-area: mainResize;
    931 }
    932 
    933 .app.sidebarHidden .sidebarResizeHandle,
    934 .app:not(.hasMod) .mainResizeHandle {
    935   display: none;
    936 }
    937 
    938 .app.isResizing {
    939   user-select: none;
    940   cursor: col-resize;
    941 }
    942 
    943 .app.isDocking {
    944   user-select: none;
    945 }
    946 
    947 .chat .panelHeader {
    948   cursor: grab;
    949 }
    950 
    951 .app.isDocking .chat .panelHeader {
    952   cursor: grabbing;
    953 }
    954 
    955 .moderation .panelHeader,
    956 .moderation .modTabs,
    957 .moderation .modFilters {
    958   flex: 0 0 auto;
    959 }
    960 
    961 .brand {
    962   padding: 14px 14px 0;
    963 }
    964 
    965 .smallBtn {
    966   padding: 6px 10px;
    967   border-radius: 999px;
    968   white-space: nowrap;
    969   line-height: 1;
    970 }
    971 
    972 .mapChatToggle {
    973   display: inline-flex;
    974   gap: 6px;
    975   margin-left: 6px;
    976   vertical-align: middle;
    977 }
    978 
    979 .sidebarToggle {
    980   position: fixed;
    981   bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    982   left: 12px;
    983   top: auto;
    984   z-index: 20;
    985 }
    986 
    987 .peopleToggle {
    988   position: absolute;
    989   top: 12px;
    990   right: 12px;
    991   z-index: 70;
    992 }
    993 
    994 .app.sidebarHidden {
    995   grid-template-columns: minmax(var(--chat-min), var(--chat-width)) 10px 1fr;
    996   grid-template-areas: "chat chatResize main";
    997 }
    998 
    999 .app.sidebarHidden.hasMod {
   1000   grid-template-columns: minmax(var(--chat-min), var(--chat-width)) 10px 1fr 10px minmax(var(--mod-min), var(--mod-width));
   1001   grid-template-areas: "chat chatResize main mainResize moderation";
   1002 }
   1003 
   1004 .app.rackMode.sidebarHidden,
   1005 .app.rackMode.hasMod.sidebarHidden {
   1006   grid-template-columns: 1fr 10px minmax(var(--people-min), var(--people-width));
   1007   grid-template-areas: "main mainResize rightRack";
   1008 }
   1009 
   1010 .app.rackMode.sidebarHidden.rightCollapsed,
   1011 .app.rackMode.hasMod.sidebarHidden.rightCollapsed {
   1012   grid-template-columns: 1fr;
   1013   grid-template-areas: "main";
   1014 }
   1015 
   1016 .peopleDrawer {
   1017   position: fixed;
   1018   top: 12px;
   1019   right: 12px;
   1020   bottom: 12px;
   1021   width: min(var(--people-width), calc(100vw - 24px));
   1022   z-index: 75;
   1023   display: flex;
   1024   flex-direction: column;
   1025   gap: 10px;
   1026   border: 1px solid var(--line);
   1027   border-radius: 16px;
   1028   background: linear-gradient(180deg, rgba(255, 62, 165, 0.06), transparent 40%), var(--panel);
   1029   box-shadow: var(--shadow-panel);
   1030   overflow: hidden;
   1031 }
   1032 
   1033 .peopleResizeHandle {
   1034   position: absolute;
   1035   left: 0;
   1036   top: 0;
   1037   bottom: 0;
   1038   width: 10px;
   1039   z-index: 3;
   1040   cursor: col-resize;
   1041   border-right: 1px solid rgba(246, 240, 255, 0.26);
   1042   background: linear-gradient(180deg, rgba(255, 62, 165, 0.24), rgba(255, 255, 255, 0.12));
   1043 }
   1044 
   1045 .peopleResizeHandle:hover {
   1046   background: linear-gradient(180deg, rgba(255, 62, 165, 0.35), rgba(255, 255, 255, 0.16));
   1047 }
   1048 
   1049 .peopleResizeHandle::before {
   1050   content: "";
   1051   position: absolute;
   1052   left: 50%;
   1053   top: 50%;
   1054   width: 2px;
   1055   height: 36px;
   1056   transform: translate(-50%, -50%);
   1057   border-radius: 999px;
   1058   background: rgba(246, 240, 255, 0.55);
   1059 }
   1060 
   1061 .peopleDrawer:not(.hidden) {
   1062   animation: drawerIn var(--dur-slow) var(--ease-out) both;
   1063 }
   1064 
   1065 .modal {
   1066   position: fixed;
   1067   inset: 0;
   1068   z-index: 120;
   1069   display: grid;
   1070   place-items: center;
   1071   padding: 16px;
   1072 }
   1073 
   1074 .modal:not(.hidden) .modalBackdrop {
   1075   animation: fadeIn var(--dur-slow) var(--ease-out) both;
   1076 }
   1077 
   1078 .modal:not(.hidden) .modalCard {
   1079   animation: modalIn var(--dur-slow) var(--ease-out) both;
   1080 }
   1081 
   1082 .modalBackdrop {
   1083   position: absolute;
   1084   inset: 0;
   1085   background: rgba(0, 0, 0, 0.55);
   1086   backdrop-filter: blur(6px);
   1087 }
   1088 
   1089 .modalCard {
   1090   position: relative;
   1091   width: min(920px, calc(100vw - 24px));
   1092   max-height: calc(100vh - 24px);
   1093   overflow: hidden;
   1094   display: flex;
   1095   flex-direction: column;
   1096   z-index: 1;
   1097 }
   1098 
   1099 .modalBody {
   1100   padding: 12px;
   1101   overflow: auto;
   1102   display: flex;
   1103   flex-direction: column;
   1104   gap: 10px;
   1105   min-height: 0;
   1106 }
   1107 
   1108 .editModalEditor {
   1109   min-height: 180px;
   1110   max-height: 45vh;
   1111   overflow: auto;
   1112 }
   1113 
   1114 .modalActions {
   1115   justify-content: flex-end;
   1116 }
   1117 
   1118 .shortcutHelpBody {
   1119   display: flex;
   1120   flex-direction: column;
   1121   gap: 10px;
   1122 }
   1123 
   1124 .editMetaGrid {
   1125   display: grid;
   1126   grid-template-columns: 1fr 1fr;
   1127   gap: 10px;
   1128 }
   1129 
   1130 .checkRow {
   1131   display: flex;
   1132   align-items: center;
   1133   justify-content: space-between;
   1134   gap: 10px;
   1135   padding: 10px 12px;
   1136   border: 1px solid var(--line);
   1137   border-radius: 14px;
   1138   background: rgba(255, 255, 255, 0.02);
   1139 }
   1140 
   1141 .checkRow input[type="checkbox"] {
   1142   width: 18px;
   1143   height: 18px;
   1144 }
   1145 
   1146 .roleRow {
   1147   display: flex;
   1148   align-items: center;
   1149   justify-content: space-between;
   1150   gap: 10px;
   1151   padding: 8px 10px;
   1152   border: 1px solid var(--line);
   1153   border-radius: 14px;
   1154   background: rgba(255, 255, 255, 0.02);
   1155 }
   1156 
   1157 .roleRowLeft {
   1158   display: flex;
   1159   align-items: center;
   1160   gap: 10px;
   1161   min-width: 0;
   1162 }
   1163 
   1164 .roleSwatch {
   1165   width: 12px;
   1166   height: 12px;
   1167   border-radius: 999px;
   1168   border: 1px solid rgba(255, 255, 255, 0.18);
   1169   flex: 0 0 auto;
   1170 }
   1171 
   1172 .roleMeta {
   1173   display: flex;
   1174   flex-direction: column;
   1175   min-width: 0;
   1176 }
   1177 
   1178 .roleKey {
   1179   font-size: 12px;
   1180   opacity: 0.75;
   1181 }
   1182 
   1183 .roleCreateRow {
   1184   display: grid;
   1185   grid-template-columns: 1fr 1fr 120px auto;
   1186   gap: 8px;
   1187   align-items: end;
   1188 }
   1189 
   1190 .roleCreateRow input[type="color"] {
   1191   height: 40px;
   1192   width: 100%;
   1193   padding: 0;
   1194   border: 1px solid var(--line);
   1195   border-radius: 12px;
   1196   background: transparent;
   1197 }
   1198 
   1199 .gateList {
   1200   display: flex;
   1201   flex-direction: column;
   1202   gap: 8px;
   1203 }
   1204 
   1205 .gateOption {
   1206   display: flex;
   1207   align-items: center;
   1208   justify-content: space-between;
   1209   gap: 10px;
   1210   padding: 10px 12px;
   1211   border: 1px solid var(--line);
   1212   border-radius: 14px;
   1213   background: rgba(255, 255, 255, 0.02);
   1214 }
   1215 
   1216 .gateOptionLeft {
   1217   display: flex;
   1218   align-items: center;
   1219   gap: 10px;
   1220 }
   1221 
   1222 @media (max-width: 900px) {
   1223   .modal {
   1224     padding: 0;
   1225   }
   1226   .modalCard {
   1227     width: 100%;
   1228     height: 100%;
   1229     border-radius: 0;
   1230   }
   1231   .editModalEditor {
   1232     max-height: none;
   1233     flex: 1;
   1234   }
   1235   .editMetaGrid {
   1236     grid-template-columns: 1fr;
   1237   }
   1238   .roleCreateRow {
   1239     grid-template-columns: 1fr;
   1240   }
   1241 }
   1242 
   1243 .peopleTabs {
   1244   display: flex;
   1245   gap: 8px;
   1246   padding: 0 10px;
   1247 }
   1248 
   1249 .peopleTabs button {
   1250   flex: 1;
   1251   padding: 8px 10px;
   1252 }
   1253 
   1254 .peopleFilters {
   1255   padding: 0 10px;
   1256 }
   1257 
   1258 .peopleList {
   1259   padding: 10px;
   1260   overflow: auto;
   1261   min-height: 0;
   1262   flex: 1;
   1263   display: flex;
   1264   flex-direction: column;
   1265   gap: 8px;
   1266 }
   1267 
   1268 #peopleMembersView {
   1269   display: flex;
   1270   flex-direction: column;
   1271   min-height: 0;
   1272   flex: 1;
   1273 }
   1274 
   1275 .peopleCard {
   1276   border: 1px solid rgba(246, 240, 255, 0.14);
   1277   border-radius: 12px;
   1278   padding: 8px;
   1279   background: rgba(255, 255, 255, 0.02);
   1280   display: flex;
   1281   flex-direction: column;
   1282   gap: 4px;
   1283   transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
   1284   cursor: pointer;
   1285 }
   1286 
   1287 .peopleCard:hover {
   1288   border-color: rgba(246, 240, 255, 0.22);
   1289   background: rgba(255, 255, 255, 0.03);
   1290   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
   1291 }
   1292 
   1293 .peopleCard:active {
   1294   transform: scale(0.99);
   1295 }
   1296 
   1297 .peopleCard:focus-visible {
   1298   outline: none;
   1299   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12), 0 12px 34px rgba(0, 0, 0, 0.22);
   1300   border-color: rgba(255, 62, 165, 0.28);
   1301 }
   1302 
   1303 .peopleCardActions {
   1304   display: flex;
   1305   justify-content: flex-end;
   1306 }
   1307 
   1308 .peopleCardTop {
   1309   display: flex;
   1310   justify-content: space-between;
   1311   gap: 8px;
   1312   align-items: center;
   1313 }
   1314 
   1315 .peopleStatus {
   1316   font-size: 11px;
   1317   color: var(--muted);
   1318 }
   1319 
   1320 .peopleDms {
   1321   padding: 12px;
   1322 }
   1323 
   1324 .dmHeader {
   1325   display: flex;
   1326   flex-direction: column;
   1327   gap: 10px;
   1328   margin-bottom: 10px;
   1329 }
   1330 
   1331 .dmNewRow {
   1332   display: flex;
   1333   gap: 8px;
   1334   align-items: center;
   1335 }
   1336 
   1337 .dmToSelect {
   1338   flex: 1;
   1339   height: 34px;
   1340   padding: 6px 10px;
   1341   border-radius: 10px;
   1342 }
   1343 
   1344 .dmThreadList {
   1345   display: flex;
   1346   flex-direction: column;
   1347   gap: 10px;
   1348 }
   1349 
   1350 .dmThreadCard {
   1351   border: 1px solid rgba(246, 240, 255, 0.14);
   1352   border-radius: 12px;
   1353   padding: 10px;
   1354   background: rgba(255, 255, 255, 0.02);
   1355   display: flex;
   1356   flex-direction: column;
   1357   gap: 6px;
   1358 }
   1359 
   1360 .dmThreadTop {
   1361   display: flex;
   1362   justify-content: space-between;
   1363   gap: 10px;
   1364   align-items: center;
   1365 }
   1366 
   1367 .dmThreadLeft {
   1368   display: flex;
   1369   gap: 8px;
   1370   align-items: center;
   1371   flex-wrap: wrap;
   1372 }
   1373 
   1374 .dmTag {
   1375   font-size: 11px;
   1376   padding: 4px 10px;
   1377   border-radius: 999px;
   1378   border: 1px solid rgba(246, 240, 255, 0.16);
   1379   background: rgba(255, 255, 255, 0.03);
   1380 }
   1381 
   1382 .dmTagIncoming {
   1383   border-color: rgba(61, 220, 151, 0.28);
   1384   background: rgba(61, 220, 151, 0.10);
   1385   color: #c7ffe7;
   1386 }
   1387 
   1388 .dmTagActive {
   1389   border-color: rgba(255, 62, 165, 0.30);
   1390   background: rgba(255, 62, 165, 0.10);
   1391   color: #ffd2ea;
   1392 }
   1393 
   1394 .dmTagPending {
   1395   border-color: rgba(246, 240, 255, 0.16);
   1396   background: rgba(255, 255, 255, 0.03);
   1397   color: var(--muted);
   1398 }
   1399 
   1400 .dmTagDeclined {
   1401   border-color: rgba(255, 77, 138, 0.24);
   1402   background: rgba(255, 77, 138, 0.08);
   1403   color: #ffd2e2;
   1404 }
   1405 
   1406 .profileActions {
   1407   margin-left: auto;
   1408   display: flex;
   1409   align-items: center;
   1410 }
   1411 
   1412 .walkieBar {
   1413   padding: 10px 12px 12px;
   1414   border-top: 1px solid var(--line);
   1415   display: flex;
   1416   flex-direction: column;
   1417   gap: 8px;
   1418 }
   1419 
   1420 .walkieBar button {
   1421   width: 100%;
   1422   font-weight: 800;
   1423 }
   1424 
   1425 .walkieBar.isRecording button {
   1426   background: linear-gradient(180deg, rgba(61, 220, 151, 0.95), rgba(18, 168, 111, 0.90));
   1427   border-color: rgba(61, 220, 151, 0.30);
   1428 }
   1429 
   1430 .walkieHint .tag {
   1431   padding: 2px 8px;
   1432   font-size: 11px;
   1433 }
   1434 
   1435 .chat.walkie .chatForm {
   1436   display: none;
   1437 }
   1438 
   1439 .chat.walkie #typingIndicator {
   1440   display: none;
   1441 }
   1442 
   1443 .app.sidebarHidden .sidebar {
   1444   display: none;
   1445 }
   1446 
   1447 .logo {
   1448   font-weight: 900;
   1449   letter-spacing: 0.6px;
   1450   font-size: 20px;
   1451 }
   1452 
   1453 .subtitle {
   1454   font-size: 12px;
   1455   color: var(--muted);
   1456   margin-top: 4px;
   1457 }
   1458 
   1459 .statusBlock {
   1460   padding: 0 14px;
   1461   display: flex;
   1462   flex-direction: column;
   1463   gap: 8px;
   1464 }
   1465 
   1466 .statusBlock .row {
   1467   margin-top: 4px;
   1468 }
   1469 
   1470 .toastHost {
   1471   position: fixed;
   1472   right: 16px;
   1473   bottom: 16px;
   1474   display: flex;
   1475   flex-direction: column;
   1476   gap: 10px;
   1477   z-index: 50;
   1478 }
   1479 
   1480 .toast {
   1481   border: 1px solid rgba(246, 240, 255, 0.14);
   1482   background: rgba(12, 12, 24, 0.92);
   1483   backdrop-filter: blur(10px);
   1484   border-radius: 14px;
   1485   padding: 10px 12px;
   1486   max-width: min(360px, calc(100vw - 32px));
   1487   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   1488   animation: toastIn var(--dur-slow) var(--ease-out) both;
   1489 }
   1490 
   1491 .toastTitle {
   1492   font-weight: 800;
   1493   font-size: 12px;
   1494   margin-bottom: 4px;
   1495 }
   1496 
   1497 .toastBody {
   1498   font-size: 12px;
   1499   color: var(--muted);
   1500   line-height: 1.15rem;
   1501 }
   1502 
   1503 .panel {
   1504   background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--panel);
   1505   border: 1px solid var(--line);
   1506   border-radius: 16px;
   1507   padding: var(--panel-pad);
   1508   box-shadow: var(--shadow-soft);
   1509 }
   1510 
   1511 .panelFill {
   1512   flex: 1;
   1513   display: flex;
   1514   flex-direction: column;
   1515   min-height: 0;
   1516 }
   1517 
   1518 .panelHeader {
   1519   display: flex;
   1520   justify-content: space-between;
   1521   gap: 10px;
   1522   align-items: center;
   1523   padding: var(--panel-header-pad-y) var(--panel-header-pad-x) calc(var(--panel-header-pad-y) - 2px);
   1524   border-bottom: 1px solid var(--line);
   1525 }
   1526 
   1527 .panelTitle {
   1528   font-weight: 800;
   1529 }
   1530 
   1531 .uiHint {
   1532   margin-top: 8px;
   1533   margin-bottom: 8px;
   1534   padding: 8px 10px;
   1535   border-radius: 10px;
   1536   border: 1px solid rgba(246, 240, 255, 0.14);
   1537   background: rgba(120, 50, 190, 0.12);
   1538   color: var(--muted);
   1539   font-size: 12px;
   1540   line-height: 1.1rem;
   1541 }
   1542 
   1543 .app:not(.hintsEnabled) .uiHint {
   1544   display: none !important;
   1545 }
   1546 
   1547 .panelTitleSub {
   1548   font-weight: 800;
   1549   margin-top: 2px;
   1550 }
   1551 
   1552 .panelDivider {
   1553   height: 1px;
   1554   background: var(--line);
   1555   margin: 12px 0;
   1556 }
   1557 
   1558 .pluginInstallRow {
   1559   display: flex;
   1560   gap: 8px;
   1561   align-items: center;
   1562   margin-top: 8px;
   1563 }
   1564 
   1565 .pluginInstallRow input[type="file"] {
   1566   padding: 8px;
   1567 }
   1568 
   1569 .pluginsList {
   1570   display: flex;
   1571   flex-direction: column;
   1572   gap: 8px;
   1573   margin-top: 10px;
   1574 }
   1575 
   1576 .pluginRow {
   1577   border: 1px solid var(--line);
   1578   border-radius: 12px;
   1579   padding: 10px;
   1580   background: rgba(255, 255, 255, 0.02);
   1581   display: flex;
   1582   justify-content: space-between;
   1583   gap: 10px;
   1584   align-items: flex-start;
   1585 }
   1586 
   1587 .pluginName {
   1588   font-weight: 800;
   1589 }
   1590 
   1591 .pluginDesc {
   1592   color: var(--muted);
   1593   font-size: 12px;
   1594   line-height: 1.05rem;
   1595   margin-top: 4px;
   1596 }
   1597 
   1598 .pluginBadges {
   1599   display: flex;
   1600   gap: 6px;
   1601   flex-wrap: wrap;
   1602   margin-top: 8px;
   1603 }
   1604 
   1605 .pluginBadge {
   1606   font-size: 11px;
   1607   color: var(--muted);
   1608   border: 1px solid rgba(246, 240, 255, 0.14);
   1609   padding: 3px 7px;
   1610   border-radius: 999px;
   1611 }
   1612 
   1613 .pluginError {
   1614   color: #ffb3c6;
   1615   font-size: 12px;
   1616   margin-top: 8px;
   1617 }
   1618 
   1619 .form {
   1620   display: flex;
   1621   flex-direction: column;
   1622   gap: 10px;
   1623 }
   1624 
   1625 .row {
   1626   display: flex;
   1627   gap: 10px;
   1628 }
   1629 
   1630 .grow {
   1631   flex: 1;
   1632 }
   1633 
   1634 .onboardingCard {
   1635   margin-top: 10px;
   1636   border: 1px solid var(--line);
   1637   border-radius: 12px;
   1638   padding: 10px;
   1639   background: rgba(255, 255, 255, 0.02);
   1640 }
   1641 
   1642 .onboardingAbout {
   1643   max-height: 180px;
   1644   overflow: auto;
   1645   border: 1px solid var(--line);
   1646   border-radius: 10px;
   1647   padding: 8px;
   1648   background: rgba(255, 255, 255, 0.01);
   1649 }
   1650 
   1651 .onboardingRules {
   1652   margin: 8px 0 0 18px;
   1653   padding: 0;
   1654   display: flex;
   1655   flex-direction: column;
   1656   gap: 8px;
   1657 }
   1658 
   1659 .onboardingPanelBody {
   1660   padding: 10px;
   1661   overflow: auto;
   1662 }
   1663 
   1664 .onbTabs {
   1665   display: flex;
   1666   gap: 8px;
   1667   flex-wrap: wrap;
   1668 }
   1669 
   1670 .onbRuleList,
   1671 .onbRuleEditorList {
   1672   display: flex;
   1673   flex-direction: column;
   1674   gap: 10px;
   1675 }
   1676 
   1677 .onbRuleViewerCard,
   1678 .onbRuleEditorCard {
   1679   border: 1px solid var(--line);
   1680   border-radius: 12px;
   1681   padding: 10px;
   1682   background: rgba(255, 255, 255, 0.02);
   1683 }
   1684 
   1685 .onbRuleEditorBody {
   1686   display: flex;
   1687   flex-direction: column;
   1688   gap: 8px;
   1689   margin-top: 8px;
   1690 }
   1691 
   1692 .onbRoleGrid {
   1693   display: grid;
   1694   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   1695   gap: 8px;
   1696   margin-top: 8px;
   1697 }
   1698 
   1699 .onbSeverityInfo {
   1700   border-color: rgba(61, 220, 151, 0.55);
   1701   color: #9beac7;
   1702 }
   1703 
   1704 .onbSeverityWarn {
   1705   border-color: rgba(255, 166, 0, 0.55);
   1706   color: #ffd28d;
   1707 }
   1708 
   1709 .onbSeverityCritical {
   1710   border-color: rgba(255, 77, 138, 0.65);
   1711   color: #ffb3cb;
   1712 }
   1713 
   1714 .goodText {
   1715   color: var(--good);
   1716 }
   1717 
   1718 .badText {
   1719   color: var(--bad);
   1720 }
   1721 
   1722 label span {
   1723   display: block;
   1724   color: var(--muted);
   1725   font-size: var(--label-font-size);
   1726   margin-bottom: var(--label-gap);
   1727 }
   1728 
   1729 input,
   1730 textarea,
   1731 select {
   1732   width: 100%;
   1733   color: var(--text);
   1734   background: color-mix(in srgb, var(--text) 3%, transparent);
   1735   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   1736   border-radius: 12px;
   1737   padding: var(--control-pad-y) var(--control-pad-x);
   1738   outline: none;
   1739 }
   1740 
   1741 select option,
   1742 select optgroup {
   1743   color: #11131a;
   1744   background: #f4f6fb;
   1745 }
   1746 
   1747 select option:checked {
   1748   color: #0f1724;
   1749   background: #8eb8e6;
   1750 }
   1751 
   1752 select optgroup {
   1753   font-weight: 700;
   1754   background: #e7ebf3;
   1755 }
   1756 
   1757 input:focus,
   1758 textarea:focus,
   1759 select:focus,
   1760 .editor:focus-within {
   1761   border-color: color-mix(in srgb, var(--accent) 45%, transparent);
   1762   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
   1763 }
   1764 
   1765 button {
   1766   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   1767   background: color-mix(in srgb, var(--text) 4%, transparent);
   1768   color: var(--text);
   1769   border-radius: 12px;
   1770   padding: var(--btn-pad-y) var(--btn-pad-x);
   1771   cursor: pointer;
   1772   transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft),
   1773     background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
   1774 }
   1775 
   1776 button.primary {
   1777   background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, transparent), color-mix(in srgb, var(--accent2) 90%, transparent));
   1778   border-color: color-mix(in srgb, var(--accent) 30%, transparent);
   1779   color: #120013;
   1780   font-weight: 900;
   1781 }
   1782 
   1783 button.ghost {
   1784   background: transparent;
   1785 }
   1786 
   1787 button.danger {
   1788   border-color: rgba(255, 77, 138, 0.26);
   1789   background: color-mix(in srgb, var(--bad) 10%, transparent);
   1790 }
   1791 
   1792 button.danger:hover:not(:disabled) {
   1793   background: color-mix(in srgb, var(--bad) 14%, transparent);
   1794   border-color: color-mix(in srgb, var(--bad) 35%, transparent);
   1795 }
   1796 
   1797 button:hover {
   1798   transform: translateY(-1px);
   1799 }
   1800 
   1801 button:active {
   1802   transform: translateY(0px) scale(0.985);
   1803 }
   1804 
   1805 button:focus-visible {
   1806   outline: none;
   1807   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
   1808   border-color: color-mix(in srgb, var(--accent) 35%, transparent);
   1809 }
   1810 
   1811 button:disabled {
   1812   opacity: 0.55;
   1813   cursor: not-allowed;
   1814   transform: none;
   1815 }
   1816 
   1817 .badge {
   1818   display: inline-flex;
   1819   align-items: center;
   1820   gap: 8px;
   1821   padding: 6px 10px;
   1822   border-radius: 999px;
   1823   font-size: 12px;
   1824   border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
   1825   background: color-mix(in srgb, var(--text) 2%, transparent);
   1826 }
   1827 
   1828 .badge-good {
   1829   border-color: color-mix(in srgb, var(--good) 25%, transparent);
   1830   background: color-mix(in srgb, var(--good) 10%, transparent);
   1831   color: #baf6dd;
   1832 }
   1833 
   1834 .badge-warn {
   1835   border-color: color-mix(in srgb, var(--accent) 30%, transparent);
   1836   background: color-mix(in srgb, var(--accent) 10%, transparent);
   1837   color: #ffd2ea;
   1838 }
   1839 
   1840 .badge-bad {
   1841   border-color: color-mix(in srgb, var(--bad) 30%, transparent);
   1842   background: color-mix(in srgb, var(--bad) 10%, transparent);
   1843   color: #ffd2e2;
   1844 }
   1845 
   1846 .filters {
   1847   display: flex;
   1848   gap: 6px;
   1849   align-items: center;
   1850   flex-wrap: nowrap;
   1851   padding: 6px;
   1852   border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
   1853   border-radius: 12px;
   1854   background: color-mix(in srgb, var(--text) 2%, transparent);
   1855   overflow-x: auto;
   1856   max-width: 100%;
   1857 }
   1858 
   1859 .filters input,
   1860 .filters select {
   1861   min-width: 0;
   1862   height: 34px;
   1863   padding: 6px 10px;
   1864   border-radius: 10px;
   1865   font-size: 13px;
   1866 }
   1867 
   1868 .filters #filterAuthor {
   1869   width: 170px;
   1870 }
   1871 
   1872 .filters #filterKeywords {
   1873   width: 210px;
   1874 }
   1875 
   1876 .filters #sortBy {
   1877   width: 170px;
   1878 }
   1879 
   1880 .filters button {
   1881   height: 34px;
   1882   padding: 6px 12px;
   1883   border-radius: 10px;
   1884   font-size: 13px;
   1885 }
   1886 
   1887 .hiveTabs {
   1888   display: flex;
   1889   gap: 10px;
   1890   padding: 14px 12px 12px;
   1891   flex-wrap: wrap;
   1892   border-bottom: 1px solid var(--line);
   1893   margin-bottom: 6px;
   1894   position: relative;
   1895 }
   1896 
   1897 .hiveTabs::before {
   1898   content: "";
   1899   position: absolute;
   1900   left: 12px;
   1901   right: 12px;
   1902   top: 0;
   1903   height: 1px;
   1904   background: linear-gradient(90deg, rgba(255, 62, 165, 0.26), rgba(184, 75, 255, 0.12), transparent);
   1905 }
   1906 
   1907 .hiveTabs button {
   1908   padding: 10px 16px;
   1909   font-size: 13px;
   1910   border-radius: 999px;
   1911   font-weight: 700;
   1912 }
   1913 
   1914 .mobileComposerToggle {
   1915   display: inline-flex;
   1916 }
   1917 
   1918 .mobileOnlyHiveControl {
   1919   display: none;
   1920 }
   1921 
   1922 #pollinatePanel.composerCollapsed {
   1923   display: none;
   1924 }
   1925 
   1926 .feed {
   1927   padding: 12px;
   1928   overflow: auto;
   1929   display: grid;
   1930   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   1931   gap: 12px;
   1932   align-content: start;
   1933   min-height: 0;
   1934 }
   1935 
   1936 .profileViewBody {
   1937   flex: 1;
   1938   min-height: 0;
   1939   overflow: auto;
   1940   padding: 12px;
   1941 }
   1942 
   1943 .profileCard {
   1944   border: 1px solid rgba(246, 240, 255, 0.12);
   1945   border-radius: 14px;
   1946   background: rgba(255, 255, 255, 0.02);
   1947   padding: 14px;
   1948   display: flex;
   1949   flex-direction: column;
   1950   gap: 12px;
   1951 }
   1952 
   1953 .profileHeader {
   1954   display: flex;
   1955   gap: 12px;
   1956   align-items: center;
   1957   border: 1px solid rgba(246, 240, 255, 0.12);
   1958   border-radius: 12px;
   1959   padding: 10px;
   1960   background: linear-gradient(180deg, rgba(255, 62, 165, 0.08), rgba(255, 255, 255, 0.02));
   1961 }
   1962 
   1963 .profileHeroPfp {
   1964   width: 72px;
   1965   height: 72px;
   1966   border-radius: 10px;
   1967 }
   1968 
   1969 .profileIdentity {
   1970   display: flex;
   1971   flex-direction: column;
   1972   gap: 4px;
   1973 }
   1974 
   1975 .profileHandle {
   1976   font-size: 21px;
   1977   font-weight: 900;
   1978 }
   1979 
   1980 .profileSection {
   1981   display: flex;
   1982   flex-direction: column;
   1983   gap: 8px;
   1984 }
   1985 
   1986 .profileBio {
   1987   line-height: 1.35rem;
   1988 }
   1989 
   1990 .profileBio img {
   1991   max-width: 100%;
   1992   max-height: min(420px, 55vh);
   1993   object-fit: contain;
   1994   border-radius: 12px;
   1995   display: block;
   1996   cursor: zoom-in;
   1997 }
   1998 
   1999 .editor img {
   2000   max-width: 100%;
   2001   max-height: min(420px, 55vh);
   2002   object-fit: contain;
   2003   border-radius: 12px;
   2004   display: block;
   2005   margin-top: 8px;
   2006   cursor: zoom-in;
   2007 }
   2008 
   2009 .ytEmbed {
   2010   margin-top: 8px;
   2011   border: 1px solid rgba(246, 240, 255, 0.12);
   2012   border-radius: 14px;
   2013   overflow: hidden;
   2014   background: rgba(255, 255, 255, 0.02);
   2015   aspect-ratio: 16 / 9;
   2016   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
   2017 }
   2018 
   2019 .ytEmbed iframe {
   2020   width: 100%;
   2021   height: 100%;
   2022   border: 0;
   2023   display: block;
   2024 }
   2025 
   2026 .profileBio audio {
   2027   width: 100%;
   2028   margin-top: 8px;
   2029 }
   2030 
   2031 .profileLinksWrap {
   2032   display: flex;
   2033   flex-wrap: wrap;
   2034   gap: 8px;
   2035 }
   2036 
   2037 .profileLinkTag {
   2038   text-decoration: none;
   2039 }
   2040 
   2041 .profileEditPanel {
   2042   border-top: 1px solid var(--line);
   2043   padding: 12px;
   2044   display: flex;
   2045   flex-direction: column;
   2046   gap: 10px;
   2047   max-height: 46vh;
   2048   overflow: auto;
   2049 }
   2050 
   2051 .profileBioEditor {
   2052   min-height: 120px;
   2053   max-height: 260px;
   2054   overflow: auto;
   2055 }
   2056 
   2057 .profileLinksHead {
   2058   display: flex;
   2059   justify-content: space-between;
   2060   align-items: center;
   2061   gap: 8px;
   2062 }
   2063 
   2064 .profileLinksEditor {
   2065   display: flex;
   2066   flex-direction: column;
   2067   gap: 8px;
   2068 }
   2069 
   2070 .profileLinkEditRow {
   2071   display: grid;
   2072   grid-template-columns: 1fr 1.4fr auto;
   2073   gap: 8px;
   2074   align-items: center;
   2075 }
   2076 
   2077 @media (max-width: 1100px) {
   2078   .panelHeader {
   2079     align-items: flex-start;
   2080   }
   2081 
   2082   .filters {
   2083     flex-wrap: wrap;
   2084     overflow-x: visible;
   2085   }
   2086 
   2087   .filters #filterAuthor,
   2088   .filters #filterKeywords,
   2089   .filters #sortBy {
   2090     width: 100%;
   2091   }
   2092 
   2093   .profileLinkEditRow {
   2094     grid-template-columns: 1fr;
   2095   }
   2096 }
   2097 
   2098 .post {
   2099   border: 1px solid rgba(246, 240, 255, 0.12);
   2100   border-radius: 14px;
   2101   padding: 12px;
   2102   background: var(--panel2);
   2103   display: flex;
   2104   flex-direction: column;
   2105   gap: 10px;
   2106   position: relative;
   2107   transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
   2108     background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
   2109 }
   2110 
   2111 .feed.hivesListView .post {
   2112   padding: 10px;
   2113   gap: 6px;
   2114 }
   2115 
   2116 .feed.hivesListView .postTop {
   2117   align-items: center;
   2118 }
   2119 
   2120 .feed.hivesListView .postTitleRow {
   2121   gap: 0;
   2122   min-width: 0;
   2123 }
   2124 
   2125 .feed.hivesListView .postTitle {
   2126   margin-bottom: 0;
   2127   white-space: nowrap;
   2128   overflow: hidden;
   2129   text-overflow: ellipsis;
   2130 }
   2131 
   2132 .feed.hivesListView .postMeta,
   2133 .feed.hivesListView .reactionsRow,
   2134 .feed.hivesListView .boostControls,
   2135 .feed.hivesListView .countdown.boost {
   2136   display: none !important;
   2137 }
   2138 
   2139 .feed.hivesListView .postMeta {
   2140   display: flex !important;
   2141   margin-top: 6px;
   2142   flex-wrap: nowrap;
   2143   overflow: hidden;
   2144   white-space: nowrap;
   2145   text-overflow: ellipsis;
   2146   gap: 6px;
   2147 }
   2148 
   2149 .feed.hivesListView .rightCol {
   2150   gap: 6px;
   2151 }
   2152 
   2153 .post:hover {
   2154   transform: translateY(-2px);
   2155   border-color: rgba(255, 62, 165, 0.22);
   2156   background: rgba(255, 255, 255, 0.03);
   2157   box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
   2158 }
   2159 
   2160 .post.isUnread {
   2161   box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.18), 0 14px 40px rgba(255, 62, 165, 0.10);
   2162 }
   2163 
   2164 .post.isNew {
   2165   animation: glowPop 900ms ease-out;
   2166 }
   2167 
   2168 .post.isBuzz {
   2169   animation: buzzPulse 700ms ease-out;
   2170 }
   2171 
   2172 @keyframes glowPop {
   2173   0% {
   2174     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.05), 0 0 0 rgba(255, 62, 165, 0.0);
   2175     transform: translateY(0px);
   2176   }
   2177   40% {
   2178     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.30), 0 18px 60px rgba(255, 62, 165, 0.18);
   2179     transform: translateY(-2px);
   2180   }
   2181   100% {
   2182     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0.0);
   2183     transform: translateY(0px);
   2184   }
   2185 }
   2186 
   2187 @keyframes buzzPulse {
   2188   0% {
   2189     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0);
   2190   }
   2191   40% {
   2192     box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.18), 0 8px 22px rgba(255, 62, 165, 0.08);
   2193   }
   2194   100% {
   2195     box-shadow: 0 0 0 1px rgba(246, 240, 255, 0.12), 0 0 0 rgba(255, 62, 165, 0);
   2196   }
   2197 }
   2198 
   2199 .badgeDot {
   2200   width: 10px;
   2201   height: 10px;
   2202   border-radius: 999px;
   2203   background: rgba(255, 62, 165, 0.95);
   2204   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.15);
   2205 }
   2206 
   2207 .postTop {
   2208   display: flex;
   2209   justify-content: space-between;
   2210   gap: 12px;
   2211   align-items: flex-start;
   2212 }
   2213 
   2214 .postContent {
   2215   line-height: 1.25rem;
   2216 }
   2217 
   2218 .postTitle {
   2219   font-weight: 900;
   2220   letter-spacing: 0.2px;
   2221   margin-bottom: 6px;
   2222 }
   2223 
   2224 .postTitleRow {
   2225   display: flex;
   2226   flex-direction: column;
   2227   gap: 6px;
   2228 }
   2229 
   2230 .postContent p {
   2231   margin: 0 0 8px;
   2232 }
   2233 
   2234 .postContent p:last-child {
   2235   margin-bottom: 0;
   2236 }
   2237 
   2238 .postMeta {
   2239   display: flex;
   2240   gap: 8px;
   2241   flex-wrap: wrap;
   2242   margin-top: 10px;
   2243 }
   2244 
   2245 .postLastChat,
   2246 .postTypingLine {
   2247   margin-top: 6px;
   2248 }
   2249 
   2250 .reactionsRow {
   2251   display: flex;
   2252   gap: 6px;
   2253   flex-wrap: wrap;
   2254   align-items: center;
   2255   margin-top: 10px;
   2256 }
   2257 
   2258 .customRoleRow {
   2259   display: inline-flex;
   2260   gap: 4px;
   2261   margin-left: 6px;
   2262   flex-wrap: wrap;
   2263 }
   2264 
   2265 .reactBtn {
   2266   display: inline-flex;
   2267   align-items: center;
   2268   gap: 6px;
   2269   padding: 6px 10px;
   2270   border-radius: 999px;
   2271   border: 1px solid rgba(246, 240, 255, 0.12);
   2272   background: rgba(255, 255, 255, 0.02);
   2273   cursor: pointer;
   2274   user-select: none;
   2275   transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft),
   2276     background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
   2277 }
   2278 
   2279 .reactBtn:hover {
   2280   transform: translateY(-1px);
   2281   background: rgba(255, 255, 255, 0.035);
   2282   border-color: rgba(246, 240, 255, 0.18);
   2283 }
   2284 
   2285 .reactBtn:active {
   2286   transform: translateY(0px) scale(0.985);
   2287 }
   2288 
   2289 .reactBtn:focus-visible {
   2290   outline: none;
   2291   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12);
   2292   border-color: rgba(255, 62, 165, 0.28);
   2293 }
   2294 
   2295 .reactBtn .count {
   2296   font-size: 12px;
   2297   color: var(--muted);
   2298 }
   2299 
   2300 .reactBtn.isOn {
   2301   border-color: rgba(255, 62, 165, 0.30);
   2302   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.08);
   2303 }
   2304 
   2305 .reactBtn.pulse {
   2306   animation: reactPop 420ms var(--ease-out) both;
   2307 }
   2308 
   2309 .tag {
   2310   font-size: 12px;
   2311   padding: 4px 8px;
   2312   border-radius: 999px;
   2313   border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
   2314   background: color-mix(in srgb, var(--accent) 10%, transparent);
   2315   color: #ffd2ea;
   2316 }
   2317 
   2318 .rightCol {
   2319   display: flex;
   2320   flex-direction: column;
   2321   gap: 8px;
   2322   align-items: flex-end;
   2323 }
   2324 
   2325 .postActionsRow {
   2326   display: flex;
   2327   gap: 6px;
   2328   align-items: center;
   2329   justify-content: flex-end;
   2330   width: 100%;
   2331   position: relative;
   2332 }
   2333 
   2334 .kebabBtn {
   2335   width: 38px;
   2336   height: 34px;
   2337   padding: 0;
   2338   border-radius: 12px;
   2339   line-height: 34px;
   2340   font-weight: 900;
   2341 }
   2342 
   2343 .postMenu {
   2344   position: absolute;
   2345   right: 0;
   2346   top: calc(100% + 6px);
   2347   z-index: 40;
   2348   width: 170px;
   2349   max-width: min(240px, calc(100vw - 48px));
   2350   border: 1px solid rgba(246, 240, 255, 0.16);
   2351   border-radius: 14px;
   2352   background: rgba(8, 8, 16, 0.92);
   2353   backdrop-filter: blur(12px);
   2354   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   2355   padding: 6px;
   2356   animation: popFloat var(--dur-med) var(--ease-out) both;
   2357 }
   2358 
   2359 .postMenu button {
   2360   width: 100%;
   2361   text-align: left;
   2362   padding: 8px 10px;
   2363   border-radius: 12px;
   2364 }
   2365 
   2366 .postMenu button:hover {
   2367   transform: none;
   2368   background: rgba(255, 255, 255, 0.06);
   2369   border-color: rgba(246, 240, 255, 0.18);
   2370 }
   2371 
   2372 .postMenu button:active {
   2373   transform: scale(0.99);
   2374 }
   2375 
   2376 .postMenu button.danger {
   2377   border-color: rgba(255, 77, 138, 0.26);
   2378 }
   2379 
   2380 .postMenu button.danger:hover {
   2381   background: rgba(255, 77, 138, 0.10);
   2382   border-color: rgba(255, 77, 138, 0.35);
   2383 }
   2384 
   2385 .countdown {
   2386   font-size: 12px;
   2387   color: var(--muted);
   2388 }
   2389 
   2390 .countdown.boost {
   2391   color: #ffd2ea;
   2392 }
   2393 
   2394 .boostRow {
   2395   display: flex;
   2396   gap: 8px;
   2397   align-items: center;
   2398 }
   2399 
   2400 .boostRow select {
   2401   padding: 6px 8px;
   2402 }
   2403 
   2404 .userLine {
   2405   display: flex;
   2406   align-items: center;
   2407   gap: 10px;
   2408   padding: 8px 10px;
   2409   border-radius: 12px;
   2410   border: 1px solid rgba(246, 240, 255, 0.12);
   2411   background: rgba(255, 255, 255, 0.02);
   2412   margin: 6px 0 10px;
   2413 }
   2414 
   2415 .userPill {
   2416   display: inline-flex;
   2417   align-items: center;
   2418   gap: 8px;
   2419 }
   2420 
   2421 .userPillLink {
   2422   background: transparent;
   2423   border: 0;
   2424   padding: 0;
   2425 }
   2426 
   2427 .userPillLink:hover {
   2428   transform: none;
   2429   text-decoration: underline;
   2430 }
   2431 
   2432 .userPillLink:active {
   2433   transform: scale(0.99);
   2434 }
   2435 
   2436 .userPillLink:focus-visible {
   2437   outline: none;
   2438   box-shadow: 0 0 0 4px rgba(255, 62, 165, 0.12);
   2439   border-radius: 12px;
   2440 }
   2441 
   2442 .postAuthor .userPill {
   2443   gap: 10px;
   2444 }
   2445 
   2446 .pfp {
   2447   width: 34px;
   2448   height: 34px;
   2449   border-radius: 6px;
   2450   display: inline-flex;
   2451   align-items: center;
   2452   justify-content: center;
   2453   background: rgba(255, 255, 255, 0.02);
   2454   border: 1px solid rgba(246, 240, 255, 0.14);
   2455   overflow: hidden;
   2456 }
   2457 
   2458 .post .pfp {
   2459   width: 64px;
   2460   height: 64px;
   2461   border-radius: 10px;
   2462 }
   2463 
   2464 .pfp img {
   2465   width: 100%;
   2466   height: 100%;
   2467   object-fit: cover;
   2468 }
   2469 
   2470 .pfpBox {
   2471   width: 64px;
   2472   height: 64px;
   2473   border-radius: 12px;
   2474   border: 1px solid rgba(246, 240, 255, 0.14);
   2475   background: rgba(255, 255, 255, 0.02);
   2476   overflow: hidden;
   2477   flex: 0 0 auto;
   2478 }
   2479 
   2480 .pfpBox img {
   2481   width: 100%;
   2482   height: 100%;
   2483   object-fit: cover;
   2484   display: none;
   2485 }
   2486 
   2487 .pfpBox img.hasImg {
   2488   display: block;
   2489 }
   2490 
   2491 .editorShell {
   2492   border: 1px solid rgba(246, 240, 255, 0.14);
   2493   border-radius: 16px;
   2494   overflow: hidden;
   2495   background: rgba(255, 255, 255, 0.02);
   2496 }
   2497 
   2498 .toolbar {
   2499   display: flex;
   2500   flex-wrap: wrap;
   2501   gap: 6px;
   2502   padding: 8px;
   2503   border-bottom: 1px solid var(--line);
   2504 }
   2505 
   2506 .toolbar button {
   2507   padding: 6px 10px;
   2508   border-radius: 10px;
   2509 }
   2510 
   2511 .toolbar .sep {
   2512   width: 1px;
   2513   background: var(--line);
   2514   margin: 4px 6px;
   2515 }
   2516 
   2517 .editor {
   2518   min-height: 110px;
   2519   padding: 10px;
   2520   outline: none;
   2521 }
   2522 
   2523 .editor:empty:before {
   2524   content: "Write something...";
   2525   color: rgba(246, 240, 255, 0.40);
   2526 }
   2527 
   2528 .chatMessages {
   2529   padding: 10px 10px 8px;
   2530   overflow: auto;
   2531   display: flex;
   2532   flex-direction: column;
   2533   gap: 0;
   2534   flex: 1;
   2535   min-height: 0;
   2536   container-type: inline-size;
   2537 }
   2538 
   2539 .typingIndicator {
   2540   padding: 0 12px 10px;
   2541   min-height: 18px;
   2542 }
   2543 
   2544 .typingDots {
   2545   display: inline-flex;
   2546   gap: 2px;
   2547   margin-left: 6px;
   2548 }
   2549 
   2550 .typingDots span {
   2551   opacity: 0.2;
   2552   animation: dotPulse 1.2s infinite;
   2553 }
   2554 
   2555 .typingDots span:nth-child(2) {
   2556   animation-delay: 0.2s;
   2557 }
   2558 
   2559 .typingDots span:nth-child(3) {
   2560   animation-delay: 0.4s;
   2561 }
   2562 
   2563 @keyframes dotPulse {
   2564   0%,
   2565   100% {
   2566     opacity: 0.2;
   2567   }
   2568   50% {
   2569     opacity: 1;
   2570   }
   2571 }
   2572 
   2573 .chatMsg {
   2574   border: 1px solid rgba(246, 240, 255, 0.12);
   2575   background: rgba(255, 255, 255, 0.02);
   2576   border-radius: 14px;
   2577   padding: 8px 9px;
   2578   margin-top: 8px;
   2579   width: fit-content;
   2580   margin-left: auto;
   2581   margin-right: auto;
   2582   max-width: min(var(--chat-rail-center-max, 70%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   2583   transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out),
   2584     box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
   2585 }
   2586 
   2587 .chatMsg.railLeft {
   2588   margin-left: var(--chat-rail-inset, 12px);
   2589   margin-right: auto;
   2590   max-width: min(var(--chat-rail-side-max, 66%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   2591 }
   2592 
   2593 .chatMsg.railCenter {
   2594   margin-left: auto;
   2595   margin-right: auto;
   2596   max-width: min(var(--chat-rail-center-max, 70%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   2597 }
   2598 
   2599 .chatMsg.railRight {
   2600   margin-left: auto;
   2601   margin-right: var(--chat-rail-inset, 12px);
   2602   max-width: min(var(--chat-rail-side-max, 66%), calc(100% - (var(--chat-rail-inset, 12px) * 2)));
   2603   background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.02));
   2604   border-color: color-mix(in srgb, var(--accent) 30%, rgba(246, 240, 255, 0.12));
   2605 }
   2606 
   2607 .chatMsg:first-child {
   2608   margin-top: 0;
   2609 }
   2610 
   2611 .chatMsg.isStacked {
   2612   margin-top: 4px;
   2613 }
   2614 
   2615 .chatMsg.railRight .meta {
   2616   justify-content: flex-end;
   2617 }
   2618 
   2619 .chatMsg.mentionMe {
   2620   border-color: rgba(255, 62, 165, 0.45);
   2621   box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.14);
   2622 }
   2623 
   2624 .chatMsg.isModMsg {
   2625   background: linear-gradient(
   2626       180deg,
   2627       color-mix(in srgb, var(--warn) 22%, transparent),
   2628       rgba(255, 255, 255, 0.02)
   2629     ),
   2630     rgba(255, 255, 255, 0.02);
   2631   border-color: color-mix(in srgb, var(--warn2) 38%, rgba(246, 240, 255, 0.12));
   2632   box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn2) 10%, transparent);
   2633 }
   2634 
   2635 .chatMsg.isModMsg .meta {
   2636   color: color-mix(in srgb, var(--warn) 60%, var(--muted));
   2637 }
   2638 
   2639 .modPill {
   2640   display: inline-flex;
   2641   align-items: center;
   2642   gap: 6px;
   2643   font-weight: 900;
   2644   letter-spacing: 0.3px;
   2645   color: color-mix(in srgb, var(--warn) 88%, var(--text));
   2646   border: 1px solid color-mix(in srgb, var(--warn2) 42%, transparent);
   2647   background: color-mix(in srgb, var(--warn2) 10%, transparent);
   2648   padding: 2px 8px;
   2649   border-radius: 999px;
   2650 }
   2651 
   2652 .chatMsg.isNewMsg {
   2653   animation: msgIn 520ms var(--ease-out) both;
   2654 }
   2655 
   2656 /* When the chat container gets narrow, collapse center-lane messages to the left lane.
   2657    Self stays right-aligned; mod/system keep their visual treatment. */
   2658 @container (max-width: 520px) {
   2659   .chatMessages {
   2660     --chat-rail-side-max: 92%;
   2661     --chat-rail-center-max: 92%;
   2662   }
   2663 
   2664   .chatMsg.railCenter {
   2665     margin-left: var(--chat-rail-inset, 12px);
   2666     margin-right: auto;
   2667   }
   2668 
   2669   .chatMsg.railCenter .meta {
   2670     justify-content: flex-start;
   2671   }
   2672 
   2673   .chatMsg.isModMsg {
   2674     margin-left: calc(var(--chat-rail-inset, 12px) + 8px);
   2675   }
   2676 }
   2677 
   2678 .chatMsg:hover {
   2679   border-color: rgba(246, 240, 255, 0.18);
   2680   background: rgba(255, 255, 255, 0.028);
   2681 }
   2682 
   2683 .chatMsg.mentionMe:not(.isNewMsg) {
   2684   animation: mentionPing 720ms var(--ease-out) both;
   2685 }
   2686 
   2687 .chatActionsRow {
   2688   margin-top: 6px;
   2689   display: flex;
   2690   align-items: center;
   2691   justify-content: space-between;
   2692   gap: 10px;
   2693   flex-wrap: wrap;
   2694 }
   2695 
   2696 .chatReactions {
   2697   display: flex;
   2698   gap: 4px;
   2699   flex-wrap: wrap;
   2700   margin-top: 6px;
   2701 }
   2702 
   2703 .chatActionsRow .chatReactions {
   2704   margin-top: 0;
   2705   flex: 1 1 auto;
   2706 }
   2707 
   2708 .chatReactions .reactionsRow {
   2709   margin-top: 0;
   2710   gap: 4px;
   2711 }
   2712 
   2713 .chatReactions .reactBtn {
   2714   padding: 4px 8px;
   2715 }
   2716 
   2717 .chatMsg .content img {
   2718   max-width: 100%;
   2719   max-height: min(420px, 55vh);
   2720   object-fit: contain;
   2721   border-radius: 10px;
   2722   display: block;
   2723   margin-top: 6px;
   2724   cursor: zoom-in;
   2725 }
   2726 
   2727 .chatReactions:empty {
   2728   display: none;
   2729 }
   2730 
   2731 .chatMsg .content audio,
   2732 .post audio,
   2733 .editor audio {
   2734   width: 100%;
   2735   margin-top: 8px;
   2736 }
   2737 
   2738 #mediaModalImg {
   2739   max-width: min(92vw, 1200px);
   2740   max-height: 78vh;
   2741   width: auto;
   2742   height: auto;
   2743   display: block;
   2744   margin: 0 auto;
   2745   border-radius: 14px;
   2746   background: rgba(0, 0, 0, 0.18);
   2747 }
   2748 
   2749 .editor.isDropActive {
   2750   outline: 2px dashed rgba(255, 62, 165, 0.7);
   2751   outline-offset: 6px;
   2752 }
   2753 
   2754 .chatMsg .meta {
   2755   font-size: 11px;
   2756   color: var(--muted);
   2757   margin-bottom: 3px;
   2758   display: flex;
   2759   gap: 6px;
   2760   align-items: center;
   2761   line-height: 1.1;
   2762 }
   2763 
   2764 .chatHeaderInline {
   2765   display: inline-flex;
   2766   align-items: center;
   2767   gap: 6px;
   2768 }
   2769 
   2770 .chatMsg .content p {
   2771   margin: 0 0 6px;
   2772 }
   2773 
   2774 .chatMsg .content p:last-child {
   2775   margin-bottom: 0;
   2776 }
   2777 
   2778 .mentionToken {
   2779   border: 1px solid rgba(255, 62, 165, 0.28);
   2780   border-radius: 999px;
   2781   padding: 0 6px;
   2782   background: rgba(255, 62, 165, 0.10);
   2783   color: #ffd2ea;
   2784 }
   2785 
   2786 .mentionTokenMe {
   2787   border-color: rgba(61, 220, 151, 0.4);
   2788   background: rgba(61, 220, 151, 0.14);
   2789   color: #baf6dd;
   2790 }
   2791 
   2792 .chatReplyRef {
   2793   margin-bottom: 6px;
   2794   padding: 6px 8px;
   2795   border-left: 3px solid rgba(255, 62, 165, 0.5);
   2796   border-radius: 8px;
   2797   background: rgba(255, 255, 255, 0.02);
   2798 }
   2799 
   2800 .chatTools {
   2801   margin-top: 6px;
   2802   display: flex;
   2803   justify-content: flex-end;
   2804   gap: 6px;
   2805 }
   2806 
   2807 .chatActionsRow .chatTools {
   2808   margin-top: 0;
   2809   flex: 0 0 auto;
   2810 }
   2811 
   2812 .chatForm {
   2813   display: flex;
   2814   flex-direction: column;
   2815   gap: 10px;
   2816   padding: 12px;
   2817   border-top: 1px solid var(--line);
   2818 }
   2819 
   2820 .app.hotbarVisible .chatForm {
   2821   padding-bottom: 76px;
   2822 }
   2823 
   2824 .chatForm > .primary[type="submit"] {
   2825   align-self: flex-end;
   2826 }
   2827 
   2828 .chat.isSkinnyChat .chatMessages {
   2829   padding: 8px;
   2830 }
   2831 
   2832 .chat.isSkinnyChat .chatMsg {
   2833   width: auto;
   2834   max-width: 100%;
   2835   margin-left: 0;
   2836   margin-right: 0;
   2837   border-radius: 10px;
   2838   padding: 6px 8px;
   2839 }
   2840 
   2841 .chat.isSkinnyChat .chatMsg.railLeft,
   2842 .chat.isSkinnyChat .chatMsg.railCenter,
   2843 .chat.isSkinnyChat .chatMsg.railRight {
   2844   margin-left: 0;
   2845   margin-right: 0;
   2846   max-width: 100%;
   2847 }
   2848 
   2849 .chat.isSkinnyChat .chatMsg .meta {
   2850   font-size: 10px;
   2851   margin-bottom: 2px;
   2852 }
   2853 
   2854 .chat.isSkinnyChat .chatMsg .content {
   2855   font-size: 12px;
   2856   line-height: 1.3;
   2857   white-space: nowrap;
   2858   overflow: hidden;
   2859   text-overflow: ellipsis;
   2860 }
   2861 
   2862 .chat.isSkinnyChat .chatMsg .content img,
   2863 .chat.isSkinnyChat .chatMsg .content audio,
   2864 .chat.isSkinnyChat .chatMsg .content video,
   2865 .chat.isSkinnyChat .chatReplyRef,
   2866 .chat.isSkinnyChat .chatReactions {
   2867   display: none !important;
   2868 }
   2869 
   2870 .chat.isSkinnyChat .chatActionsRow {
   2871   margin-top: 4px;
   2872   gap: 6px;
   2873 }
   2874 
   2875 .chat.isSkinnyChat .chatTools {
   2876   margin-top: 0;
   2877   gap: 4px;
   2878   justify-content: flex-start;
   2879 }
   2880 
   2881 .chat.isSkinnyChat .chatTools .smallBtn {
   2882   padding: 3px 8px;
   2883 }
   2884 
   2885 .chat.isSkinnyChat .toolbar {
   2886   padding: 6px;
   2887   gap: 4px;
   2888 }
   2889 
   2890 .chat.isSkinnyChat .toolbar .sep,
   2891 .chat.isSkinnyChat .toolbar button[data-chatcmd],
   2892 .chat.isSkinnyChat .toolbar button[data-chatemoji] {
   2893   display: none;
   2894 }
   2895 
   2896 .chat.isSkinnyChat .chatEditor {
   2897   min-height: 64px;
   2898 }
   2899 
   2900 .chat.isSkinnyChat .chatForm {
   2901   gap: 8px;
   2902   padding: 8px;
   2903 }
   2904 
   2905 .chatReplyBanner {
   2906   border: 1px solid rgba(246, 240, 255, 0.16);
   2907   border-radius: 12px;
   2908   padding: 6px 8px;
   2909   display: flex;
   2910   justify-content: space-between;
   2911   align-items: center;
   2912   gap: 8px;
   2913   background: rgba(255, 255, 255, 0.03);
   2914 }
   2915 
   2916 .chatComposer {
   2917   flex: 1;
   2918   display: flex;
   2919   flex-direction: column;
   2920   gap: 8px;
   2921   min-width: 0;
   2922   position: relative;
   2923 }
   2924 
   2925 .chatEditor {
   2926   min-height: 84px;
   2927   max-height: 160px;
   2928   overflow: auto;
   2929   border: 1px solid rgba(246, 240, 255, 0.14);
   2930   border-radius: 14px;
   2931   background: rgba(255, 255, 255, 0.02);
   2932 }
   2933 
   2934 .mentionMenu {
   2935   position: fixed;
   2936   z-index: 130;
   2937   width: 220px;
   2938   max-height: 220px;
   2939   overflow: auto;
   2940   border: 1px solid rgba(246, 240, 255, 0.16);
   2941   border-radius: 14px;
   2942   background: rgba(8, 8, 16, 0.92);
   2943   backdrop-filter: blur(12px);
   2944   box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
   2945   padding: 6px;
   2946   animation: popFloat var(--dur-med) var(--ease-out) both;
   2947 }
   2948 
   2949 .mentionItem {
   2950   padding: 8px 10px;
   2951   border-radius: 12px;
   2952   cursor: pointer;
   2953   border: 1px solid transparent;
   2954 }
   2955 
   2956 .mentionItem.isOn {
   2957   border-color: rgba(255, 62, 165, 0.35);
   2958   background: rgba(255, 62, 165, 0.14);
   2959 }
   2960 
   2961 .mentionItem:hover {
   2962   border-color: rgba(246, 240, 255, 0.14);
   2963   background: rgba(255, 255, 255, 0.04);
   2964 }
   2965 
   2966 .modTabs {
   2967   display: flex;
   2968   gap: 8px;
   2969   margin-top: 10px;
   2970 }
   2971 
   2972 .modTabs button {
   2973   flex: 1;
   2974   padding: 8px 10px;
   2975 }
   2976 
   2977 .modFilters {
   2978   margin-top: 10px;
   2979   display: flex;
   2980   gap: 8px;
   2981 }
   2982 
   2983 .modBody {
   2984   margin-top: 10px;
   2985   flex: 1;
   2986   min-height: 0;
   2987   overflow: auto;
   2988   display: flex;
   2989   flex-direction: column;
   2990   gap: 8px;
   2991   padding-right: 4px;
   2992 }
   2993 
   2994 .modCard {
   2995   border: 1px solid rgba(246, 240, 255, 0.14);
   2996   border-radius: 12px;
   2997   padding: 8px;
   2998   background: rgba(255, 255, 255, 0.02);
   2999   display: flex;
   3000   flex-direction: column;
   3001   gap: 6px;
   3002   transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out),
   3003     box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
   3004 }
   3005 
   3006 .modCard:hover {
   3007   border-color: rgba(246, 240, 255, 0.20);
   3008   background: rgba(255, 255, 255, 0.03);
   3009   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
   3010 }
   3011 
   3012 .modRowTop {
   3013   display: flex;
   3014   justify-content: space-between;
   3015   gap: 10px;
   3016   align-items: center;
   3017 }
   3018 
   3019 .modActions {
   3020   display: flex;
   3021   flex-wrap: wrap;
   3022   gap: 6px;
   3023 }
   3024 
   3025 .modActions button {
   3026   padding: 6px 8px;
   3027   border-radius: 10px;
   3028   font-size: 12px;
   3029 }
   3030 
   3031 .devLogPre {
   3032   margin: 0;
   3033   padding: 10px;
   3034   border-radius: 12px;
   3035   border: 1px solid rgba(246, 240, 255, 0.10);
   3036   background: rgba(0, 0, 0, 0.18);
   3037   max-height: min(52vh, 520px);
   3038   overflow: auto;
   3039   font-size: 12px;
   3040   line-height: 1.2rem;
   3041   white-space: pre-wrap;
   3042   word-break: break-word;
   3043 }
   3044 
   3045 .modStatus {
   3046   display: inline-flex;
   3047   align-items: center;
   3048   border: 1px solid rgba(255, 62, 165, 0.25);
   3049   background: rgba(255, 62, 165, 0.12);
   3050   border-radius: 999px;
   3051   padding: 2px 8px;
   3052   font-size: 11px;
   3053   margin-left: 6px;
   3054 }
   3055 
   3056 .mobilePager {
   3057   position: fixed;
   3058   left: 50%;
   3059   bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   3060   transform: translateX(-50%);
   3061   z-index: 80;
   3062   display: flex;
   3063   gap: 8px;
   3064   padding: 8px;
   3065   border-radius: 999px;
   3066   border: 1px solid rgba(246, 240, 255, 0.14);
   3067   background: rgba(8, 8, 16, 0.92);
   3068   backdrop-filter: blur(10px);
   3069 }
   3070 
   3071 .mobilePager button {
   3072   padding: 8px 12px;
   3073   border-radius: 999px;
   3074 }
   3075 
   3076 /* Mobile UX: screens, not racks (see docs/MOBILE_UX.md). */
   3077 .mobileNav {
   3078   position: fixed;
   3079   left: 50%;
   3080   bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   3081   transform: translateX(-50%);
   3082   z-index: 90;
   3083   display: flex;
   3084   gap: 8px;
   3085   padding: 8px;
   3086   width: min(720px, calc(100vw - 24px));
   3087   max-width: calc(100vw - 24px);
   3088   justify-content: space-between;
   3089   border-radius: 999px;
   3090   border: 1px solid rgba(246, 240, 255, 0.14);
   3091   background: rgba(8, 8, 16, 0.92);
   3092   backdrop-filter: blur(10px);
   3093 }
   3094 
   3095 .mobileNav button {
   3096   flex: 1 1 0;
   3097   min-width: 0;
   3098   padding: 10px 0;
   3099   border-radius: 999px;
   3100   text-align: center;
   3101   white-space: nowrap;
   3102   overflow: hidden;
   3103   text-overflow: ellipsis;
   3104 }
   3105 
   3106 .mobileMoreSheet {
   3107   position: fixed;
   3108   inset: 0;
   3109   z-index: 95;
   3110   display: flex;
   3111   align-items: flex-end;
   3112   justify-content: center;
   3113 }
   3114 
   3115 @media (max-width: 380px) {
   3116   .mobileNav {
   3117     gap: 6px;
   3118     padding: 6px;
   3119   }
   3120 
   3121   .mobileNav button {
   3122     font-size: 12px;
   3123   }
   3124 }
   3125 
   3126 .mobileMoreBackdrop {
   3127   position: absolute;
   3128   inset: 0;
   3129   background: rgba(0, 0, 0, 0.55);
   3130 }
   3131 
   3132 .mobileMoreCard {
   3133   position: relative;
   3134   width: min(720px, 100%);
   3135   max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px));
   3136   max-height: calc(100vh - 18px - env(safe-area-inset-bottom, 0px));
   3137   border-radius: 16px 16px 0 0;
   3138   border-bottom-left-radius: 0;
   3139   border-bottom-right-radius: 0;
   3140   overflow: hidden;
   3141   box-shadow: var(--shadow-soft);
   3142 }
   3143 
   3144 .mobileMoreBody {
   3145   padding: 12px;
   3146   display: flex;
   3147   flex-direction: column;
   3148   gap: 10px;
   3149   overflow: auto;
   3150 }
   3151 
   3152 .mobileMoreBody input {
   3153   width: 100%;
   3154 }
   3155 
   3156 .mobileMoreList {
   3157   display: flex;
   3158   flex-direction: column;
   3159   gap: 10px;
   3160 }
   3161 
   3162 .mobileMoreItem {
   3163   display: flex;
   3164   align-items: center;
   3165   justify-content: space-between;
   3166   gap: 10px;
   3167   padding: 10px 12px;
   3168   border: 1px solid var(--line);
   3169   border-radius: 14px;
   3170   background: rgba(255, 255, 255, 0.02);
   3171 }
   3172 
   3173 .mobileScreenHost {
   3174   grid-area: main;
   3175   display: none;
   3176   flex-direction: column;
   3177   gap: var(--app-gap);
   3178   overflow: hidden;
   3179 }
   3180 
   3181 @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
   3182   .app.mobileScreens {
   3183     display: block;
   3184     padding: 0;
   3185     gap: 0;
   3186     height: 100dvh;
   3187     height: 100vh;
   3188   }
   3189 
   3190   .app.mobileScreens .sidebarToggle,
   3191   .app.mobileScreens .peopleToggle,
   3192   .app.mobileScreens .sideRackToggle,
   3193   .app.mobileScreens .rightRackToggle {
   3194     display: none;
   3195   }
   3196 
   3197   .app.mobileScreens > .sidebar,
   3198   .app.mobileScreens > .main,
   3199   .app.mobileScreens > .chat,
   3200   .app.mobileScreens > .panelResizeHandle,
   3201   .app.mobileScreens > #rightRack,
   3202   .app.mobileScreens > .mobileScreenHost,
   3203   .app.mobileScreens > .moderation {
   3204     display: none;
   3205     width: 100%;
   3206     height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
   3207     height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
   3208     border-radius: 0;
   3209     border-left: 0;
   3210     border-right: 0;
   3211   }
   3212 
   3213   /* Core screens */
   3214   .app.mobileScreens[data-mobile-screen="account"] > .sidebar {
   3215     display: flex;
   3216   }
   3217 
   3218   .app.mobileScreens[data-mobile-screen="hives"] > .main,
   3219   .app.mobileScreens[data-mobile-screen="chat"] > .chat,
   3220   .app.mobileScreens[data-mobile-screen="moderation"] > .moderation {
   3221     display: flex;
   3222   }
   3223 
   3224   .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   3225     display: flex;
   3226   }
   3227 
   3228   /* Force active screen to full width/height regardless of desktop grid. */
   3229   .app.mobileScreens[data-mobile-screen="account"] > .sidebar,
   3230   .app.mobileScreens[data-mobile-screen="hives"] > .main,
   3231   .app.mobileScreens[data-mobile-screen="chat"] > .chat,
   3232   .app.mobileScreens[data-mobile-screen="moderation"] > .moderation,
   3233   .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   3234     position: fixed;
   3235     top: 0;
   3236     left: 0;
   3237     right: 0;
   3238     bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   3239     z-index: 85;
   3240   }
   3241 
   3242   /* People screen is a sibling of .app */
   3243   .app.mobileScreens + .peopleDrawer {
   3244     display: none;
   3245     top: 0;
   3246     right: 0;
   3247     bottom: 56px;
   3248     width: 100%;
   3249     border-radius: 0;
   3250     border-left: 0;
   3251     border-right: 0;
   3252   }
   3253 
   3254   .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
   3255     display: flex;
   3256   }
   3257 
   3258   .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
   3259     position: fixed;
   3260     left: 0;
   3261     top: 0;
   3262     right: 0;
   3263     bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   3264     z-index: 85;
   3265   }
   3266 
   3267   /* In mobile hives screen, hide the desktop side rack column. */
   3268   .app.mobileScreens[data-mobile-screen="hives"] #mainSideRack {
   3269     display: none !important;
   3270   }
   3271 
   3272   /* Hide the hotbar unless explicitly shown elsewhere. */
   3273   .app.mobileScreens + .dockHotbar {
   3274     display: none;
   3275   }
   3276 }
   3277 
   3278 /* (Rack-specific mobile styles removed in favor of screen-based mobile UX.) */
   3279 
   3280 /* JS-driven mobile mode: enforce screen behavior by class, even if viewport/media heuristics disagree. */
   3281 .app.mobileScreens {
   3282   display: block;
   3283   padding: 0;
   3284   gap: 0;
   3285   width: 100vw;
   3286   height: 100dvh;
   3287   height: 100vh;
   3288   overflow: hidden;
   3289   grid-template-columns: 1fr !important;
   3290   grid-template-areas: "main" !important;
   3291 }
   3292 
   3293 .app.mobileScreens .sidebarToggle,
   3294 .app.mobileScreens .peopleToggle,
   3295 .app.mobileScreens .sideRackToggle,
   3296 .app.mobileScreens .rightRackToggle {
   3297   display: none !important;
   3298 }
   3299 
   3300 .app.mobileScreens.rackMode .sideRackToggle,
   3301 .app.mobileScreens.rackMode .rightRackToggle,
   3302 .app.mobileScreens #showSideRack,
   3303 .app.mobileScreens #showRightRack {
   3304   display: none !important;
   3305 }
   3306 
   3307 .app.mobileScreens > .sidebar,
   3308 .app.mobileScreens > .main,
   3309 .app.mobileScreens > .chat,
   3310 .app.mobileScreens > .panelResizeHandle,
   3311 .app.mobileScreens > #rightRack,
   3312 .app.mobileScreens > .mobileScreenHost,
   3313 .app.mobileScreens > .moderation {
   3314   display: none !important;
   3315   width: 100vw !important;
   3316   max-width: none !important;
   3317   height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
   3318   height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
   3319   border-radius: 0 !important;
   3320   border-left: 0 !important;
   3321   border-right: 0 !important;
   3322 }
   3323 
   3324 .app.mobileScreens[data-mobile-screen="account"] > .sidebar,
   3325 .app.mobileScreens[data-mobile-screen="hives"] > .main,
   3326 .app.mobileScreens[data-mobile-screen="chat"] > .chat,
   3327 .app.mobileScreens[data-mobile-screen="moderation"] > .moderation,
   3328 .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   3329   display: flex !important;
   3330   position: fixed;
   3331   top: 0;
   3332   left: 0;
   3333   right: 0;
   3334   bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   3335   z-index: 85;
   3336 }
   3337 
   3338 .app.mobileScreens[data-mobile-screen="hives"] #mainSideRack {
   3339   display: none !important;
   3340 }
   3341 
   3342 .app.mobileScreens[data-mobile-screen="hives"] .main,
   3343 .app.mobileScreens[data-mobile-screen="hives"] .mainRack,
   3344 .app.mobileScreens[data-mobile-screen="hives"] #mainWorkspaceRack,
   3345 .app.mobileScreens[data-mobile-screen="hives"] #hivesPanel {
   3346   width: 100% !important;
   3347   max-width: none !important;
   3348   min-width: 0 !important;
   3349 }
   3350 
   3351 .app.mobileScreens[data-mobile-screen="hives"] .mainRack {
   3352   gap: 0;
   3353 }
   3354 
   3355 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleSideRack),
   3356 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleRightRack),
   3357 .app.mobileScreens[data-mobile-screen="account"] #viewPanel .checkRow:has(#toggleReactions),
   3358 .app.mobileScreens[data-mobile-screen="account"] .sidebarFooter {
   3359   display: none !important;
   3360 }
   3361 
   3362 .app.mobileScreens[data-mobile-screen="host"] > .mobileScreenHost {
   3363   gap: 0;
   3364   overflow: auto;
   3365 }
   3366 
   3367 .app.mobileScreens .mobileScreenHost > .peopleDrawer {
   3368   position: relative !important;
   3369   top: 0 !important;
   3370   right: 0 !important;
   3371   bottom: 0 !important;
   3372   left: 0 !important;
   3373   width: 100% !important;
   3374   height: 100% !important;
   3375   border-radius: 0 !important;
   3376   border-left: 0 !important;
   3377   border-right: 0 !important;
   3378   box-shadow: none !important;
   3379 }
   3380 
   3381 .app.mobileScreens .mobileScreenHost > .peopleDrawer .peopleResizeHandle {
   3382   display: none !important;
   3383 }
   3384 
   3385 .app.mobileScreens .reactionsRow,
   3386 .app.mobileScreens .chatReactions {
   3387   display: none !important;
   3388 }
   3389 
   3390 .app.mobileScreens .chatMessages {
   3391   font-size: 13px;
   3392   line-height: 1.24;
   3393   padding: 8px 8px 6px;
   3394 }
   3395 
   3396 .app.mobileScreens .chatMsg {
   3397   padding: 6px 7px;
   3398   margin-top: 6px;
   3399   border-radius: 12px;
   3400 }
   3401 
   3402 .app.mobileScreens .chatMsg .meta {
   3403   font-size: 10px;
   3404   margin-bottom: 2px;
   3405 }
   3406 
   3407 .app.mobileScreens .chatComposer .toolbar [data-chatcmd],
   3408 .app.mobileScreens .chatComposer .toolbar [data-chatemoji],
   3409 .app.mobileScreens .chatComposer .toolbar .sep {
   3410   display: none !important;
   3411 }
   3412 
   3413 .app.mobileScreens .chatComposer .toolbar .chatModToggle:not(.hidden) {
   3414   display: inline-flex !important;
   3415   align-items: center;
   3416   gap: 6px;
   3417 }
   3418 
   3419 .app.mobileScreens [data-rackdrag],
   3420 .app.mobileScreens [data-skinny],
   3421 .app.mobileScreens [data-expand],
   3422 .app.mobileScreens [data-minimize] {
   3423   display: none !important;
   3424 }
   3425 
   3426 .app.mobileScreens #pollinatePanel .toolbar [data-cmd],
   3427 .app.mobileScreens #pollinatePanel .toolbar [data-postemoji],
   3428 .app.mobileScreens #pollinatePanel .toolbar .sep {
   3429   display: none !important;
   3430 }
   3431 
   3432 .app.mobileScreens .chatForm > .primary[type="submit"] {
   3433   align-self: stretch;
   3434   width: 100%;
   3435 }
   3436 
   3437 .app.mobileScreens .chatForm {
   3438   gap: 8px;
   3439   padding: 8px;
   3440   padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
   3441 }
   3442 
   3443 .app.mobileScreens .typingIndicator {
   3444   padding: 0 8px 4px;
   3445   min-height: 14px;
   3446 }
   3447 
   3448 .app.mobileScreens .chatHeaderActions {
   3449   margin-left: auto;
   3450 }
   3451 
   3452 .chatContextSelect {
   3453   min-width: 180px;
   3454   max-width: 320px;
   3455 }
   3456 
   3457 .mobileChatSection {
   3458   display: flex;
   3459   flex-direction: column;
   3460   gap: 8px;
   3461 }
   3462 
   3463 .app.mobileScreens .mobileChatList {
   3464   display: flex;
   3465   flex-direction: column;
   3466   gap: 12px;
   3467 }
   3468 
   3469 .app.mobileScreens .chatContextSelect {
   3470   min-width: 132px;
   3471   max-width: 180px;
   3472 }
   3473 
   3474 .app.mobileScreens .mobileChatListItem {
   3475   width: 100%;
   3476   text-align: left;
   3477   padding: 10px;
   3478   border-radius: 12px;
   3479   display: flex;
   3480   flex-direction: column;
   3481   gap: 3px;
   3482 }
   3483 
   3484 .app.mobileScreens .mobileChatListTop {
   3485   font-weight: 800;
   3486 }
   3487 
   3488 .app.mobileScreens .mobileChatListMeta {
   3489   font-size: 12px;
   3490   color: var(--muted);
   3491 }
   3492 
   3493 .app.mobileScreens[data-mobile-screen="hives"] #filterAuthor,
   3494 .app.mobileScreens[data-mobile-screen="hives"] #filterKeywords,
   3495 .app.mobileScreens[data-mobile-screen="hives"] #sortBy {
   3496   display: none !important;
   3497 }
   3498 
   3499 .app.mobileScreens[data-mobile-screen="hives"] .mobileOnlyHiveControl {
   3500   display: inline-flex !important;
   3501   align-items: center;
   3502   justify-content: center;
   3503   min-width: 68px;
   3504   height: 34px;
   3505   padding: 0 10px;
   3506 }
   3507 
   3508 .app.mobileScreens[data-mobile-screen="hives"] #mobileHiveSearch {
   3509   min-width: 42px;
   3510   font-size: 15px;
   3511 }
   3512 
   3513 .app.mobileScreens[data-mobile-screen="hives"] .filters {
   3514   gap: 4px;
   3515   padding: 4px;
   3516 }
   3517 
   3518 .app.mobileScreens[data-mobile-screen="hives"] .hiveTabs {
   3519   flex-wrap: nowrap;
   3520   overflow-x: auto;
   3521   gap: 6px;
   3522   padding: 8px 10px 8px;
   3523   margin-bottom: 0;
   3524 }
   3525 
   3526 .app.mobileScreens[data-mobile-screen="hives"] .hiveTabs button {
   3527   padding: 7px 12px;
   3528   font-size: 12px;
   3529   flex: 0 0 auto;
   3530 }
   3531 
   3532 .app.mobileScreens[data-mobile-screen="hives"] .feed {
   3533   grid-template-columns: 1fr;
   3534   gap: 8px;
   3535   padding: 8px;
   3536 }
   3537 
   3538 .app.mobileScreens[data-mobile-screen="hives"] .post {
   3539   padding: 8px;
   3540   gap: 6px;
   3541   border-radius: 12px;
   3542 }
   3543 
   3544 .app.mobileScreens[data-mobile-screen="hives"] .postTitle {
   3545   font-size: 14px;
   3546   margin-bottom: 2px;
   3547 }
   3548 
   3549 .app.mobileScreens[data-mobile-screen="hives"] .postTitleRow {
   3550   gap: 2px;
   3551 }
   3552 
   3553 .app.mobileScreens[data-mobile-screen="hives"] .post .pfp {
   3554   display: none;
   3555 }
   3556 
   3557 .app.mobileScreens[data-mobile-screen="hives"] .post .small {
   3558   font-size: 11px;
   3559 }
   3560 
   3561 .app.mobileScreens[data-mobile-screen="hives"] .postMeta {
   3562   margin-top: 4px;
   3563   gap: 4px;
   3564 }
   3565 
   3566 .app.mobileScreens[data-mobile-screen="hives"] .tag {
   3567   font-size: 11px;
   3568   padding: 2px 7px;
   3569 }
   3570 
   3571 .app.mobileScreens + .peopleDrawer {
   3572   display: none;
   3573 }
   3574 
   3575 .app.mobileScreens[data-mobile-screen="people"] + .peopleDrawer {
   3576   display: flex !important;
   3577   position: fixed;
   3578   left: 0;
   3579   top: 0;
   3580   right: 0;
   3581   bottom: calc(56px + env(safe-area-inset-bottom, 0px));
   3582   width: 100vw;
   3583   border-radius: 0;
   3584   border-left: 0;
   3585   border-right: 0;
   3586   z-index: 85;
   3587 }
   3588 
   3589 .app.mobileScreens + .dockHotbar {
   3590   display: none !important;
   3591 }
   3592 
   3593 @keyframes fadeIn {
   3594   from {
   3595     opacity: 0;
   3596   }
   3597   to {
   3598     opacity: 1;
   3599   }
   3600 }
   3601 
   3602 @keyframes modalIn {
   3603   from {
   3604     opacity: 0;
   3605     transform: translateY(10px) scale(0.985);
   3606   }
   3607   to {
   3608     opacity: 1;
   3609     transform: translateY(0px) scale(1);
   3610   }
   3611 }
   3612 
   3613 @keyframes drawerIn {
   3614   from {
   3615     opacity: 0;
   3616     transform: translateX(10px) scale(0.995);
   3617   }
   3618   to {
   3619     opacity: 1;
   3620     transform: translateX(0px) scale(1);
   3621   }
   3622 }
   3623 
   3624 @keyframes toastIn {
   3625   from {
   3626     opacity: 0;
   3627     transform: translateY(10px) scale(0.995);
   3628   }
   3629   to {
   3630     opacity: 1;
   3631     transform: translateY(0px) scale(1);
   3632   }
   3633 }
   3634 
   3635 @keyframes popFloat {
   3636   from {
   3637     opacity: 0;
   3638     transform: translateY(6px) scale(0.985);
   3639   }
   3640   to {
   3641     opacity: 1;
   3642     transform: translateY(0px) scale(1);
   3643   }
   3644 }
   3645 
   3646 @keyframes msgIn {
   3647   from {
   3648     opacity: 0.75;
   3649     transform: translateY(6px);
   3650     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   3651   }
   3652   to {
   3653     opacity: 1;
   3654     transform: translateY(0px);
   3655     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   3656   }
   3657 }
   3658 
   3659 @keyframes mentionPing {
   3660   0% {
   3661     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.12);
   3662   }
   3663   45% {
   3664     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.12), 0 16px 50px rgba(255, 62, 165, 0.12);
   3665   }
   3666   100% {
   3667     box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.14);
   3668   }
   3669 }
   3670 
   3671 @keyframes reactPop {
   3672   0% {
   3673     transform: scale(1);
   3674     filter: brightness(1);
   3675   }
   3676   40% {
   3677     transform: scale(1.08);
   3678     filter: brightness(1.15);
   3679   }
   3680   100% {
   3681     transform: scale(1);
   3682     filter: brightness(1);
   3683   }
   3684 }
   3685 
   3686 @media (prefers-reduced-motion: reduce) {
   3687   *,
   3688   *::before,
   3689   *::after {
   3690     animation: none !important;
   3691     transition: none !important;
   3692     scroll-behavior: auto !important;
   3693   }
   3694 }
	bzl self-hosted ephemeral community engine
	Log \| Files \| Refs \| README \| LICENSE