:root {
  color-scheme: light;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f1f2f5;
  --surface-hover: #e5e8ed;
  --text: #17181a;
  --text-secondary: #656970;
  --text-tertiary: #6e727a;
  --line: rgba(20, 22, 26, 0.11);
  --line-strong: rgba(20, 22, 26, 0.18);
  --accent: #006edb;
  --accent-strong: #0066b3;
  --accent-soft: #e4f3ff;
  --danger: #d12c37;
  --danger-soft: #fff0f1;
  --success: #16834b;
  --shadow-small: 0 1px 2px rgba(20, 22, 26, 0.05), 0 6px 18px rgba(20, 22, 26, 0.05);
  --shadow-large: 0 24px 70px rgba(20, 22, 26, 0.16);
  --radius-small: 12px;
  --radius-medium: 20px;
  --radius-large: 28px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.image-format-choice {
  position: fixed; margin: 0; width: 224px; padding: 8px;
  color: var(--text); background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: 28px; box-shadow: var(--shadow-large);
}
.image-format-choice button { width: 50%; padding: 10px 8px; background: transparent; color: var(--text); border-radius: 24px; }
.image-format-choice button:hover { background: var(--surface-hover); }
.image-format-choice small:not(:empty) { display: block; padding: 8px; color: var(--text-secondary); }

:root.dark {
  color-scheme: dark;
  --canvas: #0d0e10;
  --surface: #202329;
  --surface-raised: #292d35;
  --surface-muted: #343943;
  --surface-hover: #414753;
  --text: #f4f5f7;
  --text-secondary: #aaaeb6;
  --text-tertiary: #a0a5af;
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.25);
  --accent: #57adf0;
  --accent-strong: #82c5f7;
  --accent-soft: #172d3d;
  --danger: #ff737c;
  --danger-soft: #3a1d21;
  --success: #47c77e;
  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-large: 0 28px 80px rgba(0, 0, 0, 0.58);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); background: var(--canvas); font-size: 1rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.38; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button, a, .card, .attachment-row, .smart-input, .file-pill { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 20; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--canvas) 80%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; width: min(960px, 100%); min-height: 44px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: white; background: var(--accent); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
.brand-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar-actions, .dialog-actions, .card-actions, .row-actions, .composer-actions { display: flex; align-items: center; gap: 8px; }
.connection-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; }
.connection-status > span { width: 7px; height: 7px; background: var(--success); border-radius: 50%; }
.connection-status.is-offline > span { background: var(--danger); }
.icon-button, .circle-button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; color: var(--text); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 50%; }
.icon-button, .circle-button { padding: 0; line-height: 1; }
.icon-button svg, .circle-button svg { display: block; }
[data-icon] { display: grid; place-items: center; line-height: 0; }
.icon-button:hover:not(:disabled), .circle-button:hover:not(:disabled) { background: var(--surface-hover); transform: translateY(-1px); }
.icon-button:active:not(:disabled), .circle-button:active:not(:disabled) { transform: scale(.96); }
.icon-button svg, .circle-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#themeToggle .theme-moon { display: none; }
:root.dark #themeToggle .theme-sun { display: none; }
:root.dark #themeToggle .theme-moon { display: block; }
.theme-auto { display: none; font-size: 18px; font-weight: 600; line-height: 1; }
:root[data-appearance="system"] #themeToggle .theme-auto { display: block; }
:root[data-appearance="system"] #themeToggle .theme-sun,
:root[data-appearance="system"] #themeToggle .theme-moon { display: none; }

main { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 max(80px, env(safe-area-inset-bottom)); }
.section-heading, .feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading { margin-bottom: 18px; }
.feed-heading { margin-bottom: 16px; }
.eyebrow { margin-bottom: 4px; color: var(--accent); font-size: 0.8125rem; font-weight: 700; }
h1 { font-size: 2rem; line-height: 1.2; letter-spacing: 0; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; }
h3 { font-size: 1rem; line-height: 1.25; letter-spacing: 0; }
.muted { color: var(--text-secondary); font-size: 0.8125rem; }
.keyboard-hint { color: var(--text-tertiary); font-size: 0.75rem; white-space: nowrap; }
.keyboard-hint span { margin: 0 5px; }
kbd { font: inherit; color: var(--text-secondary); }

