:root {
    --brand: #0f6f6a;
    --paper: #f3efe6;
    --ink: #1c1915;
    --card: #fffdf8;
    --line: #d9d1c3;
    --danger: #8c2f2f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.45 "Segoe UI", system-ui, sans-serif;
}
html:has(#call:not([hidden])),
html:has(#call:not([hidden])) body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: #202124;
}

h1, h2 { font-weight: 650; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }

button, input {
    font: inherit;
    color: inherit;
}

button {
    background: var(--brand);
    color: white;
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    cursor: pointer;
}

button.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

button:disabled { opacity: 0.55; cursor: default; }

.sheet {
    width: min(760px, calc(100% - 2rem));
    margin: 2.5rem auto 4rem;
}

.sheet.narrow { width: min(460px, calc(100% - 2rem)); }

.room-body:has(#join:not([hidden])),
.room-body:has(#lobby:not([hidden])) {
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
}
#join.sheet.narrow,
#lobby.sheet.narrow {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0 12vh;
    overflow: auto;
    background: transparent;
    color: inherit;
}
#join .card,
#lobby .card { margin-bottom: 0; }
#lobby-form {
    width: min(420px, calc(100% - 3rem));
    display: grid;
    gap: 0.85rem;
    padding: 1.35rem 1.35rem 1.4rem;
}
#lobby-form label { margin: 0; }
#lobby-form > button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 0.8rem 1.4rem;
    text-align: center;
}
.lobby-text {
    width: min(34rem, calc(100% - 2rem));
    margin: 0 1rem 1rem;
    text-align: center;
    font-size: 1.15rem;
}
label.check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 0.9rem;
}
label.check input { width: auto; }
.admin-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}
.admin-row strong {
    font-size: 1.35rem;
    letter-spacing: 0.16em;
}
.knock-stack {
    position: fixed;
    top: calc(4.2rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: grid;
    gap: 0.4rem;
    width: min(440px, calc(100% - 1.5rem));
}
.knock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    background: #fffdf8;
    color: #1c1915;
    border-radius: 12px;
    padding: 0.45rem 0.5rem 0.45rem 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.knock button { padding: 0.4rem 0.9rem; }
.person-menu {
    position: fixed;
    z-index: 70;
    min-width: 12.5rem;
    background: #fffdf8;
    color: #1c1915;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.3rem;
    display: grid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.person-menu button {
    background: transparent;
    color: inherit;
    border-radius: 8px;
    text-align: left;
    padding: 0.45rem 0.7rem;
}
.person-menu button:hover { background: #f3efe6; }
.controls button.tool .face { position: relative; }
.controls button.tool[data-access="no"] .face::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 2px;
    background: #f6aea9;
    transform: rotate(-32deg);
    border-radius: 2px;
}
.controls button.tool[data-access="no"] .caption { text-decoration: line-through; }
#join-form {
    width: min(420px, calc(100% - 3rem));
    display: grid;
    gap: 0.85rem;
    padding: 1.35rem 1.35rem 1.4rem;
}
#join-form label { margin: 0; }
#join-next { margin: 0.4rem 0 0; }
#join-next a { color: var(--brand); }

.mast {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mast img, .room-bar img {
    width: 52px;
    height: 52px;
}

.lede, .muted { color: #5c564c; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1.5rem;
}

label { display: grid; gap: 0.35rem; margin-bottom: 0.8rem; }
#join-form > button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 0.8rem 1.4rem;
    text-align: center;
}
label span { font-size: 0.85rem; }

input {
    width: 100%;
    border: 1px solid var(--line);
    background: white;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
}
input::placeholder {
    color: #9c9488;
    opacity: 1;
}

.error { color: var(--danger); min-height: 1.2em; }
.conference-name { margin: 0.2rem 0 0.7rem; font-weight: 650; }

.link-row { display: flex; gap: 0.5rem; }
.link-row input { flex: 1; }

.recent { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.recent li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}
.recent a { color: var(--brand); }
.recent .actions { display: flex; gap: 0.4rem; }
.ended-tag { font-size: 0.8rem; color: #5c564c; }

[hidden] { display: none !important; }

.room-body { min-height: 100vh; display: flex; flex-direction: column; }
.room-body:has(#call:not([hidden])) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--vv-bottom, 0px);
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}
.room-body:has(#call:not([hidden])) {
    background: #202124;
    color: #e8eaed;
}
.room-body:has(#call:not([hidden])) .room-bar {
    position: relative;
    z-index: 40;
    flex: none;
    background: #202124;
    color: #e8eaed;
    border-bottom-color: transparent;
}
.room-body:has(#call:not([hidden])) .status { color: #bdc1c6; }
.room-body:has(#call:not([hidden])) .modes button {
    background: #3c4043;
    color: #e8eaed;
}
.room-body:has(#call:not([hidden])) .modes button[aria-pressed="true"] { background: var(--brand); }
.room-body:has(#call:not([hidden])) #leave.icon {
    background: #3c4043;
    color: #f6aea9;
}
.room-bar .modes button svg,
#leave.icon svg { pointer-events: none; }
.room-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
}
.room-bar h1 { font-size: 1.15rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-bar img { width: 36px; height: 36px; }
.room-bar .modes { display: none; }
.room-body:has(#call:not([hidden])) .room-bar .modes { display: flex; }
#leave.icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: #221f1b;
    display: grid;
    place-items: center;
    flex: none;
}
#leave.icon svg { width: 62%; height: 62%; }
#copy-link.icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: #221f1b;
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}
#copy-link.icon svg { width: 62%; height: 62%; pointer-events: none; }
#camera-options.icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: #3c4043;
    color: #e8eaed;
    display: none;
    place-items: center;
    flex: none;
}
#camera-options.icon svg { width: 62%; height: 62%; pointer-events: none; }
.room-body:has(#call:not([hidden])) #camera-options.icon { display: grid; }
#camera-options[aria-expanded="true"] { background: var(--brand); color: #fff; }
.camera-menu {
    position: fixed;
    z-index: 70;
    min-width: 13.5rem;
    background: #fffdf8;
    color: #1c1915;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.3rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.camera-menu[hidden] { display: none; }
.camera-menu button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    text-align: left;
    padding: 0.5rem 0.7rem;
}
.camera-menu button:hover { background: #f3efe6; }
.camera-menu .tick {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    flex: none;
    display: grid;
    place-items: center;
}
.camera-menu button[aria-checked="true"] .tick {
    background: var(--brand, #0f6f6a);
    border-color: transparent;
}
.camera-menu button[aria-checked="true"] .tick::after {
    content: "";
    width: 0.28rem;
    height: 0.5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.background-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(20, 18, 16, 0.46);
}
.background-modal[hidden] { display: none; }
.background-card {
    width: min(42rem, 100%);
    max-height: min(34rem, calc(100vh - 2rem));
    overflow: auto;
    background: #fffdf8;
    color: #1c1915;
    border-radius: 16px;
    padding: 1rem 1rem 1.1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.background-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.background-head h2 { margin: 0; font-size: 1.15rem; }
.background-head button {
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
}
.background-choices { display: grid; gap: 0.35rem; }
.background-choices button {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
}
.background-choices button:hover { background: #f3efe6; }
.background-choices button[aria-checked="true"] { background: #f3efe6; }
.background-choices button::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    flex: none;
}
.background-choices button[aria-checked="true"]::before {
    border-color: var(--brand, #0f6f6a);
    box-shadow: inset 0 0 0 4px var(--brand, #0f6f6a);
    background: #fff;
}
.background-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.background-own {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.8rem;
}
.background-own p {
    flex: 1 1 14rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #5c564c;
}
.background-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    background: var(--brand, #0f6f6a);
    color: #fff;
    font-weight: 650;
    cursor: pointer;
}
.background-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
#background-custom {
    width: 7.2rem;
    flex: none;
}
.background-presets[hidden] { display: none; }
.background-presets button {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #ece7df;
    aspect-ratio: 16 / 10;
}
.background-presets img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.background-presets button[aria-checked="true"] {
    outline: 3px solid var(--brand, #0f6f6a);
    outline-offset: 2px;
}
.background-presets p { grid-column: 1 / -1; margin: 0.2rem 0 0; }
.room-body:has(#call:not([hidden])) #copy-link.icon {
    background: #3c4043;
    color: #e8eaed;
}
#copy-link[data-copied="1"] { background: var(--brand); color: #fff; }
.link-state {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b5812a;
    flex: none;
}

#call:not([hidden]) {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.preview-heading {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0 0 0.35rem;
}
.preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.8rem;
    border-radius: 12px;
    overflow: hidden;
    background: #221f1b;
}
#preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #221f1b;
    transform: scaleX(-1);
}
.preview-frame .mark {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(48px, 28%, 112px);
    color: #fffcf6;
    opacity: 0.9;
    pointer-events: none;
}
.preview-frame .mark svg { display: block; width: 100%; height: auto; }
.preview-frame.live .mark { display: none; }
.status { text-align: center; color: #5c564c; margin: 0.4rem 0; }
.status:empty { display: none; }

.stage {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 18vw, 196px);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(0.35rem, 1vw, 0.6rem);
    padding: clamp(0.35rem, 1.2vw, 0.8rem);
}
.stage[data-mode="solo"],
.stage[data-mode="thumbs"] { grid-template-columns: minmax(0, 1fr); }
.stage[data-mode="thumbs"] { grid-template-rows: minmax(0, 1fr); }
.stage[data-mode="main"] { position: relative; grid-template-columns: minmax(0, 1fr); }
.stage[data-mode="side"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.45fr) minmax(0, 0.85fr);
}
@media (orientation: landscape) {
    .stage[data-mode="side"] {
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.85fr);
        grid-template-rows: minmax(0, 1fr);
    }
}
.grid { position: relative; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; }
.pin {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 4;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(28, 25, 21, 0.72);
    color: white;
    display: grid;
    place-items: center;
}
.pin svg { width: 58%; height: 58%; }
.tile.audible::after,
.tile.speaking::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
}
.tile.audible::after { box-shadow: inset 0 0 0 2px rgba(47, 158, 107, 0.55); }
.tile.speaking::after { box-shadow: inset 0 0 0 4px #2f9e6b; }
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
        animation-duration: 380ms;
        animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1);
    }
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
    ::view-transition-old(root) { display: none; }
    .modes button,
    #leave.icon,
    .controls button.device .face,
    .controls button.tool .face {
        transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    }
    .modes button:active,
    #leave.icon:active,
    .controls button.device:active .face,
    .controls button.tool:active .face {
        transform: scale(0.96);
    }
    .tile.audible::after,
    .tile.speaking::after {
        transition: box-shadow 240ms ease;
    }
}
.stage[data-mode="thumbs"] .grid {
    display: grid;
    height: 100%;
    overflow: auto;
    gap: clamp(0.35rem, 1vw, 0.6rem);
    align-content: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    grid-auto-rows: minmax(0, 1fr);
}
.rail {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.stage[data-mode="solo"] .rail,
.stage[data-mode="main"] .rail,
.stage[data-mode="thumbs"] .rail { display: none; }
.preview-bar { display: none; }
.stage[data-mode="main"] .rail.preview-dock {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: calc(100% - 16px);
    height: auto;
    min-height: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.stage[data-mode="main"] .rail.preview-dock[data-drag="1"] { cursor: grabbing; }
.stage[data-mode="main"] .rail.preview-dock .preview-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 28px;
    padding: 0 0.3rem 0 0.65rem;
    border-radius: 8px;
    background: rgba(32, 33, 36, 0.9);
    color: #fffcf6;
    font-size: 0.75rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 2px);
    opacity: 0;
    pointer-events: none;
}
.stage[data-mode="main"] .rail.preview-dock:hover .preview-bar,
.stage[data-mode="main"] .rail.preview-dock:focus-within .preview-bar,
.stage[data-mode="main"] .rail.preview-dock[data-drag="1"] .preview-bar,
.stage[data-mode="main"] .rail.preview-dock[data-collapsed="1"] .preview-bar {
    opacity: 1;
    pointer-events: auto;
}
.stage[data-mode="main"] .rail.preview-dock[data-drag="1"] .preview-bar,
.stage[data-mode="main"] .rail.preview-dock[data-drag="1"] .thumbs .tile { cursor: grabbing; }
.stage[data-mode="main"] .rail.preview-dock[data-collapsed="1"] .preview-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 8.5rem;
}
.stage[data-mode="main"] .rail.preview-dock[data-collapsed="1"] .thumbs { display: none; }
.preview-grip { flex: 1; }
.preview-fold {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.preview-fold svg { width: 16px; height: 16px; display: block; }
.rail[data-collapsed="1"] .fold-hide,
.rail:not([data-collapsed="1"]) .fold-show { display: none; }
.stage[data-mode="main"] .rail.preview-dock .thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    width: auto;
    height: auto;
    max-width: 100%;
    overflow: auto;
    scrollbar-width: none;
    touch-action: none;
    cursor: grab;
}
.stage[data-mode="main"] .rail.preview-dock .thumbs::-webkit-scrollbar { display: none; }
.stage[data-mode="main"] .rail.preview-dock .thumbs .tile {
    width: clamp(96px, 18vw, 150px);
    aspect-ratio: 16 / 10;
    height: auto;
    flex: none;
    max-width: none;
    cursor: grab;
}
.stage[data-mode="main"] .rail.preview-dock .thumbs .tile video { object-fit: cover; }
@media (hover: none) {
    .stage[data-mode="main"] .rail.preview-dock .preview-bar {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-bottom: 0.3rem;
        opacity: 1;
        pointer-events: auto;
    }
}
.modes { display: flex; gap: 0.35rem; justify-content: center; flex: none; align-items: center; }
.modes button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: #221f1b;
    display: grid;
    place-items: center;
}
.modes button svg { width: 68%; height: 68%; }
.modes button .icon-narrow { display: none; }
.modes button[aria-pressed="true"] { background: var(--brand); }
.thumbs {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.thumbs .tile { aspect-ratio: 16 / 10; height: auto; flex: none; cursor: pointer; }
.stage[data-mode="side"] .rail { width: auto; min-height: 0; height: 100%; }
.stage[data-mode="side"] .thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    align-content: stretch;
    overflow: auto;
    height: 100%;
    min-height: 0;
    gap: clamp(0.35rem, 1vw, 0.6rem);
}
.stage[data-mode="side"] .thumbs .tile {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    aspect-ratio: auto;
}
.stage[data-mode="side"] .thumbs .tile video { object-fit: contain; }
.tile {
    position: relative;
    background: #000;
    color: white;
    border-radius: 8px;
    min-height: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.stage[data-mode="main"] .grid,
.stage[data-mode="side"] .grid,
.stage[data-mode="solo"] .grid {
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage[data-mode="main"] .grid .tile,
.stage[data-mode="side"] .grid .tile,
.stage[data-mode="solo"] .grid .tile {
    flex: 1 1 auto;
    align-self: stretch;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    background: #000;
}
.stage[data-mode="main"] .grid .tile video,
.stage[data-mode="side"] .grid .tile video,
.stage[data-mode="solo"] .grid .tile video { object-fit: contain; background: #000; }
.stage[data-mode="thumbs"] .tile {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    background: #000;
}
.stage[data-mode="thumbs"] .tile video,
.thumbs .tile video {
    object-fit: contain;
    background: #000;
}
.tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    background: #221f1b;
}
.tile.local:not(.share) > video,
.tile.share.local .pip video { transform: scaleX(-1); }
.tile.share {
    box-shadow: inset 0 0 0 3px #1f8f4e;
    container-type: inline-size;
}
.tile.share.speaking::after,
.tile.share.audible::after { box-shadow: none; }
.tile.share .banner {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 8.5rem);
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: #1f8f4e;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    pointer-events: none;
    white-space: nowrap;
}
.tile.share .banner i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #fff;
    flex: none;
}
@container (max-width: 340px) {
    .tile.share .banner { display: none; }
}
.tile.share .pip,
.tile.share .pip-min {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 5;
    padding: 0;
    border: 0;
    cursor: pointer;
}
.tile.share .pip {
    width: clamp(64px, 28%, 168px);
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1c1e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.tile.share .pip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1c1e;
}
.stage .tile.share .pip video { object-fit: cover; }
.tile.share .pip.speaking { box-shadow: 0 0 0 3px #2f9e6b, 0 2px 12px rgba(0, 0, 0, 0.45); }
.tile.share .pip-min {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(32, 33, 36, 0.92);
    color: #fffcf6;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.tile.share .pip-min .mark {
    display: block;
    position: static;
    width: 62%;
    height: auto;
    transform: none;
    opacity: 0.9;
    color: #fffcf6;
}
.tile.share[data-pip="off"] .pip,
.tile.share[data-pip="off"] .pip-min,
.tile.share[data-pip="hidden"] .pip,
.tile.share[data-pip="open"] .pip-min { display: none; }
.tile.docked { display: none; }
.thumbs .tile.local { cursor: pointer; }
.tile .mark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: clamp(36px, 28%, 112px);
    color: #fffcf6;
    opacity: 0.9;
    pointer-events: none;
}
.tile:not(.broadcasting) .mark { display: block; }
.tile .mark svg { display: block; width: 100%; height: auto; }
.tile .name {
    position: absolute;
    z-index: 3;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.55rem;
    top: auto;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2;
    pointer-events: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: clamp(0.75rem, 1.4vw, 0.92rem);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.tile .name .who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tile .mic-off {
    display: none;
    flex: none;
    width: 1rem;
    height: 1rem;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
.tile .mic-off svg { display: block; width: 100%; height: 100%; }
.tile.muted .mic-off { display: block; }
#mute-note {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 6;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: min(28rem, calc(100% - 2rem));
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    background: rgba(28, 25, 21, 0.48);
    color: #fffdf8;
    font-size: 1rem;
    font-weight: 560;
    letter-spacing: 0.01em;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
#mute-note[data-show="1"] { opacity: 1; }
.join-note {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    z-index: 7;
    width: min(26rem, calc(100% - 2rem));
    margin: 0;
    padding: 0.9rem 1.15rem;
    border-radius: 14px;
    background: rgba(48, 49, 54, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.7s ease;
}
.join-note.leaving { opacity: 0; }
.join-note strong { font-weight: 750; }

.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.35rem, 1.4vw, 0.85rem);
    padding: 0 0 0.9rem;
}
.controls .caption { display: none; }
.controls .tool { display: none; }
#call .controls {
    flex: 0 0 auto;
    position: relative;
    z-index: 6;
    padding: 0.35rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: #202124;
    border-top: 0;
    gap: 0.15rem 0.35rem;
}
#call .controls .tool { display: flex; }
.sharing-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.7rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.8rem;
    background: #146c43;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}
