/* Pods & Rooms test page: layout only. Colours, fonts, stars, buttons (.space-button,
   .icon-button, .profile-tab), fields (.edit-field, .edit-label, .edit-input), the search box
   (.search-input), pop-ups (.post-dialog-*) and toasts come from the site's ../style.css,
   which loads first. This file adds the app layout (top bar, sidebar, pages, member panels)
   and a few size tweaks on the site's pieces. */

:root {
    /* Extra shades this page needs on top of the site's colours. */
    --dim: #a8a8a8;
    --line: rgba(240, 240, 240, 0.45);
    --line-soft: rgba(240, 240, 240, 0.18);
    --online: #7ee2a8;
    --danger: #ff8a8a;
    --bar-h: 72px;
    --rail-w: 86px;
}

/* ---------- Page base ---------- */

/* The site centres its pages in the body; this page is a full-window app instead. */
body.pods-page {
    display: block;
    height: 100vh;
    min-height: 0;
}

/* Keep the site's stars behind the app. */
.pods-page .stars {
    z-index: -1;
}

/* Resets are wrapped in :where() so they're weaker than any class, letting the site's
   .space-button, .icon-button, .search-input and .edit-input keep their own styles. */
:where(.pods-page) *,
:where(.pods-page) *::before,
:where(.pods-page) *::after {
    box-sizing: border-box;
}

:where(.pods-page) :where(button, input, textarea, select) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

:where(.pods-page) button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

:where(.pods-page) :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

:where(.pods-page) .material-symbols-outlined {
    flex: none;
    font-size: 20px;
}

.hidden {
    display: none !important;
}

/* Normal capitals here, not ALL CAPS: in capitals, Orbitron's O and D look the same. */
.pods-page .space-button,
.pods-page .post-dialog-title,
.pods-page .edit-label {
    text-transform: none;
}

/* Usernames use the site's plain font. */
.message-header strong,
.side-member-name strong,
.friend-copy strong,
.user-detail strong,
.reply-bar strong,
.private-room-members > label span,
.pod-pending > div span {
    font-family: var(--font-plain);
    letter-spacing: normal;
    word-spacing: normal;
}

/* Thin accent scrollbars, as on the site's scrolling boxes. */
.pods-page * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* ---------- Sizes for the site's buttons ---------- */

.pods-page .space-button {
    align-items: center;
    gap: 8px;
}

.pods-page .space-button .material-symbols-outlined {
    font-size: 16px;
}

/* Main actions: a bit smaller than the site's 1.05rem default. */
.directory-create,
.hero-action,
.pod-join-btn {
    padding: 11px 16px;
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Small actions inside cards and panels. */
.side-invite,
.friend-action {
    padding: 8px 12px;
    font-size: 0.6rem;
    white-space: nowrap;
    box-shadow: 3px 3px 0 var(--border);
}

.side-invite {
    justify-content: center;
}

/* Page icon buttons (not the site's quick actions, which keep the site's size). */
.pods-page .icon-button:not(.sidebar *) .material-symbols-outlined {
    font-size: 20px;
}

/* On (sidebar open): lavender, like the site's buttons on hover. Off: the plain white button. */
.sidebar-toggle[aria-expanded="true"],
.pod-member-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

/* Panel toggles are square, like the banner buttons (.pod-customize). */
.pods-page .icon-button.sidebar-toggle,
.pods-page .icon-button.pod-member-toggle {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: var(--bg);
}

.pods-page .icon-button.sidebar-toggle .material-symbols-outlined,
.pods-page .icon-button.pod-member-toggle .material-symbols-outlined {
    font-size: 18px;
}

/* While a panel is open, its toggle sits half on the panel's edge, the way the banner
   buttons sit half on the banner's border: the sidebar's on its right edge, the Pod
   members panel's on its left edge. */
.sidebar-head .sidebar-toggle,
.pod-members-sidebar > .pod-member-toggle {
    position: absolute;
    top: 22px;
    z-index: 6;
}

.sidebar-head .sidebar-toggle {
    right: 0;
    transform: translateX(50%);
}

.pod-members-sidebar > .pod-member-toggle {
    left: 0;
    transform: translateX(-50%);
}

/* On desktop the sidebar toggle stays in the same spot on the page, open or closed (lavender
   when open). The Pod members toggle moves onto its panel's edge while the panel is open.
   On phones the panels are drawers that cover the page, so each drawer keeps its own
   toggle on its edge for closing it. */
/* (The top bar's toggles open and close the panels, on phones too: the panels don't need their own.) */
.sidebar-head .sidebar-toggle,
.pod-members-sidebar > .pod-member-toggle {
    display: none;
}

/* The Quick access and member toggles in the top bar: tabs like ourPods / Friends (an icon each),
   either side of them, lavender while their panel is open. They hang just outside the two tabs,
   so those stay in the middle whether the member toggle is showing or not. */
.pods-page .global-nav {
    position: relative;
}

.pods-page .global-nav > .nav-toggle {
    position: absolute;
    bottom: 0;
    width: 42px;
    padding: 0;
}

.pods-page .global-nav > .sidebar-toggle {
    right: calc(100% + 4px);
}

.pods-page .global-nav > .pod-member-toggle {
    left: calc(100% + 4px);
}

.pods-page .global-nav > .nav-toggle[hidden] {
    display: none;
}

.pods-page .global-nav > .nav-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Tooltips ---------- */

/* Icon buttons use the site's .badge-tooltip with its own placements (tooltip-below,
   tooltip-left, tooltip-right), delay and fade, all from style.css. Here: these are buttons,
   so they keep the pointer, and normal capitals. */
.pods-page .badge-tooltip {
    cursor: pointer;
}

.pods-page .badge-tooltip::after {
    text-transform: none;
}

/* The room Members button shows its label on wider screens, so its tooltip is only for when
   it shrinks to an icon. */
@media (min-width: 761px) {
    .welcome .room-member-button::before,
    .welcome .room-member-button::after {
        display: none;
    }
}

/* Quieter buttons: thin border, no shadow. */
.friend-minor,
.pod-pending button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 68, 68, 0.815);
    background: var(--bg);
    color: rgba(255, 68, 68, 0.815);
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
}

.friend-minor:hover,
.pod-pending button:hover {
    border-color: var(--accent);
    color: white;
}

/* ---------- Shared page pieces ---------- */

/* Title tags that sit half on a frame's top border, like the site's section titles. */
.hero-pill,
.friends-panel > h2,
.pod-entrance .page-eyebrow,
.room-parent {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 40px);
    margin: 0;
    padding: 7px 12px;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transform: translateY(-50%);
}

.page-eyebrow span {
    color: var(--text);
}

/* Avatars: square with a thin border, like the site's post avatars. */
.avatar {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    border: 1px solid var(--border);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- App frame ---------- */

/* Quick access menu, the page, and a rail on the right for the site's quick actions. */
.app {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) var(--rail-w);
    grid-template-rows: var(--bar-h) minmax(0, 1fr);
    height: 100dvh;
}

.app.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) var(--rail-w);
}

/* The site's quick actions (settings, notifications, search, profile), down the right: the
   first one sits in the top bar, the rest in the rail under it. */
.pods-page > .sidebar {
    top: calc((var(--bar-h) - 46px) / 2);
    z-index: 30;
}

.app.sidebar-collapsed .app-sidebar {
    overflow: hidden;
    border: 0;
    visibility: hidden;
}

/* Top bar */
.globalbar {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 25;
    display: flex;
    min-width: 0;
    /* The nav tabs sit on the bottom edge, over the page's top line. */
    align-items: flex-end;
    /* The nav in the middle (the logo is fixed in the corner, like the other pages). */
    justify-content: center;
    gap: 14px;
    padding: 0 20px;
    background: var(--bg);
}

/* The nav as browser tabs: they sit on the line along the top of the page, and the open one
   joins the page under it. */
.main {
    border-top: 2px solid var(--border);
    border-right: 2px solid var(--border);
}

.global-nav {
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: 4px;
}

/* The other tabs stand on the page's top line (no bottom border of their own). */
.global-nav .space-button {
    height: 32px;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-color: var(--line);
    border-bottom: 0;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.68rem;
}

.global-nav .space-button:hover {
    border-color: var(--accent);
    box-shadow: none;
}

/* The open tab reaches down over the line and covers it, so it joins the page. */
.global-nav .space-button.is-active {
    height: 34px;
    margin-bottom: -2px;
    border-color: var(--border);
    border-bottom: 2px solid var(--bg);
    background: var(--bg);
    box-shadow: none;
    color: var(--accent);
}

.global-nav .material-symbols-outlined {
    font-size: 16px;
}

/* ---------- Sidebar ---------- */

.app-sidebar {
    position: relative;
    z-index: 5;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border-right: 2px solid var(--border);
    border-top: 2px solid var(--border);
    background: none;
}

.sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
}

.sidebar-kicker {
    color: var(--dim);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
    padding: 0 4px 4px 0;
}

.sidebar-tabs .space-button {
    justify-content: center;
    padding: 9px 6px;
    font-size: 0.64rem;
}

.sidebar-tabs .material-symbols-outlined {
    font-size: 15px;
}

.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 14px 20px;
}

.sidebar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 12px;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.sidebar-section-head button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
}

.sidebar-section-head button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.sidebar-section-head button .material-symbols-outlined {
    font-size: 15px;
}

.recent-count {
    padding: 2px 7px;
    border: 1px solid var(--line);
    color: var(--muted);
    letter-spacing: 0.04em;
}

.shortcut-item,
.recent-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    text-align: left;
}

.shortcut-item:hover,
.recent-item:hover {
    border-color: var(--accent);
}

.shortcut-item.active {
    border-color: var(--accent);
    box-shadow: 3px 3px 0 var(--accent);
}

.shortcut-icon,
.recent-orb {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent);
}

.shortcut-icon .material-symbols-outlined,
.recent-orb .material-symbols-outlined {
    font-size: 15px;
}

