/* openvibe.chat — the app shell (the plan, 2026-11-09, stage V2): the rail, the side column, the members column and
   the phone panels. Discord's four columns, our data; the look is Opus's (openvibe.design), this is the structure.
   One icon button size: 40 px on a computer, 44 px on a phone. One primary style. Labels beside icons where there
   is room. */

.oc-app { display: grid; grid-template-columns: 72px 240px minmax(0, 1fr) 0; height: calc(100dvh - var(--ovnav-h, 56px)); min-height: 420px; background: var(--oc-panel); overflow: hidden; }
.oc-app.is-members { grid-template-columns: 72px 240px minmax(0, 1fr) 240px; }
.oc-app > .oc-col-members { overflow: hidden; border-left: 0; }
.oc-app.is-members > .oc-col-members { overflow-y: auto; border-left: 1px solid var(--oc-line); }

/* ── The rail (72 px on a computer): every place is a tile that carries its name. Home, Global and Vibe, your
   servers in their own colours (the colour a server has in every list), then New and Explore. A bar beside the tile
   says where you are: a short one under the pointer, the full one at the open place. The name follows the pointer's
   tile (chat-shell.js .oc-rail-tip); on a phone it is written beside the tile (below). ── */
.oc-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: var(--oc-bg); border-right: 1px solid var(--oc-line); overflow-y: auto; scrollbar-width: none; }
.oc-rail::-webkit-scrollbar { display: none; }
.oc-rail-icon { position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: none; color: var(--oc-text); font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oc-rail-icon { display: grid; place-items: center; width: 72px; height: 48px; }
.oc-rail-icon[data-oc-server] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.oc-rail-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--oc-panel-2); color: var(--oc-text); font-weight: 800; font-size: .95rem; letter-spacing: .02em; transition: border-radius .18s ease, background-color .18s ease, color .18s ease, transform .16s ease; }
.oc-rail-tile .oc-i { width: 22px; height: 22px; }
.oc-rail-icon:hover .oc-rail-tile, .oc-rail-icon:focus-visible .oc-rail-tile, .oc-rail-icon.is-active .oc-rail-tile { border-radius: 16px; }
.oc-rail-icon:active .oc-rail-tile { transform: scale(.94); }
.oc-rail-icon:focus-visible { outline: 0; }
.oc-rail-icon:focus-visible .oc-rail-tile { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.oc-rail-icon::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--oc-text); transform: translateY(-50%); transition: height .18s ease; }
.oc-rail-icon:hover::before, .oc-rail-icon:focus-visible::before { height: 16px; }
.oc-rail-icon.is-active::before { height: 32px; }
.oc-rail-home:hover .oc-rail-tile, .oc-rail-global:hover .oc-rail-tile, .oc-rail-vibe:hover .oc-rail-tile, .oc-rail-explore:hover .oc-rail-tile { background: color-mix(in srgb, var(--oc-accent) 24%, var(--oc-panel-2)); }
.oc-rail-home.is-active .oc-rail-tile, .oc-rail-global.is-active .oc-rail-tile, .oc-rail-vibe.is-active .oc-rail-tile, .oc-rail-explore.is-active .oc-rail-tile { background: var(--oc-accent); color: var(--oc-on-accent); }
.oc-rail-server .oc-rail-tile { background: hsl(var(--oc-hue, 215) 52% 34%); color: #fff; }
.oc-rail-server:hover .oc-rail-tile { background: hsl(var(--oc-hue, 215) 56% 40%); }
.oc-rail-add .oc-rail-tile { color: var(--oc-ok); }
.oc-rail-add:hover .oc-rail-tile { background: var(--oc-ok-fill); color: #06210f; }
.oc-rail-explore .oc-rail-tile { color: var(--oc-accent); }
.oc-rail-explore .oc-rail-tile .oc-i { width: 20px; height: 20px; }
.oc-rail-divider { width: 32px; height: 2px; flex: 0 0 2px; border-radius: 2px; background: var(--oc-line); }
.oc-rail-dot { position: absolute; right: 8px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--oc-red-fill); color: #1a0505; font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 3px var(--oc-bg); }
.oc-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc-rail-more { display: none; }
.oc-rail-tip { position: fixed; z-index: 60; transform: translate(-4px, -50%); padding: 6px 10px; border-radius: 8px; background: var(--oc-text); color: var(--oc-bg); font-size: .84rem; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.oc-rail-tip.is-on { opacity: 1; transform: translate(0, -50%); }

/* On a phone the side column opens from the strip: this button, with the word for what it lists. */

/* ── The side column (240 px) ── */
.oc-side { display: flex; flex-direction: column; min-width: 0; padding: 12px 8px 0; overflow-y: auto; border-right: 1px solid var(--oc-line); background: var(--oc-bg); }
.oc-side-top { padding: 0 0 10px; }
.oc-side-find { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px; background: var(--oc-panel-2); color: var(--oc-text); text-decoration: none; font-size: .92rem; }
.oc-side-find:hover { background: var(--oc-panel); }
.oc-side-top .oc-side-find + .oc-side-find { margin-top: 6px; }
.oc-side-find .oc-i { width: 18px; height: 18px; color: var(--oc-muted); }
.oc-side-sec { margin-bottom: 12px; }
.oc-side-group { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 8px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--oc-muted); }
.oc-side-group > summary { cursor: pointer; list-style: none; }
.oc-side-group > summary::-webkit-details-marker { display: none; }
.oc-side-cat details > summary::after { content: '▾'; margin-left: auto; font-size: .8rem; }
.oc-side-cat details:not([open]) > summary::after { content: '▸'; }
.oc-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.oc-side-list .oc-row > a, .oc-side-list .oc-row > span { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 8px; color: var(--oc-text); text-decoration: none; }
.oc-side-list .oc-row > a:hover { background: var(--oc-panel-2); }
.oc-side-list .oc-row-main { min-width: 0; }
.oc-side-list .oc-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oc-side-list .oc-row-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-side-list .oc-row-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.oc-side-empty { margin: 0; padding: 2px 8px 6px; font-size: .84rem; }
.oc-side-head { padding: 0 6px 8px; }
.oc-side-name { font-size: 1.05rem; line-height: 1.3; margin: 0 0 2px; overflow-wrap: anywhere; }
.oc-side-head .oc-badge { margin-left: 0; }
.oc-side-meta { margin: 2px 0 0; font-size: .82rem; }
.oc-side-desc { margin: 6px 0 0; font-size: .86rem; color: var(--oc-muted); }
.oc-side-more { position: absolute; right: 8px; top: 8px; }
.oc-side-event { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 6px; padding: 6px 8px; border-radius: 8px; color: var(--oc-muted); text-decoration: none; font-size: .9rem; }
.oc-side-event:hover { background: var(--oc-panel-2); color: var(--oc-text); }
.oc-side-event .oc-i { width: 18px; height: 18px; }

/* Channels: text (#) and voice (a speaker), with the people in each voice channel. */
.oc-chan { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 8px; border-radius: 8px; color: var(--oc-muted); text-decoration: none; }
.oc-chan:hover, .oc-chan:focus-visible { background: var(--oc-panel-2); color: var(--oc-text); }
.oc-chan.is-active { background: color-mix(in srgb, var(--oc-accent) 18%, transparent); color: var(--oc-text); }
.oc-chan.is-unread { color: var(--oc-text); font-weight: 700; }
.oc-chan-hash { width: 16px; text-align: center; font-weight: 700; opacity: .75; }
.oc-chan-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-chan .oc-i { width: 16px; height: 16px; }
.oc-voice-people { list-style: none; margin: 0 0 4px; padding: 0 8px 0 32px; }
.oc-voice-people li { font-size: .8rem; color: var(--oc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The you-bar at the foot of the side column. */
.oc-you { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px; border-top: 1px solid var(--oc-line); background: var(--oc-bg); }
.oc-you-id { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--oc-text); text-decoration: none; }
.oc-you-names { display: grid; min-width: 0; }
.oc-you-names strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-you-names .oc-muted { font-size: .74rem; }
.oc-you-tools { display: flex; gap: 2px; margin-left: auto; }

/* ── The members column ── */
.oc-members-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0; }
.oc-members-sec { margin-bottom: 10px; }
.oc-member-row strong { color: color-mix(in oklab, var(--nc, var(--oc-text)) 50%, var(--oc-text)); }

/* The shell fills the page: no gutter, no card. */
.oc-main--shell { max-width: none; padding: 0; margin: 0; }

/* ── The middle column ── */
.oc-col-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: color-mix(in srgb, var(--oc-panel-2) 60%, var(--oc-panel)); }
.oc-chan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--oc-line); }
.oc-chan-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.04rem; }
.oc-chan-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.oc-col-main > .oc-notice, .oc-col-main > .oc-ai-here { margin: 10px 18px 0; }
.oc-col-main > .oc-call { margin: 12px 18px 0; }
.oc-col-main > .oc-compose, .oc-col-main > .oc-signin, .oc-col-main > form, .oc-col-main > .oc-dock { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--oc-line); }
/* A conversation's head (a DM) sits like a channel's: inside the gutter, a line under it. */
.oc-col-main > .oc-page-head { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--oc-line); }
.oc-side-join { margin: 0 0 8px; }
.oc-side-join button, .oc-side-join .oc-button { width: 100%; text-align: center; }