.composer { padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-large); box-shadow: var(--shadow-small); overflow: hidden; }
.smart-input { position: relative; min-height: 260px; overflow: hidden; background: var(--surface-muted); border: 1px solid transparent; border-radius: var(--radius-medium); }
.smart-input:focus-within { border-color: color-mix(in srgb, var(--accent) 54%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.smart-input.is-dragging { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.upload-cue { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; justify-items: center; gap: 12px; width: max-content; max-width: calc(100% - 36px); color: var(--text-secondary); text-align: center; pointer-events: none; transform: translate(-50%, -50%); transition: opacity 170ms ease, transform 170ms ease; }
.upload-cue-target, .upload-cue-text { pointer-events: auto; cursor: pointer; }
.upload-cue-target { display: grid; place-items: center; width: 112px; height: 82px; color: var(--accent); }
.upload-cue-icon { width: 92px; height: 70px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upload-cue-text { max-width: 100%; padding: 8px 0; background: transparent; color: inherit; font-size: 0.875rem; font-weight: 500; white-space: normal; }
.upload-cue:has(.upload-cue-target:hover), .upload-cue:has(.upload-cue-text:hover) { color: var(--text); transform: translate(-50%, -50%) scale(1.012); }
.smart-input.has-content .upload-cue, .smart-input.has-files .upload-cue { opacity: 0; pointer-events: none; transform: translate(-50%, -48%) scale(.98); }
.smart-input.has-content .upload-cue *, .smart-input.has-files .upload-cue * { pointer-events: none; }
.smart-input.is-dragging .upload-cue { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
.hidden-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.editor { position: relative; z-index: 1; min-height: 260px; max-height: min(56vh, 540px); padding: 22px 116px 88px 22px; outline: none; overflow: auto; overflow-wrap: anywhere; line-height: 1.55; }
.editor img, .editor video, .editor canvas, .editor iframe, .editor object, .editor embed { display: block; width: auto; height: auto; max-width: min(100%, 560px); max-height: 300px; margin: 10px 0; object-fit: contain; border-radius: var(--radius-small); }
.editor table { display: block; max-width: 100%; overflow: auto; }
.composer-actions { position: absolute; right: 18px; bottom: 18px; z-index: 4; }
.danger-action { color: var(--danger); background: var(--surface); }
.send-action { color: white; background: var(--accent); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.send-action:hover:not(:disabled) { background: var(--accent-strong); }
.send-action svg { transform: translate(-1px, 1px); }

.pending-files { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 0; }
.pending-files:not(:empty) { padding: 10px 2px 0; }
.file-pill { display: grid; grid-template-columns: 34px minmax(0, 1fr) 36px; align-items: center; gap: 9px; width: min(100%, 360px); min-height: 52px; padding: 7px 7px 7px 9px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 15px; }
.file-pill-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); background: var(--accent-soft); border-radius: 10px; font-size: 0.625rem; font-weight: 800; }
.file-pill-copy { min-width: 0; }
.file-pill-copy strong, .file-name { display: block; overflow: hidden; font-size: 0.875rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.file-pill-copy span { display: block; color: var(--text-secondary); font-size: 0.75rem; }
.remove-file { display: grid; place-items: center; width: 36px; height: 36px; color: var(--text-secondary); background: transparent; border-radius: 50%; }
.remove-file:hover { color: var(--danger); background: var(--danger-soft); }
.remove-file svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.upload-progress { padding: 12px 4px 2px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--text-secondary); font-size: 0.75rem; font-weight: 650; }
progress { display: block; width: 100%; height: 5px; overflow: hidden; appearance: none; background: var(--surface-muted); border: 0; border-radius: 999px; }
progress::-webkit-progress-bar { background: var(--surface-muted); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 160ms ease; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.board-section { margin-top: 54px; }
.item-count { color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; }
.items { display: grid; gap: 12px; }
.empty-state { display: grid; place-items: center; min-height: 180px; padding: 28px; color: var(--text-secondary); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-medium); }
.empty-state svg { width: 28px; height: 28px; margin-bottom: 10px; color: var(--text-tertiary); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-state strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 0.9375rem; }
.empty-state p { font-size: 0.8125rem; }
.card { padding: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-medium); box-shadow: var(--shadow-small); animation: item-in 220ms ease both; }
.card-head, .attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.timestamp { color: var(--text-tertiary); font-size: 0.75rem; font-weight: 600; }
.timestamp-mobile { display: none; }
.action-button, .action-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 11px; color: var(--text-secondary); background: transparent; border-radius: 12px; text-decoration: none; }
.action-button:hover, .action-link:hover { color: var(--text); background: var(--surface-muted); }
.action-button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.action-button svg, .action-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.action-button span, .action-link span { margin-left: 7px; font-size: 0.8125rem; font-weight: 650; }
.rich-content { margin-top: 14px; overflow-wrap: anywhere; line-height: 1.58; }
.rich-content:empty { display: none; }
.rich-content.plain-text { white-space: pre-wrap; }
.rich-content a { color: var(--accent); text-underline-offset: 3px; }
.rich-content img, .rich-content video, .rich-content canvas, .rich-content iframe, .rich-content object, .rich-content embed { display: block; width: auto; height: auto; max-width: 100%; max-height: 440px; margin: 12px 0; object-fit: contain; border-radius: var(--radius-small); }
.rich-content table { display: block; max-width: 100%; overflow: auto; }
.links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.link-chip { max-width: 100%; padding: 7px 10px; overflow: hidden; color: var(--accent); background: var(--accent-soft); border-radius: 10px; font-size: 0.75rem; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.attachments { display: grid; gap: 8px; margin-top: 14px; }
.attachment-row { min-height: 64px; padding: 9px 9px 9px 11px; background: var(--surface-muted); border: 1px solid transparent; border-radius: 14px; }
.attachment-row:hover { border-color: var(--line); }
.file-meta { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.file-kind { display: grid; place-items: center; width: 38px; height: 38px; color: var(--accent); background: var(--accent-soft); border-radius: 11px; font-size: 0.625rem; font-weight: 800; }
.file-details { min-width: 0; }
.file-details .muted { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rich-content.is-code, .preview-body.is-code { position: relative; color: #d8e4f2; background: #10141a; border: 1px solid #2a3442; border-radius: 14px; }
.code-language { padding: 10px 13px 0; color: #8ea3bd; font-size: 0.6875rem; font-weight: 750; text-transform: uppercase; }
.code-preview { margin: 0; padding: 12px 13px 14px; color: inherit; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.tok-comment { color: #8b949e; font-style: italic; }
.tok-string { color: #a5d6ff; }
.tok-keyword { color: #ff8b84; font-weight: 600; }
.tok-number { color: #79c0ff; }

.preview-dialog { width: min(1240px, calc(100vw - 28px)); height: min(880px, calc(100dvh - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: hidden; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-large); }
.preview-dialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.dialog-title { min-width: 0; }
.dialog-title h3, .dialog-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-title .muted { margin-top: 3px; }
.preview-body { display: flex; flex-direction: column; gap: 12px; height: calc(100% - 70px); padding: 16px; overflow: auto; }
.preview-body.plain-text { white-space: pre-wrap; }
.preview-body video { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; background: #000; border-radius: 14px; }
.preview-body audio { width: 100%; }
.image-preview-stage { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.image-preview-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }
.document-frame { width: 100%; min-height: 640px; flex: 1 1 auto; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 14px; }
.preview-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; color: var(--text); background: var(--surface-muted); border-radius: 12px; font-size: 0.8125rem; font-weight: 650; text-decoration: none; }
.preview-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 50; max-width: calc(100% - 32px); padding: 11px 15px; color: var(--surface); background: var(--text); border-radius: 999px; box-shadow: var(--shadow-large); font-size: 0.8125rem; font-weight: 650; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.has-link { width: max-content; border-radius: 12px; text-align: center; }
.toast.has-link.show { pointer-events: auto; }
.toast.has-link a { display: block; margin-top: 5px; color: inherit; font-weight: 400; overflow-wrap: anywhere; user-select: text; }
@keyframes item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  body { font-size: 1.0625rem; }
  .topbar { padding-bottom: 8px; }
  .connection-status { display: none; }
  main { width: min(100% - 24px, 960px); padding-top: 30px; }
  .section-heading { align-items: start; }
  .keyboard-hint { display: none; }
  .composer { padding: 8px; border-radius: 24px; }
  .smart-input { min-height: 230px; border-radius: 17px; }
  .editor { min-height: 230px; padding: 18px 18px 82px; }
  .upload-cue { width: calc(100% - 28px); gap: 8px; }
  .upload-cue-target { width: 104px; height: 76px; }
  .upload-cue-icon { width: 84px; height: 64px; }
  .upload-cue-text { max-width: 100%; font-size: 0.8125rem; white-space: normal; }
  .composer-actions { right: 14px; bottom: 14px; }
  .board-section { margin-top: 42px; }
  .card { padding: 14px; border-radius: 17px; }
  .card-head { align-items: center; }
  .action-button span, .action-link span { display: none; }
  .action-button, .action-link { width: 42px; height: 42px; padding: 0; }
  .attachment-row { align-items: center; gap: 6px; padding: 8px; }
  .file-meta { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .file-kind { width: 36px; height: 36px; }
  .file-details .muted { font-size: 0.6875rem; }
  .row-actions { gap: 2px; }
  .preview-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-radius: 18px; }
  .preview-body { padding: 10px; }
  .document-frame { min-height: 520px; }
}

@media (max-width: 380px) {
  .brand { font-size: 1rem; }
  .brand-mark { width: 30px; height: 30px; }
  main { width: calc(100% - 20px); }
  .card { padding: 12px; }
  .timestamp { max-width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .preview-dialog::backdrop { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(0,0,0,.28); --line-strong: rgba(0,0,0,.5); }
  :root.dark { --line: rgba(255,255,255,.28); --line-strong: rgba(255,255,255,.5); }
}

/* The composer is one surface; attachments use separators instead of nested cards. */
.smart-input { background: var(--surface); border-radius: 27px; min-height: 280px; }
.editor { min-height: 280px; padding: 24px 24px 88px; }
.upload-cue { top: calc(50% - 14px); }
.upload-cue-target { background: transparent; border-radius: 20px; opacity: .7; }
.upload-cue-target:hover { opacity: 1; background: var(--accent-soft); }
.composer-actions { left: 20px; right: 20px; bottom: 18px; }
.add-files-action { margin-right: auto; background: transparent; border-color: var(--line); }
.pending-files:not(:empty) { padding: 18px; }
.upload-progress { padding: 0 22px 20px; }
.composer.is-uploading .send-action svg { animation: upload-pulse 900ms ease-in-out infinite alternate; }
.composer.is-uploading .smart-input { opacity: .75; }
.card { box-shadow: 0 2px 6px rgba(0,0,0,.025); padding: 18px 22px; }
.attachments:empty { display: none; }
.attachment-row { padding: 14px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.attachment-row:last-child { padding-bottom: 0; }
.file-kind { color: var(--text-secondary); background: var(--surface-muted); }
.file-kind[data-kind="PDF"] { color: var(--danger); background: var(--danger-soft); }
.file-kind[data-kind="TXT"], .file-kind[data-kind="DOC"] { color: var(--accent); background: var(--accent-soft); }
.file-meta { flex: 1; }
.row-actions, .dialog-actions { flex-shrink: 0; }
.action-button, .action-link { min-width: 44px; min-height: 44px; }
.image-thumbnail { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.thumbnail-button { display: grid; place-items: center; width: 100%; overflow: hidden; padding: 12px; margin-top: 14px; background: var(--surface-muted); border-radius: 12px; }
.thumbnail-button:hover { background: var(--surface-hover); }
.preview-dialog[open] { display: flex; flex-direction: column; }
.dialog-head { flex: 0 0 auto; }
.preview-body { height: auto; flex: 1; min-height: 0; }
.preview-body .code-preview { margin: 0; }
.preview-body.is-code { margin: 12px; padding: 0; }
.document-frame { min-height: 0; flex: 1 1 420px; }
.preview-link { min-height: 44px; }
.preview-loading { display: grid; place-content: center; flex: 1; color: var(--text-secondary); gap: 14px; text-align: center; }
.spinner { width: 28px; height: 28px; margin: auto; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 800ms linear infinite; }
.remove-file { width: 44px; height: 44px; }
.file-pill { grid-template-columns: 34px minmax(0,1fr) 44px; }
.file-pill { grid-template-columns: 34px minmax(0,1fr) auto; width: min(100%, 460px); }
.file-pill-actions { display: flex; align-items: center; gap: 2px; }
.draft-file-action { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text-secondary); border-radius: 50%; background: transparent; }
.draft-file-action svg { width: 18px; height: 18px; }
.draft-file-action[aria-pressed="true"] { color: var(--accent); background: transparent; }
.draft-file-action:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.file-spoiler-indicator { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--text-secondary); }
.file-spoiler-indicator svg { width: 14px; height: 14px; }
@media(max-width:400px) { .file-pill { grid-template-columns: 34px minmax(0,1fr); } .file-pill-actions { grid-column: 2; justify-self: end; } }
.text-spoiler:not(.is-revealed) { cursor: pointer; border-radius: 3px; background-color: var(--surface-muted); background-image: radial-gradient(circle, #8b929a 0 1px, transparent 1.5px), radial-gradient(circle, #b2bac3 0 .7px, transparent 1.3px); background-size: 5px 7px, 7px 5px; background-position: 0 0, 3px 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.text-spoiler:not(.is-revealed) .spoiler-content { visibility: hidden; user-select: none; }
.text-spoiler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-spoiler { position: relative; overflow: hidden; border-radius: 12px; min-height: 100px; isolation: isolate; }
.concealed-preview { filter: blur(24px); pointer-events: none; user-select: none; }
.file-spoiler-cover { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; color: white; background-color: #31374070; background-image: radial-gradient(circle, #ffffff70 0 .7px, transparent 1.2px), radial-gradient(circle, #ffffff40 0 .8px, transparent 1.4px); background-size: 7px 9px, 11px 7px; background-position: 0 0, 4px 3px; }
.text-spoiler:not(.is-revealed) { display: inline-block; position: relative; max-width: 100%; vertical-align: bottom; overflow: hidden; background-image: none; }
.file-spoiler-cover { background-image: none; contain: paint; }
.spoiler-dust-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.preview-body > .file-spoiler.document-spoiler,
.preview-body > .spoiler-preview-content.is-document { display: flex; flex-direction: column; flex: 1 0 420px; min-height: 420px; }
.spoiler-preview-content.is-document { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 420px; }
.shared-file-preview .document-frame { display: block; height: min(75dvh, 760px); min-height: 420px; }
.public-disclaimer { margin: 28px auto 0; max-width: 680px; text-align: center; font-size: .75rem; line-height: 1.6; color: var(--text-secondary); }
.public-disclaimer + .wipe-schedule { margin-top: 8px; }
.public-notice { width: min(460px,calc(100% - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); }
.public-notice::backdrop { background: #0008; backdrop-filter: blur(4px); }
.public-notice h2 { margin: 0 0 12px; font-size: 1.25rem; }
.public-notice p { font-size: .875rem; line-height: 1.6; }
.public-notice-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.single-share .public-disclaimer { display: none; }
.brand-mark { background: var(--surface); color: var(--accent); border: 1px solid var(--line); box-shadow: none; }
.brand { font-size: 0.9375rem; font-weight: 600; }
.header-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-identity h1 { font-size: 1.25rem; line-height: 1.3; }
.header-identity .brand { font-size: inherit; font-weight: 650; }
.header-identity .connection-status { flex: 0 0 auto; }
.header-identity .connection-status > span { width: 7px; height: 7px; }
.action-button, .action-link, .preview-link { border-radius: 999px; }
.upload-cue-target { border-radius: 28px; }
.upload-cue-text { border-radius: 18px; }
.back-to-composer { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 25; width: 48px; height: 48px; background: var(--surface-raised); box-shadow: var(--shadow-small); animation: item-in 180ms ease; }
.topbar-inner { width: min(1000px,100%); }
.board-section { margin-top: 36px; }
.feed-heading h2 { font-size: 1.25rem; }
.empty-state { border: none; min-height: 150px; }
.connection-status { font-weight: 500; }
.send-action { background: #006edb; }
.send-action:hover:not(:disabled) { background: #005bbb; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #ff8bba; }
.hljs-string, .hljs-attr { color: #a5d6ff; }
.hljs-number, .hljs-built_in { color: #bca5ff; }
.hljs-comment { color: #9aa8b9; }
.hljs-title, .hljs-function { color: #86dcc9; }
.hljs-variable, .hljs-params { color: #e2d2ac; }
@keyframes spin { to { transform: rotate(360deg); } }
.website-links { display: grid; gap: 12px; margin-top: 16px; }
.website-preview { display: flex; gap: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.website-copy { min-width: 0; flex: 1; }
.website-title { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.website-description { font-size: .875rem; color: var(--text-secondary); margin: 8px 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.website-image { width: 128px; height: 96px; object-fit: cover; border-radius: 16px; flex-shrink: 0; }
.website-preview .preview-link { margin-top: 8px; }
.document-frame { background: var(--canvas); border-color: var(--line-strong); }
@supports (corner-shape: superellipse(1.5)) {
  .composer, .smart-input, .card, .preview-dialog, .file-pill,
  .thumbnail-button, .website-image, .document-frame, .upload-cue-target,
  .rich-content.is-code, .preview-body.is-code, .image-preview-stage img {
    corner-shape: superellipse(1.5);
  }
}
@media (max-width: 480px) {
  .website-preview { flex-direction: column; }
  .website-image { width: 100%; height: auto; max-height: 190px; object-fit: contain; background: var(--surface-muted); }
}
@keyframes upload-pulse { to { opacity: .35; } }
@media (max-width: 700px) {
  main { padding-top: 24px; }
  h1 { font-size: 1.75rem; }
  .composer { padding: 0; border-radius: 24px; }
  .smart-input { border-radius: 23px; min-height: 260px; }
  .editor { min-height: 260px; padding: 20px 18px 84px; }
  .upload-cue { max-width: calc(100% - 36px); }
  .upload-cue-text { font-size: 0.875rem; line-height: 1.5; }
  .card { padding: 12px 16px 16px; border-radius: 20px; }
  .attachment-row { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .action-button, .action-link { width: 44px; height: 44px; }
  .file-name { font-size: 0.875rem; }
  .file-details .muted { font-size: 0.75rem; }
  .dialog-head { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .dialog-title { flex: 1 1 140px; }
  .dialog-actions { gap: 4px; }
  .preview-body { padding: 12px; }
  .connection-status { display: inline-flex; font-size: 0.75rem; }
  .brand > span:last-child { display: none; }
}
@media (max-width: 360px) {
  .attachment-row { grid-template-columns: minmax(0,1fr); }
  .row-actions { justify-content: flex-end; }
  .dialog-title { flex-basis: 100%; }
  .dialog-actions { margin-left: auto; }
}

:root { --page-gutter: 16px; }
.topbar { padding-left: 0; padding-right: 0; }
.topbar-inner, main { width: min(960px, calc(100% - 2 * max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right)))); }
.website-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
[data-preview-website]:not([data-embeddable]) { display: none; }

/* Group each filename and its preview, separating only different attachments. */
.attachments { gap: 24px; }
.attachment-group { min-width: 0; padding-top: 16px; background: linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent) top / 100% 1px no-repeat; }
.attachment-group .attachment-row { border: 0; padding: 0 0 12px; }
.attachment-group .thumbnail-button { margin-top: 0; }
.topbar, .dialog-head { border-bottom-color: transparent; }
.topbar::after, .dialog-head::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent); pointer-events: none; }
.dialog-head { position: relative; }
.website-preview { border-top: 0; background: linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent) top / 100% 1px no-repeat; }
.rich-content hr { border: 0; height: 1px; background: linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent); }
.code-open { margin: 4px 10px 10px; white-space: normal; }
.code-expand { display: inline-grid; place-items: center; min-width: 64px; min-height: 36px; margin: 6px 0 6px 16px; padding: 0 16px; border: 1px solid #589bd866; border-radius: 12px; background: #589bd824; color: #a5d6ff; font: inherit; font-weight: 700; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.code-expand { display: grid; width: 64px; min-height: 44px; margin: 2px 0 2px 32px; padding: 0; border: 0; background: transparent; color: #69baff; font-size: 1.125rem; }
.code-expand:hover { background: transparent; color: #b4dfff; }
.full-code-content { min-width: 0; }
.full-code-content.plain-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.full-code-content.is-code { background: #10141a; color: #d8e4f2; border-radius: 14px; }
.syntax-select { width: 170px; max-width: 100%; height: 44px; padding: 8px 12px; color: var(--text); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 22px; font: inherit; font-size: .8125rem; cursor: pointer; transition: background 150ms ease; }
.syntax-select:hover { background: var(--surface-hover); }
@media (max-width: 380px) { .syntax-select { width: 144px; } }
.card { border-radius: var(--radius-large); }
.share-fold { margin-top: 16px; }
.share-fold > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; padding: 8px 12px; border-radius: 16px; color: var(--text-secondary); cursor: pointer; list-style: none; font-size: .875rem; font-weight: 600; transition: background 150ms ease; }
.share-fold > summary::-webkit-details-marker { display: none; }
.share-fold > summary:hover { color: var(--text); background: var(--surface-muted); }
.share-fold > summary svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 180ms ease; }
.share-fold[open] > summary svg { transform: rotate(180deg); }
.image-navigation { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 16px; padding-top: 12px; color: var(--text-secondary); font-size: .8125rem; }
.image-previous svg { transform: rotate(-90deg); }
.image-next svg { transform: rotate(90deg); }
.outbox { margin-bottom: 20px; }
.outbox-entry { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text-secondary); font-size: .875rem; }
.outbox-entry > span { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.code-fade-start, .code-fade-end { display: block; }
:root { --code-fade-length: 8em; --code-fade-edge: rgba(0, 0, 0, 0.01); }
.code-fade-start { mask-image: linear-gradient(to bottom, #000 calc(100% - var(--code-fade-length)), var(--code-fade-edge)); }
.code-fade-end { mask-image: linear-gradient(to bottom, var(--code-fade-edge), #000 var(--code-fade-length)); }
@media (prefers-contrast: more), (forced-colors: active) { .code-fade-start, .code-fade-end { mask-image: none; } }
.install-notice { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--line-strong); border-radius: 24px; color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-large); animation: item-in 220ms ease both; }
.install-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.install-notice p { margin: 8px 0 14px; color: var(--text-secondary); font-size: .875rem; line-height: 1.5; white-space: pre-line; }
.install-notice { max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow-y: auto; }
.install-notice .preview-link { min-height: 44px; }
.board-search { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; width: 240px; padding: 0 14px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-muted); }
.board-search > span svg { width: 18px; height: 18px; }
.board-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: .875rem; }
.board-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-results { position: absolute; top: 52px; right: 0; width: min(420px,calc(100vw - 32px)); max-height: 50dvh; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-large); }
.search-results button { display: block; width: 100%; text-align: left; padding: 12px; min-height: 44px; border: 0; border-radius: 12px; color: var(--text); background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; }
.search-results button:hover, .search-results button:focus-visible { background: var(--surface-hover); }
.search-match { background: #ffce60; color: #17181a; border-radius: 3px; }
.theme-auto { position: relative; width: 30px; height: 24px; }
.auto-letter { position: absolute; left: 8px; bottom: -1px; font-size: 19px; line-height: 22px; font-weight: 600; z-index: 1; }
.auto-moon, .auto-sun { position: absolute; top: 0; width: 23px; height: 23px; }
.auto-moon { left: 0; clip-path: polygon(0 0,57% 0,57% 15%,35% 38%,14% 100%,0 100%); }
.auto-sun { right: 0; clip-path: polygon(40% 0,100% 0,100% 100%,82% 100%,61% 38%,40% 15%); }
.auto-moon svg, .auto-sun svg { width: 23px; height: 23px; }
.auto-sun svg circle { fill: currentColor; }
.composer-actions .add-files-action { margin-right: 16px; }
.lifespan-option { display: flex; align-items: center; gap: 8px; margin-right: auto; min-height: 44px; font-size: .8125rem; color: var(--text-secondary); cursor: pointer; }
.lifespan-option input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.smart-input:not(.has-content):not(.has-files) .add-files-action,
.smart-input:not(.has-content):not(.has-files) .lifespan-option { visibility: hidden; }
.card-time { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lifespan-badge { display: inline-grid; place-items: center; padding: 2px; border: 1px solid currentColor; border-radius: 4px; corner-shape: superellipse(1.5); background: transparent; color: #16834b; font-size: .6875rem; line-height: 1; font-weight: 700; }
.dark .lifespan-badge { color: #53d58d; }
.single-share .header-identity, .single-share .board-search, .single-share #installApp,
.single-share .share-section, .single-share .feed-heading, .single-share #outbox,
.single-share #wipeSchedule, .single-share #backToComposer, .single-share #installNotice { display: none !important; }
.single-share .topbar-actions { margin-left: auto; flex: 0 0 auto; }
.language-control { position: relative; flex: 0 0 44px; padding: 0; }
.language-control select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.language-control:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#languageIcon { display: grid; place-items: center; font-size: .875rem; font-weight: 600; }
#languageIcon svg { width: 22px; height: 22px; }
@media(max-width:700px) { .topbar-actions { gap: 5px; } .board-search { padding: 0 8px; gap: 4px; } .board-search input { font-size: .8125rem; } }
.single-share .card { animation: none; }
.single-share .code-preview { max-height: none; }
.shared-file-preview { margin-top: 14px; }
.shared-file-preview video, .shared-file-preview audio { display: block; width: 100%; }
.single-share-links { display: grid; gap: 12px; padding: 16px 0; }
.single-share-links a { overflow-wrap: anywhere; }
@media(max-width:700px) {
  .card-head { flex-wrap: nowrap; gap: 8px; }
  .card-head .card-time { min-width: 0; flex: 1; }
  .timestamp { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .timestamp-desktop { display: none; }
  .timestamp-mobile { display: flex; flex-direction: column; line-height: 1.45; white-space: nowrap; }
  .card-actions { margin-left: auto; flex-shrink: 0; }
}
@media(max-width:380px) { .card-head .card-actions { gap: 4px; } }
.thumbnail-button { position: relative; isolation: isolate; overflow: hidden; }
.thumbnail-button .image-backdrop { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; max-height: none; object-fit: cover; filter: blur(28px) brightness(.7); opacity: .7; z-index: -1; pointer-events: none; }
.thumbnail-button .image-thumbnail { position: relative; }
.attachment-group { position: relative; isolation: isolate; }
.image-connection { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; }
.image-connected .image-connection { opacity: 1; transition: opacity 450ms ease; }
.image-connected .file-kind { background: transparent; color: #fff; text-shadow: 0 1px 3px #000; }
.image-connected .thumbnail-button { background: transparent; }
.image-connected .image-backdrop { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .image-connected .image-connection { transition: none; } }
@media(max-width:600px) {
  .composer-actions { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px; gap: 8px; }
  .composer-actions .add-files-action { grid-row: 1; grid-column: 1; margin: 0; }
  .lifespan-option { grid-row: 1; grid-column: 2; margin: 0 0 0 12px; font-size: .75rem; gap: 6px; }
  .lifespan-option > span > span { display: block; white-space: nowrap; line-height: 1.4; }
  .composer-actions .danger-action { grid-row: 1; grid-column: 3; }
  .composer-actions .send-action { grid-row: 1; grid-column: 4; }
  .smart-input .editor { padding-bottom: 88px; }
}
@media(max-width:360px) {
  .lifespan-option { grid-row: 1; grid-column: 1 / 5; margin: 0; }
  .composer-actions .add-files-action, .composer-actions .danger-action, .composer-actions .send-action { grid-row: 2; }
  .smart-input, .smart-input .editor { min-height: 320px; }
  .smart-input .editor { padding-bottom: 132px; }
  .upload-cue { top: calc(50% - 60px); }
}
.brand-break { white-space: pre; }
.outbox .card { opacity: .7; margin-bottom: 16px; animation: none; }
.pending-clock { display: inline-flex; vertical-align: middle; color: #ff9500; margin-left: 8px; }
.pending-clock svg { width: 20px; height: 20px; }
.outbox-file { display: flex; align-items: center; gap: 12px; padding: 12px 0; overflow-wrap: anywhere; }
.outbox-file img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; }
.outbox-status { font-size: .8125rem; color: var(--text-secondary); margin-top: 12px; }
.queued-transfer { position: relative; padding: 12px 48px 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.queued-transfer .outbox-file { padding: 0 0 8px; min-width: 0; }
.queued-transfer .outbox-file a { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.queued-transfer .outbox-file img { width: 40px; height: 40px; flex-shrink: 0; }
.transfer-details { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .75rem; color: var(--text-secondary); margin-bottom: 7px; }
.transfer-control { position: absolute; right: 0; top: 12px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.file-progress { height: 3px; }
.copy-image-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); gap: 16px; }
.copy-image-choice { display: grid; grid-template-rows: 180px auto; gap: 8px; padding: 10px; min-width: 0; color: var(--text); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.copy-image-choice img { width: 100%; height: 180px; object-fit: contain; }
.copy-image-choice span { overflow-wrap: anywhere; font-size: .875rem; }
.copy-image-choice:hover { border-color: var(--accent); }
@media(max-width:700px) {
  .topbar-inner { flex-wrap: nowrap; gap: 8px; position: relative; }
  .header-identity { flex: 0 0 auto; gap: 5px; }
  .header-identity h1 { font-size: 14px; line-height: 1.15; }
  .header-identity .brand { display: block; }
  .brand > span, .brand > span:last-child { display: block; }
  .topbar-actions { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 6px; }
  .board-search { width: auto; min-width: 0; flex: 1; padding: 0 10px; gap: 5px; position: static; }
  .board-search input { font-size: 16px; }
  .board-search > span svg { width: 16px; height: 16px; }
  .search-results { top: calc(100% + 10px); left: 0; right: 0; width: 100%; }
}
.website-frame { flex: 1 1 auto; min-height: 0; }
.website-frame-note { font-size: .8125rem; color: var(--text-secondary); }
.wipe-schedule { position: static; margin: 24px 0 0; text-align: center; font-size: .75rem; color: var(--text-secondary); line-height: 1.6; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { :root { --page-gutter: 12px; } }
@media (max-width: 380px) { :root { --page-gutter: 10px; } }
@media (max-width: 360px) { .board-search > span { display: none; } }

/* Keep the browser-facing edge opaque, fading into the existing glass header. */
@media (max-width: 700px) {
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, var(--canvas) 0%, var(--canvas) env(safe-area-inset-top, 0px), color-mix(in srgb, var(--canvas) 80%, transparent) 100%);
  }
  .ios-installed .topbar {
    background: color-mix(in srgb, var(--canvas) 80%, transparent);
    box-shadow: none;
  }
  .ios-installed .topbar::before { content: none; }
}
@media (max-width: 700px) and (prefers-reduced-transparency: reduce) {
  .topbar, .ios-installed .topbar { background: var(--canvas); }
}