.shortcut-item > span:nth-child(2),
.recent-item > span:last-child {
    flex: 1;
    min-width: 0;
}

.shortcut-item strong,
.recent-item strong {
    display: block;
    overflow: hidden;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortcut-item small,
.recent-item small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--dim);
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortcut-item.active strong {
    color: var(--accent);
}

.recent-item em {
    color: var(--dim);
    font-style: normal;
}

.shortcut-arrow {
    color: var(--dim);
}

/* The same arrow as the Pod and room cards (Material Icons Sharp). */
.shortcut-arrow .material-icons-sharp {
    display: block;
    font-size: 22px;
}

/* The arrow on every link that opens a Pod, room or page (pods.js goArrow): a bit bigger than
   the text, in the accent colour while its row or button is hovered or open. */
.go-arrow {
    font-size: 22px;
    vertical-align: middle;
}

button:hover .go-arrow,
button:focus-visible .go-arrow,
.active .go-arrow,
.is-active .go-arrow {
    color: var(--accent);
}

.browse-rooms {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 4px;
    padding: 11px 12px;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 600;
}

.browse-rooms:hover {
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent);
}

.sidebar-empty {
    padding: 4px 4px 14px;
    color: var(--dim);
    font-size: 0.62rem;
    line-height: 1.7;
}

/* ---------- Main area and pages ---------- */

.main {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

/* Pages don't scroll as a whole: the top (hero, tabs, search) stays, and only the list
   under the tabs scrolls (rooms scroll their messages). */
.directory-page,
.friends-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.directory-page > .directory-inner,
.friends-inner {
    display: flex;
    height: 100%;
    flex-direction: column;
    /* Only if the window is too short to fit the top and the list. */
    overflow-y: auto;
}

.directory-page > .directory-inner > *,
.friends-inner > * {
    flex: none;
}

/* The scrolling lists: Pods under the tabs, the people lists, and a Pod's rooms. */
.directory-page > .directory-inner > .pod-directory-grid,
.friends-inner > .friends-scroll,
.pod-inner > .directory-grid {
    flex: 1 1 auto;
    min-height: 160px;
    overflow-y: auto;
    align-content: start;
    /* Room for the cards' hover shadow and the scrollbar. */
    padding: 0 8px 8px 0;
}

.friends-scroll > .friends-panel:first-child {
    margin-top: 18px;
}

/* Loading: the site's skeleton shapes (style.css .skeleton-*), laid out like each ourPods screen
   (pods.js skeletons). */
.pods-skeleton {
    gap: 16px;
}

.pods-skeleton-pills {
    flex-wrap: wrap;
}

/* Create Pod / Add friend sit at the right end of the tab row. */
.pods-skeleton-push {
    width: 130px;
    margin-left: auto;
}

.pods-skeleton-hero {
    height: 210px;
}

.pods-skeleton-entrance {
    height: 190px;
}

.pods-skeleton-title {
    width: 190px;
    height: 34px;
}

.pods-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.pods-skeleton-grid .skeleton-item {
    min-height: 100px;
}

.pods-skeleton-grid .skeleton-avatar {
    width: 38px;
    height: 38px;
}

.pods-skeleton-panel,
.pods-skeleton-members,
.pods-skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Messages: picture and name, then their text. */
.pods-skeleton-messages {
    padding: 14px 22px;
}

/* First load of a room: its welcome banner too. */
.pods-skeleton-room {
    padding: 12px 22px 0;
}

.pods-skeleton-room .pods-skeleton-messages {
    padding-right: 0;
    padding-left: 0;
}

.pods-skeleton-welcome {
    height: 120px;
}

.pods-skeleton-messages .skeleton-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 18px;
}

.pods-skeleton-members {
    padding: 16px 14px;
}

.pods-skeleton-sidebar .skeleton-avatar,
.pods-skeleton-members .skeleton-avatar {
    width: 30px;
    height: 30px;
}

.pods-skeleton-sidebar .skeleton-item,
.pods-skeleton-members .skeleton-item {
    padding: 10px;
}

.pods-skeleton-profile .skeleton-avatar.is-large {
    width: 56px;
    height: 56px;
}

@media (max-width: 760px) {
    .pods-skeleton-hero {
        height: 170px;
    }

    .pods-skeleton-entrance {
        height: 160px;
    }

    .pods-skeleton-grid {
        grid-template-columns: 1fr;
    }

    /* Like the real phone toolbar: tabs fill one row, Create Pod across the width under them. */
    .pods-skeleton-pods .skeleton-pill {
        flex: 1 1 0;
        width: auto;
    }

    .pods-skeleton-pods .skeleton-pill:first-child {
        flex: 0 0 40px;
    }

    .pods-skeleton-pods .pods-skeleton-push {
        flex-basis: 100%;
        margin-left: 0;
    }

    .pods-skeleton-messages,
    .pods-skeleton-room {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Profiles live on the site's own profile page (user/), not here. */
#profilePage {
    display: none !important;
}

.directory-inner,
.friends-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 32px 20px;
}

.friends-inner {
    max-width: 960px;
}

/* The sidebar toggle sits at the top of each page, right beside the sidebar. */
.directory-inner > .sidebar-toggle,
.friends-inner > .sidebar-toggle {
    margin-bottom: 4px;
}

/* Friends: the Quick access toggle with the page heading to its right. */
.page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.page-head .directory-title,
.page-head .directory-title h1 {
    margin: 0;
}

/* The heading in a frame, with the Quick access toggle inside on the left and a line
   between them (like the ourPods tag on phones). */
.page-head .directory-title {
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--border);
    background: var(--bg);
}

.page-head .directory-title h1 {
    padding: 7px 14px;
    font-size: 1.05rem;
    line-height: 1.2;
}

.pods-page .page-head .directory-title > .icon-button.sidebar-toggle {
    width: 36px;
    height: auto;
    border: 0;
    border-right: 2px solid var(--border);
    background: none;
}

.directory-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 26px;
}

.directory-title h1 {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.directory-title p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.7;
}

/* ---------- Home ---------- */

.home-hero {
    position: relative;
    display: flex;
    min-height: min(300px, 30vh);
    margin-top: 16px;
    border: 2px solid var(--border);
    background:
        radial-gradient(circle at 78% 50%, rgba(199, 182, 255, 0.22), transparent 38%),
        linear-gradient(115deg, var(--panel), var(--bg) 55%, #29243d);
    box-shadow: 6px 6px 0 var(--accent);
}

/* Pods hero: the Quick access toggle sits half on its left edge, near the top. */
.home-hero > .sidebar-toggle {
    position: absolute;
    top: 22px;
    left: 0;
    z-index: 3;
    transform: translateX(-50%);
}

/* Tabs and the page button (Create Pod / Add friend) share one row: tabs left, button right. */
.page-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 18px;
}

.page-toolbar .pod-tabs,
.page-toolbar .friends-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Used / allowed count on Create Pod and Add room. */
.limit-count {
    padding: 1px 6px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.58rem;
}

.page-toolbar .directory-create {
    flex: none;
}

/* Fills the hero's height so the Welcome back tag lands on the hero's top border. */
.hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 58%;
    padding: clamp(28px, 4.5vh, 40px) 40px clamp(18px, 3.5vh, 36px);
}

.home-hero h1 {
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(1.4rem, min(3.4vw, 4.6vh), 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.05em;
}

/* The name gets the accent underline, like "Space" in the site header. */
.home-hero h1 em {
    border-bottom: 4px solid var(--accent);
    color: var(--accent);
    font-style: normal;
}

.home-hero p {
    max-width: 420px;
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.7;
}

.hero-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.planet,
.orbit {
    position: absolute;
    left: 78%;
    top: 50%;
}

.planet {
    z-index: 1;
    width: min(210px, 18vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #f6f2ff, #c7b6ff 30%, #8a77d6 62%, #3d3466 92%);
    box-shadow: inset -22px -22px 44px rgba(20, 16, 40, 0.65), 0 0 60px rgba(199, 182, 255, 0.25);
    transform: translate(-50%, -50%);
}

.planet-shine {
    position: absolute;
    inset: 12% 48% 52% 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(16px);
}

.orbit {
    z-index: 2;
    width: min(340px, 30vw);
    height: 150px;
    border: 1px dashed var(--line);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-22deg);
}

.orbit-two {
    z-index: 0;
    width: min(400px, 36vw);
    height: 200px;
    border: 1px solid rgba(199, 182, 255, 0.35);
    transform: translate(-50%, -50%) rotate(28deg);
}

.art-star {
    position: absolute;
    color: var(--text);
}

.star-one {
    right: 4%;
    top: 14%;
    color: var(--accent);
    font-size: 1.4rem;
}

.star-two {
    left: 62%;
    top: 14%;
    font-size: 1rem;
}

.star-three {
    right: 14%;
    bottom: 12%;
    font-size: 0.8rem;
}

/* Cards: framed like the site's search results; accent frame and shadow on hover. */
.directory-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-align: left;
}

.directory-card:hover {
    border-color: var(--accent);
    background: var(--panel-hover);
    box-shadow: 4px 4px 0 var(--accent);
}

.directory-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: none;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--accent);
    font-size: 1.1rem;
}

.directory-icon .material-symbols-outlined {
    font-size: 18px;
}

.directory-copy {
    flex: 1;
    min-width: 0;
}