/* One icon button size: 40 px on a computer, 44 px on a phone. */
.oc-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: transparent; color: var(--oc-muted); text-decoration: none; cursor: pointer; border: 0; }
.oc-icon-btn:hover { background: var(--oc-panel-2); color: var(--oc-text); }
.oc-icon-btn .oc-i { width: 20px; height: 20px; }

/* A page in the middle column (Explore, the Messages list): it scrolls on its own, inside the page gutter. */
.oc-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; }
.oc-page > .oc-page-head:first-child { margin-top: 0; }
.oc-page > .oc-list { margin-left: -8px; margin-right: -8px; }

/* ── The phone: the columns are panels you swipe between ── */
@media (max-width: 760px) {
  /* The shell takes what the navbar and the app bar leave, so a channel fills the screen and its composer sits at the
     bottom, above the app bar (the body keeps --ovnav-appbar-h of padding for it). */
  .oc-app { height: calc(100dvh - var(--ovnav-h, 56px) - var(--ovnav-appbar-h, 0px)); min-height: 360px; }
  .oc-page { padding: 14px 16px 20px; }
  .oc-app.is-members { grid-template-columns: minmax(0, 1fr); }
  /* Two levels (11-10; the strip of places across the top is gone). The list level: the rail of places down the left,
     upright, and beside it the list for the place chosen, with the app's bar at the bottom. A conversation: the whole
     screen under the site's bar, the way back first in its head, the composer at the bottom edge; no rail, no bottom
     bar. A page that is not a conversation (Explore, Activity, settings) keeps the rail beside it. */
  .oc-app { grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .oc-app:not(:has(> .oc-rail)) { grid-template-columns: minmax(0, 1fr); }
  .oc-app > .oc-rail { flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 0 16px; overflow: hidden auto; scrollbar-width: none; border: 0; border-right: 1px solid var(--oc-line); min-width: 0; background: color-mix(in srgb, var(--oc-bg) 70%, #000); }
  .oc-app > .oc-rail::-webkit-scrollbar { display: none; }
  .oc-rail-icon { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; }
  .oc-rail-icon::before { content: none; }
  .oc-rail-tile, .oc-rail-icon:hover .oc-rail-tile, .oc-rail-icon:focus-visible .oc-rail-tile { width: 48px; height: 48px; border-radius: 50%; font-size: .9rem; transition: border-radius .2s ease, background-color .2s ease, transform .12s ease; }
  .oc-rail-icon.is-active .oc-rail-tile { border-radius: 16px; }
  .oc-rail-icon:active .oc-rail-tile { transform: scale(.94); }
  .oc-rail-icon:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 2px; border-radius: 16px; }
  .oc-rail-tile .oc-i { width: 22px; height: 22px; }
  .oc-rail-label, .oc-rail-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .oc-rail-icon.is-active::after { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 30px; margin-top: -15px; border-radius: 0 4px 4px 0; background: var(--oc-text); }
  .oc-rail-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 3px var(--oc-bg); }
  .oc-rail-divider { width: 28px; height: 2px; flex: 0 0 2px; border-radius: 2px; }
  .oc-rail-tip { display: none; }
  /* A conversation (the middle column has a composer) takes the whole width and the bottom bar's place. */
  .oc-app:has(> .oc-col-main > :is(.oc-dock, .oc-compose)):not([data-oc-panel="side"]) { grid-template-columns: minmax(0, 1fr); }
  .oc-app:has(> .oc-col-main > :is(.oc-dock, .oc-compose)):not([data-oc-panel="side"]) > .oc-rail { display: none; }
  html:has(.oc-app:not([data-oc-panel="side"]) > .oc-col-main > :is(.oc-dock, .oc-compose)) { --ovnav-appbar-h: 0px !important; }
  html:has(.oc-app:not([data-oc-panel="side"]) > .oc-col-main > :is(.oc-dock, .oc-compose)) .ovnav-appbar { display: none !important; }
  /* The messages take all the room between the head and the composer (chat.css capped them at 62% of the screen, for
     the page that had three bars round it). */
  .oc-app > .oc-col-main > .oc-feed { flex: 1 1 0; min-height: 0; max-height: none; }
  .oc-app > .oc-col-main > .oc-dock { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  /* Its head: the way back, the name over one line about it, the tools. One row. */
  .oc-col-main > .oc-chan-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 4px; min-height: 52px; padding: 4px 6px 4px 2px; }
  .oc-chan-head > .oc-tolist { grid-column: 1; grid-row: 1 / 3; }
  .oc-chan-head > .oc-chan-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.04rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oc-chan-head > .oc-chan-topic { grid-column: 2; grid-row: 2; align-self: start; font-size: .76rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oc-chan-head > .oc-chan-title:not(:has(~ .oc-chan-topic)) { grid-row: 1 / 3; align-self: center; }
  .oc-chan-head > .oc-chan-tools { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 0; margin: 0; }
  .oc-chan-head .oc-live { font-size: 0; margin-right: 4px; }
  .oc-chan-head .oc-live::first-letter { font-size: .7rem; }
  .oc-app .oc-tolist { display: inline-grid; }
  .oc-app > .oc-side, .oc-app > .oc-col-main, .oc-app > .oc-col-members { min-width: 0; }
  .oc-app > .oc-side, .oc-app > .oc-col-members { display: none; }
  .oc-app[data-oc-panel="side"] > .oc-side { display: flex; border-right: 0; }
  .oc-app[data-oc-panel="members"] > .oc-col-members { display: block; border-left: 0; }
  .oc-app[data-oc-panel="side"] > .oc-col-main, .oc-app[data-oc-panel="members"] > .oc-col-main { display: none; }
  .oc-icon-btn { width: 44px; height: 44px; }
  .oc-col-main > .oc-page-head, .oc-col-main > .oc-chan-head { padding-left: 12px; padding-right: 12px; }
  .oc-col-main > .oc-compose, .oc-col-main > .oc-dock, .oc-col-main > .oc-signin { padding-left: 12px; padding-right: 12px; }
  .oc-chan { min-height: 44px; }
  .oc-side-list .oc-row > a, .oc-side-list .oc-row > span { min-height: 44px; }
}

/* Home, Vibe and Servers are the bottom bar's on a phone. That bar is drawn by a script, so the strip leaves them out
   wherever scripts run, from the first paint (a strip that waited to see the bar showed three chips and took them
   away). Without scripts there is no bottom bar and the strip keeps all of them. */

/* A friend row is a button that opens the conversation; the form posts the username. */
.oc-side-list .oc-row form { width: 100%; }
.oc-side-person { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--oc-text); text-align: left; cursor: pointer; font: inherit; }
.oc-side-person:hover { background: var(--oc-panel-2); }
.oc-side-add { display: flex; gap: 6px; margin: 6px 0 0; }
.oc-side-add input { flex: 1; min-width: 0; min-height: 40px; }
.oc-side-add button { min-height: 40px; }

/* ── Explore: the cards, the chips and the Start sheet ── */
.oc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.oc-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--oc-line); color: var(--oc-muted); text-decoration: none; font-size: .9rem; }
.oc-chip:hover { border-color: var(--oc-accent); color: var(--oc-text); }
.oc-chip.is-active { background: var(--oc-accent); border-color: var(--oc-accent); color: var(--oc-on-accent); font-weight: 700; }
.oc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.oc-card { display: flex; flex-direction: column; gap: 6px; padding: 0 0 14px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-panel); overflow: hidden; }
.oc-card-banner { height: 64px; background: linear-gradient(120deg, hsl(var(--oc-hue, 215) 52% 34%), hsl(var(--oc-hue, 215) 52% 22%)); }
.oc-card .oc-srv-icon { margin: -24px 0 0 14px; border: 3px solid var(--oc-panel); }
.oc-card h3 { margin: 4px 14px 0; font-size: 1.02rem; }
.oc-card-line { margin: 0 14px; font-size: .88rem; color: var(--oc-muted); }
.oc-card-meta { margin: 0 14px; font-size: .8rem; }
.oc-card form, .oc-card > .oc-button { margin: 6px 14px 0; }
.oc-card form button { width: 100%; }
.oc-card > .oc-button { text-align: center; }
.oc-server-card--new { justify-content: center; border-style: dashed; }

