/* ============================================================
   THEMES — paper (default), evening, midnight, garden.
   Theme = base palette. Accent = colour highlight. Both via [data-*] on body.
   ============================================================ */
:root,
[data-theme="paper"] {
    --bg: #f1ead8;
    --bg-paper: #fbf6e8;
    --bg-paper-warm: #fdf8eb;
    --border: #d4c89f;
    --border-soft: #ebe2c2;
    --text: #1f1812;
    --text-muted: #6b5b40;
    --text-faint: #8f8568;
    --accent: #a0732a;
    --accent-bright: #e6c98c;
    --accent-warm: #c89858;
    --chrome: #2a2018;
    --chrome-text: #f5ecd6;
    --danger: #8b3a2a;
    --field-bg: #ffffff;
    --bg-glow-1: rgba(160, 115, 42, 0.05);
    --bg-glow-2: rgba(160, 115, 42, 0.04);
    --pattern-color: rgba(0, 0, 0, 0.06);
}

[data-theme="evening"] {
    --bg: #2a2540;
    --bg-paper: #3a3552;
    --bg-paper-warm: #443e60;
    --border: #5a5070;
    --border-soft: #4a4560;
    --text: #ece8ff;
    --text-muted: #b5b0d0;
    --text-faint: #7a7596;
    --accent: #d4a679;
    --accent-bright: #f0c894;
    --accent-warm: #e8b888;
    --chrome: #1a1530;
    --chrome-text: #ece8ff;
    --danger: #d68876;
    --field-bg: #2e2945;
    --bg-glow-1: rgba(212, 166, 121, 0.07);
    --bg-glow-2: rgba(212, 166, 121, 0.05);
    --pattern-color: rgba(255, 255, 255, 0.05);
}

[data-theme="midnight"] {
    --bg: #18161e;
    --bg-paper: #22202a;
    --bg-paper-warm: #2a2834;
    --border: #3a3848;
    --border-soft: #2e2c38;
    --text: #e8e6f0;
    --text-muted: #a8a4b8;
    --text-faint: #6e6a7e;
    --accent: #c89858;
    --accent-bright: #e6c98c;
    --accent-warm: #b88a48;
    --chrome: #0f0e16;
    --chrome-text: #e8e6f0;
    --danger: #d68876;
    --field-bg: #1c1a24;
    --bg-glow-1: rgba(200, 152, 88, 0.05);
    --bg-glow-2: rgba(200, 152, 88, 0.04);
    --pattern-color: rgba(255, 255, 255, 0.05);
}

[data-theme="garden"] {
    --bg: #e8f0d8;
    --bg-paper: #f4f8e8;
    --bg-paper-warm: #f8fcf0;
    --border: #b8c898;
    --border-soft: #d8e4be;
    --text: #1c2415;
    --text-muted: #5a6840;
    --text-faint: #7a8868;
    --accent: #5a8030;
    --accent-bright: #a8c878;
    --accent-warm: #88a858;
    --chrome: #2a3018;
    --chrome-text: #ecf2d8;
    --danger: #8b3a2a;
    --field-bg: #ffffff;
    --bg-glow-1: rgba(90, 128, 48, 0.05);
    --bg-glow-2: rgba(90, 128, 48, 0.04);
    --pattern-color: rgba(0, 0, 0, 0.06);
}

