@font-face { font-family: Newsreader; src: url('../../assets/fonts/newsreader-16-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color-scheme: dark; --viewport-height: 100dvh; --viewport-top: 0px; }
* { box-sizing: border-box; letter-spacing: 0; }
body, .theme-private { --surface: #191a1d; --inbox: #151619; --thread: #1c1d20; --text: #f4f2f0; --muted: #a5a7af; --line: #303136; --hover: #25262c; --selected: #2a2931; --bubble: #2a2b30; --own: #343848; --pink: #f3a0c7; --blue: #9bcced; --gold: #e8c993; --shadow: #0006; --field: #232429; --button-text: #161419; }
body[data-side='public'], .theme-public { --surface: #fff; --inbox: #f8f9fa; --thread: #fff; --text: #25282c; --muted: #697078; --line: #e4e6e9; --hover: #f0f2f4; --selected: #ebeef3; --bubble: #f1f2f4; --own: #e7eef9; --pink: #a93d70; --blue: #336c9a; --gold: #83652a; --shadow: #20253016; --field: #f4f5f7; --button-text: #fff; color-scheme: light; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; top: var(--viewport-top); height: var(--viewport-height); background: var(--surface); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
svg { flex: 0 0 auto; width: 19px; height: 19px; vertical-align: middle; }
button, a { -webkit-user-select: none; user-select: none; }
.preview-strip { min-height: 31px; height: calc(31px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 24px 0; background: #29272c; color: #d6d0d6; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-strip > span { white-space: nowrap; }
.preview-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #c9bbd0; margin-right: 6px; vertical-align: 1px; }
.preview-strip label { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.preview-strip select { color: #fff; border: 0; border-radius: 4px; background: #3e3942; font-size: 12px; padding: 2px 4px; }
.stage { height: calc(100% - 31px - env(safe-area-inset-top)); position: relative; perspective: 1100px; isolation: isolate; overflow: hidden; }
#app, .turn-snapshot { height: 100%; width: 100%; display: flex; flex-direction: column; background: var(--surface); color: var(--text); }
.app-header { min-height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 16px 30px; border-bottom: 1px solid var(--line); background: var(--surface); }
.wordmark { display: inline-flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; width: fit-content; white-space: nowrap; }
.wordmark img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.wordmark > span { font-family: Newsreader, Georgia, serif; font-size: 31px; line-height: 28px; }
.wordmark small { display: block; font: 11px/17px -apple-system, BlinkMacSystemFont, sans-serif; color: var(--muted); }
.side-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--inbox); }
.side-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 118px; min-height: 38px; border-radius: 5px; font-weight: 600; color: var(--muted); }
.side-switch button[aria-pressed='true'] { background: var(--selected); color: var(--text); box-shadow: 0 1px 4px var(--shadow); }
.side-switch button[aria-pressed='true'] svg { color: var(--pink); }
body[data-side='public'] .side-switch button[aria-pressed='true'] svg { color: var(--blue); }
.profile-button { justify-self: end; padding: 3px; border-radius: 50%; }
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.inbox { background: var(--inbox); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.inbox-heading { padding: 26px 23px 19px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.eyebrow { font-size: 9px; font-weight: 600; color: var(--muted); }
h1, h2, h3, p { margin: 0; }
.inbox-heading h1 { font: 29px/1.1 Newsreader, Georgia, serif; margin-top: 7px; }
.icon-button { border-radius: 6px; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); }
.icon-button:hover { background: var(--hover); color: var(--text); }
.inbox-heading .icon-button { border: 1px solid var(--line); color: var(--pink); }
.search { margin: 0 21px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 9px; align-items: center; color: var(--muted); background: var(--surface); }
.search svg { width: 17px; height: 17px; }
.search input { background: transparent; border: 0; color: var(--text); width: 100%; min-width: 0; font-size: 14px; outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.list-tabs { display: flex; gap: 21px; padding: 18px 23px 0; border-bottom: 1px solid var(--line); }
.list-tabs button { position: relative; padding: 0 0 12px; color: var(--muted); font-size: 12px; }
.list-tabs button[aria-pressed='true'] { color: var(--text); font-weight: 650; }
.request-count { color: var(--pink); font-variant-numeric: tabular-nums; }
.list-tabs button[aria-pressed='true']::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: var(--pink); }
.conversation-list { min-height: 0; overflow-y: auto; flex: 1; }
.conversation-row { display: flex; align-items: flex-start; gap: 11px; width: 100%; position: relative; text-align: left; padding: 20px 21px; border-bottom: 1px solid var(--line); }
.conversation-row:hover { background: var(--hover); }
.conversation-row.selected { background: var(--selected); }
.conversation-row.selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pink); }
.avatar { width: 39px; height: 39px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 19px/1 Newsreader, Georgia, serif; flex: 0 0 auto; border: 1px solid #ffffff18; }
.avatar.rose { background: #65364b; color: #ffd9ea; }
.avatar.blue { background: #324c64; color: #d2eaff; }
.avatar.green { background: #365148; color: #d9f4e5; }
.avatar.gold { background: #675435; color: #f9eacb; }
.avatar.small { width: 34px; height: 34px; font-size: 17px; }
.avatar.large { width: 74px; height: 74px; font-size: 36px; }
.avatar-stack { display: flex; width: 39px; min-height: 44px; flex: 0 0 auto; position: relative; padding-top: 2px; }
.avatar-stack:has(.avatar:nth-child(2)) .avatar { width: 28px; height: 28px; font-size: 16px; }
.avatar-stack .avatar:nth-child(2) { position: absolute; top: 17px; left: 12px; box-shadow: 0 0 0 2px var(--inbox); }
.avatar-stack .avatar:nth-child(3) { display: none; }
.row-content { flex: 1; min-width: 0; }
.row-title { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.row-title strong { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.row-title time { color: var(--muted); font-size: 10px; flex: 0 0 auto; }
.row-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.row-people { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.row-meta { font-size: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; color: var(--muted); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status-dot.live, .status-dot.open { background: #5f9a78; }
.status-dot.invitation { background: #b88b48; }
.unread { position: absolute; right: 20px; bottom: 13px; background: var(--pink); color: var(--button-text); border-radius: 20px; min-width: 16px; height: 16px; padding: 0 5px; font-size: 10px; display: grid; place-items: center; }
.inbox-footer { padding: 20px 23px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); }
.inbox-footer > span { display: flex; gap: 7px; font-size: 10px; align-items: center; margin-bottom: 16px; }
.inbox-footer svg { width: 15px; height: 15px; }
.inbox-footer button { padding: 0; display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--pink); }
.conversation { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--thread); }
.conversation-header { min-height: 82px; padding: 17px 29px; display: flex; gap: 13px; align-items: center; border-bottom: 1px solid var(--line); }
.conversation-heading { flex: 1; min-width: 0; }
.conversation-heading h2 { font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.member-links { display: flex; gap: 5px; flex-wrap: wrap; color: var(--muted); margin-top: 4px; font-size: 11px; }
.member-links button { color: inherit; padding: 0; }
.member-links button:hover { color: var(--pink); }
.visibility-label { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 11px; }
.visibility-label svg { width: 13px; height: 13px; }
[data-action='back'] { display: none; }
.conversation-status { padding: 11px 30px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.status-description { display: flex; gap: 7px; align-items: center; }
.status-description svg { width: 15px; height: 15px; color: var(--gold); }
.status-description strong { color: var(--text); font-weight: 600; }
#status-caption { color: var(--gold); white-space: nowrap; }
.messages { flex: 1; min-height: 0; padding: 20px max(28px, calc((100% - 780px) / 2)) 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.conversation-date { text-align: center; font-size: 10px; color: var(--muted); margin: 0 0 22px; }
.public-record { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 10px; color: var(--muted); margin-bottom: 28px; }
.public-record svg { width: 12px; height: 12px; }
.message { width: fit-content; max-width: 82%; margin-top: 5px; }
.message.new-author { margin-top: 20px; }
.message.mine { margin-left: auto; }
.bubble { padding: 10px 14px 7px; background: var(--bubble); border-radius: 8px; position: relative; min-width: 80px; }
.mine .bubble { background: var(--own); border-top-right-radius: 3px; }
.theirs .bubble { border-top-left-radius: 3px; }
.bubble p { font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-time { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 16px; }
.message-time svg { width: 12px; height: 12px; color: var(--blue); }
.speaker { display: block; padding: 0 0 5px 3px; font-size: 11px; font-weight: 600; color: var(--pink); }
.speaker.green { color: #69987f; }
.speaker.blue { color: var(--blue); }
.speaker.gold { color: var(--gold); }
.conversation-bottom { padding: 12px max(28px, calc((100% - 780px) / 2)) max(20px, env(safe-area-inset-bottom)); background: var(--thread); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 7px 8px 7px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 54px; box-shadow: 0 2px 6px var(--shadow); }
.composer:focus-within { border-color: var(--blue); }
.composer textarea { background: transparent; border: 0; color: var(--text); font-size: 16px; line-height: 24px; min-width: 0; flex: 1; resize: none; padding: 8px 0; min-height: 40px; max-height: 136px; outline: none; overflow-y: auto; }
.composer textarea:disabled { opacity: .65; }
.accept-reply { flex-shrink: 0; }
.decline-action { display: flex; margin: 12px auto 0; }
.send-button { width: 39px; height: 39px; flex: 0 0 auto; border-radius: 50%; background: var(--pink); color: var(--button-text); display: grid; place-items: center; }
.send-button svg { width: 22px; height: 22px; }
.live-messenger .send-beat-button { position: relative; min-height: 48px; padding-bottom: 16px; background: var(--blue); }
.live-messenger .send-beat-button[data-armed="true"] { background: var(--pink); }
.live-messenger .send-button.send-beat-button { width: 48px; height: 48px; border-radius: 8px; }
.send-beats { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; height: 6px; pointer-events: none; }
.send-beats i { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
[data-armed="true"] > .send-beats i:first-child { background: currentColor; }
.composer-audience { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; margin-top: 10px; }
.composer-audience svg { width: 11px; height: 11px; }
.composer-audience[hidden] { display: none; }
.read-only { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.read-only svg { width: 16px; height: 16px; }
.read-only button { color: var(--blue); font-size: 12px; }
.turn-clock { margin: 0 1px 14px; }
.turn-clock > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.turn-clock strong { font-variant-numeric: tabular-nums; font-size: 17px; color: var(--gold); }
.clock-track { height: 2px; background: var(--line); }
.clock-track span { display: block; height: 2px; background: var(--gold); transform-origin: left; transition: transform 250ms linear; }
.urgent strong { color: #d16a6f; }
.urgent .clock-track span { background: #d16a6f; }
.invitation { border-top: 1px solid var(--line); padding: 12px 0; text-align: center; }
.invitation p { line-height: 1.5; }
.invitation p { font-size: 13px; margin-bottom: 13px; }
.invitation > div { display: flex; justify-content: center; gap: 10px; }
.invitation small { display: block; font-size: 10px; color: var(--muted); margin-top: 12px; }
.primary, .secondary, .danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.primary { background: var(--pink); color: var(--button-text); }
.secondary { border: 1px solid var(--line); color: var(--text); }
.danger { background: #ac4354; color: #fff; }
.wide { width: 100%; }
.empty-conversation { margin: auto; text-align: center; padding: 25px; }
.empty-conversation img { width: 104px; height: 104px; border-radius: 8px; margin-bottom: 22px; }
.empty-conversation h2 { font: 30px/1.2 Newsreader, Georgia, serif; }
.empty-conversation p { color: var(--muted); font-size: 13px; margin: 12px 0 24px; }
.empty-list { text-align: center; padding: 32px 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.empty-list svg { width: 24px; height: 24px; margin-bottom: 12px; }
.conversation-intro { text-align: center; padding: 55px 20px; color: var(--muted); }
.conversation-intro > svg { width: 27px; height: 27px; color: var(--gold); margin-bottom: 20px; }
.conversation-intro h3 { font: 26px/1.2 Newsreader, Georgia, serif; color: var(--text); margin-bottom: 12px; }
.conversation-intro p { font-size: 13px; line-height: 1.6; }
.end-marker { margin: 32px auto 10px; max-width: 350px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.end-marker strong { color: var(--text); font-weight: 500; }
dialog { width: min(480px, calc(100% - 28px)); max-height: calc(var(--viewport-height) - 54px); border: 1px solid var(--line); padding: 22px; border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 25px 100px #0005; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #0b0c1180; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dialog-heading h2 { font: 25px/1.2 Newsreader, Georgia, serif; }
.dialog-heading .icon-button { width: 30px; height: 30px; }
.dialog-audience { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: 12px; padding-bottom: 19px; }
.dialog-audience svg { width: 16px; height: 16px; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend, .field-label { font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.people-picker label { display: flex; gap: 11px; align-items: center; padding: 9px 0; cursor: pointer; }
.people-picker label > span:nth-child(2) { flex: 1; }
.people-picker strong { display: block; font-size: 13px; font-weight: 550; }
.people-picker small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.people-picker input { width: 18px; height: 18px; accent-color: var(--pink); }
.field-label { display: block; }
.field-label input, .field-label textarea { display: block; margin: 9px 0 20px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--field); font-size: 16px; }
.field-label textarea { resize: vertical; min-height: 95px; line-height: 1.5; }
.time-picker > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.time-picker label { cursor: pointer; position: relative; }
.time-picker input { opacity: 0; position: absolute; width: 1px; height: 1px; }
.time-picker span { display: block; padding: 10px 3px; text-align: center; border-radius: 6px; border: 1px solid var(--line); font-size: 13px; }
.time-picker input:checked + span { background: var(--selected); border-color: var(--pink); color: var(--pink); }
.time-picker input:focus-visible + span { outline: 2px solid var(--blue); }
.time-picker input:disabled + span { opacity: .3; }
.time-picker p { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.consent-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin-bottom: 16px; }
.form-error { font-size: 12px; color: #d87682; margin-bottom: 10px; }
.profile-identity { text-align: center; }
.profile-identity h3 { font: 31px Newsreader, Georgia, serif; margin: 15px 0 4px; }
.profile-identity > span:not(.avatar) { color: var(--muted); font-size: 12px; }
.profile-identity p { margin: 16px auto 22px; max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.profile-stats { display: flex; justify-content: center; gap: 24px; border-block: 1px solid var(--line); padding: 17px 0; color: var(--muted); font-size: 11px; }
.profile-stats strong { color: var(--text); font-weight: 600; margin-right: 4px; }
.history-title { font-size: 12px; margin: 23px 0 9px; font-weight: 600; }
.profile-history button { width: 100%; display: flex; justify-content: space-between; gap: 14px; padding: 15px 0; text-align: left; border-bottom: 1px solid var(--line); }
.profile-history strong { display: block; font-size: 13px; font-weight: 600; }
.profile-history small { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; }
.history-status { display: flex; align-items: center; color: var(--gold); font-size: 10px; gap: 4px; flex: 0 0 auto; }
.history-status svg { width: 13px; height: 13px; }
.menu-title { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.menu-members button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; }
.menu-members button > span:nth-child(2) { flex: 1; text-align: left; }
.menu-members svg { width: 15px; height: 15px; color: var(--muted); }
.menu-danger { display: flex; width: 100%; gap: 10px; align-items: center; border-top: 1px solid var(--line); margin-top: 20px; padding: 19px 0 0; color: #d1717d; font-size: 13px; }
.confirm-copy { font-size: 14px; line-height: 1.7; margin: 12px 0; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }
.future-art img { width: 100%; height: 180px; object-fit: cover; object-position: center 38%; border-radius: 6px; }
.future-list { list-style: none; padding: 0; margin: 17px 0; }
.future-list li { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.future-list svg { color: var(--pink); }
#toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--text); color: var(--surface); padding: 12px 18px; border-radius: 8px; max-width: min(500px, calc(100% - 30px)); width: max-content; box-shadow: 0 5px 20px #0003; font-size: 13px; line-height: 1.6; z-index: 100; transition: opacity 160ms, transform 160ms; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
.turn-snapshot { position: absolute; inset: 0; z-index: 6; }
.turn-in, .turn-out { backface-visibility: hidden; transform-origin: center; pointer-events: none; }
.turn-out { animation: flipFaceOutLeft 720ms cubic-bezier(.2,.75,.2,1) forwards; }
.turn-in { animation: flipFaceInLeft 720ms cubic-bezier(.2,.75,.2,1) forwards; }
/* Preserve One Wando's edge-on card turn and warm central light. */
@keyframes flipFaceOutLeft { 0% { opacity: 1; transform: perspective(1100px) rotateY(0); } 49% { opacity: 1; transform: perspective(1100px) rotateY(-88deg); } 50% { opacity: 0; transform: perspective(1100px) rotateY(-90deg); } 100% { opacity: 0; transform: perspective(1100px) rotateY(-180deg); } }
@keyframes flipFaceInLeft { 0% { opacity: 0; transform: perspective(1100px) rotateY(180deg); } 49% { opacity: 0; transform: perspective(1100px) rotateY(92deg); } 50% { opacity: 1; transform: perspective(1100px) rotateY(90deg); } 100% { opacity: 1; transform: perspective(1100px) rotateY(0); } }
#turn-light { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; background: radial-gradient(ellipse at 50% 48%, #fffef5 0%, #ffebbc 14%, #dfb76866 35%, #fff0 72%); }
#turn-light.lit { animation: sunlight 720ms ease both; }
@keyframes sunlight { 0%, 100% { opacity: 0; } 43%, 57% { opacity: .94; } }
@media (min-width: 1500px) { .workspace { grid-template-columns: 380px minmax(0, 1fr); } .inbox-heading { padding-top: 31px; } }
@media (max-width: 820px) { .workspace { grid-template-columns: 285px minmax(0, 1fr); } .conversation-header { padding: 14px 19px; } .visibility-label { display: none; } .messages { padding-inline: 20px; } .conversation-bottom { padding-inline: 20px; } .row-title time { display: none; } }
@media (max-width: 760px) {
  .preview-strip { padding-inline: 12px; font-size: 10px; }
  .preview-detail { display: none; }
  .app-header { min-height: 82px; padding: 12px 16px; gap: 10px; grid-template-columns: 1fr auto; }
  .wordmark { gap: 8px; }
  .wordmark img { width: 32px; height: 32px; }
  .wordmark > span { font-size: 28px; line-height: 25px; }
  .wordmark small { font-size: 9px; line-height: 15px; }
  .profile-button { display: none; }
  .side-switch { padding: 3px; gap: 2px; }
  .side-switch button { min-width: 73px; min-height: 34px; gap: 5px; font-size: 11px; }
  .side-switch svg { width: 14px; height: 14px; }
  .workspace { display: block; position: relative; }
  .inbox, .conversation { height: 100%; }
  .inbox { border: 0; }
  .conversation { display: none; }
  .thread-open .conversation { display: flex; }
  .thread-open .inbox { display: none; }
  .inbox-heading { padding: 25px 21px 18px; }
  .inbox-heading h1 { font-size: 30px; }
  .conversation-row { padding: 19px 21px; }
  .row-title time { display: block; }
  .conversation-header { min-height: 70px; padding: 10px 12px 10px 7px; gap: 6px; }
  .conversation-heading h2 { font-size: 15px; }
  [data-action='back'] { display: inline-flex; }
  .conversation-status { padding: 10px 18px; font-size: 10px; }
  .status-description { gap: 5px; }
  .messages { padding: 16px 18px 20px; }
  .message { max-width: 88%; }
  .bubble { padding: 9px 12px 6px; }
  .bubble p { font-size: 15px; line-height: 1.55; }
  .conversation-bottom { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  .search input, .preview-strip select { font-size: 16px; }
  .preview-strip select { font-size: 12px; }
  .inbox-footer { padding-top: 15px; }
  .inbox-footer > span { margin-bottom: 13px; }
  .conversation-intro { padding: 30px 8px; }
  .conversation-intro h3 { font-size: 23px; }
  .invitation p { font-size: 12px; }
  dialog { padding: 18px; max-height: calc(var(--viewport-height) - 28px); }
}
@media (max-width: 360px) { .wordmark img { display: none; } .side-switch button { min-width: 71px; } .app-header { padding-inline: 13px; } .conversation-status { flex-wrap: wrap; } }
@media (max-height: 600px) and (max-width: 760px) {
  .app-header { min-height: 60px; padding-block: 6px; }
  .conversation-header { min-height: 56px; padding-block: 6px; }
  .conversation-status { padding-block: 7px; }
  .invitation { padding-block: 8px; }
  .invitation p { font-size: 11px; margin-bottom: 5px; }
  .invitation small { margin-top: 5px; }
  .decline-action { min-height: 32px; padding-block: 5px; margin-top: 6px; }
  .composer textarea { max-height: 72px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Authenticated messenger uses the original card, without the sample toolbar. */
body[data-auth='live'] .stage { height: 100%; }
.live-boundary { display: contents; }
.live-messenger { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--surface); color: var(--text); }
.live-messenger .app-header { padding-top: max(16px, env(safe-area-inset-top)); }
.live-messenger .app-header > .icon-button { justify-self: end; width: 44px; height: 44px; }
.live-messenger .app-header .avatar { width: 34px; height: 34px; }
.live-connection { background: #fff0cf; color: #654d13; padding: 8px 16px; text-align: center; font-size: 12px; }
.live-private { display: flex; flex: 1; min-height: 0; overflow: auto; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 20px; text-align: center; }
.live-private img { width: 96px; height: 96px; border-radius: 8px; }
.live-private h1 { font: 30px/1.2 Newsreader, Georgia, serif; }
.live-private p { max-width: 360px; line-height: 1.7; color: var(--muted); }
.live-messenger .inbox-heading .eyebrow { font-size: 12px; overflow-wrap: anywhere; }
.live-messenger .inbox-heading > div { min-width: 0; }
.live-load { display: flex; margin: 18px auto; }
.live-messenger .field-label select { display: block; width: 100%; margin: 9px 0 16px; border: 1px solid var(--line); padding: 12px; border-radius: 6px; font-size: 16px; color: var(--text); background: var(--field); }
.live-lookup { min-height: 28px; margin: -10px 0 12px; color: var(--muted); font-size: 12px; }
.live-person { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px 0; text-align: left; }
.live-person > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.live-person strong, .live-person small { display: block; margin: 4px 0; }
.live-invitees { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 12px; }
.live-invitees > span { display: flex; align-items: center; color: var(--blue); overflow-wrap: anywhere; min-width: 0; }
.live-invitees .icon-button { width: 32px; height: 32px; }
.live-history { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.live-latest { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--surface); box-shadow: 0 2px 14px var(--shadow); }
.live-date { margin-top: 20px; margin-bottom: 15px; }
.live-consent { font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.live-messenger .messages > div:last-child { padding-bottom: 3px; }
.live-messenger .profile-identity .avatar { width: 64px; height: 64px; font-size: 30px; }
.live-messenger .profile-identity h3 { overflow-wrap: anywhere; }
.live-messenger .entrance-restart { color: var(--muted); }
.live-messenger .entrance-error { color: #ac4354; }
.live-messenger .bubble .speaker { text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.live-messenger .accept-reply { padding-inline: 10px; font-size: 12px; }
.live-messenger dialog { position: fixed; top: calc(var(--viewport-top) + var(--viewport-height) / 2); bottom: auto; margin: 0 auto; transform: translateY(-50%); max-height: calc(var(--viewport-height) - 28px); }
.live-messenger .unread { min-width: 8px; width: 8px; height: 8px; padding: 0; }
@media (max-width: 760px) {
  .live-messenger .app-header { grid-template-columns: 1fr auto auto; padding: max(10px, env(safe-area-inset-top)) 12px 10px; gap: 7px; min-height: 76px; }
  .live-messenger .wordmark img { display: none; }
  .live-messenger .wordmark > span { font-size: 26px; }
  .live-messenger .side-switch button { min-width: 66px; }
  .live-messenger .side-switch svg { display: none; }
  .live-messenger .app-header > .icon-button { width: 36px; }
  .live-messenger .empty-conversation { padding-inline: 20px; }
  .live-messenger .inbox-heading h1 { font-size: 28px; }
  .live-messenger .workspace { min-height: 0; }
  .live-messenger .conversation-status { flex-wrap: wrap; }
}
@media (max-height: 600px) and (max-width: 760px) {
  .live-messenger .app-header { min-height: 52px; padding-block: 4px; }
  .live-messenger .wordmark small { display: none; }
  .live-messenger .conversation-bottom { padding-bottom: 8px; }
  .live-consent { margin-bottom: 5px; font-size: 11px; }
}