/* Explore's featured row, above the categories; with none featured the row is not in the page. */
.oc-featured { margin: 4px 0 16px; }
.oc-featured-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* The sheet: a template, a name and a picture, public or private. */
.oc-sheet { margin: 18px 0 0; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-panel); }
.oc-sheet > summary { display: block; padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.oc-sheet > summary::-webkit-details-marker { display: none; }
.oc-sheet-form { padding: 0 18px 18px; }
.oc-sheet-step { border: 0; padding: 0; margin: 0 0 18px; }
.oc-sheet-step legend { padding: 0 0 8px; font-weight: 700; }
.oc-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.oc-template { display: block; }
.oc-template input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oc-template-body { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--oc-line); border-radius: 12px; cursor: pointer; }
.oc-template input:checked + .oc-template-body { border-color: var(--oc-accent); background: color-mix(in srgb, var(--oc-accent) 14%, transparent); }
.oc-template input:focus-visible + .oc-template-body { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.oc-template-channels { font-size: .78rem; color: var(--oc-muted); }
.oc-seg { display: inline-flex; border: 1px solid var(--oc-line); border-radius: 10px; overflow: hidden; }
.oc-seg label { position: relative; }
.oc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oc-seg span { display: block; min-width: 96px; min-height: 40px; padding: 8px 16px; text-align: center; cursor: pointer; color: var(--oc-muted); }
.oc-seg input:checked + span { background: var(--oc-accent); color: var(--oc-on-accent); font-weight: 700; }
.oc-seg input:focus-visible + span { outline: 2px solid var(--oc-accent); outline-offset: -2px; }

/* The invite link at the end of the Start sheet. */
.oc-invite-new { margin: 0 18px 14px; padding: 12px 14px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-panel); }
.oc-invite-new h2 { margin: 0 0 4px; font-size: 1rem; }
.oc-invite-url { display: block; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 8px; background: var(--oc-bg); }
.oc-invite-tools { display: flex; gap: 8px; margin: 10px 0 0; }