.directory-copy strong {
    display: block;
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-arrow {
    color: var(--dim);
    font-size: 1rem;
}

.directory-card:hover .directory-arrow {
    color: var(--accent);
}

/* ---------- Pods directory and Friends ---------- */

.pod-tabs,
.friends-tabs {
    display: flex;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0 4px 4px 0;
    overflow-x: auto;
}

/* Favorites tab: the word on bigger screens, a star on phones (see the 760px rules). */
.pod-tabs .tab-label {
    font-weight: inherit;
}

.pod-tabs [data-tab="favorites"] .material-symbols-outlined {
    display: none;
}

/* Search: ourUniverse's round search button that widens into a search bar (style.css
   .universe-toolbar), here in the tabs row, beside the page button, a little smaller. */
.pods-search {
    position: relative;
    left: auto;
    bottom: auto;
    flex: none;
    width: 42px;
    border-radius: 21px;
}

.page-toolbar .pods-search.is-open {
    width: min(300px, 40%);
}

/* The bar widens to the left here, so its button stays on the right end. */
.pods-search .universe-search-row {
    flex-direction: row-reverse;
    height: 38px;
}

.pods-search .universe-search-toggle {
    width: 38px;
    height: 38px;
}

.pods-search .universe-search-toggle .material-symbols-outlined {
    font-size: 20px;
}

.pods-search .universe-search {
    padding-left: 14px;
    font-size: 0.8rem;
}

/* The Quick access toggle and Create Pod also sit in the hero, for phones only. */
.pods-page .hero-pill > .icon-button.sidebar-toggle,
.home-hero > .directory-create {
    display: none;
}

/* Cards fill the space there is (it changes with the side panels), at least 300px each. */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.directory-card {
    min-height: 100px;
}

.directory-copy small {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.directory-copy em {
    display: inline-block;
    margin-top: 8px;
    color: var(--accent);
    font-size: 0.54rem;
    font-style: normal;
    letter-spacing: 0.08em;
}

.directory-arrow .material-symbols-outlined {
    font-size: 16px;
}

/* The arrow (Material Icons Sharp), bigger than the lock. */
.directory-arrow .material-icons-sharp {
    display: block;
    font-size: 24px;
}

/* Locked Pods and rooms: dashed frame. */
.directory-card.locked {
    border-style: dashed;
}

.directory-card.locked .directory-icon {
    color: var(--muted);
}

.directory-empty,
.friends-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border: 2px dashed var(--line);
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.7;
}

#podSearchEmpty[hidden] {
    display: none;
}

/* Each list (Your friends, Online now, Requests…) is a frame with its title tag on the top
   border, like the other boxes on this page. */
.friends-panel {
    position: relative;
    margin-top: 34px;
    padding: 32px 16px 16px;
    border: 2px solid var(--border);
    background: var(--panel);
}

.friends-panel h2 span {
    padding: 1px 6px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.58rem;
}

.friends-panel .friends-empty {
    margin: 0;
    border-width: 1px;
}

/* Hide / show (People you might know): on the top border at the right, square like the
   page's other panel toggles. */
.pods-page .icon-button.friends-panel-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: var(--bg);
    transform: translateY(-50%);
}

.pods-page .icon-button.friends-panel-toggle .material-symbols-outlined {
    font-size: 18px;
}

/* Hidden: just the frame's top with its title and button. */
.friends-panel.is-collapsed {
    padding-top: 20px;
    padding-bottom: 0;
}

.friends-panel.is-collapsed > :not(h2, .friends-panel-toggle) {
    display: none;
}

.friends-panel[hidden],
.friend-card[hidden],
#friendSearchEmpty[hidden] {
    display: none;
}

#friendSearchEmpty {
    margin-top: 20px;
}

.friends-list {
    display: grid;
    gap: 10px;
}

.friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.friend-card:hover {
    border-color: var(--accent);
}

.friend-card .avatar {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
}

.friend-copy {
    flex: 1;
    min-width: 0;
}

/* The name opens their card. */
.friend-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--accent);
    font-family: var(--font-plain);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: normal;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-name:hover {
    text-decoration: underline;
}

.friend-copy small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.58rem;
}

.friend-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    /* Room for the Accept / Add button's offset shadow. */
    padding: 0 3px 3px 0;
}

/* Friends have no buttons on their card (Remove is in their profile pop-up). */
.friend-actions:empty {
    display: none;
}

/* ---------- Pod page ---------- */

#podPage {
    overflow: hidden;
}

/* The page scrolls on the left; the Pod members panel sits beside it, full height. */
.pod-shell {
    display: flex;
    height: 100%;
}

.pod-scroll {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* The banner stays at the top; the rooms under it scroll. (A Pod you can't enter yet shows
   its gate instead, which scrolls if the window is very short.) */
.pod-inner {
    display: flex;
    max-width: 1100px;
    height: 100%;
    flex-direction: column;
    margin: 0 auto;
    padding: 24px 32px 20px;
    overflow-y: auto;
}

.pod-inner > * {
    flex: none;
}

.pod-inner:has(> .directory-grid) {
    overflow: hidden;
}

.pod-topline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pod-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    padding: 4px 0;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
}

.pod-back .material-symbols-outlined {
    font-size: 15px;
}

.pod-back:hover {
    color: var(--accent);
}

/* The entrance stays in view while the rooms scroll under it. */
.pod-top-row {
    position: sticky;
    top: 22px;
    z-index: 8;
    margin-top: 22px;
}

/* Rooms: covers the strip above the sticky room banner, so messages scrolling up don't peek out
   above it. It's painted with the room's glow, lined up with the screen (fixed), so it blends in
   with the page instead of showing as a dark bar. (On a Pod's page the rooms list scrolls inside
   itself, so nothing goes under the banner.) */
.welcome::before {
    content: "";
    position: absolute;
    left: -26px;
    right: -26px;
    top: -26px;
    height: 24px;
    background: var(--page-glow, none), var(--bg);
    background-attachment: fixed;
    pointer-events: none;
}

/* Pod and room banners. --banner-accent is the colour the owner picks. */
.pod-entrance,
.welcome {
    position: relative;
    border: 2px solid var(--border);
    isolation: isolate;
}

/* The about text and details line share one see-through dark box, so they stay readable on
   any colour and backdrop (the Pod's description and details; the room's topic). */
.pod-entrance .banner-about,
.welcome .banner-copy > p {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: rgba(31, 31, 31, 0.6);
}

/* No description: just the details line in the box. */
.pod-entrance p:empty {
    display: none;
}

.pod-entrance .banner-about p {
    margin-bottom: 8px;
}

.pod-entrance {
    display: flex;
    min-height: 190px;
    align-items: flex-end;
    padding: 36px 24px 22px;
}

.pod-entrance-copy {
    max-width: 680px;
}

.pod-entrance h1 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

.pod-entrance p {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 0.7rem;
    line-height: 1.7;
}

.pod-entrance .page-eyebrow {
    letter-spacing: 0.14em;
}

.pod-entrance-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.58rem;
}

.pod-entrance-meta .material-symbols-outlined {
    font-size: 15px;
    color: var(--accent);
}

/* The "·" separators are dimmed (not the icons, which stay in the accent colour). */
.pod-entrance-meta > span:not(.material-symbols-outlined) {
    opacity: 0.5;
}