/* --- Accent overrides (declared after themes so they win) --- */
[data-accent="honey"]   { --accent: #a0732a; --accent-bright: #e6c98c; --accent-warm: #c89858; }
[data-accent="rust"]    { --accent: #a04020; --accent-bright: #e89878; --accent-warm: #c87050; }
[data-accent="moss"]    { --accent: #5a8030; --accent-bright: #a8c878; --accent-warm: #88a858; }
[data-accent="indigo"]  { --accent: #4a4090; --accent-bright: #9890d0; --accent-warm: #7868b8; }
[data-accent="plum"]    { --accent: #803060; --accent-bright: #c88aac; --accent-warm: #a85088; }
[data-accent="slate"]   { --accent: #506878; --accent-bright: #98b0c0; --accent-warm: #708898; }

/* --- Background patterns --- */
:root { --bg-pattern: none; }
[data-bg="paper"]  { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
[data-bg="linen"]  { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 0L8 8M8 0L0 8' stroke='%23000' stroke-width='0.5' opacity='0.06'/></svg>"); }
[data-bg="stars"]  { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><circle cx='12' cy='18' r='0.9' fill='%23000' opacity='0.18'/><circle cx='44' cy='38' r='0.7' fill='%23000' opacity='0.13'/><circle cx='72' cy='28' r='0.8' fill='%23000' opacity='0.16'/><circle cx='28' cy='66' r='0.6' fill='%23000' opacity='0.12'/><circle cx='62' cy='78' r='0.8' fill='%23000' opacity='0.16'/><circle cx='80' cy='52' r='0.5' fill='%23000' opacity='0.1'/></svg>"); }

/* For dark themes, invert the pattern colour by switching the SVG fill */
[data-theme="evening"][data-bg="linen"]  { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 0L8 8M8 0L0 8' stroke='%23fff' stroke-width='0.5' opacity='0.06'/></svg>"); }
[data-theme="evening"][data-bg="stars"]  { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><circle cx='12' cy='18' r='0.9' fill='%23fff' opacity='0.25'/><circle cx='44' cy='38' r='0.7' fill='%23fff' opacity='0.18'/><circle cx='72' cy='28' r='0.8' fill='%23fff' opacity='0.22'/><circle cx='28' cy='66' r='0.6' fill='%23fff' opacity='0.15'/><circle cx='62' cy='78' r='0.8' fill='%23fff' opacity='0.22'/><circle cx='80' cy='52' r='0.5' fill='%23fff' opacity='0.13'/></svg>"); }
[data-theme="midnight"][data-bg="linen"] { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 0L8 8M8 0L0 8' stroke='%23fff' stroke-width='0.5' opacity='0.06'/></svg>"); }
[data-theme="midnight"][data-bg="stars"] { --bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><circle cx='12' cy='18' r='0.9' fill='%23fff' opacity='0.3'/><circle cx='44' cy='38' r='0.7' fill='%23fff' opacity='0.2'/><circle cx='72' cy='28' r='0.8' fill='%23fff' opacity='0.25'/><circle cx='28' cy='66' r='0.6' fill='%23fff' opacity='0.18'/><circle cx='62' cy='78' r='0.8' fill='%23fff' opacity='0.25'/><circle cx='80' cy='52' r='0.5' fill='%23fff' opacity='0.15'/></svg>"); }

/* --- Font face overrides --- */
:root { --serif: 'Crimson Pro', 'Iowan Old Style', Georgia, 'Times New Roman', serif; }
[data-font="crimson"]  { --serif: 'Crimson Pro', 'Iowan Old Style', Georgia, serif; }
[data-font="lora"]     { --serif: 'Lora', 'Iowan Old Style', Georgia, serif; }
[data-font="garamond"] { --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif; }
[data-font="inter"]    { --serif: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

:root {
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    transition: background 0.3s, color 0.3s;
}
body {
    min-height: 100vh; display: flex; flex-direction: column;
    background-image:
        var(--bg-pattern),
        radial-gradient(circle at 20% 15%, var(--bg-glow-1), transparent 45%),
        radial-gradient(circle at 85% 85%, var(--bg-glow-2), transparent 50%);
    background-attachment: fixed;
}

a, a:visited { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; font-weight: 500; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 1.5rem 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }

/* --- Chrome --- */
.chrome {
    position: relative;
    z-index: 10;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.85rem 1.8rem;
    background: var(--chrome);
    color: var(--chrome-text);
    font-family: var(--sans);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background 0.3s;
}
.chrome a, .chrome a:visited { color: var(--chrome-text); text-decoration: none; }
.chrome a:hover { color: var(--accent-bright); }
.chrome .brand {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.015em;
    margin-right: 0.5rem;
    font-style: italic;
}
.chrome nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.chrome .inline-form { display: inline; margin: 0; padding: 0; }
.chrome .link-button {
    background: none; border: none; color: var(--chrome-text); cursor: pointer;
    font: inherit; padding: 0;
}
.chrome .link-button:hover { color: var(--accent-bright); }

.chair-counter {
    display: flex; align-items: center; gap: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.chair-counter .chairs {
    display: flex; flex-wrap: wrap; gap: 1px;
    max-width: 480px; align-items: center;
}
.chair-counter .chair { color: rgba(255, 255, 255, 0.18); flex-shrink: 0; }
.chair-counter .chair.filled { color: var(--accent-bright); }
.chair-counter .press {
    display: inline-flex; align-items: center; gap: 0.25rem;
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    cursor: help;
    transition: color 0.15s, background 0.15s;
}
.chair-counter .press:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
}
.chair-counter .press-icon { opacity: 0.7; }
.chair-counter .press:hover .press-icon { opacity: 1; }
.chair-counter .count {
    font-variant-numeric: tabular-nums; font-weight: 600;
    letter-spacing: 0.5px;
    font-family: var(--sans); font-size: 0.92rem;
    min-width: 4ch; text-align: right;
    color: var(--accent-bright);
}
.chair-counter .count .sep { opacity: 0.4; margin: 0 0.15rem; color: var(--chrome-text); font-weight: 400; }
.chair-counter .count .cap { opacity: 0.65; color: var(--chrome-text); font-weight: 400; }

@media (max-width: 1100px) { .chair-counter .chairs { max-width: 280px; } }
@media (max-width: 800px) {
    .chair-counter .chairs { max-width: 160px; }
    .chrome { gap: 0.8rem; padding: 0.6rem 1rem; flex-wrap: wrap; }
    .chrome nav { gap: 0.8rem; font-size: 0.85rem; }
}

/* --- Layout --- */
main {
    position: relative; z-index: 5;
    flex: 1; padding: 2.5rem 1.5rem; max-width: 1200px; margin: 0 auto; width: 100%;
}

/* When a room view is rendered, escape the 1200px content cap so the
   chat feed has room to breathe. The site-wide reading-measure cap is
   right for landing/auth/settings pages, wrong for a wide-feed chat. */
body:has(.gaff-layout) main {
    max-width: 1600px;
}

.gaff-layout {
    display: grid;
    /* Single left column for all the chrome (room name, rooms list, voice
       panel, guests, switch-gaff). Single right column for the feed +
       compose, taking every pixel that isn't the left column. */
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: stretch;
    /* Make the layout fill the viewport so the messages feed inside
       .room-main can grow to fill it via flex: 1. */
    min-height: calc(100vh - 8rem);
}
@media (max-width: 1000px) { .gaff-layout { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; } }

/* Room name relocated above the rooms-sidebar widgets — was previously
   the h1 inside .room-main. Now lives at the top of the left column. */
.room-header--in-sidebar {
    margin: -0.4rem 0 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: baseline; gap: 0.6rem;
}
.room-header--in-sidebar h1 {
    margin: 0; font-style: italic; font-weight: 500;
    color: var(--text); font-size: 1.5rem; line-height: 1.2;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Guests block was a separate aside; now sits inside rooms-sidebar
   underneath the rooms list and switch-gaff link. */
.guests-section {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-soft);
}

/* --- Sidebars --- */
.rooms-sidebar, .guests-sidebar {
    position: relative; z-index: 2;
    background: var(--bg-paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem 1.1rem;
    align-self: start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rooms-sidebar h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    font-family: var(--serif); font-weight: 500;
    font-style: italic;
    letter-spacing: -0.005em;
}

/* Wall quote in sidebar */
.wall-quote {
    margin: 0.4rem 0 1.1rem;
    padding: 0.7rem 0.9rem;
    background: var(--bg-paper-warm);
    border-left: 2px solid var(--accent);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
    border-radius: 0 4px 4px 0;
    position: relative;
}
.wall-quote::before {
    content: '“';
    position: absolute; top: -0.2rem; left: 0.3rem;
    font-size: 1.6rem; color: var(--accent); opacity: 0.5;
    font-family: var(--serif);
}
.wall-quote-text { padding-left: 0.7rem; display: block; }

.rooms-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.rooms-list li { padding: 0; border-radius: 4px; margin-bottom: 0.15rem; }
.rooms-list li.active { background: var(--accent-bright); }
.rooms-list li.active a { color: var(--chrome); font-weight: 500; }
.rooms-list a, .rooms-list .room-locked {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    font-family: var(--serif);
}
.rooms-list a, .rooms-list a:visited { color: var(--text); text-decoration: none; }
.rooms-list a:hover { background: var(--border-soft); }
.rooms-list .room-locked { color: var(--text-faint); cursor: not-allowed; }
.rooms-list .count {
    color: var(--text-muted); font-variant-numeric: tabular-nums;
    background: var(--border-soft); padding: 0.1rem 0.45rem; border-radius: 10px;
    font-size: 0.72rem; font-family: var(--sans); font-weight: 500;
}

.sidebar-action {
    display: block;
    padding: 0.5rem 0.7rem;
    margin: 0.4rem 0;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--sans); font-size: 0.85rem;
    border: 1px dashed var(--border-soft);
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
}
.sidebar-action:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* --- Voice panel (in rooms-sidebar) --- */
.voice-panel {
    margin: 1rem 0;
    padding: 0.85rem;
    background: var(--bg-paper-warm);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.voice-controls {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.voice-controls button {
    padding: 0.4rem 0.7rem;
    background: var(--chrome); color: var(--chrome-text);
    border: none; border-radius: 4px; cursor: pointer;
    font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
    transition: background 0.15s, opacity 0.15s;
}
.voice-controls button:hover { background: var(--accent); }
.voice-controls button:disabled { opacity: 0.5; cursor: wait; }
.voice-status {
    margin-top: 0.5rem;
    font-family: var(--sans); font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.voice-participants {
    list-style: none; padding: 0; margin: 0.5rem 0 0;
}
.voice-participants li {
    padding: 0.3rem 0.55rem;
    margin-bottom: 0.15rem;
    font-family: var(--sans); font-size: 0.85rem;
    color: var(--text);
    border-radius: 3px;
    transition: background 0.18s, color 0.18s;
}
.voice-participants li.speaking {
    background: var(--accent-bright); color: var(--chrome);
    font-weight: 500;
}

/* OBS stream provisioning instructions */
.stream-instructions {
    margin-top: 0.6rem;
    padding: 0.7rem;
    background: var(--bg-paper-warm);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--sans); font-size: 0.78rem;
    color: var(--text);
}
.stream-instructions label {
    display: block; margin-top: 0.5rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
}
.stream-instructions pre {
    background: var(--bg);
    padding: 0.45rem 0.55rem;
    margin: 0.2rem 0 0;
    border-radius: 3px;
    font-size: 0.72rem;
    word-break: break-all; white-space: pre-wrap;
    border: 1px solid var(--border-soft);
}
.stream-instructions p.muted { color: var(--text-muted); margin-top: 0.6rem; font-size: 0.75rem; font-style: italic; }

/* --- Screen share area (above messages in room-main) --- */
.screen-share-area {
    display: none;
    margin: 0 0 1rem;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.screen-share-area.active {
    display: grid;
    gap: 4px;
    grid-auto-rows: 1fr;
}
.screen-share-area:has(.screen-share-stream:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}
.screen-share-stream {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
}
.screen-share-stream video {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.screen-share-label {
    position: absolute; bottom: 0.4rem; left: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-family: var(--sans); font-size: 0.72rem;
    border-radius: 3px;
    pointer-events: none;
}
.screen-share-fullscreen {
    position: absolute; bottom: 0.4rem; right: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none; border-radius: 3px; cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s;
}
.screen-share-fullscreen:hover { background: rgba(0,0,0,0.85); }
.screen-share-stream:fullscreen {
    background: #000;
    width: 100vw; height: 100vh;
    aspect-ratio: auto;
    display: flex; align-items: center; justify-content: center;
}
.screen-share-stream:fullscreen video {
    object-fit: contain;
}

.create-room summary {
    cursor: pointer; padding: 0.45rem 0.7rem; color: var(--text-muted);
    font-size: 0.88rem; font-family: var(--sans);
    list-style: none;
}
.create-room summary::-webkit-details-marker { display: none; }
.create-room summary:hover { color: var(--text); }
.create-room form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem; }
.create-room input {
    padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
    font: inherit; font-size: 0.95rem;
    background: var(--field-bg); color: var(--text);
}
.create-room button {
    padding: 0.45rem; background: var(--chrome); color: var(--chrome-text);
    border: none; border-radius: 4px; cursor: pointer;
    font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
}

.other-gaffs { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.other-gaffs h3 {
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0 0 0.5rem; color: var(--text-muted);
    font-family: var(--sans); font-weight: 600;
}
.gaffs-list { list-style: none; padding: 0; margin: 0; }
.gaffs-list li { padding: 0.25rem 0.7rem; border-radius: 3px; }
.gaffs-list a { display: block; color: var(--text); text-decoration: none; font-size: 0.95rem; }
.gaffs-list a:hover { background: var(--border-soft); }

/* --- Welcome banner (empty-state for first-run kitchen) --- */
.welcome-banner {
    background: linear-gradient(140deg, var(--bg-paper-warm), var(--bg-paper));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.2rem 2.4rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    position: relative; overflow: hidden;
}
.welcome-banner::before {
    content: ''; position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, var(--bg-glow-1), transparent 70%);
    pointer-events: none;
}
.welcome-banner h2 {
    margin: 0 0 0.7rem;
    font-size: 1.85rem;
    font-style: italic; font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text);
}
.welcome-banner p { margin: 0 0 0.65rem; font-size: 1.08rem; color: var(--text); max-width: 50ch; }
.welcome-banner p.muted { color: var(--text-muted); font-size: 0.98rem; font-style: italic; }
.welcome-banner .cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.welcome-banner .big-cta {
    display: inline-block; padding: 0.7rem 1.5rem;
    background: var(--chrome); color: var(--chrome-text);
    text-decoration: none; border-radius: 6px;
    font-family: var(--sans); font-weight: 500; font-size: 0.95rem;
    letter-spacing: 0.01em; transition: all 0.18s ease;
}
.welcome-banner .big-cta:hover { background: var(--accent); color: white; transform: translateY(-1px); }
.welcome-banner .big-cta.secondary {
    background: transparent; color: var(--text); border: 1px solid var(--border);
}
.welcome-banner .big-cta.secondary:hover {
    background: var(--accent-bright); border-color: var(--accent); color: var(--chrome);
}

/* --- Kitchen welcome note --- */
.kitchen-note {
    background: var(--bg-paper-warm);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.2rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.2rem;
    font-style: italic;
    color: var(--text);
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
}
.kitchen-note .edit-link {
    position: absolute; top: 0.4rem; right: 0.7rem;
    font-style: normal;
    font-size: 0.72rem; font-family: var(--sans);
    color: var(--text-faint); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.kitchen-note .edit-link:hover { color: var(--accent); }

.room-note {
    background: var(--bg-paper);
    border-left: 3px solid var(--accent-warm);
    padding: 0.8rem 1.1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 0.98rem;
    position: relative;
}
.room-note.room-note-empty {
    background: transparent; border-left-color: var(--border);
    padding: 0.4rem 0.6rem; color: var(--text-faint);
    font-size: 0.85rem;
}
.room-note .edit-link {
    position: absolute; top: 0.4rem; right: 0.7rem;
    font-size: 0.72rem; font-family: var(--sans);
    color: var(--text-faint); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.room-note.room-note-empty .edit-link { position: static; }
.room-note .edit-link:hover { color: var(--accent); }

/* --- Room main --- */
.room-main {
    position: relative;
    border-radius: 10px;
    isolation: isolate;
    /* Column flex so .messages can flex: 1 between the optional
       kitchen-note / screen-share-area at the top and the .compose box
       at the bottom. min-height: 0 lets the inner flex item shrink
       below its content height (so the scroll lives inside .messages,
       not on the page). */
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.room-main.has-bg {
    padding: 1.2rem;
}
/* Full-viewport background: the .room-bg covers the whole page behind everything.
   Negative z-index plus body:has() going transparent puts it at root level. */
.room-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.room-bg img, .room-bg video {
    /* Oversize so blur fringe lives outside the visible area.
       Otherwise blur(20px) leaves ~30px of soft edge showing through to body. */
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    margin: -40px;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    filter: blur(var(--blur-amount, 0px));
}
/* When a room background is active, drop the body's own paint so the video shows through. */
body:has(.room-main.has-bg) {
    background: transparent;
}

.room-header {
    display: flex; align-items: baseline; gap: 0.6rem;
    margin: 0 0 1.2rem;
}
.room-header h1 { margin: 0; }
.edit-room-link {
    font-family: var(--sans); font-size: 0.78rem;
    color: var(--text-faint); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.edit-room-link:hover { color: var(--accent); }

/* Translucent overlays so text stays readable on top of a media background */
:root { --paper-overlay: rgba(251, 246, 232, 0.82); }
[data-theme="evening"]  { --paper-overlay: rgba(58, 53, 82, 0.85); }
[data-theme="midnight"] { --paper-overlay: rgba(34, 32, 42, 0.85); }
[data-theme="garden"]   { --paper-overlay: rgba(244, 248, 232, 0.82); }

.room-main.has-bg .messages,
.room-main.has-bg .compose,
.room-main.has-bg .welcome-banner,
.room-main.has-bg .room-header {
    background: var(--paper-overlay);
    backdrop-filter: blur(var(--blur-amount, 8px));
    -webkit-backdrop-filter: blur(var(--blur-amount, 8px));
    border-radius: 8px;
}
.room-main.has-bg .room-header {
    padding: 0.5rem 0.8rem;
    width: fit-content;
}
.room-main.has-bg .messages { padding: 0.8rem; }

/* Cards inside a room background: var(--bg-paper) is too close in tone
   to the already-overlaid messages container, so the individual posts
   blend into the wallpaper. Give cards their own opaque-ish surface
   plus a soft shadow so each post reads as a discrete card against
   the room scene. */
.room-main.has-bg .message {
    background: var(--paper-overlay);
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18),
                0 1px 1px rgba(0, 0, 0, 0.12);
}
.room-main.has-bg .message:hover,
.room-main.has-bg .message:focus-within {
    background: var(--bg-paper);
}

.room-main h1 { margin: 0 0 1.2rem; font-style: italic; font-weight: 500; color: var(--text); }

/* Edit-room form: current background preview */
.current-bg {
    margin-bottom: 0.6rem;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    max-width: 100%;
}
.current-bg img, .current-bg video {
    display: block; width: 100%; max-height: 200px; object-fit: cover;
}
.clear-bg {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-family: var(--sans); font-size: 0.88rem; color: var(--text-muted);
}
.clear-bg input { width: auto; }
.error-banner {
    padding: 0.7rem 1rem;
    background: #f5e6e0; color: var(--danger);
    border: 1px solid #c9a59a; border-radius: 5px;
    font-family: var(--sans); font-size: 0.92rem;
    margin-bottom: 1rem;
}
.messages {
    /* Multi-column masonry: cards flow column-by-column and the browser
       packs each one into the shortest available column based on its
       height. No dead space between mismatched-height cards. Columns
       are 380 px minimum, count derives from the container width. */
    columns: 380px auto;
    column-gap: 0;
    /* Fill all leftover vertical space in .room-main. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.4rem 0.2rem;
    /* Reading order is top-down per column, then the next column. */
}
.message {
    /* Cards fill the full width of the feed column — wide is the point
       of the new layout. Body text uses max-width: 65ch internally for
       reading comfort but the card itself stretches edge-to-edge.
       The width: 100% + box-sizing: border-box guards against any
       parent flex/grid quirk that would otherwise let the card shrink
       to its content. */
    /* Display block so each card participates in CSS-column layout
       and `break-inside: avoid` stops the browser from splitting a card
       across two columns mid-content. */
    display: block;
    break-inside: avoid;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    /* Square corners so cards touch flush in both directions. */
    border-radius: 0;
}
.message.message-wide {
    /* Span all masonry columns: a formatted/rich post breaks out of
       the column flow and sits flush across the full feed width. */
    column-span: all;
    -webkit-column-span: all;
    padding: 1.4rem 2rem;
    margin-bottom: 0.4rem;
}
.message.message-wide .body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.55;
}
.message .body h2 { font-size: 1.45rem; margin: 0.7rem 0 0.4rem; font-weight: 600; }
.message .body h3 { font-size: 1.18rem; margin: 0.6rem 0 0.3rem; font-weight: 600; }
.message .body h4 { font-size: 1.05rem; margin: 0.5rem 0 0.3rem; font-weight: 600; }
.message .body ul, .message .body ol { padding-left: 1.5rem; margin: 0.4rem 0; }
.message .body blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.3rem 0.9rem;
    margin: 0.6rem 0; color: var(--text-muted);
    font-style: italic;
}
.message .body code {
    background: var(--bg);
    padding: 0.1em 0.35em; border-radius: 3px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
}
.message .body pre {
    background: var(--bg); padding: 0.7rem 0.9rem; border-radius: 4px;
    overflow-x: auto; font-size: 0.92em; line-height: 1.4;
    border: 1px solid var(--border-soft);
}
.message .body pre code { background: none; padding: 0; border-radius: 0; }
.message .body p { margin: 0.4rem 0; }
.message .body a { color: var(--accent); }

/* Compose: WYSIWYG toggle + Quill rich editor. Tighter spacing
   so compose stays compact; rows wrap without growing the textarea. */
.compose-actions {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.compose-actions .compose-post-btn,
.compose-actions button[type="submit"] { margin-left: auto; }
.compose-mode-toggle {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.25rem 0.7rem; cursor: pointer;
    font: inherit; font-family: var(--sans); font-size: 0.82rem;
}
.compose-mode-toggle:hover { background: var(--bg-paper); color: var(--text); }
.compose-mode-hint {
    font-size: 0.78rem; color: var(--text-faint);
    font-family: var(--sans); font-style: italic;
}
.compose-rich .ql-toolbar {
    border-radius: 4px 4px 0 0;
    border-color: var(--border);
    background: var(--bg-paper);
}
.compose-rich .ql-container {
    border-radius: 0 0 4px 4px;
    border-color: var(--border);
    background: var(--field-bg);
    min-height: 130px;
    max-height: 75vh;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    resize: vertical;
    overflow: auto;
}
.compose-rich .ql-editor { min-height: 130px; }
.compose-rich .ql-editor.ql-blank::before { color: var(--text-faint); font-style: normal; }

.compose-rich .ql-editor img,
.message .body img:not(.emote) {
    max-width: 100%; height: auto; border-radius: 4px;
    margin: 0.4rem 0;
}

img.emote {
    height: 1.4em; width: auto; vertical-align: -0.25em;
    margin: 0 0.05em;
}
.message-wide .body img.emote { height: 1.5em; }

.compose-emoji-picker {
    display: flex; flex-wrap: wrap; gap: 0.15rem;
    padding: 0.4rem;
    background: var(--bg-paper);
    border: 1px solid var(--border);
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    max-height: 180px; overflow-y: auto;
}
.compose-emoji-picker .emoji-pick {
    background: transparent; border: 1px solid transparent;
    padding: 0.2rem 0.35rem; cursor: pointer; font-size: 1.2rem;
    border-radius: 3px;
}
.compose-emoji-picker .emoji-pick:hover { background: var(--bg); border-color: var(--border-soft); }

/* Emote toolbar button shows the smiley face */
.ql-toolbar .ql-emoji {
    width: 28px; font-size: 1.05rem !important;
    line-height: 1 !important;
}

/* --- Manage emotes page --- */
.emotes-page .emotes-summary { color: var(--text-muted); margin-bottom: 1rem; }
.emote-upload .field { margin-bottom: 1rem; }
.code-row {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--field-bg);
}
.code-row .colon { color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; }
.code-row input { border: none; outline: none; padding: 0.25rem 0.4rem; background: transparent; font-family: 'SF Mono', Menlo, monospace; min-width: 200px; }
.emote-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem; margin: 1rem 0;
}
.emote-tile {
    background: var(--bg-paper); border: 1px solid var(--border-soft);
    border-radius: 5px; padding: 0.6rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.emote-preview { max-width: 90px; max-height: 90px; object-fit: contain; }
.emote-meta { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; width: 100%; }
.emote-meta code { font-size: 0.85rem; color: var(--text-muted); }

/* --- Welcome review (house rules agreement) --- */
.welcome-review { max-width: 640px; }
.welcome-review h2 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; font-family: var(--sans); }
.welcome-review .lead { color: var(--text-muted); }
.house-rules-block {
    background: var(--bg-paper);
    border-left: 3px solid var(--accent-warm);
    padding: 0.9rem 1.1rem;
    border-radius: 0 5px 5px 0;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 0.4rem 0 1rem;
}
.welcome-review-form { margin-top: 0.8rem; }
.agree-row {
    display: flex; gap: 0.6rem; align-items: flex-start;
    margin: 0.6rem 0 1rem; font-size: 0.95rem;
}
.welcome-review-actions { display: flex; gap: 0.6rem; }
.welcome-review-decline { margin-top: 0.6rem; }
.default-rules {
    background: var(--bg-paper); padding: 0.7rem 0.9rem; border-radius: 4px;
    white-space: pre-wrap; font-size: 0.9rem; margin: 0.4rem 0;
    border: 1px solid var(--border-soft);
    font-family: inherit;
}

/* --- Per-room style pickers (edit_room) --- */
.section-divider {
    margin-top: 1.6rem; padding-top: 0.8rem;
    border-top: 1px solid var(--border-soft);
    font-family: var(--sans); font-size: 1.1rem;
}
.colour-fields { margin-top: 1rem; }
.colour-row {
    display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem;
}
.colour-pick {
    display: flex; flex-direction: column; gap: 0.3rem;
    min-width: 160px;
}
.colour-pick > span {
    font-size: 0.85rem; color: var(--text-muted);
    font-family: var(--sans); font-weight: 500;
}
.colour-pick input[type="color"] {
    width: 100%; height: 36px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 4px;
    background: transparent;
}
.colour-pick input[type="text"] {
    padding: 0.35rem 0.55rem; font-size: 0.85rem;
    font-family: 'SF Mono', Menlo, monospace;
}

/* --- Inline image resize overlay (Quill) --- */
.img-resize-overlay {
    position: absolute;
    pointer-events: none;
    border: 2px dashed var(--accent);
    box-sizing: border-box;
    z-index: 10;
}
.img-resize-handle {
    position: absolute; width: 12px; height: 12px;
    background: var(--accent);
    border: 2px solid white;
    border-radius: 50%;
    pointer-events: auto;
    box-sizing: border-box;
}
.img-resize-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.img-resize-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.img-resize-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.img-resize-se { bottom: -7px; right: -7px; cursor: nwse-resize; }

.blur-readout {
    font-size: 0.78rem; color: var(--text-muted);
    font-family: var(--sans); margin-left: 0.3rem; min-width: 1.4em;
    display: inline-block; text-align: right;
}

/* --- Quill alignment classes (text + images) --- */
.message .body .ql-align-center,
.compose-rich .ql-editor .ql-align-center { text-align: center; }
.message .body .ql-align-right,
.compose-rich .ql-editor .ql-align-right { text-align: right; }
.message .body .ql-align-justify,
.compose-rich .ql-editor .ql-align-justify { text-align: justify; hyphens: auto; }
.message .body img.ql-align-center { display: block; margin-left: auto; margin-right: auto; }
.message .body img.ql-align-right { display: block; margin-left: auto; }
.message .body img.ql-align-left { display: block; margin-right: auto; }

/* --- Pinned messages --- */
/* The pinned area sits above the live feed as its own visually distinct
   surface: warm tint, accent rule below, dedicated header. Pinned messages
   render via the same _message_card partial as the feed, so they inherit
   every surface treatment; the section frames them. */
.pinned-messages {
    padding: 0.8rem 0.9rem 0.9rem;
    margin: 0 0 1rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    background: rgba(214, 160, 90, 0.10);
    border: 1px solid rgba(214, 160, 90, 0.30);
    border-radius: 8px;
    box-shadow: inset 4px 0 0 var(--accent-warm), 0 1px 2px rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
}
.pinned-header {
    font-size: 0.86rem; color: var(--accent-warm);
    font-family: var(--sans); letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
    margin: 0 0 0.45rem; padding: 0 0 0.4rem;
    border-bottom: 1px dashed rgba(214, 160, 90, 0.30);
}
.message.message-pinned {
    border-left: 3px solid var(--accent-warm);
}
.pinned-marker { font-size: 0.85rem; }

/* --- Compose: scope row sits under textarea --- */
.compose-scope-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.4rem; flex-wrap: wrap;
}
.compose-scope-label {
    font-size: 0.78rem; color: var(--text-muted);
    font-family: var(--sans);
}

/* Action icons are always visible — no hover-reveal. */

/* New-since-last-visit highlight: subtle accent left-rule + a tiny dot in
   the meta. Posts you wrote yourself never get the highlight. */
.message.message-new {
    position: relative;
    box-shadow:
        inset 4px 0 0 var(--accent),
        0 1px 3px rgba(0, 0, 0, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.12);
}
.message.message-new::before {
    content: 'new';
    position: absolute; top: 0.55rem; right: 0.7rem;
    font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-family: var(--sans);
    color: var(--accent);
    background: var(--bg-paper);
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--accent);
    border-radius: 3px;
    line-height: 1.4;
}
.room-main.has-bg .message.message-new {
    background-color: var(--bg-paper);
}

/* --- Houses-feed clickable card --- */
.houses-feed-link {
    display: block; text-decoration: none; color: inherit;
}
.houses-feed-link:hover { text-decoration: none; color: inherit; }

/* --- Switch-to label --- */
.gaffs-list-label {
    font-size: 0.78rem; color: var(--text-muted);
    font-family: var(--sans);
    margin: 0.5rem 0 0.2rem;
}

.shared-tag,
.scope-tag {
    font-size: 0.72rem;
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0 0.35rem; margin-left: 0.4rem;
    font-family: var(--sans); letter-spacing: 0.04em;
    background: var(--bg-paper);
    color: var(--text-muted);
}
.scope-house { color: var(--accent-warm); border-color: var(--accent-warm); }
.scope-houses { color: var(--accent); border-color: var(--accent); }

.scope-checks {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    align-items: center;
}
.scope-check {
    font-size: 0.78rem; color: var(--text-muted);
    font-family: var(--sans);
    display: inline-flex; align-items: center; gap: 0.25rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 3px;
}
.scope-check:hover { background: var(--bg-paper); color: var(--text); }
.scope-check input[type="checkbox"] { margin: 0; }
.scope-check.scope-locked { opacity: 0.85; cursor: not-allowed; background: var(--bg-paper); }
.scope-check.scope-locked:hover { background: var(--bg-paper); color: var(--text-muted); }
.scope-check.scope-locked input { cursor: not-allowed; }

/* Compact icon-only scope tags on message cards (1-3 stack to show
   every place a post is visible: 🚪 always, +🏠 if house, +📡 if houses). */
.scope-tag.scope-room { color: var(--text-muted); }

/* Inline scope-toggle buttons (author-only) — same look as scope-tag but
   clickable. Active state when the scope is engaged. */
.scope-toggle-form { display: inline; margin: 0; padding: 0; }
.scope-tag-btn {
    font-size: 0.78rem;
    padding: 0 0.35rem; margin-left: 0.4rem;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-faint);
    font-family: var(--sans); letter-spacing: 0.04em;
    line-height: 1.4;
}
.scope-tag-btn:hover { border-style: solid; color: var(--text); }
.scope-tag-btn.scope-on {
    border-style: solid; background: var(--bg-paper);
    color: var(--accent); border-color: var(--accent);
}

/* Expanded-media post: media cards break out of the post card boundary
   to span the full feed width, like an article hero. */
.message.message-expanded {
    column-span: all;
    -webkit-column-span: all;
    margin-bottom: 0.4rem;
}
.message.message-expanded .media-embed,
.message.message-expanded .media-link {
    margin-left: -1.25rem; margin-right: -1.25rem;
    border-radius: 0;
}
.message.message-expanded .media-embed iframe,
.message.message-expanded .media-link-image {
    width: 100%;
}

.compose-expanded-toggle {
    font-size: 0.8rem; color: var(--text-muted);
    font-family: var(--sans);
    display: inline-flex; align-items: center; gap: 0.3rem;
    cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 3px;
}
.compose-expanded-toggle:hover { background: var(--bg-paper); color: var(--text); }

/* Plain-compose pickers (emoji / emote) */
.compose-pick-btn {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.25rem 0.55rem; cursor: pointer;
    font: inherit; font-family: var(--sans); font-size: 0.82rem;
    line-height: 1.2;
}
.compose-pick-btn:hover { background: var(--bg-paper); color: var(--text); }

.compose-picker-tray {
    margin-top: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    max-height: 180px; overflow-y: auto;
    display: flex; flex-wrap: wrap; gap: 0.2rem;
}
.compose-picker-tray .pick-item {
    background: transparent; border: 1px solid transparent;
    padding: 0.2rem 0.35rem; cursor: pointer; font-size: 1.2rem;
    border-radius: 3px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.compose-picker-tray .pick-item:hover { background: var(--bg); border-color: var(--border-soft); }
.compose-picker-tray .pick-emote img {
    width: 28px; height: 28px; object-fit: contain;
}
.compose-picker-tray .pick-empty {
    color: var(--text-muted); font-style: italic;
    font-size: 0.85rem; margin: 0; padding: 0.4rem 0.5rem;
    width: 100%;
}

/* --- Date dropdown menu in message meta --- */
.meta-dropdown { position: relative; display: inline-block; margin-left: auto; }
.meta-dropdown summary {
    cursor: pointer; list-style: none;
    color: var(--text-faint);
    font-size: 0.78rem; padding: 0.1rem 0.3rem;
    border-radius: 3px;
    user-select: none;
}
.meta-dropdown summary::-webkit-details-marker { display: none; }
.meta-dropdown summary::marker { display: none; content: ''; }
.meta-dropdown summary:hover { background: var(--bg-paper); color: var(--text); }
.meta-dropdown[open] summary { background: var(--bg-paper); color: var(--text); }
.edited-dot { color: var(--accent); }

.meta-popover {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--bg-paper);
    border: 1px solid var(--border);
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 30;
    min-width: 160px;
    font-family: var(--sans); font-size: 0.78rem;
    white-space: nowrap;
}
.meta-popover-time { color: var(--text); }
.meta-popover-edited { color: var(--text-muted); margin-top: 0.15rem; font-style: italic; }
.meta-popover-actions {
    display: flex; gap: 0.35rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-soft);
}
.meta-popover-actions .msg-action-form { margin: 0; padding: 0; display: inline; }
.action-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 4px; cursor: pointer;
    text-decoration: none; color: var(--text);
    font: inherit; font-size: 0.95rem;
    line-height: 1;
}
.action-icon:hover { background: var(--bg); border-color: var(--accent); color: var(--text); }
.action-icon.action-danger:hover { border-color: var(--danger); color: var(--danger); }

/* Per-user status (italic, muted, beside username) */
.user-status {
    color: var(--text-muted); font-style: italic;
    font-size: 0.78rem; margin-left: 0.3rem;
}

/* Mute dropdown on each non-host author's message */
.mute-dropdown { position: relative; display: inline-block; }
.mute-dropdown summary {
    list-style: none; cursor: pointer;
}
.mute-dropdown summary::-webkit-details-marker,
.mute-dropdown summary::marker { display: none; content: ''; }
.mute-popover {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--bg-paper);
    border: 1px solid var(--border);
    padding: 0.45rem 0.55rem;
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 30;
    min-width: 140px;
    font-family: var(--sans); font-size: 0.78rem;
}
.mute-popover-label {
    color: var(--text-muted); margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-soft); padding-bottom: 0.3rem;
}
.mute-form { margin: 0; padding: 0; }
.mute-option {
    display: block; width: 100%; text-align: left;
    background: transparent; border: none;
    padding: 0.3rem 0.4rem; cursor: pointer;
    color: var(--text); font: inherit; font-size: 0.85rem;
    border-radius: 3px;
}
.mute-option:hover { background: var(--bg); }

/* Settings: status form */
.status-form {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin: 0.4rem 0 1rem;
}
.status-form input[type="text"] { flex: 1 1 220px; min-width: 0; }
.status-current { font-size: 0.85rem; color: var(--text-muted); }
.status-current .muted { color: var(--text-faint); margin-left: 0.3rem; }

/* --- The safe (app distribution) --- */
.sidebar-safe {
    background: var(--bg-paper);
    border: 1px solid var(--accent-warm);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
}
.safe-empty {
    color: var(--text-muted); font-style: italic;
    font-size: 0.85rem; margin: 0;
}
.safe-blurb { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 0.5rem; line-height: 1.4; }
.safe-pending {
    font-size: 0.85rem; color: var(--accent);
    background: var(--bg); padding: 0.4rem 0.55rem;
    border-radius: 4px; border: 1px dashed var(--accent);
}
.safe-request-btn {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: var(--accent); color: var(--bg-paper);
    border: 1px solid var(--accent); border-radius: 4px;
    cursor: pointer; font: inherit; font-family: var(--sans);
    font-size: 0.88rem;
}
.safe-request-btn:hover { background: var(--accent-warm); border-color: var(--accent-warm); }
.sidebar-safe-host { background: var(--bg-paper); border: 1px solid var(--accent-warm); border-radius: 6px; padding: 0.6rem 0.8rem; }
.safe-request { padding: 0.4rem 0; border-bottom: 1px solid var(--border-soft); }
.safe-request:last-child { border-bottom: none; }
.safe-request p { margin: 0 0 0.3rem; font-size: 0.92rem; }
.safe-request-actions { display: flex; gap: 0.4rem; }

/* System events (e.g., "X has arrived") */
.system-event {
    display: flex; align-items: center; gap: 0.5rem;
    justify-content: center;
    padding: 0.4rem 0.7rem; margin: 0.3rem 0;
    color: var(--text-muted); font-style: italic;
    font-size: 0.85rem; font-family: var(--sans);
    text-align: center;
    break-inside: avoid;
    column-span: all;
    -webkit-column-span: all;
}
.system-event .system-time {
    font-size: 0.72rem; color: var(--text-faint); font-style: normal;
}

/* --- Get-the-app landing --- */
.get-the-app { max-width: 640px; }
.get-the-app .lead { font-size: 1.05rem; }
.app-grants { list-style: none; padding: 0; margin: 0.6rem 0; }
.app-grants li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft); }
.app-grants .muted { color: var(--text-muted); font-size: 0.85rem; }

/* --- Flash messages (Django messages framework) --- */
.flash-messages {
    list-style: none; padding: 0; margin: 0.6rem auto;
    max-width: 720px;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.flash-message {
    background: var(--bg-paper);
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    border-radius: 0 5px 5px 0;
    font-size: 0.95rem;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.flash-message.flash-success { border-left-color: var(--accent); }
.flash-message.flash-error { border-left-color: var(--danger); }
.flash-message.flash-warning { border-left-color: var(--accent-warm); }

/* --- Voice/RTMP/OBS instruction panels in the sidebar:
   long URLs in <pre> would otherwise push the sidebar wide. --- */
.stream-instructions,
.rtmp-instructions {
    max-width: 100%; overflow: hidden;
    margin-top: 0.5rem;
    font-size: 0.82rem;
}
.stream-instructions pre,
.rtmp-instructions pre {
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    margin: 0.3rem 0;
    font-size: 0.78rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
}
.stream-instructions label,
.rtmp-instructions label {
    font-size: 0.74rem; color: var(--text-muted);
    font-family: var(--sans); font-weight: 500;
    display: block; margin-top: 0.4rem;
}
.stream-instructions p,
.rtmp-instructions p { margin: 0.4rem 0; line-height: 1.45; }
.stream-info { word-break: break-all; }

/* --- Sidebar reorganised: grouped sections with quiet labels --- */
.sidebar-section {
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-soft);
}
.sidebar-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sidebar-section.sidebar-here { padding-bottom: 0.5rem; }
.sidebar-section-label {
    font-size: 0.72rem; color: var(--text-faint);
    font-family: var(--sans); letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500;
    margin: 0 0 0.5rem;
}
details.sidebar-section { padding-bottom: 0.7rem; }
details.sidebar-section > summary {
    list-style: none; cursor: pointer;
    user-select: none;
    padding-bottom: 0.3rem;
    display: flex; justify-content: space-between; align-items: baseline;
}
details.sidebar-section > summary::-webkit-details-marker { display: none; }
details.sidebar-section > summary::after {
    content: '▸'; font-size: 0.72rem; color: var(--text-faint);
    transition: transform 0.15s;
}
details.sidebar-section[open] > summary::after { transform: rotate(90deg); }
details.sidebar-section[open] > summary { margin-bottom: 0.4rem; }

.sidebar-notifications { background: transparent; }
.sidebar-notifications .pending-welcomes { margin: 0; }
.compose-share-toggle {
    font-size: 0.82rem; color: var(--text-muted);
    font-family: var(--sans);
    display: inline-flex; align-items: center; gap: 0.3rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}
.compose-share-toggle:hover { background: var(--bg-paper); color: var(--text); }

/* --- Around the houses feed (social-card style) --- */
.around-the-houses { max-width: 720px; }
.houses-feed { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-direction: column; gap: 0.9rem; }
.houses-feed-item {
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 1rem 1.2rem 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                0 2px 6px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.houses-feed-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
                0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.houses-feed-meta {
    display: flex; gap: 0.5rem; align-items: baseline;
    font-family: var(--sans); font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    padding-bottom: 0.55rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-soft);
}
.houses-feed-room {
    color: var(--accent); text-decoration: none; font-weight: 600;
    font-size: 0.86rem;
}
.houses-feed-room:hover { text-decoration: underline; }
.houses-feed-room .sep { color: var(--text-faint); margin: 0 0.2rem; font-weight: 400; }
.houses-feed-author { font-weight: 600; color: var(--text); }
.houses-feed-author::before { content: '· '; color: var(--text-faint); font-weight: 400; }
.houses-feed-time { color: var(--text-faint); margin-left: auto; }
.houses-feed-body {
    line-height: 1.55;
    font-size: 1rem;
    color: var(--text);
}
.houses-feed-body p:first-child { margin-top: 0; }
.houses-feed-body p:last-child { margin-bottom: 0; }
.houses-feed-body img:not(.emote) {
    max-width: 100%; border-radius: 5px;
    margin: 0.4rem 0;
}

.message .meta {
    display: flex; gap: 0.4rem; align-items: center;
    font-family: var(--sans); font-size: 0.78rem;
    flex-wrap: wrap; min-width: 0;
}
.message .meta .action-icon {
    width: 22px; height: 22px; font-size: 0.85rem;
    padding: 0;
}
.message .meta .scope-tag-btn,
.message .meta .scope-tag {
    margin-left: 0; padding: 0.05rem 0.3rem; font-size: 0.78rem;
}
.msg-actions-spacer { flex: 1 0 0; min-width: 0; }
.message .author { font-weight: 600; color: var(--text); }
.message .time { color: var(--text-faint); }
.message .edited { color: var(--text-faint); font-size: 0.7rem; font-style: italic; }
.msg-actions-spacer { flex: 1; }
.msg-action {
    color: var(--text-faint);
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-family: var(--sans); font-size: 0.7rem;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.msg-action:hover { color: var(--accent); }
.msg-action-form { display: inline; margin: 0; padding: 0; }
.message:hover .msg-action { color: var(--text-muted); }
.message:hover .msg-action:hover { color: var(--accent); }
.message .body { margin-top: 0.4rem; white-space: pre-wrap; line-height: 1.55; color: var(--text); max-width: 65ch; }
.message .body a { color: var(--accent); }
.empty { color: var(--text-faint); font-style: italic; padding: 2rem 0; text-align: center; font-size: 1.02rem; }

/* --- Media cards (TV / music player / link previews) --- */
.media-embed {
    margin-top: 0.7rem;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    max-width: 520px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.media-embed iframe {
    display: block;
    width: 100%;
    border: 0;
    background: #000;
}
.media-video iframe { aspect-ratio: 16 / 9; }
.media-audio { background: var(--bg-paper); }
.media-audio iframe { height: 152px; }

.media-link {
    display: flex;
    gap: 0; margin-top: 0.7rem;
    background: var(--bg-paper-warm);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    max-width: 520px;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s;
}
.media-link:hover {
    border-color: var(--accent-warm);
    transform: translateY(-1px);
    color: var(--text);
}
.media-link-image {
    width: 100px; height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--border-soft);
}
.media-link-body {
    padding: 0.7rem 0.95rem;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}
.media-link-title {
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    font-family: var(--serif);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.media-link-desc {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
    font-family: var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.media-link-host {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-family: var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose {
    /* Compose box now sits at the TOP of the feed area (above the
       messages grid) so posting doesn't require scrolling past every
       prior message. flex-shrink:0 stops the grid from pushing it
       smaller when the feed is short. */
    flex-shrink: 0;
    margin-bottom: 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    background: var(--bg-paper); border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 0.9rem;
}
.compose textarea {
    padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 4px;
    font: inherit; font-size: 1rem; resize: vertical;
    background: var(--field-bg); color: var(--text); min-height: 2.4rem;
}
.compose textarea:focus { outline: 2px solid var(--accent-warm); border-color: transparent; }
.compose button {
    align-self: flex-end; padding: 0.55rem 1.5rem;
    background: var(--chrome); color: var(--chrome-text);
    border: none; border-radius: 5px; cursor: pointer;
    font-family: var(--sans); font-weight: 500; font-size: 0.92rem;
    transition: background 0.15s;
}
.compose button:hover { background: var(--accent); }

/* --- Compact welcome card (in right sidebar for owner of empty kitchen) --- */
.welcome-card {
    background: linear-gradient(140deg, var(--bg-paper-warm), var(--bg-paper));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.05rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.welcome-card h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--text);
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.welcome-card p {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.welcome-cta {
    display: block;
    padding: 0.5rem 0.7rem;
    background: var(--chrome);
    color: var(--chrome-text);
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--sans); font-weight: 500; font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0.35rem;
    transition: background 0.15s, color 0.15s;
}
.welcome-cta:hover { background: var(--accent); color: white; }
.welcome-cta.secondary {
    background: transparent; color: var(--text);
    border: 1px solid var(--border);
}
.welcome-cta.secondary:hover {
    background: var(--accent-bright); border-color: var(--accent); color: var(--chrome);
}

/* --- Guests sidebar --- */
.guests-sidebar h3 {
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0 0 0.8rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted); font-family: var(--sans); font-weight: 600;
}
.place-form { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.place-form select, .place-form button {
    padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: 4px;
    font: inherit; font-size: 0.92rem;
    background: var(--field-bg); color: var(--text);
}
.place-form button { background: var(--chrome); color: var(--chrome-text); border: none; cursor: pointer; font-family: var(--sans); font-weight: 500; }
.guests-list { list-style: none; padding: 0; margin: 0; }
.guests-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 1rem; }
.guests-list li:last-child { border-bottom: none; }
.guests-list li.empty { font-style: italic; color: var(--text-faint); border-bottom: none; padding: 0.8rem 0; }

/* --- Blur control widget (bottom-right floating slider) --- */
.blur-control-widget {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 50;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 0.78rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.4;
    transition: opacity 0.2s;
}
.blur-control-widget:hover { opacity: 1; }
.blur-control-widget label { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.blur-control-widget input[type="range"] { width: 110px; accent-color: var(--accent-bright); cursor: pointer; }

/* --- Page-wide background (used on the auth pages) --- */
.page-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.page-bg img, .page-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    filter: blur(var(--blur-amount, 0px));
    /* Scale up so the blur fringe lives outside the container edges,
       otherwise blur creates a soft transparent border at the rim. */
    transform: scale(1.1);
}
body:has(.page-bg) {
    background: transparent;
}

/* --- Auth intro (login / signup / signup-locked) --- */
.auth-intro h1 {
    font-size: 2.4rem;
    margin: 0 0 0.4rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.auth-intro .tagline {
    font-size: 1.15rem;
    color: var(--accent);
    font-style: italic;
    margin: 0 0 1.2rem;
}
.auth-intro h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    border-top: 1px solid var(--border-soft);
    padding-top: 1.4rem;
    margin: 1.5rem 0 1rem;
    font-family: var(--sans);
    font-weight: 600;
    font-style: normal;
}
.auth-intro p {
    line-height: 1.55;
    margin: 0 0 0.8rem;
}
.auth-intro p.muted {
    color: var(--text-muted);
    font-size: 0.92rem;
    font-style: italic;
}

/* --- Cards --- */
.card {
    max-width: 620px; margin: 3rem auto;
    padding: 2.2rem 2.4rem;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-paper);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.card h1 { margin: 0 0 1.2rem; font-style: italic; font-weight: 500; color: var(--text); }
.card h2 { margin: 1.8rem 0 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-family: var(--sans); font-weight: 600; }
.card form { display: flex; flex-direction: column; gap: 0.5rem; }
.card form p { margin: 0.3rem 0; }
.card label {
    font-family: var(--sans); font-weight: 500; font-size: 0.88rem;
    color: var(--text-muted); display: block; margin-bottom: 0.25rem;
}
.card input, .card textarea, .card select {
    padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 4px;
    font: inherit; font-size: 1rem; width: 100%;
    background: var(--field-bg); color: var(--text);
}
.card input:focus, .card textarea:focus, .card select:focus {
    outline: 2px solid var(--accent-warm); border-color: transparent;
}
.card button.primary, .card button[type="submit"] {
    align-self: flex-start; padding: 0.65rem 1.6rem;
    background: var(--chrome); color: var(--chrome-text);
    border: none; border-radius: 5px; cursor: pointer;
    font-family: var(--sans); font-weight: 500; font-size: 0.95rem;
    margin-top: 0.7rem; transition: background 0.15s;
}
.card button.primary:hover, .card button[type="submit"]:hover { background: var(--accent); }
.card .welcome-note { color: var(--text-muted); font-style: italic; margin: 0 0 1.2rem; font-size: 1rem; }
.card .invite-link {
    background: var(--bg); padding: 0.9rem 1rem;
    border: 1px solid var(--border); border-radius: 5px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem; color: var(--text-muted); margin: 1rem 0;
    flex: 1 1 0; min-width: 0; max-width: 100%;
}
.invite-share {
    display: flex; gap: 1rem; align-items: stretch; margin: 1rem 0;
    flex-wrap: wrap;
}
.invite-share canvas,
.invite-share .invite-qr {
    border: 1px solid var(--border); border-radius: 5px;
    background: var(--bg-paper);
    flex-shrink: 0;
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px; box-sizing: border-box;
}
.invite-share .invite-qr svg {
    width: 100%; height: 100%; display: block;
}
.copy-btn {
    padding: 0.55rem 1.2rem;
    background: var(--chrome); color: var(--chrome-text);
    border: none; border-radius: 4px; cursor: pointer;
    font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
    margin-bottom: 0.7rem;
    transition: background 0.15s;
}
.copy-btn:hover { background: var(--accent); }
.card .cost-note { color: var(--text-muted); font-style: italic; }
.card .back-link {
    display: inline-block; margin-top: 1rem; margin-left: 1rem;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.92rem; font-family: var(--sans);
}
.card .back-link:hover { color: var(--text); }

/* --- Personalise: pickers --- */
.personalise .field { margin-bottom: 1.5rem; }
.personalise .field label { font-size: 1rem; color: var(--text); margin-bottom: 0.4rem; }
.personalise .form-help { color: var(--text-muted); font-size: 0.85rem; font-family: var(--sans); margin-top: 0.3rem; display: block; }

.theme-picker, .bg-picker, .font-picker {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    margin-top: 0.4rem;
}
@media (max-width: 600px) {
    .theme-picker, .bg-picker, .font-picker { grid-template-columns: 1fr; }
}

.theme-option, .bg-option, .font-option {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    cursor: pointer; background: var(--bg-paper);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-option:hover, .bg-option:hover, .font-option:hover { border-color: var(--accent-warm); }
.theme-option.selected, .bg-option.selected, .font-option.selected,
.accent-option.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bright);
}
.theme-option input, .bg-option input, .font-option input, .accent-option input { width: auto; flex-shrink: 0; }
.theme-swatch {
    width: 36px; height: 36px; border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
.theme-swatch-paper { background: linear-gradient(135deg, #fbf6e8, #f1ead8); }
.theme-swatch-evening { background: linear-gradient(135deg, #443e60, #2a2540); }
.theme-swatch-midnight { background: linear-gradient(135deg, #2a2834, #18161e); }
.theme-swatch-garden { background: linear-gradient(135deg, #f4f8e8, #e8f0d8); }
.theme-meta { display: flex; flex-direction: column; min-width: 0; }
.theme-meta strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--text); }
.theme-meta .theme-desc { color: var(--text-muted); font-size: 0.8rem; font-family: var(--sans); }

/* Accent picker - row of swatches */
.accent-picker {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem;
}
.accent-option {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    cursor: pointer; background: var(--bg-paper);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 78px;
}
.accent-option:hover { border-color: var(--accent-warm); }
.accent-option input { display: none; }
.accent-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
}
.accent-swatch-honey  { background: linear-gradient(135deg, #e6c98c, #a0732a); }
.accent-swatch-rust   { background: linear-gradient(135deg, #e89878, #a04020); }
.accent-swatch-moss   { background: linear-gradient(135deg, #a8c878, #5a8030); }
.accent-swatch-indigo { background: linear-gradient(135deg, #9890d0, #4a4090); }
.accent-swatch-plum   { background: linear-gradient(135deg, #c88aac, #803060); }
.accent-swatch-slate  { background: linear-gradient(135deg, #98b0c0, #506878); }
.accent-label { font-family: var(--sans); font-size: 0.78rem; color: var(--text-muted); }

/* Background previews */
.bg-preview {
    width: 60px; height: 36px; border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
    background: var(--bg-paper);
}
.bg-preview-none {}
.bg-preview-paper {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-preview-linen {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 0L6 6M6 0L0 6' stroke='%23000' stroke-width='0.5' opacity='0.18'/></svg>");
}
.bg-preview-stars {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='8' cy='10' r='0.8' fill='%23000' opacity='0.4'/><circle cx='25' cy='22' r='0.6' fill='%23000' opacity='0.3'/><circle cx='32' cy='32' r='0.7' fill='%23000' opacity='0.35'/><circle cx='14' cy='30' r='0.5' fill='%23000' opacity='0.3'/></svg>");
}

/* Font samples */
.font-sample {
    flex-shrink: 0; min-width: 70px; font-size: 1.1rem; color: var(--text);
    text-align: center; padding: 0.2rem 0.4rem;
    border-right: 1px solid var(--border-soft);
}
.font-sample-crimson { font-family: 'Crimson Pro', serif; }
.font-sample-lora { font-family: 'Lora', serif; }
.font-sample-garamond { font-family: 'EB Garamond', serif; }
.font-sample-inter { font-family: 'Inter', sans-serif; }
.font-meta { display: flex; flex-direction: column; }
.font-label { font-family: var(--sans); font-size: 0.95rem; color: var(--text); }

/* --- Connections list (settings) --- */
.connections-list { list-style: none; padding: 0; margin: 0; }
.connections-list .connection {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft);
    font-size: 1.02rem;
}
.connections-list .connection:last-child { border-bottom: none; }
.drop-button {
    background: none; color: var(--danger); border: 1px solid var(--border);
    padding: 0.35rem 0.85rem; border-radius: 4px; cursor: pointer;
    font: inherit; font-family: var(--sans); font-size: 0.85rem;
}
.drop-button:hover { background: var(--bg); }

/* --- Form helpers --- */
form p { margin: 0.6rem 0; }
.helptext, .form-help { color: var(--text-muted); font-size: 0.82rem; font-family: var(--sans); display: block; margin-top: 0.2rem; }
ul.errorlist { color: var(--danger); padding-left: 1.2rem; margin: 0.4rem 0; font-family: var(--sans); font-size: 0.85rem; }
input[type="text"], input[type="email"], input[type="password"] {
    padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 4px;
    font: inherit; font-size: 1rem; width: 100%;
    background: var(--field-bg); color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
    outline: 2px solid var(--accent-warm); border-color: transparent;
}

/* --- Settings page --- */
.settings-page h2 {
    font-size: 1.15rem; margin: 1.6rem 0 0.6rem;
    padding-top: 0.6rem; border-top: 1px solid var(--border-soft);
    font-family: var(--sans);
}
.settings-page h2:first-of-type { border-top: none; padding-top: 0; }
.settings-summary { color: var(--text-muted); margin: 0.3rem 0 1.2rem; }
.settings-page .connections-list .connection {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft);
}
.rename-form {
    display: flex; gap: 0.4rem; flex: 1 1 220px; min-width: 0;
}
.rename-form input { flex: 1; min-width: 0; padding: 0.35rem 0.55rem; font-size: 0.92rem; }
.connection-tags { display: inline-flex; gap: 0.3rem; }
.connection-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.connection-actions form { margin: 0; padding: 0; }

.invites-list { list-style: none; padding: 0; margin: 0; }
.invite-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft);
    gap: 0.6rem;
}
.invite-row:last-child { border-bottom: none; }
.invite-row form { margin: 0; padding: 0; }
.invite-actions { display: flex; gap: 0.4rem; }
.invite-meta { font-size: 0.92rem; }

.display-form .settings-field { margin: 0.7rem 0 1rem; }
.display-form .settings-field label { display: block; margin-bottom: 0.3rem; font-weight: 500; }
.display-form .radio-row { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; margin: 0.2rem 0; }
.display-form input[type="range"] { width: 100%; max-width: 360px; }

.account-list { list-style: none; padding: 0; margin: 0.4rem 0; }
.account-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft); }
.account-list li:last-child { border-bottom: none; }
.danger-link { color: var(--danger); }

.danger-button {
    background: var(--danger); color: white;
    border: 1px solid var(--danger); border-radius: 4px;
    padding: 0.5rem 1.1rem; cursor: pointer; font: inherit;
}
.danger-button:hover { filter: brightness(0.9); }

/* --- Direct welcome (organic introduction) --- */
.welcome-inline { display: inline; margin: 0; padding: 0; }
.welcome-btn {
    background: transparent; border: 1px solid var(--accent);
    color: var(--accent); padding: 0 0.45rem; margin-left: 0.4rem;
    border-radius: 3px; cursor: pointer; line-height: 1.4;
    font-family: var(--sans); font-size: 0.78em;
}
.welcome-btn:hover { background: var(--accent); color: var(--bg-paper); }

.pending-welcomes {
    background: var(--bg-paper); border: 1px solid var(--accent-warm);
    border-radius: 5px; padding: 0.7rem 0.85rem; margin: 0.8rem 0;
}
.pending-welcomes h3 {
    margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--accent);
    font-family: var(--sans); letter-spacing: 0.02em;
}
.pending-welcome { padding: 0.45rem 0; border-top: 1px solid var(--border-soft); }
.pending-welcome:first-of-type { border-top: none; }
.pending-welcome p { margin: 0 0 0.4rem; font-size: 0.92rem; }
.pending-welcome-actions { display: flex; gap: 0.4rem; }
.pending-welcome-actions form { margin: 0; }
.welcome-accept, .welcome-decline {
    padding: 0.32rem 0.7rem; border-radius: 3px; cursor: pointer;
    font: inherit; font-family: var(--sans); font-size: 0.82rem;
}
.welcome-accept { background: var(--accent); color: var(--bg-paper); border: 1px solid var(--accent); }
.welcome-accept:hover { background: var(--accent-warm); border-color: var(--accent-warm); }
.welcome-decline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.welcome-decline:hover { background: var(--bg); }

.leave-gaff { margin: 1rem 0 0; }
.leave-gaff-btn {
    width: 100%; padding: 0.55rem 0.85rem; border-radius: 4px; cursor: pointer;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); font: inherit;
    font-family: var(--sans); font-size: 0.88rem;
}
.leave-gaff-btn:hover { background: var(--bg); color: var(--danger); border-color: var(--danger); }

/* --- Host moderation (per-guest, per-room) --- */
.guests-list .guest-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-soft);
}
.guests-list .guest-row:last-child { border-bottom: none; }
.guest-name { font-size: 0.95rem; }
.guest-actions { display: flex; gap: 0.3rem; }
.guest-actions form { margin: 0; padding: 0; }
.muted-tag {
    font-size: 0.72rem; color: var(--text-muted); border: 1px solid var(--border);
    padding: 0 0.35rem; border-radius: 3px; margin-left: 0.4rem;
    font-family: var(--sans); letter-spacing: 0.04em;
}
.family-tag {
    font-size: 0.7rem; color: var(--accent); border: 1px solid var(--accent);
    padding: 0 0.35rem; border-radius: 3px; margin-left: 0.4rem;
    font-family: var(--sans); letter-spacing: 0.04em; font-weight: 500;
    background: var(--bg-paper);
}
.mod-btn {
    background: transparent; color: var(--text-muted); border: 1px solid var(--border);
    padding: 0.2rem 0.55rem; border-radius: 3px; cursor: pointer;
    font: inherit; font-family: var(--sans); font-size: 0.78rem;
}
.mod-btn:hover { background: var(--bg); color: var(--text); }
.mod-btn.danger:hover { background: var(--bg); color: var(--danger); border-color: var(--danger); }

.room-members-list {
    list-style: none; padding: 0; margin: 0.5rem 0 0.8rem;
    font-size: 0.88rem;
}
.room-members-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0; border-bottom: 1px solid var(--border-soft);
}
.room-members-list li:last-child { border-bottom: none; }
.room-members-list form { margin: 0; }

.muted-banner {
    background: var(--bg-paper); border: 1px solid var(--border);
    border-radius: 5px; padding: 0.7rem 0.95rem; margin: 0.6rem 0;
    color: var(--text-muted); font-style: italic; font-size: 0.92rem;
}

/* --- Site footer + charter page --- */
.site-footer {
    text-align: center; padding: 1.2rem 0 1.6rem;
    font-family: var(--sans); font-size: 0.8rem;
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.charter-page { max-width: 46rem; margin: 0 auto; }
.charter-page h2 { margin-top: 1.6rem; }
.charter-commitments li { margin-bottom: 0.6rem; }

/* --- Ephemeral hint under the composer --- */
.compose-ephemeral-hint {
    margin: 0.35rem 0 0; font-family: var(--sans); font-size: 0.72rem;
    color: var(--text-muted); opacity: 0.8;
}

/* --- Mobile pass (living-room test: guests on ~390px phones) --- */
@media (max-width: 700px) {
    body:has(.gaff-layout) main { padding: 1.2rem 0.7rem; }

    /* Feed first. The sidebar dissolves into grid items so its sections
       can be reordered: room name, pending welcomes, who's here and the
       rooms strip stay above the feed; every other section (host tools,
       voice, the safe) drops below it. */
    .rooms-sidebar { display: contents; }
    .room-header--in-sidebar { order: -5; margin: 0; }
    .sidebar-notifications { order: -4; }
    .sidebar-here { order: -3; }
    .sidebar-rooms { order: -2; }
    .room-main { order: 0; }
    .sidebar-elsewhere, .sidebar-visitor, .sidebar-host-room,
    .sidebar-host-guests, .sidebar-live, .sidebar-safe { order: 1; }

    /* Rooms become a horizontal hop-strip instead of a vertical list. */
    .sidebar-rooms .rooms-list {
        display: flex; overflow-x: auto; gap: 0.3rem;
        margin: 0 0 0.4rem; padding-bottom: 0.3rem;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-rooms .rooms-list li { flex: 0 0 auto; margin-bottom: 0; }
    .sidebar-rooms .rooms-list a,
    .sidebar-rooms .rooms-list .room-locked { white-space: nowrap; }

    /* The feed scrolls inside itself (dvh survives the mobile URL bar)
       so the composer stays reachable right below it. */
    .messages { max-height: calc(100dvh - 15rem); }

    /* 16px inputs stop iOS zoom-on-focus; actions wrap with Post
       full-width on its own row. */
    .compose textarea, .compose .ql-editor { font-size: 16px; }
    .compose-actions { flex-wrap: wrap; }
    .compose-actions .compose-post-btn { flex: 1 1 100%; margin-left: 0; }

    /* Thumb-sized targets for per-message and voice controls. */
    .message .meta { flex-wrap: wrap; row-gap: 0.3rem; }
    .message .meta .action-icon { padding: 0.4rem 0.55rem; font-size: 1rem; }
    .mod-btn, .welcome-btn { padding: 0.45rem 0.7rem; }
    .voice-controls button { min-height: 44px; }

    /* Settings: connection rows wrap instead of overflowing. */
    .connections-list .connection { flex-wrap: wrap; row-gap: 0.4rem; }

    /* The fixed blur widget overlaps the composer on small screens;
       hosts set blur from a desktop or via Edit room. */
    .blur-control-widget { display: none; }
}

@media (max-width: 500px) {
    /* The chair glyph row goes; the numeric n/42 never does. */
    .chair-counter .chairs { display: none; }
    .chrome { padding: 0.5rem 0.7rem; gap: 0.5rem; }
    .chrome nav { font-size: 0.8rem; gap: 0.55rem; flex-wrap: wrap; }
}