/* A server card is not a message attachment card (chat.css .oc-card): no 380 px cap, no feed margins; the banner bleeds. */
.oc-server-card { max-width: none; margin: 0; background: var(--oc-panel); }
.oc-server-card > .oc-card-banner { align-self: stretch; margin: 0; }

/* With the shell script running, links open the Start sheet: its own bar is not needed while it is closed. */
.oc-js .oc-sheet:not([open]) { display: none; }
.oc-js .oc-sheet[open] > summary { display: none; }

/* The Start sheet's fields: the label above, two columns on a computer, one on a phone. */
.oc-sheet-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; max-width: 640px; }
.oc-field { display: grid; gap: 6px; min-width: 0; }
.oc-field > span { font-weight: 600; font-size: .9rem; }
.oc-field--wide { grid-column: 1 / -1; }
.oc-field input:not([type=file]), .oc-field select { width: 100%; min-height: 44px; box-sizing: border-box; }
.oc-field small { font-size: .8rem; }
@media (max-width: 760px) { .oc-sheet-fields { grid-template-columns: minmax(0, 1fr); } }

/* Absolutely placed inputs (the template radios) stay inside the page that scrolls, not the document. */
.oc-page, .oc-template { position: relative; }

/* Onboarding (/s/:slug/welcome): the server's mark and name, its rules numbered one a line, the roles a member may
   pick as chips in their own colours, and Continue. One column of reading width; on a phone the buttons fill it. */