.banner-theme {
    background:
        radial-gradient(circle at 88% -10%, transparent 0 88px, color-mix(in srgb, var(--banner-accent) 45%, transparent) 89px 90px, transparent 91px 124px, color-mix(in srgb, var(--banner-accent) 22%, transparent) 125px 126px, transparent 127px),
        radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--banner-accent) 55%, transparent), transparent 46%),
        linear-gradient(115deg, color-mix(in srgb, var(--banner-accent) 38%, #1f1f1f), color-mix(in srgb, var(--banner-accent) 14%, #2a2a2a));
}

.banner-theme.backdrop-stars {
    background:
        radial-gradient(circle at 18% 25%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 76% 65%, #fffc 0 1px, transparent 2px),
        radial-gradient(circle at 61% 16%, #fffb 0 1px, transparent 2px),
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--banner-accent) 48%, transparent), transparent 42%),
        linear-gradient(115deg, color-mix(in srgb, var(--banner-accent) 14%, #2a2a2a), color-mix(in srgb, var(--banner-accent) 38%, #1f1f1f));
    background-size: 110px 85px, 150px 115px, 190px 125px, auto, auto;
}

.banner-theme.backdrop-stripes {
    background:
        repeating-linear-gradient(125deg, transparent 0 19px, rgba(255, 255, 255, 0.06) 20px 21px, transparent 22px 41px),
        radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--banner-accent) 60%, transparent), transparent 46%),
        linear-gradient(110deg, color-mix(in srgb, var(--banner-accent) 14%, #2a2a2a), color-mix(in srgb, var(--banner-accent) 45%, #1f1f1f));
}

.banner-theme.backdrop-horizon {
    background:
        radial-gradient(ellipse 75% 35% at 75% 115%, color-mix(in srgb, var(--banner-accent) 85%, #fff) 0%, transparent 74%),
        radial-gradient(ellipse 60% 55% at 75% 105%, color-mix(in srgb, var(--banner-accent) 50%, transparent), transparent 85%),
        linear-gradient(120deg, color-mix(in srgb, var(--banner-accent) 14%, #2a2a2a), color-mix(in srgb, var(--banner-accent) 32%, #1f1f1f));
}

.banner-theme.backdrop-plain {
    background: linear-gradient(115deg, color-mix(in srgb, var(--banner-accent) 55%, #1f1f1f), color-mix(in srgb, var(--banner-accent) 20%, #1f1f1f));
}

/* Banner buttons sit half on the top border, on the right (like the site's pop-up close button).
   They share one row, so they space themselves whichever ones are showing. */
.banner-actions {
    position: absolute;
    top: 0;
    right: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateY(-50%);
}

.pod-favorite,
.pod-leave,
.pod-banner-invite,
.pod-customize,
.welcome .room-customize,
.welcome .room-alerts,
.welcome .room-member-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.pod-favorite:hover,
.pod-leave:hover,
.pod-banner-invite:hover,
.pod-customize:hover,
.welcome .room-customize:hover,
.welcome .room-alerts:hover,
.welcome .room-alerts.active,
.welcome .room-member-button:hover,
.welcome .room-member-button[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.pod-favorite .material-symbols-outlined,
.pod-leave .material-symbols-outlined,
.pod-banner-invite .material-symbols-outlined,
.pod-customize .material-symbols-outlined,
.welcome .room-customize .material-symbols-outlined,
.welcome .room-alerts .material-symbols-outlined,
.welcome .room-member-button .material-symbols-outlined {
    font-size: 18px;
}

.pod-favorite.active {
    border-color: var(--accent);
    color: var(--accent);
}

/* Favorited: a filled star in the site's gold (like favorite GIFs and pictures). */
.pod-favorite.active .material-symbols-outlined {
    color: #ffd27a;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.welcome .room-member-button {
    width: auto;
    padding: 0 12px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* On Pod and room banners the sidebar toggle sits on the top border, before the title tag. */
.welcome .sidebar-toggle,
.pod-entrance > .sidebar-toggle {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 3;
    transform: translateY(-50%);
}

.welcome .sidebar-toggle + .room-parent,
.pod-entrance:has(> .sidebar-toggle) .page-eyebrow {
    left: 68px;
}

.room-parent .material-symbols-outlined {
    font-size: 14px;
}

.room-parent:hover {
    border-color: var(--accent);
}

.pod-content-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 32px 0 16px;
}

.pod-content-head span {
    color: var(--dim);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
}

.pod-content-head h2 {
    margin: 6px 0;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.pod-content-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.6;
}

.pod-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 4px 4px 0;
}

.pod-gate {
    max-width: 560px;
    margin: 34px auto 0;
    padding: 30px 26px;
    border: 2px solid var(--border);
    background: var(--panel);
    box-shadow: 4px 4px 0 var(--border);
    text-align: center;
}

.pod-gate-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0 auto 14px;
    border: 2px solid var(--accent);
    color: var(--accent);
}

.pod-gate-icon .material-symbols-outlined {
    font-size: 24px;
}

.pod-gate h2 {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.pod-gate p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.7;
}

.pod-gate .edit-label {
    margin-bottom: 8px;
    text-align: left;
}

.pod-gate .edit-input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.12em;
}

/* A Pod's picture (set in Pod settings): fills its icon box on cards, shortcuts and the banner. */
.pod-picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.directory-icon:has(.pod-picture),
.shortcut-icon:has(.pod-picture) {
    overflow: hidden;
}

.pod-entrance-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.pod-entrance-title h1 {
    margin: 0;
}

.pod-entrance-picture {
    width: 56px;
    height: 56px;
    flex: none;
    overflow: hidden;
    border: 2px solid var(--border);
}

.pod-row-picture {
    width: 22px;
    height: 22px;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Pod settings: the picture preview beside its Choose / Remove buttons. */
.pod-picture-field {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pod-picture-preview {
    display: grid;
    width: 64px;
    height: 64px;
    flex: none;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--accent);
}

.pod-picture-preview .material-symbols-outlined {
    font-size: 28px;
}

.pods-page .edit-reset {
    text-transform: none;
}

/* ---------- Member panels (room and Pod) ---------- */

.members,
.pod-members-sidebar {
    width: 260px;
    flex: none;
    overflow-y: auto;
    border-left: 2px solid var(--border);
    background: none;
}

/* The Pod panel doesn't scroll itself (that would clip the toggle on its edge); the list
   inside it does. */
.pod-members-sidebar {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.pod-members-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Room for the half of the toggle that sits inside the panel. */
.pod-members-sidebar .member-sidebar-head {
    padding-left: 32px;
}

/* Hidden with the Pod members button on desktop. */
.pod-members-sidebar.is-hidden {
    display: none;
}

.member-sidebar-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.member-sidebar-head small {
    margin-left: 4px;
    padding: 1px 6px;
    border: 1px solid var(--line);
    color: var(--muted);
}

/* The room panel's close button: shown when the panel is a phone drawer. */
.member-sidebar-head button:not(.icon-button) {
    display: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.member-sidebar-head button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.member-sidebar-head button .material-symbols-outlined {
    font-size: 16px;
}

.member-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 12px 4px;
}

.member-tabs .space-button {
    flex: 1;
    justify-content: center;
    padding: 8px 4px;
    font-size: 0.54rem;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--border);
}

.member-tabs .space-button.is-active {
    box-shadow: 2px 2px 0 var(--accent);
}

.member-tabs .space-button span {
    padding: 0 4px;
}

.side-context {
    padding: 12px;
}

.side-context strong {
    display: block;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

/* Member search (the site's search box), under the Pod / room info. */
.member-search-row {
    padding: 0 16px 10px;
}

.member-search-row .search-input {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 7px 32px 7px 10px;
    font-size: 0.58rem;
}

/* The site's clear button (style.css .search-clear), sized for the smaller box. */
.member-search-row .search-clear {
    right: 6px;
    width: 20px;
    height: 20px;
}

.member-search-row .search-clear .material-symbols-outlined {
    font-size: 16px;
}

.side-member[hidden],
.member-search-empty[hidden] {
    display: none;
}

.member-search-empty {
    padding: 6px;
    font-size: 0.6rem;
}

.side-context p {
    margin: 6px 0;
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.6;
}

.side-context small {
    display: block;
    color: var(--dim);
    font-size: 0.56rem;
    line-height: 1.6;
}

.side-invite {
    width: calc(100% - 28px);
    margin: 4px 12px 14px;
}

.side-member-list {
    padding: 4px 8px 14px;
}

.side-member {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 6px;
    border: 1px solid transparent;
}

.side-member:hover {
    border-color: var(--line);
    background: var(--bg);
}

.side-member .avatar {
    width: 30px;
    height: 30px;
}

/* Online (green) or offline (grey) dot on the picture's bottom-right corner. */
.side-member-pic {
    position: relative;
    flex: none;
}

.online-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: #777;
}

.online-dot.is-online {
    background: #4ade80;
}

.side-member-name {
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-align: left;
}

.side-member-name strong,
.side-member-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-member-name strong {
    color: var(--accent);
    font-size: 0.82rem;
}

.side-member-name:hover strong {
    text-decoration: underline;
}

.side-member-name small {
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.52rem;
}

.perm-gear {
    display: grid;
    width: 28px;
    height: 28px;
    flex: none;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
}

.perm-gear:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.perm-gear .material-symbols-outlined {
    font-size: 14px;
}

.pod-pending {
    margin: 0 12px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.pod-pending h3 {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.6rem;
}

.pod-pending > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
}

.pod-pending > div span {
    flex: 1;
    font-size: 0.8rem;
}

.pod-pending button {
    padding: 5px 8px;
    font-size: 0.54rem;
}

/* ---------- Rooms (chat) ---------- */

.chat-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* The open Pod's (or room's) background glow (Customization in its settings) as soft, blurry
   light behind the page: glows coming down from both top corners and up from the bottom (pods.js sets
   --page-accent; transparent for none). The stars still show through. */
#podPage .pod-shell,
#chatLayout {
    --page-glow:
        radial-gradient(ellipse 55% 50% at 0% 0%, color-mix(in srgb, var(--page-accent, transparent) 20%, transparent), transparent 70%),
        radial-gradient(ellipse 55% 50% at 100% 0%, color-mix(in srgb, var(--page-accent, transparent) 20%, transparent), transparent 70%),
        radial-gradient(ellipse 80% 45% at 50% 100%, color-mix(in srgb, var(--page-accent, transparent) 14%, transparent), transparent 70%);
    background: var(--page-glow);
}

/* (Lined up with the screen, like the strip above the room banner, so the two match.) */
#chatLayout {
    background-attachment: fixed;
}

.chat-column {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

/* Sideways scrolling is off: the strip above the sticky banners reaches a little past the
   edges, which would otherwise add a horizontal scrollbar. */
.messages {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 16px;
}

.welcome {
    position: sticky;
    top: 22px;
    z-index: 3;
    margin: 22px 22px 14px;
    padding: 32px 22px 18px;
}

.welcome .room-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.room-banner-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    border: 1px solid var(--border);
    background: rgba(31, 31, 31, 0.6);
    color: var(--accent);
}

.room-banner-icon .material-symbols-outlined {
    font-size: 18px;
}

.welcome h1 {
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

.welcome p {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 0.64rem;
    line-height: 1.6;
}

.welcome-line {
    display: none;
}

.date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 22px 12px;
    color: var(--dim);
    font-size: 0.56rem;
    letter-spacing: 0.2em;
}

.date-divider::before,
.date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

/* Messages are cards like the site's posts. */
.message {
    position: relative;
    display: flex;
    gap: 12px;
    margin: 0 22px 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.message:hover {
    border-color: var(--accent);
}

/* Follow-ups from the same person join the card above. */
.message.grouped {
    margin-top: -11px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-soft);
}
.message.grouped:hover {
    border-top: 1px dashed var(--accent);
}

/* The line between a message and its follow-up belongs to the follow-up (drawn on top), so it
   lights up when either one is hovered. */
.message:hover + .message.grouped {
    border-top-color: var(--accent);
}

.message .avatar {
    width: 36px;
    height: 36px;
}

.message .avatar-placeholder {
    width: 36px;
    flex: none;
}

.message-body {
    flex: 1;
    min-width: 0;
}

/* Centred, not on the text baseline: the role tag starts with an icon, whose baseline sits low. */
.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.message-header strong {
    color: var(--accent);
    font-size: 0.9rem;
    cursor: pointer;
}

.message-header .username:hover {
    text-decoration: underline;
}

.message-header time {
    color: var(--dim);
    font-size: 0.54rem;
}

.message-text {
    color: var(--text);
    font-size: 0.74rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}

/* Links in a message (open in a new tab). */
.message-text .message-link {
    color: var(--accent);
    overflow-wrap: anywhere;
}

/* Pictures from links, under the message's text (up to 3). */
.message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.message-image {
    display: block;
    max-width: 100%;
}

.message-image img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 260px;
    border: 1px solid var(--line);
    background: var(--panel);
    object-fit: contain;
}

.message-image:hover img,
.message-image:focus-visible img {
    border-color: var(--accent);
}

/* More than one: a row of square tiles (3, then a "+2" tile for the rest). */
/* (A grid of up to 4 equal squares, so the "+2" tile stays on the same row on narrow screens.) */
.message-images.is-several {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 110px));
    gap: 6px;
}