.sharing-bar[hidden] { display: none; }
.sharing-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #d8ffe8;
    flex: none;
}
.sharing-bar button {
    background: #fff;
    color: #146c43;
    border: 0;
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.sharing-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.controls .share-slot { display: none; }
#call .controls .share-slot { display: flex; position: relative; }
#share[data-live="on"] .face { background: #1f8f4e; color: #fff; }
#board[data-live="on"] .face { background: #0f6f6a; color: #fff; }
#chat[data-live="on"] .face { background: #2a6fbb; color: #fff; }
#notes[data-live="on"] .face { background: #6a5acd; color: #fff; }
.tile.board,
.stage[data-mode] .grid .tile.board,
.stage[data-mode] .thumbs .tile.board {
    background: #f6f3ec;
    color: #1c1a17;
    box-shadow: none;
}
.tile.board > .name { display: none; }
.tile.board.speaking::after,
.tile.board.audible::after { box-shadow: none; }
.board-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f6f3ec;
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.board-svg,
.board-svg * { touch-action: none; }
.board-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.board-svg text { font-family: "Segoe UI", system-ui, sans-serif; }
.board-label {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1c1a17;
    text-align: center;
    font: 600 16px/22px sans-serif;
    line-height: 22px;
    resize: none;
    overflow: hidden;
}
.board-hint {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    max-width: 16rem;
    color: #8a8175;
    font-size: 0.95rem;
    text-align: center;
    pointer-events: none;
}
.board-badge {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    color: #0f6f6a;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.tile.board.compact .board-badge { display: flex; }
.tile.board.compact .board-tools,
.tile.board.compact .board-hint,
.tile.board.compact .board-label,
.tile.board.compact .board-zoom,
.tile.board.compact .board-stage { display: none; }
.board-zoom {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.board-zoom button {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.94);
    color: #1c1a17;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(28, 26, 23, 0.14);
    cursor: pointer;
}
.board-zoom button svg { width: 22px; height: 22px; }
.board-zoom button:disabled { opacity: 0.35; cursor: default; }
.board-zoom button:focus-visible { outline: 2px solid #0f6f6a; outline-offset: 2px; }
.board-tools {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.45rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.28rem;
    padding: 0.35rem;
    border-radius: 16px;
    background: rgba(255, 252, 246, 0.94);
    box-shadow: 0 10px 28px rgba(28, 26, 23, 0.16);
}
.board-tool,
.board-swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1c1a17;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.board-tool { touch-action: manipulation; }
.board-tool svg { width: 22px; height: 22px; }
.board-tool.on { background: #0f6f6a; color: #fff; }
.board-tool:disabled { opacity: 0.35; }
.board-tool.danger.on { background: transparent; color: #1c1a17; }
.board-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.18);
}
.board-swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1a17; }
.board-head-menu {
    position: fixed;
    z-index: 70;
    min-width: 13.5rem;
    background: #fffdf8;
    color: #1c1915;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.3rem;
    display: grid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.board-head-menu button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 8px;
    text-align: left;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
}
.board-head-menu button svg { width: 28px; height: 22px; flex: none; }
.board-head-menu button[aria-checked="true"] { background: #0f6f6a; color: #fff; }
.board-head-menu button:hover { background: #f3efe6; }
.board-head-menu button[aria-checked="true"]:hover { background: #0f6f6a; }
.board-tool:focus-visible,
.board-head-menu button:focus-visible,
.board-swatch:focus-visible { outline: 2px solid #0f6f6a; outline-offset: 2px; }
#call .controls .caption {
    display: block;
    max-width: 4.8rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #e8eaed;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
}
.controls .error { flex-basis: 100%; text-align: center; margin: 0; }
#call .controls .error {
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: calc(100% + 0.35rem);
    flex: none;
    width: auto;
    margin: 0;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    background: rgba(32, 33, 36, 0.94);
    pointer-events: none;
    z-index: 3;
}
.controls button.device,
.controls button.tool {
    background: transparent;
    color: #e8eaed;
    width: auto;
    height: auto;
    padding: 0.15rem 0.35rem 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
}
.controls button.device .face,
.controls button.tool .face {
    width: clamp(48px, 11vw, 56px);
    height: clamp(48px, 11vw, 56px);
    border-radius: 50%;
    background: #3c4043;
    color: #fff;
    display: grid;
    place-items: center;
}
.controls button.device .face svg,
.controls button.tool .face svg {
    width: 52%;
    height: 52%;
    grid-area: 1 / 1;
}
.controls button.device .glyph,
.controls button.device .spin { display: none; }
.controls button.device[data-phase="steady"][data-live="on"] .glyph-on,
.controls button.device[data-phase="steady"][data-live="off"] .glyph-off,
.controls button.device[data-phase="steady"][data-live="blocked"] .glyph-off { display: block; }
.controls button.device[data-phase="pending"] .spin {
    display: block;
    animation: device-spin 0.7s linear infinite;
}
.controls button.device[data-live="off"][data-phase="steady"] .face { background: var(--danger); }
.controls button.device[data-live="blocked"][data-phase="steady"] .face {
    background: #5f6368;
    color: #e8eaed;
}
.controls button.device[data-phase="pending"] { cursor: progress; }
@keyframes device-spin { to { transform: rotate(360deg); } }
.controls button.device:focus-visible .face,
.controls button.tool:focus-visible .face {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .controls button.device[data-phase="steady"]:hover .face,
    .controls button.tool:hover .face {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
    }
}

@media (max-width: 700px) {
    .room-bar { padding: 0.55rem 0.7rem; gap: 0.5rem; }
    .room-bar h1 { font-size: 1rem; }
    .stage { grid-template-columns: minmax(0, 1fr) clamp(92px, 30vw, 132px); }
    .room-body:has(#call:not([hidden])) .room-bar {
        padding-top: calc(0.55rem + env(safe-area-inset-top));
    }
    .modes button, #leave.icon, #copy-link.icon, #camera-options.icon { width: 44px; height: 44px; }
    #call .controls {
        flex-wrap: nowrap;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
    #call .controls .caption { display: none; }
    .join-note { padding: 0.75rem 0.9rem; font-size: 0.88rem; }
    #call .controls button.device,
    #call .controls button.tool,
    #call .controls .share-slot {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }
    .controls button.device .face,
    .controls button.tool .face {
        width: 44px;
        height: 44px;
    }
    .modes button[data-mode="side"] .icon-wide { display: none; }
    .modes button[data-mode="side"] .icon-narrow { display: block; }
}

@media (max-width: 700px) and (max-height: 500px) {
    .room-body:has(#call:not([hidden])) .room-bar {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
    .modes button, #leave.icon, #copy-link.icon, #camera-options.icon { width: 36px; height: 36px; }
    #call .controls { padding-top: 0.2rem; padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)); }
    .controls button.device .face,
    .controls button.tool .face { width: 40px; height: 40px; }
}

.edge-tab,
.land-shade { display: none; }
html.phone-land .room-body:has(#call:not([hidden])) #call {
    position: relative;
}
html.phone-land .edge-tab {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 48;
    width: 26px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: rgba(32, 33, 36, 0.82);
    color: #e8eaed;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
html.phone-land .edge-tab svg { width: 16px; height: 16px; }
html.phone-land .edge-top {
    top: 18%;
    left: env(safe-area-inset-left, 0px);
}
html.phone-land .edge-bottom {
    top: auto;
    bottom: 18%;
    left: auto;
    right: env(safe-area-inset-right, 0px);
    border-radius: 12px 0 0 12px;
}
html.phone-land.bar-open .edge-top svg,
html.phone-land.controls-open .edge-bottom svg { transform: rotate(180deg); }
html.phone-land .room-body:has(#call:not([hidden])) .room-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 46;
    transform: translate3d(0, -80px, 0);
    pointer-events: none;
    padding: 0.35rem 0.55rem;
    background: rgba(32, 33, 36, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
html.phone-land.bar-open .room-body:has(#call:not([hidden])) .room-bar {
    transform: none;
    pointer-events: auto;
}
html.phone-land .room-bar img { width: 28px; height: 28px; }
html.phone-land .modes button,
html.phone-land #leave.icon,
html.phone-land #copy-link.icon,
html.phone-land #camera-options.icon { width: 34px; height: 34px; }
html.phone-land #call .controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    transform: translate3d(0, 140px, 0);
    pointer-events: none;
    margin: 0;
    background: rgba(32, 33, 36, 0.96);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
}
html.phone-land.controls-open #call .controls {
    transform: none;
    pointer-events: auto;
}
html.phone-land #call .controls .caption { display: none; }
html.phone-land .controls button.device .face,
html.phone-land .controls button.tool .face { width: 40px; height: 40px; }
html.phone-land .land-shade {
    position: absolute;
    inset: 0;
    z-index: 40;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
html.phone-land.bar-open .land-shade,
html.phone-land.controls-open .land-shade { display: block; }
html.phone-land #sharing-bar:not([hidden]) {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    border-radius: 999px;
}

.tile.chat.surface,
.tile.notes.surface,
.stage[data-mode] .grid .tile.chat,
.stage[data-mode] .grid .tile.notes,
.stage[data-mode] .thumbs .tile.chat,
.stage[data-mode] .thumbs .tile.notes {
    background: #f6f3ec;
    color: #1c1a17;
    box-shadow: none;
}
.tile.chat > .name,
.tile.notes > .name { display: none; }
.tile.chat.speaking::after,
.tile.notes.speaking::after,
.tile.chat.audible::after,
.tile.notes.audible::after { box-shadow: none; }
.tile > .sheet {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f6f3ec;
    color: #1c1a17;
}
.sheet-badge {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.tile.chat .sheet-badge { color: #2a6fbb; }
.tile.notes .sheet-badge { color: #6a5acd; }
.tile.surface.compact .sheet-badge { display: flex; }
.tile.surface.compact .sheet { display: none; }
.chat-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.9rem 1rem 0.4rem;
}
.chat-empty {
    margin: 0.4rem 0 0.7rem;
    color: #8a8175;
    text-align: center;
    font-size: 0.85rem;
}
.chat-day {
    display: table;
    margin: 0.85rem auto 0.45rem;
    padding: 0.18rem 0.7rem;
    background: #fff;
    color: #5c564c;
    border-radius: 999px;
    box-shadow: 0 1px 1px rgba(28, 26, 23, 0.08);
    font-size: 0.75rem;
    font-weight: 700;
}
.bubble-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    margin: 0.12rem 0;
}
.bubble-row.run-start { margin-top: 0.55rem; }
.bubble-row.mine { align-items: flex-end; }
.bubble {
    max-width: min(78%, 26rem);
    padding: 0.4rem 0.7rem 0.45rem;
    border-radius: 16px 16px 16px 5px;
    background: #fff;
    color: #1c1a17;
    box-shadow: 0 1px 1px rgba(28, 26, 23, 0.08);
}
.bubble-row.mine .bubble {
    border-radius: 16px 16px 5px 16px;
    background: #1c4f86;
    color: #fff;
}
.bubble:has(.chat-photo):not(:has(.chat-text)) { padding: 0.28rem; }
.chat-name {
    display: block;
    margin-bottom: 0.12rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1c4f86;
}
.bubble-time {
    margin: 0.12rem 0.4rem 0;
    color: #8a8175;
    font-size: 0.7rem;
}
.chat-text {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.chat-text.emoji-only {
    font-size: 1.85rem;
    line-height: 1.25;
}
.chat-head {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem 0;
}
.chat-threads { display: flex; gap: 0.35rem; overflow-x: auto; }
.chat-threads button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    color: #3d4a57;
    border-radius: 999px;
    padding: 0.28rem 0.7rem 0.28rem 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 1px 1px rgba(28, 26, 23, 0.08);
}
.chat-threads button svg { width: 15px; height: 15px; flex: none; }
.chat-threads button.on { background: #1c4f86; color: #fff; }
.chat-threads button.fresh { box-shadow: inset 0 0 0 2px #2a6fbb; }
.chat-switch {
    display: flex;
    gap: 0;
    margin: 0 -0.7rem;
    border-bottom: 1px solid #e4dcd0;
}
.chat-switch button {
    flex: 1;
    background: transparent;
    color: #8a8175;
    border-radius: 0;
    padding: 0.4rem 0.2rem 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 transparent;
}
.chat-switch button.on {
    background: transparent;
    color: #1c1a17;
    box-shadow: inset 0 -2px 0 #1c4f86;
}
.chat-jump {
    display: block;
    margin: 0.2rem 0 0.6rem;
    background: #1c4f86;
    color: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
}
.chat-files {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.8rem 1rem;
}
.chat-file {
    background: #fff;
    color: #1c4f86;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08);
}
.bubble .chat-file { margin: 0.1rem 0; }
.chat-photo {
    display: block;
    margin: 0.15rem 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    line-height: 0;
}
.chat-photo img {
    display: block;
    max-width: min(240px, 70vw);
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 12px;
    background: #efeae2;
}
.chat-photo img[hidden] { display: none; }
.file-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e6dfd4;
}
.file-row > div { min-width: 0; }
.file-thumb {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.file-thumb[hidden] { display: none; }
.file-meta { margin: 0.2rem 0 0; color: #8a8175; font-size: 0.78rem; }
.chat-pending {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0.8rem 0.45rem;
    color: #5c564c;
    font-size: 0.82rem;
}
.chat-pending[hidden] { display: none; }
.chat-pending-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
}
.chat-compose {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem;
}
.chat-attach,
.chat-emoji {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: #1c4f86;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08);
}
.chat-attach svg,
.chat-emoji svg { width: 22px; height: 22px; }
.chat-compose { position: relative; }
.emoji-pop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 0.15rem);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.1rem;
    max-height: 11.5rem;
    overflow: auto;
    padding: 0.4rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(28, 26, 23, 0.16);
}
.emoji-pop[hidden] { display: none; }
.emoji-pop button {
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 0.2rem 0;
    font-size: 1.35rem;
    line-height: 1.3;
}
.emoji-pop button:hover,
.emoji-pop button:focus-visible { background: #f3efe6; }
#photo-veil {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem;
    background: rgba(20, 18, 16, 0.72);
}
#photo-veil[hidden] { display: none; }
#photo-veil img {
    max-width: min(920px, 92vw);
    max-height: 74vh;
    object-fit: contain;
    border-radius: 12px;
    background: #111;
}
#photo-veil .photo-close,
#photo-veil .photo-save {
    background: #fff;
    color: #1c1a17;
}
.chat-input {
    flex: 1;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1c1a17;
    font: inherit;
    font-size: 16px;
    padding: 0.7rem 0.95rem;
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08);
}
.chat-input:focus { outline: 2px solid #2a6fbb; outline-offset: 1px; }
.notes-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 0.85rem 0.4rem;
}
.notes-lead {
    margin: 0 0 0.7rem;
    color: #8a8175;
    font-size: 0.88rem;
}
.notes-list { display: flex; flex-direction: column; }
.note-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.4rem;
}
.note-plus,
.note-insert button,
.notes-add button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6a5acd;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}
.note-plus {
    width: 1.6rem;
    height: 1.6rem;
    color: #b7a99a;
}
.note-insert { display: none; gap: 0.35rem; }
.note-gap.open .note-insert,
.note-gap:hover .note-insert,
.note-gap:focus-within .note-insert { display: inline-flex; }
.note-gap.open .note-plus,
.note-gap:hover .note-plus,
.note-gap:focus-within .note-plus { color: #6a5acd; }
.note-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: start;
    margin-left: calc(var(--depth, 0) * 1.15rem);
    padding: 0.15rem 0.2rem;
    border-radius: 10px;
}
.note-row.dropping { box-shadow: inset 0 2px 0 #6a5acd; }
.note-grip {
    border: 0;
    background: transparent;
    color: #c9bfb4;
    cursor: grab;
    font-size: 0.8rem;
    letter-spacing: -0.12em;
    padding: 0.35rem 0.15rem;
    touch-action: none;
}
.note-main { min-width: 0; }
.note-row .who {
    display: inline-block;
    margin-bottom: 0.1rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #1c1a17;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 650;
}
.note-row .who[hidden] { display: none; }
.note-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: #1c1a17;
    font: inherit;
    font-size: max(16px, calc(1.12rem - var(--depth, 0) * 0.05rem));
    font-weight: 500;
    line-height: 1.35;
    min-height: 1.35em;
    padding: 0.15rem 0.15rem 0.15rem 0;
    resize: none;
    overflow: hidden;
}
.note-line {
    display: grid;
    grid-template-columns: 0.85rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.15rem;
}
.note-bullet {
    width: 0.42rem;
    height: 0.42rem;
    margin-top: 0.48em;
    border-radius: 50%;
    background: #0f6f6a;
    justify-self: center;
}
.note-row[data-depth="0"] .note-text { font-weight: 680; }
.note-row[data-depth="1"] .note-bullet {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #0f6f6a;
}
.note-row[data-depth="2"] .note-bullet,
.note-row[data-depth="3"] .note-bullet,
.note-row[data-depth="4"] .note-bullet,
.note-row[data-depth="5"] .note-bullet,
.note-row[data-depth="6"] .note-bullet {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 1px;
}
.note-text:focus { outline: none; background: rgba(255, 255, 255, 0.7); border-radius: 8px; }
.note-agree {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 0;
    background: transparent;
    color: #8a8175;
    cursor: pointer;
    padding: 0.3rem;
}
.note-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #c9bfb4;
}
.note-agree[aria-pressed="true"] .note-dot { background: #6a5acd; box-shadow: none; }
.note-agree[aria-pressed="true"] { color: #6a5acd; }
.note-count { min-width: 0.7rem; font-size: 0.75rem; font-weight: 700; }
.notes-add {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem 0.6rem;
}
.notes-add button {
    background: #fff;
    padding: 0.45rem 0.8rem;
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08);
}
.notes-add button:focus-visible,
.note-insert button:focus-visible,
.note-agree:focus-visible,
.note-grip:focus-visible {
    outline: 2px solid #6a5acd;
    outline-offset: 2px;
}

.chat-dock {
    position: absolute;
    z-index: 6;
    top: 0.65rem;
    left: 0.65rem;
    right: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.4rem 0.4rem 0.8rem;
    background: rgba(255, 253, 248, 0.97);
    color: #1c1a17;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(28, 26, 23, 0.16);
}
.chat-dock[hidden] { display: none; }
.with-dialog {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(20, 18, 16, 0.46);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.with-dialog[hidden] { display: none; }
.with-card {
    width: min(420px, 100%);
    background: #fffdf8;
    color: #1c1a17;
    border-radius: 16px;
    padding: 1rem 1rem 0.9rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.with-card h2 { font-size: 1.2rem; }
.with-lead { color: #5c564c; margin: 0.35rem 0 0.8rem; }
.with-person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0;
    font-weight: 650;
}
.with-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
#with-cancel { background: transparent; color: #3d4a57; }
.chat-dock-line {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dock-line strong { color: #1c4f86; font-weight: 700; margin-right: 0.35rem; }
.chat-dock form { flex: 0 1 15rem; min-width: 7rem; }
.chat-dock input {
    width: 100%;
    border: 1px solid #d9d1c3;
    border-radius: 999px;
    padding: 0.42rem 0.75rem;
    background: #fff;
    color: #1c1a17;
}
.chat-dock-open,
.chat-dock-hide {
    flex: none;
    background: transparent;
    color: #3d4a57;
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
}
.chat-dock-open { color: #1c4f86; }
@media (prefers-reduced-motion: no-preference) {
    .chat-dock:not([hidden]) {
        animation: chat-dock-in 220ms cubic-bezier(0.2, 0.75, 0.2, 1);
    }
}
@keyframes chat-dock-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.stage[data-gather="voice"] .grid {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.1rem;
    padding: clamp(0.8rem, 3vw, 2rem);
    overflow: auto;
    grid-template-columns: none;
    grid-template-rows: none;
}
.stage[data-gather="voice"] .grid .tile {
    flex: 0 0 auto;
    width: min(200px, 42vw);
    height: min(156px, 30vh);
    max-width: none;
    max-height: none;
    align-self: center;
    aspect-ratio: auto;
    border-radius: 16px;
    background: #23201c;
}
.stage[data-gather="voice"] .grid .tile.speaking {
    width: min(280px, 68vw);
    height: min(210px, 38vh);
    background: #2c2823;
}
.stage[data-gather="voice"] .grid .tile .mark {
    width: clamp(52px, 46%, 88px);
}
.stage[data-gather="voice"] .tile.speaking .name {
    font-weight: 700;
}

.stage[data-gather="work"],
.stage[data-gather="faces"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 96px;
}
.stage[data-gather="work"] .thumbs,
.stage[data-gather="faces"] .thumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    padding: 0 0.15rem;
}
.stage[data-gather="work"] .thumbs .tile,
.stage[data-gather="faces"] .thumbs .tile {
    flex: 0 0 104px;
    width: 104px;
    height: 78px;
    min-height: 0;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 12px;
    background: #161513;
}
.stage[data-gather="work"] .thumbs .tile:not(.surface) .mark,
.stage[data-gather="faces"] .thumbs .tile:not(.surface) .mark {
    width: 30px;
    top: 40%;
}
.stage[data-gather="work"] .thumbs .tile .name,
.stage[data-gather="faces"] .thumbs .tile .name {
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.28rem;
    font-size: 0.68rem;
}
.stage[data-gather="work"] .thumbs .tile.speaking .name,
.stage[data-gather="faces"] .thumbs .tile.speaking .name {
    font-weight: 700;
}
.stage[data-gather="work"] .thumbs .tile video,
.stage[data-gather="faces"] .thumbs .tile video {
    object-fit: cover;
}
.stage[data-gather="work"] .thumbs .tile.speaking,
.stage[data-gather="faces"] .thumbs .tile.speaking {
    background: #2c2823;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.toolbar .button, a.button {
    display: inline-block;
    background: var(--brand);
    color: white;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.55rem 1rem;
}
a.button.secondary, button.text {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
button.text { border-radius: 999px; padding: 0.35rem 0.8rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
textarea, select { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: white; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { background: #efe8da; border-radius: 999px; padding: 0.2rem 0.7rem; }
@media (orientation: landscape) {
    .stage[data-gather="work"],
    .stage[data-gather="faces"] {
        grid-template-columns: minmax(0, 1fr) 116px;
        grid-template-rows: minmax(0, 1fr);
    }
    .stage[data-gather="work"] .thumbs,
    .stage[data-gather="faces"] .thumbs {
        flex-direction: column;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.1rem 0;
    }
    .stage[data-gather="work"] .thumbs .tile,
    .stage[data-gather="faces"] .thumbs .tile {
        flex: 0 0 76px;
        width: auto;
        height: 76px;
    }
}