.oc-welcome { max-width: 620px; margin: 0 auto; }
.oc-welcome-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
.oc-welcome-head .oc-srv-icon--big { margin: 0; flex: none; }
.oc-welcome-head h1 { margin: 0; font-size: clamp(1.35rem, 4.6vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.oc-welcome-head .oc-muted { margin: 4px 0 0; }
.oc-welcome-kicker { margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oc-muted); }
.oc-welcome-form { display: grid; gap: 12px; }
.oc-welcome-form .oc-set { margin: 0; }
.oc-rules { list-style: none; counter-reset: oc-rule; margin: 0; padding: 4px 14px 12px; display: grid; gap: 2px; }
.oc-rules li { counter-increment: oc-rule; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; overflow-wrap: anywhere; }
.oc-rules li + li { border-top: 1px solid var(--oc-line); }
.oc-rules li::before { content: counter(oc-rule); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--oc-accent) 16%, transparent); color: var(--oc-text); font-size: .8rem; font-weight: 800; }
.oc-rules-text { margin: 0; padding: 4px 14px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
fieldset.oc-role-set { min-width: 0; padding: 0 0 14px; }
.oc-role-set > legend { float: left; width: 100%; margin: 0; padding: 12px 14px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oc-muted); }
.oc-role-set > legend + * { clear: left; }
.oc-set-note { margin: 0; padding: 0 14px 10px; color: var(--oc-muted); font-size: .88rem; }
.oc-role-picks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; }
.oc-role-pick { --oc-role: var(--oc-accent); position: relative; }
.oc-role-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.oc-role-pick span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--oc-line); color: var(--oc-text); font-weight: 600; }
.oc-role-pick i { width: 10px; height: 10px; border-radius: 50%; background: var(--oc-role); flex: none; }
.oc-role-pick input:checked + span { border-color: var(--oc-role); background: color-mix(in srgb, var(--oc-role) 18%, transparent); }
.oc-role-pick input:checked + span::after { content: ''; width: 12px; height: 7px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.oc-role-pick input:focus-visible + span { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.oc-role-pick:hover span { border-color: var(--oc-role); }
.oc-welcome-go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.oc-welcome-go button { min-height: 44px; padding: 0 22px; }
.oc-welcome-skip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; color: var(--oc-muted); text-decoration: none; font-weight: 600; }
.oc-welcome-skip:hover { color: var(--oc-text); background: color-mix(in srgb, var(--oc-text) 7%, transparent); }
@media (max-width: 560px) {
  .oc-welcome-head { gap: 12px; }
  .oc-welcome-head .oc-srv-icon--big { width: 56px; height: 56px; border-radius: 18px; font-size: 1.2rem; }
  .oc-welcome-go { flex-direction: column; align-items: stretch; }
  .oc-welcome-go button, .oc-welcome-skip { width: 100%; justify-content: center; }
}

/* The inbox's conversation on the network's kit: its conversation list is the shell's side column and its thread fills
   the middle, so the kit's own sidebar and sticky chrome give way to the shell's. */
.oc-app .ovk-sidebar { position: static; height: auto; flex: 1; min-height: 0; border-right: 0; background: transparent; }
.oc-app .ovt { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); }
.oc-app .ovt-main { min-height: 0; height: 100%; }
.oc-app .ovt-scroll { overflow-y: auto; min-height: 0; }
.oc-app .ovt-head, .oc-app .ovt-dock { position: static; }