.message-images.is-several .message-image-wrap,
.message-images.is-several .message-image {
    width: 100%;
}

.message-images.is-several .message-image img,
.message-image-more {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 1;
    object-fit: cover;
}

.message-image-more {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

/* The next picture, blurred and darkened behind the "+2". */
.message-image-more img {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    object-fit: cover;
    filter: blur(5px) brightness(0.55);
}

.message-image-more span {
    position: relative;
}

.message-image-more:hover,
.message-image-more:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 520px) {
    .message-images.is-several {
        grid-template-columns: repeat(4, minmax(0, 72px));
    }
}

/* @username in a message: in the accent colour, opens their profile pop-up. */
.message-text .message-mention {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.message-text .message-mention:hover,
.message-text .message-mention:focus-visible {
    text-decoration: underline;
}

/* Blocked either way: "Blocked user" with the text hidden. */
.message.is-blocked .blocked-name {
    color: var(--dim);
}

.message-text.message-hidden {
    color: var(--dim);
    font-style: italic;
}

/* Reply / react / delete sit half on the card's top border. */
.message-tools {
    position: absolute;
    top: 0;
    right: 14px;
    z-index: 2;
    display: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    background: var(--panel);
    transform: translateY(-50%);
}

.message:hover .message-tools,
.message:focus-within .message-tools {
    display: flex;
}

/* Touch screens: no tools on (sticky) hover; holding a message shows them (pods.js adds
   .show-tools). Holding doesn't select text or open the phone's menu here. */
@media (hover: none) {
    .message:hover .message-tools,
    .message:focus-within .message-tools {
        display: none;
    }

    .message.show-tools .message-tools {
        display: flex;
    }

    .message.show-tools {
        border-color: var(--accent);
    }

    .message,
    .message-text {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Phones and touch screens: no tooltips (a tap would leave them stuck open). */
@media (max-width: 760px), (hover: none) {
    .pods-page .badge-tooltip::before,
    .pods-page .badge-tooltip::after {
        display: none;
    }
}

.message-tools button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--muted);
}

.message-tools button:hover {
    background: var(--panel-hover);
    color: var(--accent);
}

.message-tools .material-symbols-outlined {
    font-size: 16px;
}

/* Reactions look like the site's reaction buttons. */
.reaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 6px 0 0;
    padding: 4px 9px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 0.8rem;
}

.reaction span {
    color: var(--muted);
    font-size: 0.6rem;
}

.reaction:hover {
    border-color: var(--accent);
}

.reaction.active {
    border-color: var(--accent);
    box-shadow: 2px 2px 0 var(--accent);
}

.reaction.active span {
    color: var(--accent);
}

.empty-results {
    padding: 30px;
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
}

.composer-zone {
    flex: none;
    padding: 6px 22px 18px;
}

/* GIFs and pictures waiting to be sent (up to 5): a row of small boxes above the message box,
   each with the Favorites pop-up's X in its corner. (The space under it is for "name is
   typing...".) */
.attach-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.attach-bar[hidden] {
    display: none;
}

.attach-item {
    position: relative;
    width: 72px;
    height: 72px;
    flex: none;
    border: 2px solid var(--border);
    background: var(--panel);
}

.attach-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-bottom: 0;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.62rem;
}

/* "↩ name: their message" (one line, cut off with "…"), together on the left. */
.reply-to {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.reply-bar strong {
    flex: none;
    color: var(--accent);
    font-size: 0.7rem;
}

.reply-to .material-symbols-outlined {
    align-self: center;
    color: var(--accent);
    font-size: 16px;
}

.reply-preview {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
}

/* The close X, with a line in front of it the full height of the bar (like the bar's border). */
.reply-bar > button {
    display: grid;
    flex: none;
    align-self: stretch;
    place-items: center;
    margin: -8px -12px -8px 0;
    padding: 0 10px;
    border-left: 2px solid var(--border);
}

/* The bar and the message box are one frame: both turn lavender while you type. */
.composer-zone:focus-within .reply-bar,
.composer-zone:focus-within .reply-bar > button {
    border-color: var(--accent);
}

.reply-bar button:hover {
    color: var(--accent);
}

/* The message box is framed like the site's search box. */
.composer {
    display: flex;
    min-height: 54px;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    border: 2px solid var(--border);
    background: var(--panel);
}

.composer:focus-within {
    border-color: var(--accent);
}

.composer button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    color: var(--muted);
}

.composer button:hover {
    color: var(--accent);
}

.composer button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.composer .send {
    border: 2px solid var(--accent);
    background: var(--accent);
    color: var(--bg);
}

.composer .send:hover {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
}

.composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 25px;
    max-height: 140px;
    margin-bottom: 4px;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text);
    font-family: "Orbitron", sans-serif;
    font-size: 0.74rem;
    line-height: 25px;
    resize: none;
}

.composer textarea::placeholder {
    color: #aaa;
}

.composer textarea:disabled {
    cursor: not-allowed;
}

.composer-tip {
    margin-top: 7px;
    color: var(--dim);
    font-size: 0.54rem;
    text-align: right;
}

/* ---------- Pop-up contents (the frame itself is the site's .post-dialog) ---------- */

.post-dialog-note {
    margin: 0;
}

.banner-color-field .edit-input {
    height: 44px;
    padding: 4px;
    cursor: pointer;
}

.settings-intro,
.access-help,
.invite-note,
.report-summary {
    margin: 0;
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.7;
}

.settings-label {
    display: block;
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.setting-row > .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent);
}

.setting-row > div {
    flex: 1;
    min-width: 0;
}

.setting-row strong,
.setting-row small {
    display: block;
}

/* A choice in a settings row (the site's input look, sized to its options): Pod invites. */
.setting-row .setting-select {
    width: auto;
    flex: none;
    padding: 7px 10px;
    font-size: 0.62rem;
}

.setting-row strong {
    font-size: 0.66rem;
}

.setting-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.5;
}

.setting-row.muted {
    opacity: 0.6;
}

/* Room alerts pop-up: each Pod is a drop-down of its rooms, each room with its own switch. */
.room-alerts-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-alerts-menu > .setting-row {
    margin-bottom: 4px;
}

.alert-pod {
    border: 1px solid var(--line);
    background: var(--bg);
}

.alert-pod summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.alert-pod summary::-webkit-details-marker {
    display: none;
}

.alert-pod summary:hover,
.alert-pod[open] summary {
    color: var(--accent);
}

.alert-pod-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent);
}

.alert-pod-icon .material-symbols-outlined {
    font-size: 15px;
}

.alert-pod summary strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-pod-count {
    color: var(--muted);
    font-size: 0.58rem;
}

/* The arrow points up while the drop-down is open. */
.alert-pod[open] summary > .material-symbols-outlined:last-child {
    transform: rotate(180deg);
}

.alert-pod-rooms {
    padding: 0 10px 2px;
}

.alert-pod-rooms .setting-row {
    background: var(--panel);
}

.alert-pod-rooms > p {
    margin: 0 0 10px;
    font-size: 0.62rem;
}

/* All room alerts off: the room switches stay, dimmed, until it's back on. */
.room-alerts-menu.is-paused .alert-pod {
    opacity: 0.5;
}

/* "View" (Blocked users) at the end of its settings row. */
.setting-row .setting-button {
    flex: none;
    padding: 7px 12px;
    font-size: 0.62rem;
}

.setting-row input[type="checkbox"],
.permission-option input,
.room-private-option input,
.private-room-members input {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Pod shortcut picker */
.shortcut-options {
    max-height: 320px;
    padding: 2px 4px 4px 0;
    overflow-y: auto;
}

.shortcut-option {
    display: block;
    margin: 0 0 8px;
    cursor: pointer;
}

.shortcut-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.shortcut-option > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    font-size: 0.66rem;
}

.shortcut-option .material-symbols-outlined {
    font-size: 17px;
    color: var(--accent);
}

.shortcut-option small {
    margin-left: auto;
    color: var(--dim);
    font-size: 0.54rem;
    white-space: nowrap;
}

.shortcut-option input:checked + span {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 2px 2px 0 var(--accent);
}

.shortcut-option input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Permission and private-room checkboxes */
.permission-option,
.room-private-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    cursor: pointer;
}

.permission-option:has(input:checked),
.room-private-option:has(input:checked) {
    border-color: var(--accent);
}

.permission-option span,
.room-private-option span {
    display: grid;
    flex: 1;
    grid-template-columns: 18px 1fr;
    align-items: center;
    column-gap: 10px;
}

.permission-option .material-symbols-outlined,
.room-private-option .material-symbols-outlined {
    grid-row: 1 / 3;
    font-size: 17px;
    color: var(--accent);
}

.permission-option strong,
.room-private-option strong {
    font-size: 0.66rem;
}

.permission-option small,
.room-private-option small {
    grid-column: 2;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.5;
}

.private-room-members {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
}

.private-room-members legend {
    padding: 0 6px;
    color: var(--accent);
    font-size: 0.58rem;
}

.private-room-members p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.6;
}

.private-room-members > label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    cursor: pointer;
}

.private-room-members > label span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.private-room-members .avatar {
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
}

.private-room-members > small {
    color: var(--muted);
    font-size: 0.56rem;
}

/* When creating a room, the member picker only shows once "Private room" is ticked. */
#modalForm:has(.room-private-option) .private-room-members {
    display: none;
}

#modalForm:has(.room-private-option input:checked) .private-room-members {
    display: block;
}

/* Banner backdrop and room icon pickers */
.backdrop-options,
.room-icon-options {
    margin: 0;
    padding: 0;
    border: 0;
}

.backdrop-options legend,
.room-icon-options legend {
    grid-column: 1 / -1;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.6rem;
}

.backdrop-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.room-icon-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.backdrop-options label,
.room-icon-options label {
    position: relative;
    text-align: center;
    cursor: pointer;
}

.backdrop-options input,
.room-icon-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.backdrop-options label > span {
    position: relative;
    display: block;
    height: 44px;
    margin-bottom: 6px;
    overflow: hidden;
    border: 2px solid var(--line);
}

/* Each backdrop's preview is a real banner (the same rules as the Pod and room banners), drawn
   at banner size and shrunk to a quarter, so its rings, stars and stripes look the same. */
.backdrop-sample > .banner-theme {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 176px;
    zoom: 0.25;
    pointer-events: none;
}

.backdrop-options strong {
    color: var(--muted);
    font-size: 0.5rem;
    font-weight: 600;
}

.room-icon-options label > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 auto 6px;
    border: 2px solid var(--line);
    background: var(--bg);
}

.room-icon-options .material-symbols-outlined {
    font-size: 19px;
}

.room-icon-options small {
    color: var(--muted);
    font-size: 0.52rem;
    text-transform: capitalize;
}

.backdrop-options input:checked + span,
.room-icon-options input:checked + span {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 2px 2px 0 var(--accent);
}

.backdrop-options input:focus-visible + span,
.room-icon-options input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Site role tags (the site's .perm-role, as in Moonbase Control), sized for each spot here. */
.pods-page .perm-role {
    gap: 4px;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    text-transform: none;
}

.pods-page .perm-role .material-symbols-outlined {
    font-size: 0.85rem;
}

.side-member-name .perm-role,
.friend-copy .perm-role,
.profile-pop-head .perm-role {
    display: flex;
    margin-top: 3px;
}

.profile-pop-head .perm-role {
    margin-top: 6px;
    font-size: 0.62rem;
}

.profile-pop-head .perm-role .material-symbols-outlined {
    font-size: 1rem;
}

/* The profile pop-up stays put at the top when its tabs change, so only its bottom edge
   moves instead of the whole box re-centring. */
.post-dialog:has(.profile-pop),
.post-dialog:has(.profile-pop-loading) {
    margin-top: max(40px, 8vh);
    margin-bottom: auto;
}

/* No buttons on its bottom border, so it doesn't need the room the site leaves for them. */
.user-dialog-body {
    padding-bottom: 22px;
}

/* Profile pop-up (click anyone's name): picture and name, friend buttons, then tabs. */
.profile-pop {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-pop-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-detail-avatar {
    display: grid;
    width: 56px;
    height: 56px;
    flex: none;
    place-items: center;
    border: 2px solid var(--border);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.profile-pop-head strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--accent);
    font-family: var(--font-plain);
    font-size: 1.15rem;
    letter-spacing: normal;
}

/* The site's "Follows you" tag, in normal capitals. */
.pods-page .profile-follows-you {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}

.profile-pop-head small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.58rem;
}

.profile-pop-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    /* Room for the buttons' offset shadows. */
    padding: 0 4px 4px 0;
}

.profile-pop-actions .space-button {
    padding: 9px 14px;
    font-size: 0.66rem;
    text-decoration: none;
}

/* "Friends" / "Request sent": a label, not a button. */
.profile-pop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 600;
}

.profile-pop-badge .material-symbols-outlined {
    font-size: 15px;
}

/* Full profile, Block and Report sit together on the right. */
.profile-pop-link,
.profile-pop-block,
.profile-pop-report {
    margin-left: auto;
}

:is(.profile-pop-link, .profile-pop-block) + :is(.profile-pop-block, .profile-pop-report) {
    margin-left: 0;
}

.profile-pop-actions .icon-button.profile-pop-link,
.profile-pop-actions .icon-button.profile-pop-block,
.profile-pop-actions .icon-button.profile-pop-report {
    width: 34px;
    height: 34px;
}

/* Full profile is a link: no underline under its icon. */
.profile-pop-actions a.profile-pop-link {
    text-decoration: none;
}

.profile-pop-link .material-symbols-outlined,
.profile-pop-block .material-symbols-outlined,
.profile-pop-report .material-symbols-outlined {
    font-size: 18px;
}

.profile-pop-block:hover,
.profile-pop-report:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.profile-pop-tabs {
    display: flex;
    gap: 8px;
    padding: 0 4px 4px 0;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 14px;
}

.profile-pop-tabs .space-button {
    padding: 8px 12px;
    font-size: 0.64rem;
    white-space: nowrap;
}

/* Each tab scrolls inside itself, so long lists don't stretch the pop-up. */
.profile-pop-panel {
    max-height: min(320px, 42vh);
    overflow-y: auto;
    /* Space between the list and the scrollbar. */
    padding-right: 6px;
}

.profile-pop-panel[hidden] {
    display: none;
}

.profile-pop-panel .profile-modal-rooms {
    padding-top: 0;
    border-top: 0;
}

.profile-pop-panel .profile-modal-rooms > strong:not(:first-child) {
    margin-top: 16px;
}

.profile-pop-panel p,
.profile-pop-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.7;
}

.profile-pop-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.profile-pop-trust .trust-star {
    width: 40px;
    height: 40px;
    font-size: 40px;
}

.profile-pop-trust strong {
    display: block;
    font-size: 0.72rem;
}

.profile-pop-trust small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.58rem;
    line-height: 1.6;
}

.profile-modal-rooms {
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.profile-modal-rooms > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.6rem;
}

.profile-modal-rooms > p {
    color: var(--muted);
    font-size: 0.62rem;
}

.profile-modal-rooms button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    text-align: left;
}

.profile-modal-rooms button:hover {
    border-color: var(--accent);
}

.profile-modal-rooms button > .material-symbols-outlined {
    flex: none;
    font-size: 17px;
    color: var(--accent);
}

.profile-modal-rooms button > span {
    flex: 1;
    min-width: 0;
}

/* The arrow keeps its own size, at the row's right end (dim; accent on hover). */
.profile-modal-rooms button > .go-arrow {
    flex: none;
    color: var(--dim);
}

.profile-modal-rooms button:hover > .go-arrow,
.profile-modal-rooms button:focus-visible > .go-arrow {
    color: var(--accent);
}

/* The Pod's picture stays a small square (the row's text takes the rest of the width). */
.profile-modal-rooms button > .pod-row-picture {
    width: 30px;
    height: 30px;
    flex: none;
}

.profile-modal-rooms button b,
.profile-modal-rooms button small {
    display: block;
}

.profile-modal-rooms button b {
    font-size: 0.64rem;
}

.profile-modal-rooms button small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.54rem;
}

.profile-modal-rooms .user-room-link {
    width: calc(100% - 16px);
    margin-left: 16px;
    border-style: dashed;
}

.report-link {
    align-self: flex-start;
    color: var(--danger);
    font-size: 0.6rem;
    text-decoration: underline;
}

.report-link:hover {
    color: var(--text);
}

/* Trust star: fills from the bottom as the trust level rises. */
/* The outline star is the icon at the box's full size; the "liquid" fills it from the bottom. */
.trust-star {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    font-size: 18px;
    line-height: 1;
}

.trust-star > .material-symbols-outlined {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: inherit;
}

.trust-star-liquid {
    position: absolute;
    inset: 1px;
    clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 57%, 79% 92%, 50% 72%, 21% 92%, 31% 57%, 2% 35%, 38% 34%);
    background: var(--panel-hover);
}

.trust-star-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #eee8ff, var(--accent));
}

/* Toasts use the site's .toast-stack / .toast; just the text size here. */
.toast-stack .toast {
    font-size: 0.66rem;
    line-height: 1.6;
}

/* Phones, in a room: toasts at the top, just under the room's banner (pods.js sets the top). */
.toast-stack.is-top {
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
}

/* Scrims behind the phone drawers (shown by the script). */
.mobile-scrim,
.member-scrim {
    display: none;
}

/* ---------- Smaller screens ---------- */