/* ── A server's sheet: what it is, your rank in it, and what you may do with it. Hold a server (or right-click it),
   tap the open server's chip again, or the three dots on its card. A card in the middle on a computer; on a phone it
   rises from the bottom edge. ── */
.oc-ssheet { width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 24px)); margin: auto; padding: 0; border: 1px solid var(--oc-line); border-radius: 18px; background: var(--oc-panel); color: var(--oc-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); overflow-y: auto; }
.oc-ssheet:focus { outline: 0; }
.oc-ssheet::backdrop { background: rgba(4, 8, 16, .58); }
.oc-ssheet[open] { animation: oc-ssheet-in .22s cubic-bezier(.2, .9, .3, 1.12); }
@keyframes oc-ssheet-in { from { opacity: 0; transform: translateY(calc(14px * var(--ov-move, 1))) scale(.98); } }
.oc-ssheet [hidden] { display: none !important; }
.oc-ssheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 10px 14px 16px; }
.oc-ssheet-head .oc-srv-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 1rem; }
.oc-ssheet-id { flex: 1; min-width: 0; }
.oc-ssheet-id h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.oc-ssheet-id h2 .oc-badge { margin: 0; }
.oc-ssheet-id p { margin: 3px 0 0; font-size: .88rem; }
.oc-ssheet-close { flex: none; align-self: flex-start; }
.oc-ssheet-list { display: grid; gap: 2px; padding: 6px 8px 10px; border-top: 1px solid var(--oc-line); }
.oc-ssheet-list form { margin: 0; }
.oc-ssheet .oc-pop-item { min-height: 48px; border: 0; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.oc-ssheet .oc-pop-item .oc-i { width: 20px; height: 20px; color: var(--oc-muted); }
.oc-ssheet .oc-pop-item b { display: block; font-weight: 600; }
.oc-ssheet .oc-pop-item small { display: block; font-size: .8rem; font-weight: 400; color: var(--oc-muted); }
.oc-ssheet-danger > summary { list-style: none; color: var(--oc-red); }
.oc-ssheet-danger > summary::-webkit-details-marker { display: none; }
.oc-ssheet .oc-ssheet-danger > summary .oc-i { color: currentColor; }
.oc-ssheet-confirm { margin: 2px 0 4px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--oc-red-fill) 11%, transparent); }
.oc-ssheet-confirm p { margin: 0 0 10px; font-size: .92rem; }
.oc-ssheet-confirm .oc-ssheet-go { display: flex; gap: 8px; margin: 0; }
.oc-ssheet-go button { flex: 1; min-height: 44px; }
@media (max-width: 760px) {
  .oc-ssheet { width: 100%; max-width: none; max-height: 86dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .oc-ssheet[open] { animation: oc-ssheet-up .26s cubic-bezier(.2, .9, .3, 1.06); }
  .oc-ssheet::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto -4px; border-radius: 4px; background: var(--oc-line); }
}
@keyframes oc-ssheet-up { from { opacity: .6; transform: translateY(calc(100% * var(--ov-move, 1))); } }