@media (max-width: 1100px) {
    .members,
    .pod-members-sidebar {
        width: 230px;
    }

    .pod-inner {
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 980px) {
    

    

    

    .hero-copy {
        max-width: 65%;
    }

    .global-nav .space-button {
        padding: 0 11px;
    }
}

@media (max-width: 760px) {
    :root {
        /* The logo row, then the nav tabs a little under it. */
        --bar-h: 104px;
        --rail-w: 0px;
    }

    /* Friends: the tabs row a little closer to the heading. */
    .page-head {
        margin-bottom: 6px;
    }

    /* Follows the visible area when the phone keyboard is open (set by the script). */
    .app,
    .app.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        height: var(--chat-viewport-height, 100dvh);
    }

    /* Two rows: the logo and the quick actions on top, the nav centred under them. */
    .globalbar {
        align-items: flex-end;
        gap: 8px;
        padding: 0 10px;
    }

    .pods-page > .sidebar {
        top: 12px;
        right: 12px;
        flex-direction: row;
        gap: 8px;
    }

    .global-nav {
        margin: 0 auto;
    }

    /* Icon and name, a little smaller. */
    .global-nav .space-button {
        height: 30px;
        padding: 0 14px;
        font-size: 0.64rem;
    }

    .global-nav .space-button.is-active {
        height: 32px;
    }

    .pods-page .icon-button {
        width: 40px;
        height: 40px;
    }

    .pods-page > .sidebar .icon-button {
        width: 42px;
        height: 42px;
    }

    /* The sidebar slides in over the page. */
    .app-sidebar,
    .app.sidebar-collapsed .app-sidebar {
        position: fixed;
        top: var(--bar-h);
        bottom: 0;
        left: 0;
        /* Over the top bar, so its top border shows over the open nav tab. */
        z-index: 26;
        /* Its right edge lines up with the Friends tab's (measured by pods.js). */
        width: var(--nav-right, min(300px, 88vw));
        overflow: visible;
        /* (All four, even if it was last closed on desktop, which takes its border off.) */
        border: 2px solid var(--border);
        visibility: visible;
        transform: translateX(-120%);
    }

    /* While it's open the nav tabs go darker, like the page under the scrim. */
    .app:has(.app-sidebar.open, .members.open, .pod-members-sidebar.open) .global-nav > .profile-tab:not(.nav-toggle) {
        filter: brightness(0.45);
    }

    /* Open, even if the sidebar was last closed on desktop. */
    .app-sidebar.open,
    .app.sidebar-collapsed .app-sidebar.open {
        transform: none;
    }

    /* Pop-ups: content starts a little higher under the title tag. */
    .pods-page .post-dialog-body {
        padding-top: 24px;
    }

    .sidebar-scroll {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .main {
        grid-column: 1;
        border-right: none;
    }

    .mobile-scrim:not(.hidden),
    .member-scrim:not(.hidden) {
        position: fixed;
        inset: var(--bar-h) 0 0;
        z-index: 20;
        display: block;
        width: 100%;
        background: rgba(10, 10, 14, 0.72);
        backdrop-filter: blur(2px);
    }

    .member-scrim:not(.hidden) {
        z-index: 31;
    }

    /* Member panels become drawers from the right, framed like the Quick access drawer (a border
       all round, its top one over the open nav tab). */
    .members,
    .pod-members-sidebar {
        position: fixed;
        top: var(--bar-h);
        right: 0;
        bottom: 0;
        z-index: 32;
        display: none !important;
        width: min(320px, 86vw);
        border: 2px solid var(--border);
    }

    .members.open {
        display: block !important;
    }

    .pod-members-sidebar.open {
        display: flex !important;
    }

    .member-sidebar-head button:not(.icon-button) {
        display: grid;
    }

    .pod-top-row {
        top: 20px;
    }

    .directory-inner,
    .friends-inner,
    .pod-inner {
        padding: 18px 14px 12px;
    }

    .welcome::before {
        left: -16px;
        right: -16px;
    }

    .pod-entrance {
        min-height: 170px;
        padding: 32px 18px 18px;
    }

    /* Rooms: a smaller banner and messages, so more of the conversation fits. */
    .welcome {
        top: 20px;
        margin: 20px 12px 12px;
        padding: 26px 14px 12px;
    }

    .welcome h1 {
        font-size: 0.85rem;
    }

    .welcome p {
        margin-top: 6px;
        font-size: 0.58rem;
    }

    .room-banner-icon {
        width: 28px;
        height: 28px;
    }

    .room-banner-icon .material-symbols-outlined {
        font-size: 15px;
    }

    .message {
        gap: 10px;
        padding: 10px;
    }

    .message .avatar,
    .message .avatar-placeholder {
        width: 30px;
    }

    .message .avatar {
        height: 30px;
    }

    .message-header strong {
        font-size: 0.8rem;
    }

    .message-text {
        font-size: 0.68rem;
        line-height: 1.6;
    }

    /* Room and Pod cards: no fixed height, just their content. */
    .directory-card {
        min-height: 0;
        padding: 12px;
    }

    /* Members button shrinks to its icon. */
    /* Just the icon, centred (the "Members" word and its gap go). */
    .welcome .room-member-button {
        width: 38px;
        gap: 0;
        padding: 0;
        font-size: 0;
    }

    .welcome .room-member-button > span:not(.material-symbols-outlined) {
        display: none;
    }

    .message {
        margin: 0 12px 10px;
    }

    .message.grouped {
        margin-top: -11px;
    }

    .date-divider {
        margin: 14px 12px 12px;
    }

    .composer-zone {
        padding: 6px 12px calc(12px + env(safe-area-inset-bottom));
    }

    body.chat-keyboard-open .composer-zone {
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .composer {
        align-items: center;
    }

    .composer textarea {
        max-height: 100px;
        margin-bottom: 0;
    }

    .hero-copy {
        max-width: 75%;
        padding: 36px 26px 30px;
    }

    .planet {
        width: 150px;
    }

    .orbit {
        width: 240px;
        height: 110px;
    }

    .orbit-two {
        width: 290px;
        height: 140px;
    }

    /* Pods page: the hero only as tall as its words, and tighter gaps between the parts. */
    .home-hero {
        min-height: 0;
        margin-top: 20px;
    }

    /* The Quick access toggle goes inside the ourPods tag, just its icon, with a line between
       it and the name (the tag's full height). */
    .home-hero > .sidebar-toggle {
        display: none;
    }

    .pods-page .hero-pill > .icon-button.sidebar-toggle {
        display: flex;
        align-self: stretch;
        width: 34px;
        height: auto;
        margin: -7px 2px -7px -12px;
        border: 0;
        border-right: 2px solid var(--border);
        background: none;
    }

    /* Create Pod sits on the hero's top border, in the right corner (not in the tabs row). */
    .home-hero > .directory-create {
        position: absolute;
        top: 0;
        right: 20px;
        z-index: 3;
        display: flex;
        padding: 8px 12px;
        font-size: 0.62rem;
        transform: translateY(-50%);
    }

    .page-toolbar > .directory-create[data-action="add-pod"] {
        display: none;
    }

    /* Phones: the tabs fill their row (the search is in the hero or the heading, pods.js). */
    .page-toolbar {
        align-items: center;
        gap: 12px;
        margin: 20px 0 14px;
    }

    /* Pods: the search sits on the hero's bottom border in the right corner, and widens to
       the left along it. The tabs row moves down to clear it. */
    .home-hero > .pods-search {
        position: absolute;
        right: 20px;
        bottom: 0;
        z-index: 3;
        transform: translateY(50%);
    }

    .home-hero > .pods-search.is-open {
        width: calc(100% - 40px);
    }

    .home-hero + .page-toolbar {
        margin-top: 34px;
    }

    /* Friends: the search is in the heading row (pods.js), on the right, and only widens into
       the space beside the heading. */
    .page-head .directory-title {
        flex: none;
    }

    .page-head .pods-search {
        flex: 0 1 auto;
        min-width: 42px;
        margin-left: auto;
    }

    .page-head .pods-search.is-open {
        width: 100%;
    }

    .pod-tabs,
    .friends-tabs {
        overflow-x: visible;
        margin-bottom: 0;
    }

    .pod-tabs {
        display: grid;
        grid-template-columns: auto repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .pod-tabs .space-button {
        min-width: 0;
        justify-content: center;
        padding-right: 8px;
        padding-left: 8px;
        /* Smaller words (the Favorites star keeps its own px size). */
        font-size: 0.62rem;
    }

    .pod-tabs .tab-extra {
        display: none;
    }


    /* Favorites tab shows a star instead of the word. */
    .pod-tabs [data-tab="favorites"] .material-symbols-outlined {
        display: block;
    }

    .pod-tabs [data-tab="favorites"] .tab-label {
        display: none;
    }

    .toast-stack {
        bottom: 20px;
    }
}

@media (max-width: 520px) {
    .directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-title {
        align-items: flex-start;
    }

    .directory-title h1 {
        font-size: 1.4rem;
    }

    /* Create buttons beside a page heading shrink to their icon. */
    .directory-title:has(h1) .directory-create {
        padding: 10px;
        font-size: 0;
    }

    .directory-title:has(h1) .directory-create .material-symbols-outlined {
        font-size: 18px;
    }

    .hero-copy {
        max-width: 100%;
        padding: 30px 18px 22px;
    }

    .home-hero h1 {
        font-size: 1.35rem;
    }

    .hero-art {
        opacity: 0.35;
    }

    .planet,
    .orbit {
        left: 88%;
    }

    

    

    

    

    

    

    .pod-entrance h1 {
        font-size: 1.2rem;
    }

    /* No room for the "Pod entrance" tag beside the toggle and the banner buttons. */
    .pod-entrance .page-eyebrow {
        display: none;
    }

    .pod-gate {
        padding: 24px 16px;
    }

    .friends-panel {
        padding: 30px 10px 10px;
    }

    .backdrop-options {
        gap: 4px;
    }

    .backdrop-options label > span {
        height: 36px;
    }

}

/* ---------- Live data pieces (pods.js) ---------- */

/* Profile pictures fill their square (the site's astronaut picture when there isn't one). */
.avatar,
.user-detail-avatar {
    overflow: hidden;
    background: var(--panel);
}

.avatar img,
.user-detail-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The whole friend card opens their profile pop-up. */
.friend-card {
    cursor: pointer;
}

.friend-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Site role tag right after the username. */
.friend-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.friend-name {
    min-width: 0;
}

.friend-name-row .perm-role {
    flex: none;
    margin-top: 0;
}

.friend-card:hover .friend-name strong {
    text-decoration: underline;
}

/* The name in the profile pop-up, with "Follows you" / "Blocked" tags on a line under it. */
.profile-pop-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.profile-pop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* (The site's tag has a gap on its left for sitting after a name; here it starts the line.) */
.profile-pop-tags > .profile-follows-you {
    margin-left: 0;
}

/* "Replying to" line above a message. */
.message-reply {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin: 2px 0 4px;
    color: var(--muted);
    font-size: 0.62rem;
}

.message-reply .material-symbols-outlined {
    font-size: 15px;
}

.message-reply b {
    flex: none;
    color: var(--text);
    font-family: var(--font-plain);
}

.message-reply span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Emoji picker above the message box. */
.composer-zone {
    position: relative;
}

/* "name is typing..." just above the message box (and reply bar), under a GIF or picture waiting
   to be sent. It floats there (instead of taking a line), so the messages don't jump each time
   someone starts or stops typing. */
.composer-stack {
    position: relative;
}

.typing-indicator {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    background: var(--bg);
    color: var(--dim);
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.typing-indicator[hidden] {
    display: none;
}

/* @mentions: the site's search suggestions (style.css .search-suggestions), above the message
   box instead of under a search box. */
/* (Placed on the reply bar / message box, so they open right above it.) */
.mention-suggestions {
    top: auto;
    bottom: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: min(260px, 40vh);
    border-top: 2px solid var(--border);
}

.mention-suggestion {
    justify-content: flex-start;
    padding: 8px 12px;
}

.mention-suggestion.is-active {
    background: var(--panel-hover);
    color: var(--accent);
}

.mention-suggestion .avatar {
    width: 26px;
    height: 26px;
}

/* :emoji suggestions: the emoji where a person's picture would be. */
.mention-emoji {
    width: 26px;
    flex: none;
    font-size: 1.1rem;
    text-align: center;
}

.mention-name {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.mention-name small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Emoji menu above the message box: groups of emojis, scrolling inside the menu. (The GIF picker
   and the Favorites pop-up use the same frame.) */
.emoji-picker,
.fav-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 2px);
    z-index: 5;
    width: min(380px, 100%);
    max-height: min(340px, 50vh);
    overflow-y: auto;
    padding: 4px 10px 10px;
    border: 2px solid var(--border);
    background: var(--panel);
}

.emoji-group-title {
    display: block;
    margin: 8px 0 6px;
    color: var(--accent);
    font-size: 0.58rem;
}

.emoji-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
}

.emoji-picker[hidden],
.fav-picker[hidden] {
    display: none;
}

.emoji-picker button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    font-size: 1.1rem;
}

.emoji-picker button:not(.profile-tab):hover,
.emoji-picker button:not(.profile-tab):focus-visible {
    background: var(--bg);
    outline: 1px solid var(--accent);
}

/* The GIF picker and Favorites pop-up keep one size (their contents scroll inside), so they don't
   grow and shrink as tabs change or GIFs load. */
.gif-picker,
.fav-picker {
    height: min(340px, 50vh);
}

/* GIF picker (GIPHY): the emoji menu's frame, with the site's search box at the top (staying put
   while the GIFs scroll), a grid of GIFs and GIPHY's credit at the bottom. */
.gif-search {
    position: sticky;
    top: -4px;
    z-index: 1;
    margin: 6px 0 8px;
    padding: 9px 12px;
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

/* (Squares made with padding, a share of the width: the phone menu's fixed-height scrolling grid
   squashed aspect-ratio squares into strips.) */
.gif-picker .gif-choice {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 100%;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--bg);
}

.gif-choice img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gif-note {
    grid-column: 1 / -1;
    margin: 12px 0;
    color: var(--muted);
    font-size: 0.62rem;
}

.gif-credit {
    margin: 8px 0 0;
    color: var(--dim);
    font-size: 0.52rem;
    text-align: right;
}

/* Favorites pop-up: GIFs / Images tabs (staying put while the grid scrolls), then a grid of
   favorites; tap one to send it, or its X to remove it. */
.fav-tabs {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 -10px 10px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
}

.fav-tabs .profile-tab {
    padding: 7px 12px;
    font-size: 0.6rem;
}

.fav-count {
    color: var(--muted);
}

.fav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.fav-item {
    position: relative;
}

.fav-send {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 100%;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--bg);
}

.fav-send:hover,
.fav-send:focus-visible {
    border-color: var(--accent);
}

.fav-send img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A favorite whose link stopped working: just the empty square (it can still be removed). */
.fav-send.is-broken img {
    visibility: hidden;
}

.fav-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.fav-remove:hover,
.fav-remove:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.fav-remove .material-symbols-outlined {
    font-size: 14px;
}

/* The star on a picture in a message (add to / remove from favorites). Shows when you hover the
   picture (favorite or not); always on touch screens. */
.message-image-wrap {
    position: relative;
    display: block;
    max-width: 100%;
}

.message-image-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
}

.message-image-wrap:hover .message-image-fav,
.message-image-fav:focus-visible {
    display: grid;
}

/* Hovered: a see-through yellow star. A favorite: solid yellow (the site's gold, style.css). */
.message-image-fav:hover {
    border-color: #ffd27a80;
    color: #ffd27a80;
}

.message-image-fav.is-on {
    border-color: #ffd27a;
    color: #ffd27a;
}

.message-image-fav .material-symbols-outlined {
    font-size: 16px;
}

.message-image-fav:hover .material-symbols-outlined,
.message-image-fav.is-on .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Touch screens: no star on the picture; it's in the picture viewer (tap the picture). */
@media (hover: none) {
    .message-images .message-image-fav {
        display: none;
    }
}

/* Picture viewer (the site's pop-up): the GIF or picture as big as fits, then a row of buttons. */
.post-dialog:has(.picture-view-body) {
    width: min(640px, calc(100vw - 32px));
}

.picture-view {
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--bg);
}

/* Small pictures are scaled up to fill the space too (keeping their shape). */
/* A message with GIFs and pictures: two title tags (the site's pop-up title tag look), tap one to
   see that set. The one showing is in the accent colour. */
.post-dialog-title.picture-view-kinds {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
}

.picture-view-kind {
    padding: 7px 12px;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
}

.picture-view-kind:hover,
.picture-view-kind:focus-visible,
.picture-view-kind.is-active {
    color: var(--accent);
}

.picture-view-step[hidden] {
    display: none;
}

/* Previous / next (a message with more than one), over the picture's sides. */
.picture-view {
    position: relative;
}

.picture-view-step {
    position: absolute;
    top: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 2px solid var(--border);
    background: var(--panel);
    color: var(--text);
    transform: translateY(-50%);
}

.picture-view-step.is-prev {
    left: 8px;
}

.picture-view-step.is-next {
    right: 8px;
}

.picture-view-step:hover,
.picture-view-step:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.picture-view img {
    display: block;
    width: 100%;
    height: min(400px, 48vh);
    object-fit: contain;
}

/* The buttons: the site's pop-up buttons, on the frame's bottom edge at the right (style.css). */
.picture-view-actions .space-button {
    gap: 8px;
    text-decoration: none;
}

.picture-view-actions .material-symbols-outlined {
    font-size: 18px;
}

/* Favorited: the star's gold. */
.picture-view-fav.is-on {
    border-color: #ffd27a;
    color: #ffd27a;
}

.picture-view-actions .picture-view-fav.is-on .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Phones: one row of smaller buttons with short labels (Delete, Open). */
@media (max-width: 520px) {
    .picture-view-actions {
        gap: 8px;
        padding: 0 12px 4px;
    }

    .picture-view-actions .space-button {
        gap: 6px;
        padding: 9px 10px;
        font-size: 0.62rem;
    }

    .picture-view-actions .material-symbols-outlined {
        font-size: 16px;
    }

    .picture-view-extra {
        display: none;
    }

    .picture-view img {
        height: min(300px, 40vh);
    }
}

/* Category tabs: one row along the top that stays put while the emojis scroll under it. */
.emoji-tabs {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 2px;
    margin: 0 -10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
}

.emoji-picker .emoji-tab {
    width: auto;
    height: 32px;
    font-size: 1rem;
}

/* The open category: the hover look, with an accent line under it. */
.emoji-picker .emoji-tab.is-active {
    background: var(--bg);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.emoji-panel[hidden] {
    display: none;
}

/* Pod and room settings: Settings / Customization tabs (the site's profile tabs) at the top of the
   pop-up. */
.post-dialog-body .settings-tabs {
    margin: 0 0 6px;
}

/* Both tabs sit in the same spot (the hidden one just can't be seen), so the pop-up keeps the
   taller one's size instead of changing size with the tab. */
.settings-panels {
    display: grid;
}

.settings-panel {
    display: flex;
    grid-area: 1 / 1;
    flex-direction: column;
    gap: 14px;
}

.settings-panel[hidden] {
    visibility: hidden;
}

.settings-note {
    margin: 0 0 8px;
    font-size: 0.6rem;
}

/* "None" / "Same as the Pod" for the glow: an empty swatch with a no-entry sign. */
.name-color-swatch.glow-off {
    display: grid;
    place-items: center;
    background: var(--bg);
    color: var(--muted);
}

.name-color-swatch.glow-off .material-symbols-outlined {
    font-size: 16px;
}

/* The site's danger zone (Delete Pod / room), with a little space above it. */
.post-dialog-body .danger-zone {
    margin-top: 18px;
}

.pod-gate .space-button {
    margin-top: 14px;
}

/* Phones' one menu for Favorites, GIFs and emojis: its buttons along the bottom (pods.js). */
.media-nav {
    display: none;
}

@media (max-width: 760px) {
    .emoji-picker,
    .fav-picker {
        width: 100%;
    }

    /* The GIF and Favorites buttons are in the emoji button's menu. */
    .composer #gifButton,
    .composer #favButton {
        display: none;
    }

    /* The menu keeps its tabs at the top and its buttons (and the GIF search) at the bottom, with
       just the emojis / GIFs / favorites scrolling between them. */
    .emoji-picker,
    .fav-picker {
        display: flex;
        height: min(340px, 50vh);
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
    }

    .emoji-picker.is-reacting {
        padding-bottom: 10px;
    }

    .emoji-tabs,
    .fav-tabs {
        position: static;
        flex: none;
    }

    .emoji-panel,
    .gif-grid,
    .fav-grid {
        min-height: 0;
        flex: 1;
        align-content: start;
        overflow-y: auto;
    }

    .gif-grid {
        order: 1;
        margin-top: 8px;
    }

    .gif-credit {
        order: 2;
    }

    .gif-search {
        position: static;
        order: 3;
        flex: none;
        margin: 8px 0 0;
    }

    .media-nav {
        display: flex;
        order: 4;
        flex: none;
        justify-content: center;
        gap: 8px;
        margin: auto -10px 0;
        padding: 10px;
        border-top: 1px solid var(--line-soft);
        background: var(--panel);
    }

    .media-nav .profile-tab {
        width: auto;
        height: auto;
        padding: 7px 12px;
        font-size: 0.6rem;
    }

    .emoji-picker.is-reacting .media-nav {
        display: none;
    }

    .friend-name-row {
        gap: 6px;
    }
}

@media (max-width: 520px) {
    /* Profile pop-up buttons fit on one row on phones. */
    .profile-pop-actions {
        gap: 8px;
    }

    .profile-pop-actions .space-button,
    .profile-pop-actions .friend-minor,
    .profile-pop-badge {
        padding: 7px 9px;
    }
}