/* A server's card where you are in it: your rank in words, Open, and the three dots for its sheet. */
.oc-card-yours { color: var(--oc-text); font-weight: 700; }
.oc-card > .oc-card-go { display: flex; gap: 8px; margin: 6px 14px 0; }
.oc-card-go > .oc-button { flex: 1; text-align: center; }
.oc-card-go > .oc-card-more { flex: none; border: 1px solid var(--oc-line); border-radius: 10px; color: var(--oc-text); }

/* ── Activity: what is waiting for you, by kind; nothing waiting is said as that ── */
.oc-act-sec { margin: 0 0 18px; }
.oc-act-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.oc-act-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.oc-act-row button { min-height: 40px; flex: none; }
.oc-act-servers, .oc-act-chans { list-style: none; margin: 0; padding: 0; }
.oc-act-servers { display: grid; gap: 10px; }
.oc-act-server { padding: 6px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-panel); }
.oc-act-server-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border-radius: 10px; color: var(--oc-text); text-decoration: none; }
.oc-act-server-head:hover { background: var(--oc-panel-2); }
.oc-act-server-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-act-chans { display: grid; gap: 1px; }
.oc-act-server .oc-act-chans { padding-left: 42px; }
.oc-act-clear { display: grid; justify-items: center; gap: 6px; max-width: 420px; margin: 9vh auto 0; text-align: center; }
.oc-act-clear-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--oc-ok-fill) 16%, transparent); color: var(--oc-ok); animation: oc-act-pop .42s cubic-bezier(.2, .9, .3, 1.4) both; }
.oc-act-clear-mark .oc-i { width: 30px; height: 30px; stroke-width: 2.4; }
.oc-act-clear h2 { margin: 8px 0 0; font-size: 1.2rem; }
.oc-act-clear p { margin: 0; }
.oc-act-clear .oc-act-clear-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.oc-act-clear-go .oc-button { min-height: 44px; display: inline-flex; align-items: center; }
@keyframes oc-act-pop { from { opacity: 0; transform: scale(calc(1 - .4 * var(--ov-move, 1))); } }

/* The way to the list is a phone's; on a computer the list is beside the conversation. */
.oc-tolist { display: none; }

/* ── Messages, grouped by who said them ────────────────────────────────────────────────────────────────────────────
   A run of messages from one person within a few minutes is one group: their mark, their name, where it was sent from
   and the time once; the next lines are just the words (their time shows on a press). A line says when the day changes. */
.oc-feed.is-grouped { padding: 4px 0 10px; }
.oc-feed.is-grouped > .oc-msg { position: relative; display: block; margin: 0; padding: 1px 14px 1px 62px; line-height: 1.42; border: 0; }
.oc-feed.is-grouped > .oc-msg.is-first { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 14px; }
.oc-feed.is-grouped > .oc-msg.is-first::before { content: attr(data-initial); position: absolute; left: 14px; top: 1px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .92rem; font-weight: 800; color: var(--oc-text); background: color-mix(in srgb, var(--nc, var(--oc-accent)) 34%, var(--oc-panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc, var(--oc-accent)) 50%, transparent); }
.oc-feed.is-grouped > .oc-msg.is-first > .oc-name { order: 1; font-weight: 750; }
.oc-feed.is-grouped > .oc-msg.is-first > .oc-where { order: 2; font-size: .74rem; padding: 1px 7px; border-radius: 999px; color: var(--oc-muted); background: color-mix(in srgb, var(--oc-text) 7%, transparent); text-decoration: none; }
.oc-feed.is-grouped > .oc-msg.is-first > .oc-time { order: 3; font-size: .72rem; color: var(--oc-muted); }
.oc-feed.is-grouped > .oc-msg.is-first > .oc-text { order: 4; flex: 1 0 100%; }
.oc-feed.is-grouped > .oc-msg.is-cont > :is(.oc-name, .oc-where) { display: none; }
.oc-feed.is-grouped > .oc-msg.is-cont > .oc-time { position: absolute; left: 8px; top: 4px; width: 46px; text-align: right; font-size: .66rem; color: var(--oc-muted); opacity: 0; transition: opacity .12s ease; }
.oc-feed.is-grouped > .oc-msg.is-cont:is(:hover, :active, :focus-within) > .oc-time { opacity: 1; }
.oc-feed.is-grouped > .oc-msg:is(:hover, :active) { background: color-mix(in srgb, var(--oc-text) 3.5%, transparent); }
.oc-feed.is-grouped > .oc-msg .oc-text { overflow-wrap: anywhere; }
.oc-feed.is-grouped > .oc-day { display: flex; align-items: center; gap: 12px; margin: 18px 14px 4px; font-size: .74rem; font-weight: 700; color: var(--oc-muted); list-style: none; }
.oc-feed.is-grouped > .oc-day::before, .oc-feed.is-grouped > .oc-day::after { content: ""; flex: 1; height: 1px; background: var(--oc-line); }
.oc-feed.is-grouped > .oc-msg.is-first > .oc-time { display: inline; margin: 0; }
.oc-feed.is-grouped > .oc-msg.is-cont > .oc-time { display: block; margin: 0; }