:root {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --surface: oklch(0.965 0.006 57);
  --surface-strong: oklch(0.925 0.01 57);
  --ink: oklch(0.205 0.018 45);
  --muted: oklch(0.505 0.022 45);
  --line: oklch(0.885 0.01 57);
  --primary: oklch(0.69 0.17 56.6);
  --primary-soft: oklch(0.94 0.045 56.6);
  --primary-hover: oklch(0.62 0.18 56.6);
  --chat-bg: oklch(0.948 0.003 145);
  --bubble-in: oklch(1 0 0);
  --bubble-out: oklch(0.875 0.17 135);
  --accent: oklch(0.31 0.12 20);
  --success: oklch(0.55 0.13 150);
  --danger: oklch(0.52 0.19 25);
  --focus: oklch(0.66 0.16 238);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --z-popover: 20;
  --z-workbench: 18;
  --z-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-privacy: 60;
  font-family: "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--ink); font-size: 15px; position: fixed; inset: 0; }
button, input, textarea { font: inherit; color: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid color-mix(in oklch, var(--focus) 58%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
.privacy-shield { position: fixed; inset: 0; z-index: var(--z-privacy); visibility: hidden; opacity: 0; background: var(--bg); pointer-events: none; contain: strict; transform: translateZ(0); }
body.is-privacy-shielded .privacy-shield { visibility: visible; opacity: 1; pointer-events: auto; }
/* Reuse the mounted lock dashboard above the opaque fallback. This also covers
   boot/restore while appView is hidden, without copying any private page DOM. */
body.is-privacy-shielded #privacyView.dashboard-mode { display: flex !important; visibility: visible; z-index: calc(var(--z-privacy) + 1); pointer-events: none; }
/* Modal top layers outrank z-index; conceal them without losing preview state. */
body.is-privacy-shielded dialog[open], body.is-privacy-shielded dialog[open] *, body.is-privacy-shielded dialog[open]::backdrop { visibility: hidden !important; }

.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup > div { display: grid; gap: 4px; }
.brand-lockup strong { font-size: 20px; letter-spacing: -.02em; }
.brand-lockup span { color: var(--muted); font-size: 13px; }
.brand-lockup.compact { gap: 10px; }
.brand-lockup.compact strong { font-size: 18px; }
.brand-mark { position: relative; display: inline-flex; width: 38px; height: 38px; border-radius: 11px; background: var(--ink); overflow: hidden; flex: 0 0 auto; }
.brand-mark i { position: absolute; display: block; border-radius: 999px; background: var(--primary); }
.brand-mark i:first-child { width: 10px; height: 23px; left: 9px; top: 8px; }
.brand-mark i:last-child { width: 17px; height: 10px; left: 14px; top: 14px; }
.compact .brand-mark { width: 34px; height: 34px; border-radius: 10px; }

.auth-view { position: fixed; top: var(--app-top, 0); left: 0; right: 0; height: var(--app-height, 100dvh); display: grid; place-items: center; background: var(--bg); }
.auth-panel { width: min(420px, calc(100% - 40px)); padding: 44px 0; }
.auth-mark { margin-bottom: 34px; }
.auth-intro { margin: 0 0 30px; }
.auth-intro h1 { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -.03em; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.auth-tab { border: 0; background: transparent; padding: 10px 2px 11px; margin-right: 28px; color: var(--muted); position: relative; }
.auth-tab.is-active { color: var(--ink); font-weight: 650; }
.auth-tab.is-active::after { content: ""; position: absolute; height: 2px; background: var(--primary); inset: auto 0 -1px; }
#authForm { display: grid; gap: 18px; }
#authForm label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
input, textarea { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; }
input { min-height: 44px; padding: 0 13px; }
input::placeholder, textarea::placeholder { color: oklch(0.53 0.018 45); }
input:hover, textarea:hover { border-color: oklch(0.72 0.02 57); }
input:focus, textarea:focus { border-color: var(--focus); outline: none; }
.primary-button { border: 0; border-radius: 10px; min-height: 44px; padding: 0 18px; background: var(--primary); color: white; font-weight: 700; }
.primary-button:hover { background: var(--primary-hover); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.form-error { margin: -6px 0 0; color: var(--danger); font-size: 13px; }

.app-shell { position: fixed; top: var(--app-top, 0); left: 0; right: 0; height: var(--app-height, 100dvh); display: grid; grid-template-columns: 320px minmax(0, 1fr); background: var(--bg); }
.rail { min-height: 0; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); display: flex; flex-direction: column; }
.rail-header { height: 66px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.rail-actions, .conversation-actions { display: flex; align-items: center; gap: 2px; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; display: inline-grid; place-items: center; flex: 0 0 auto; }
.icon-button:hover { background: var(--surface-strong); }
.icon-button svg, .send-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-row { min-height: 72px; display: flex; align-items: center; gap: 11px; padding: 12px 18px; }
.account-profile { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; padding: 5px; margin: -5px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.account-profile:hover { background: var(--surface-strong); }
.account-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.account-copy strong, .account-copy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-copy span { color: var(--muted); font-size: 12px; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: white !important; font-size: 13px; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.quiet-button, .text-button { border: 0; background: transparent; color: var(--muted); padding: 7px 8px; border-radius: 8px; }
.quiet-button:hover, .text-button:hover { color: var(--ink); background: var(--surface-strong); }
.text-button { color: var(--primary-hover); font-weight: 650; }
.rail-tabs { display: flex; padding: 0 18px; border-bottom: 1px solid var(--line); }
.rail-tabs button { flex: 1; height: 42px; border: 0; background: transparent; color: var(--muted); position: relative; }
.rail-tabs button.is-active { color: var(--ink); font-weight: 650; }
.rail-tabs button.is-active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; background: var(--primary); }
.rail-tabs button span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; padding: 0 5px; border-radius: 999px; color: white; background: var(--danger); font-size: 11px; }
.rail-pane { min-height: 0; overflow-y: auto; flex: 1; padding: 8px; }
.friend-list, .request-list { display: grid; gap: 2px; }
.friend-row { width: 100%; min-height: 68px; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; display: flex; align-items: center; gap: 11px; text-align: left; }
.friend-row:hover { background: color-mix(in oklch, var(--surface-strong) 65%, transparent); }
.friend-row.is-active { background: var(--primary-soft); }
.friend-row-main { display: grid; gap: 5px; min-width: 0; flex: 1; }
.friend-row-top, .friend-row-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.friend-row strong, .friend-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.friend-row p, .friend-row time { color: var(--muted); font-size: 12px; }
.friend-row time { flex: 0 0 auto; }
.unread-badge { min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--primary); color: white; font-size: 11px; }
.rail-empty { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; padding: 32px; }
.rail-empty .empty-glyph { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--primary-hover); margin-bottom: 14px; }
.rail-empty p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 8px 0; }
.rail-lock-row { display: flex; justify-content: flex-end; padding: 8px 12px; }
.rail-lock-row .quiet-button { min-height: 40px; padding-inline: 12px; }
.connection-state { min-height: 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 7px; padding: 0 18px; }
.connection-state > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.connection-state.is-online > span:first-child { background: var(--success); }

.conversation { min-width: 0; min-height: 0; background: var(--bg); }
.conversation-empty { height: 100%; }
.conversation-active { position: relative; width: 100%; min-width: 0; max-width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 66px minmax(0, 1fr) auto; overflow: hidden; }
.conversation-header { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 24px; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--bg) 97%, var(--surface)); }
.conversation-header > div { min-width: 0; }
.conversation-header > div:nth-of-type(1) { flex: 1; }
.conversation-header h1 { font-size: 16px; margin: 0 0 4px; }
.conversation-header p { margin: 0; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.conversation-header #activeAvatar { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.presence-dot.is-online { background: var(--success); }
.header-action { margin-left: auto; }
.conversation-actions { margin-left: auto; flex: 0 0 auto; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); background: color-mix(in oklch, var(--danger) 9%, transparent); }
.message-viewport { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 22px 24px 18px; background: var(--chat-bg); }
.message-list { width: min(780px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.load-more { display: block; margin: 0 auto 15px; border: 0; border-radius: 8px; padding: 7px 12px; background: var(--surface); color: var(--muted); }
.return-to-latest { position: absolute; right: max(18px,calc((100% - 840px) / 2)); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 4; min-height: 42px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; box-shadow: 0 3px 8px color-mix(in oklch,var(--ink) 18%,transparent); }
.return-to-latest:hover { color: var(--primary-hover); }
.return-to-latest span { width: 25px; height: 25px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-hover); display: grid; place-items: center; font-size: 17px; }
.message { display: flex; align-items: flex-start; gap: 10px; max-width: min(76%, 68ch); transform-origin: left top; }
.message, .message * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.message { touch-action: pan-y; }
.message.is-mine { transform-origin: right top; }
.message.is-entering { animation: message-in 220ms var(--ease-out); }
.message.is-search-target :is(.bubble,.file-message,.message-media-button,.message-video,.voice-message,.message-emoji,.message-sticker) { box-shadow: 0 0 0 3px color-mix(in oklch,var(--primary) 72%,white); animation: search-target-pulse 1.2s var(--ease-out); }
.message.is-selecting { max-width: min(82%, 72ch); cursor: pointer; }
.message.is-selected .bubble, .message.is-selected .message-media-button, .message.is-selected .message-video, .message.is-selected .voice-message, .message.is-selected .file-message, .message.is-selected .message-sticker { box-shadow: 0 0 0 2px var(--primary); }
.message-select { width: 22px; height: 22px; margin: 0 2px 3px 0; flex: 0 0 auto; appearance: none; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.message-select::after { content: ""; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.message-select:checked { border-color: var(--primary); background: var(--primary); }
.message-select:checked::after { opacity: 1; }
.message.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.message .avatar { width: 36px; height: 36px; margin-top: 1px; font-size: 11px; }
.message-lock-button { width: 36px; height: 36px; flex: 0 0 auto; margin-top: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: inline-grid; place-items: center; }
.message-peer-avatar { width: 36px; height: 36px; flex: 0 0 auto; margin-top: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: inline-grid; place-items: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.message-peer-avatar .avatar { margin-top: 0; }
.message-lock-button .avatar { margin-top: 0; transition: filter 150ms var(--ease-out), transform 150ms var(--ease-out); }
.message-lock-button:hover .avatar { filter: brightness(.94); }
.message-lock-button:active .avatar { transform: scale(.94); }
.message-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.message.is-mine .message-body { align-items: flex-end; }
.bubble { position: relative; margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--bubble-in); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); }
.bubble::before { content: ""; position: absolute; top: 13px; left: -6px; width: 7px; height: 12px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.message.is-mine .bubble { background: var(--bubble-out); }
.message.is-mine .bubble::before { left: auto; right: -6px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.message-meta { min-height: 15px; margin: 4px 2px 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.message-meta time { display: block; margin: 0; color: inherit; font-size: inherit; }
.message.is-mine .message-meta { justify-content: flex-end; text-align: right; }
.message-reactions { max-width: min(420px, 100%); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.message.is-mine .message-reactions { justify-content: flex-end; }
.message-reaction-chip { min-height: 27px; max-width: 210px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1; transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.message-reaction-chip:hover { border-color: color-mix(in oklch, var(--primary) 44%, var(--line)); background: var(--surface); color: var(--ink); }
.message-reaction-chip.is-mine { border-color: color-mix(in oklch, var(--primary) 55%, var(--line)); background: color-mix(in oklch, var(--primary) 10%, var(--bg)); color: var(--primary-hover); }
.message-reaction-chip strong { flex: 0 0 auto; color: var(--primary-hover); font-size: 12px; font-weight: 700; }
.message-reaction-chip .lark-emoji { width: 20px; height: 20px; }
.message-reaction-chip span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.favorite-mark { color: var(--primary-hover); font-size: 10px; }
.quoted-message { max-width: min(360px, 100%); min-height: 29px; margin-bottom: 4px; padding: 6px 9px; border: 0; border-radius: 6px; background: color-mix(in oklch, var(--surface-strong) 80%, var(--bg)); color: var(--muted); display: flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; line-height: 1.35; text-align: left; cursor: pointer; }
.quoted-message:hover { background: color-mix(in oklch, var(--surface-strong) 90%, var(--bg)); }
.quoted-message:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quoted-message.is-unavailable { cursor: default; }
.quoted-message strong { max-width: 108px; flex: 0 1 auto; overflow: hidden; color: var(--ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.quoted-message span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recall-notice { align-self: center; margin: 3px 0; color: var(--muted); font-size: 11px; line-height: 24px; user-select: none; }
.read-state { transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.read-state.is-read { color: var(--primary-hover); }
.message-media-button { position: relative; display: block; width: var(--thumbnail-width, 240px); aspect-ratio: var(--thumbnail-ratio, 6 / 5); max-width: 100%; padding: 0; border: 0; border-radius: 8px; background: var(--bubble-in); overflow: hidden; cursor: zoom-in; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); }
.message-media-button.is-live { position: relative; }
.live-badge { position: absolute; left: 8px; bottom: 8px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: color-mix(in oklch, black 62%, transparent); color: white; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 750; letter-spacing: .04em; backdrop-filter: blur(10px); }
.message-image { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 8px; object-fit: contain; background: var(--bubble-in); -webkit-user-drag: none; user-drag: none; }
.thumbnail-fallback { display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:12px; color:var(--muted); background:var(--surface); font-size:12px; line-height:1.6; }
.is-thumbnail-error .thumbnail-fallback { display:flex; }
.image-upload { min-width:128px; min-height:88px; max-height:320px; cursor:default; box-shadow:none; }
.image-upload > .message-image { position:absolute; inset:0; width:100%; height:100%; max-height:320px; object-fit:contain; }
.image-upload-shade { position:absolute; inset:0; background:oklch(0 0 0 / .28); pointer-events:none; }
.image-upload-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px; color:white; }
.image-upload-label { padding:4px 10px; border-radius:6px; background:oklch(.2 0 0 / .84); color:white; font-size:.875rem; line-height:1.3; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; }
.image-upload progress { display:block; width:min(120px,100%); height:4px; border:0; border-radius:2px; overflow:hidden; appearance:none; background:oklch(1 0 0 / .4); accent-color:var(--primary); }
.image-upload progress::-webkit-progress-bar { background:oklch(1 0 0 / .4); border-radius:2px; }
.image-upload progress::-webkit-progress-value { background:white; border-radius:2px; }
.image-upload progress::-moz-progress-bar { background:white; border-radius:2px; }
.image-upload-actions { display:flex; gap:8px; }
.image-upload-actions[hidden],.image-upload progress[hidden] { display:none; }
.image-upload-actions button { min-width:44px; min-height:44px; padding:0 10px; border:0; border-radius:6px; background:oklch(.2 0 0 / .88); color:white; font:inherit; font-size:.8125rem; cursor:pointer; }
.image-upload-actions button:hover { background:oklch(.3 0 0); }
.image-upload-actions button:focus-visible { outline:2px solid white; outline-offset:2px; }
.image-upload.is-upload-failed { min-height:112px; }
.video-upload { width:240px; max-width:100%; min-width:0; min-height:144px; max-height:180px; aspect-ratio:4 / 3; background:var(--surface-strong); }
.video-upload-preview { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.video-upload .image-upload-status { padding:12px; }
.video-upload-caption { display:flex; align-items:center; gap:6px; max-width:100%; min-width:0; color:white; font-size:.75rem; text-shadow:0 1px 2px oklch(0 0 0 / .6); }
.video-upload-caption svg { flex:0 0 22px; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.video-upload-caption span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.video-upload-error { display:-webkit-box; max-width:100%; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding:3px 6px; border-radius:4px; background:oklch(.2 0 0 / .84); color:white; font-size:.75rem; line-height:1.4; overflow-wrap:anywhere; text-align:center; }
.video-upload.is-upload-failed { min-height:156px; }
.video-upload.is-upload-failed .video-upload-caption { display:none; }
.message-video { display: block; width: min(420px, 100%); max-height: 460px; border-radius: 8px; background: var(--ink); object-fit: contain; }
.voice-message { position: relative; width: clamp(168px, 28vw, 280px); min-height: 48px; border: 0; border-radius: 7px; padding: 0 13px; background: var(--bubble-in); display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); }
.voice-message::before { content: ""; position: absolute; top: 13px; left: -6px; width: 7px; height: 12px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.message.is-mine .voice-message { background: var(--bubble-out); }
.message.is-mine .voice-message::before { left: auto; right: -6px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.voice-message svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-icon { width: 20px; flex: 0 0 auto; color: var(--primary-hover); font-size: 15px; text-align: center; }
.voice-message audio { display: none; }
.voice-progress { height: 3px; flex: 1; border-radius: 999px; background: color-mix(in oklch, var(--ink) 14%, transparent); overflow: hidden; }
.voice-progress i { display: block; width: 0%; height: 100%; border-radius: inherit; background: var(--primary-hover); }
.voice-duration { min-width: 28px; color: var(--muted); font-size: 12px; text-align: right; }
.file-message { width: min(330px, 58vw); min-height: 66px; padding: 10px 11px; border-radius: 8px; background: var(--bubble-in); color: var(--ink); display: flex; align-items: center; gap: 10px; text-decoration: none; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); }
.message.is-mine .file-message { background: var(--bubble-out); }
.file-message > span { width: 38px; height: 44px; flex: 0 0 auto; border-radius: 7px; background: color-mix(in oklch, var(--primary) 14%, var(--bg)); color: var(--primary-hover); display: grid; place-items: center; }
.file-message svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.file-message div { min-width: 0; flex: 1; display: grid; gap: 5px; }
.file-message strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.file-message small { color: var(--muted); font-size: 11px; }
.file-message > i { color: var(--muted); font-size: 18px; font-style: normal; }
.file-message:hover > i { color: var(--primary-hover); }
.day-divider { align-self: center; color: oklch(0.58 0.01 145); font-size: 11px; margin: 8px 0 6px; }
.composer { width: 100%; min-width: 0; max-width: 100%; min-height: 64px; margin: 0; padding: 9px max(16px, calc((100% - 840px) / 2)) max(9px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in oklch, var(--bg) 94%, var(--surface)); box-shadow: 0 -1px 0 color-mix(in oklch, var(--line) 45%, transparent); overflow-x: hidden; }
.reply-bar { width: 100%; min-width: 0; max-width: 100%; height: 40px; min-height: 40px; max-height: 40px; margin: -2px 0 7px; padding: 3px 6px 3px 11px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; gap: 8px; overflow: hidden; }
.reply-bar > div { width: 0; min-width: 0; max-width: 100%; height: 34px; flex: 1 1 0; display: flex; align-items: center; gap: 7px; overflow: hidden; font-size: 12px; }
.reply-bar strong { max-width: min(28%, 150px); flex: 0 1 auto; overflow: hidden; color: var(--primary-hover); white-space: nowrap; text-overflow: ellipsis; }
.reply-bar span { width: 0; min-width: 0; max-width: 100%; flex: 1 1 0; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-bar .icon-button { width: 34px; height: 34px; }
.reply-bar .icon-button svg { width: 17px; height: 17px; }
.composer-main { display: flex; align-items: flex-end; gap: 6px; width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
.composer-main .icon-button[aria-expanded="true"] { background: var(--surface-strong); color: var(--primary-hover); }
.composer-accessory { width: 100%; display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(5px); pointer-events: none; transition: grid-template-rows 240ms var(--ease-out), opacity 150ms var(--ease-out), transform 200ms var(--ease-out); }
.composer-accessory.is-open { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); pointer-events: auto; }
.composer-accessory-inner { min-height: 0; overflow: hidden; }
.composer-accessory.is-open .composer-accessory-inner { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.selection-bar { width: min(840px, calc(100% - 32px)); min-height: 64px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); }
.selection-bar strong { font-size: 13px; }
.composer textarea { width: 0; flex: 1 1 0; min-width: 0; max-width: 100%; min-height: 44px; max-height: 132px; resize: none; padding: 11px 13px; line-height: 20px; overflow-y: auto; transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.composer textarea:focus { background: var(--bg); box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 12%, transparent); }
.composer .message-editor { width:0; flex:1 1 0; min-width:0; max-width:100%; min-height:44px; max-height:132px; padding:11px 13px; overflow-y:auto; overflow-wrap:anywhere; white-space:pre-wrap; font:inherit; font-size:16px; line-height:20px; border:1px solid var(--line); border-radius:10px; background:var(--bg); outline:none; }
.composer .message-editor:focus { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in oklch, var(--focus) 12%, transparent); }
.composer .message-editor { -webkit-user-select:text; user-select:text; touch-action:auto; cursor:text; overflow-x:hidden; scroll-behavior:auto; }
.message-editor .lark-emoji { user-select:all; }
.message-edited { color:#969ba3; font-size:.78em; margin-left:4px; white-space:nowrap; font-weight:400; }
#editMessageDialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
#editMessageInput { margin:0 20px; padding:12px; min-height:88px; max-height:35dvh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; font-size:16px; line-height:1.5; outline:none; -webkit-user-select:text; user-select:text; touch-action:auto; }
#editMessageInput:focus { border-color:var(--focus); }
#editMessageError { margin:12px 20px 0; }
.send-button { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--primary); color: white; display: grid; place-items: center; transition: transform 120ms var(--ease-out), background-color 150ms var(--ease-out), opacity 150ms var(--ease-out); }
.send-button:hover { background: var(--primary-hover); }
.send-button:active, .icon-button:active, .quiet-button:active { transform: scale(.96); }
.send-button:disabled { opacity: .45; cursor: not-allowed; }
.emoji-picker { width: 100%; height: 276px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.emoji-picker.is-custom { height: min(440px, calc(var(--app-height, 100dvh) * .55)); }
.emoji-picker-header { flex: 0 0 44px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.emoji-picker-tabs { height: 44px; flex: 1; padding: 0 4px; display: flex; align-items: stretch; gap: 16px; }
.emoji-picker-tabs button { position: relative; min-width: 64px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.emoji-picker-tabs button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transition: transform 160ms var(--ease-out); }
.emoji-picker-tabs button.is-active { color: var(--ink); }
.emoji-picker-tabs button.is-active::after { transform: scaleX(1); }
.emoji-picker-panel { min-height: 0; flex: 1; padding: 6px 4px; overflow-y: auto; overscroll-behavior: contain; }
.emoji-picker-panel[hidden] { display: none; }
.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.emoji-grid button { min-width: 0; border: 0; border-radius: 7px; background: transparent; aspect-ratio: 1; font-size: 22px; }
.emoji-grid button:hover { background: var(--surface); }
.emoji-grid button:disabled { opacity: .48; }
.lark-emoji { display: block; width: 30px; height: 30px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.emoji-grid .lark-emoji { width: min(46px, 100%); height: min(46px, 100%); margin: auto; transition: transform 150ms var(--ease-out); }
.emoji-grid button:hover .lark-emoji { transform: scale(1.08); }
.message-emoji { font-size: 16px; padding: 8px 0; display: inline-grid; place-items: center; }
.message-emoji .lark-emoji.is-message { width: 1.2em; height: 1.2em; }
.lark-emoji.is-inline { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; object-fit: contain; }
.emoji-draft-preview { padding: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; max-height: 76px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-sticker { width: min(112px, 30vw); min-width: 74px; min-height: 74px; display: grid; place-items: center; }
.message-sticker img { display: block; width: auto; height: auto; max-width: 112px; max-height: 112px; object-fit: contain; filter: drop-shadow(0 2px 2px color-mix(in oklch, var(--ink) 12%, transparent)); -webkit-user-drag: none; user-select: none; }
.custom-sticker-panel { display: flex; flex-direction: column; overflow: hidden; padding: 8px 4px 0; }
.custom-sticker-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.sticker-upload-button { min-height: 44px; flex: 0 0 auto; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; cursor: pointer; }
.sticker-upload-button:hover { border-color: color-mix(in oklch, var(--primary) 50%, var(--line)); color: var(--primary-hover); }
.sticker-search-form { min-width: 0; flex: 1; display: flex; align-items: center; gap: 4px; }
.sticker-search-form input { min-width: 0; height: 44px; flex: 1; padding: 0 8px; border-radius: 8px; font-size: 16px; }
.sticker-search-form input::placeholder { color: var(--muted); opacity: 1; }
.sticker-search-form button { min-width: 48px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--surface-strong); color: var(--ink); font-size: 12px; font-weight: 600; }
.sticker-search-types { flex: 0 0 72px; width: 72px; min-height: 44px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; cursor: pointer; }
.sticker-search-more { display: block; min-height: 44px; margin: 8px auto; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; cursor: pointer; }
.sticker-search-more:disabled { opacity: .6; cursor: wait; }
.sticker-results-viewport { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 8px; scrollbar-gutter: stable; }
.sticker-panel-status { margin: 0 4px 4px; color: var(--muted); font-size: 11px; line-height: 20px; }
.sticker-grid { min-height: 0; padding: 0 2px 4px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-content: start; gap: 8px; }
.sticker-grid button { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; aspect-ratio: 1; overflow: hidden; }
.sticker-grid button:hover { background: var(--surface); }
.sticker-grid button:disabled { opacity: .45; }
.sticker-delete-mark { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b42318; color: white; font-size: 20px; line-height: 1; }
.sticker-grid.is-managing button { background: #fff4f2; }
.sticker-grid img { position: absolute; inset: 4px; display: block; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; -webkit-user-drag: none; user-select: none; }
.sticker-grid .is-animated::after { content: "GIF"; position: absolute; right: 2px; bottom: 2px; padding: 1px 3px; border-radius: 4px; background: color-mix(in oklch, var(--ink) 70%, transparent); color: white; font-size: 7px; font-weight: 750; }
.media-picker { width: 100%; min-height: 208px; padding: 12px 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; }
.media-option { min-width: 0; min-height: 102px; padding: 8px 4px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; }
.media-option:hover { background: var(--surface); }
.media-option > span { width: 52px; height: 52px; border-radius: 12px; background: var(--surface-strong); display: grid; place-items: center; }
.media-option svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-option strong { font-size: 13px; }
.media-option small { max-width: 100%; color: var(--muted); font-size: 10px; line-height: 1.3; }
.message-menu { position: fixed; z-index: var(--z-popover); width: max-content; max-width: calc(100vw - 20px); padding: 5px; border-radius: 10px; background: oklch(0.24 0.012 45); color: white; display: grid; grid-template-columns: repeat(3, minmax(58px, 1fr)); box-shadow: 0 4px 8px color-mix(in oklch, black 24%, transparent); animation: menu-in 150ms var(--ease-out); }
.message-menu button { min-width: 58px; min-height: 54px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; }
.message-menu { overflow-y:auto; overscroll-behavior:contain; animation:none; }
.message-menu button:hover, .message-menu button:focus-visible { background: color-mix(in oklch, white 13%, transparent); }
.message-menu button span { height: 20px; font-size: 18px; line-height: 20px; }
.message-menu button i { font-style: normal; }
.message-reaction-quick { grid-column: 1 / -1; min-height: 45px; margin: -1px -1px 4px; padding: 3px; border-bottom: 1px solid color-mix(in oklch, white 13%, transparent); display: flex; align-items: center; gap: 1px; }
.message-menu .message-reaction-quick button { width: 40px; min-width: 40px; min-height: 38px; padding: 0; border-radius: 7px; font-size: 18px; font-weight: 700; }
.message-menu .message-reaction-quick .lark-emoji { width: 31px; height: 31px; }
.message-menu .message-reaction-quick .reaction-expand { color: color-mix(in oklch, white 72%, transparent); font-size: 22px; font-style: normal; font-weight: 400; }
.message-reaction-picker { grid-column: 1 / -1; width: min(292px, calc(100vw - 30px)); max-height: min(228px, 44vh); margin: 0 0 4px; padding: 4px 2px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.message-reaction-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.message-menu .message-reaction-grid button { width: auto; min-width: 0; min-height: 38px; padding: 0; border-radius: 7px; font-size: 19px; }
.message-menu .message-reaction-grid .lark-emoji { width: 34px; height: 34px; }
.low-key-message-menu{position:fixed;z-index:var(--z-popover);width:92px;padding:5px;border-radius:9px;background:oklch(.24 .012 45);color:white;box-shadow:0 4px 8px color-mix(in oklch,black 24%,transparent);animation:menu-in 150ms var(--ease-out)}.low-key-message-menu button{width:100%;min-height:48px;padding:6px;border:0;border-radius:6px;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px}.low-key-message-menu button:hover,.low-key-message-menu button:focus-visible{background:color-mix(in oklch,white 13%,transparent)}.low-key-message-menu button span{font-size:18px}
.drop-overlay { position: absolute; inset: 78px 18px 82px; z-index: 10; border: 2px dashed color-mix(in oklch, var(--primary) 72%, var(--ink)); border-radius: 12px; background: color-mix(in oklch, var(--bg) 94%, var(--primary-soft)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; pointer-events: none; animation: drop-in 160ms var(--ease-out); }
.drop-overlay > span { width: 48px; height: 48px; border-radius: 12px; background: var(--primary); color: white; display: grid; place-items: center; }
.drop-overlay svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drop-overlay strong { font-size: 16px; }
.drop-overlay small { color: var(--muted); font-size: 12px; }
.recording-bar { min-height: 46px; width: 100%; display: flex; align-items: center; gap: 9px; }
.recording-indicator { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--danger); animation: recording-pulse 1.2s ease-in-out infinite; }
.recording-bar strong { font-size: 13px; }
.recording-bar time { color: var(--muted); font-variant-numeric: tabular-nums; }
.recording-spacer { flex: 1; }
.recording-send { min-height: 38px; }
.image-preview-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,8,8,var(--preview-backdrop-opacity,1)); color: white; overflow: hidden; }
.image-preview-dialog::backdrop { background: rgba(8,8,8,var(--preview-backdrop-opacity,1)); }
.preview-toolbar { position: absolute; inset: max(8px, env(safe-area-inset-top)) 10px auto; z-index: 5; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.preview-toolbar > span { flex: 1; color: color-mix(in oklch, white 74%, transparent); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.preview-icon-action { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in oklch, white 11%, transparent); color: white; display: grid; place-items: center; font-size: 28px; font-weight: 300; line-height: 1; backdrop-filter: blur(14px); }
.preview-stage { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; padding: 64px 0 calc(78px + env(safe-area-inset-bottom)); overscroll-behavior: none; touch-action: none; background: transparent; }
.preview-media-shell { width: 100%; height: 100%; display: grid; place-items: center; transform: translate3d(var(--preview-x,0),var(--preview-y,0),0) scale(var(--preview-scale,1)); opacity: var(--preview-media-opacity,1); transition: transform 230ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease; will-change: transform,opacity; }
.preview-media-shell.is-dragging { transition: none; }
.preview-media-shell.is-dragging img { cursor: grabbing; }
.preview-media-shell img,.preview-media-shell video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.preview-stage.is-video,.preview-stage.is-video video { touch-action:auto; }
.preview-stage.is-video .preview-media-shell { min-width:0; min-height:0; transform:none; transition:none; will-change:auto; }
.preview-stage.is-video video { object-fit:contain; cursor:auto; }
.preview-stage.is-tall { place-items: start center; }
.preview-stage.is-tall .preview-media-shell { height:var(--preview-viewport-height,100%);align-items: start; }
.preview-stage.is-tall .preview-media-shell img { width:100%;height:var(--preview-media-height,auto);max-height:none;object-fit:fill;cursor:grab; }
.preview-live-indicator { position: absolute; left: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 3; min-height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(20,20,20,.58); color: white; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(15px); pointer-events: none; }
.preview-bottom-actions { position: absolute; inset: auto 0 0; z-index: 5; min-height: calc(68px + env(safe-area-inset-bottom)); padding: 8px 18px max(10px,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(transparent,rgba(0,0,0,.72)); }
.preview-bottom-action { min-width: 72px; min-height: 46px; padding: 4px 10px; border: 0; background: transparent; color: white; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; text-decoration: none; }
.preview-bottom-action > span { font-size: 22px; line-height: 1; }
.preview-original-action { min-width: 96px; font-size: .875rem; white-space: nowrap; }
.preview-original-action:disabled { opacity: .75; cursor: default; }
.preview-original-action:focus-visible,.preview-load-feedback button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.preview-load-feedback { position: absolute; inset: auto 12px calc(82px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.preview-load-feedback span,.preview-load-feedback button { padding: 8px 12px; border: 0; border-radius: 6px; background: oklch(.2 0 0 / .9); color: white; font-size: .8125rem; line-height: 1.4; }
.preview-load-feedback button { min-height: 44px; pointer-events: auto; cursor: pointer; }
.image-preview-dialog.is-gallery .preview-load-feedback { visibility: hidden; }
@media (max-width: 480px) {
  .preview-bottom-actions { gap: 4px; padding-inline: 8px; }
  .preview-bottom-action { min-width: 60px; padding-inline: 6px; }
  .preview-original-action { min-width: 96px; }
}
.live-photo-action { margin-right: auto; }
.preview-gallery-grid { position: absolute; inset: calc(60px + env(safe-area-inset-top)) 0 0; z-index: 4; overflow-y: auto; overscroll-behavior:contain; padding: 6px 3px calc(20px + env(safe-area-inset-bottom)); background: #111; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows:max-content; align-items:start; align-content: start; gap: 3px; }
.preview-gallery-grid[hidden] { display: none; }
.preview-gallery-date { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:12px 10px 8px; color:#f5f5f5; }
.preview-gallery-date > span:last-child { font-size:12px; font-weight:400; color:#aaa; }
.preview-gallery-month { padding-top:22px; font-size:19px; border-top:1px solid #303030; }
.preview-gallery-day { font-size:14px; font-weight:500; color:#d5d5d5; }
.preview-gallery-item { position: relative; width:100%; min-width:0; aspect-ratio: 1 / 1; padding: 0; border: 0; background: #202020; overflow: hidden; cursor:pointer; }
.preview-gallery-item img { position:absolute; inset:0; display:block; width: 100%; height: 100%; object-fit: cover; }
.preview-gallery-item:not(.is-loaded) img { opacity:0; }
.preview-gallery-more { grid-column:1/-1; min-height:44px; border:0; background:transparent; color:#fff; cursor:pointer; }
.preview-gallery-item .live-badge { left: 5px; bottom: 5px; transform: scale(.86); transform-origin: left bottom; }
.preview-video-badge { position:absolute; right:5px; bottom:5px; z-index:1; padding:3px 5px; border-radius:4px; background:rgba(0,0,0,.66); color:#fff; font-size:11px; font-weight:600; line-height:1.2; pointer-events:none; }
.image-preview-dialog.is-gallery .preview-stage,.image-preview-dialog.is-gallery .preview-bottom-actions { visibility: hidden; }
.preview-stage img { -webkit-touch-callout:none; }
.preview-image-menu { position:absolute; inset:0; z-index:10; background:rgba(0,0,0,.35); display:flex; align-items:flex-end; justify-content:center; padding:16px 16px max(16px,env(safe-area-inset-bottom)); }
.preview-image-menu[hidden] { display:none; }
.preview-image-menu-sheet { width:min(100%,360px); padding:6px; border-radius:16px; background:#f7f8fa; box-shadow:0 8px 32px #0005; }
.preview-image-menu-sheet button { display:block; width:100%; min-height:48px; border:0; border-radius:10px; background:transparent; color:#20242b; font-size:15px; }
.preview-image-menu-sheet button + button { border-top:1px solid #e2e4e8; color:#6b7280; }
@keyframes recording-pulse { 50% { opacity: .35; } }
@keyframes message-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes drop-in { from { opacity: 0; transform: scale(.985); } }
.mobile-only { display: none; }

.request-card { padding: 13px 10px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
.request-card > div { min-width: 0; }
.request-card strong, .request-card p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-card p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.request-actions { grid-column: 2; display: flex; gap: 7px; margin-top: 2px; }
.request-actions button { min-height: 34px; border-radius: 8px; padding: 0 12px; border: 1px solid var(--line); background: var(--bg); }
.request-actions button:first-child { border: 0; background: var(--primary); color: white; }

.dialog { width: min(480px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--bg); color: var(--ink); }
.dialog::backdrop { background: color-mix(in oklch, var(--ink) 35%, transparent); }
.dialog-head { padding: 18px 18px 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-head h2 { margin: 0 0 5px; font-size: 19px; }
.dialog-head p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-dialog { width: min(520px, calc(100% - 32px)); }
.settings-body { padding: 8px 18px 18px; display: grid; gap: 20px; }
.avatar-editor { display: flex; align-items: center; gap: 16px; }
.avatar-editor > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avatar-editor p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.avatar-preview { width: 68px; height: 68px; font-size: 20px; }
.secondary-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; padding: 0 13px; background: var(--bg); color: var(--ink); font-weight: 600; cursor: pointer; }
.secondary-button:hover { background: var(--surface); }
.danger-button { min-height: 38px; border: 0; border-radius: 9px; padding: 0 14px; background: var(--danger); color: white; font-weight: 700; }
.danger-button:hover { filter: brightness(.94); }
.danger-button:disabled { opacity: .42; cursor: not-allowed; }
.field-label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.notification-settings { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.notification-heading { display: flex; align-items: center; gap: 16px; }
.notification-heading > div { min-width: 0; flex: 1; }
.notification-heading strong { font-size: 14px; }
.notification-heading p, .notification-status { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.notification-status { margin: -4px 0 0; }
.notification-status.is-active { color: var(--success); }
.notification-actions { display: flex; align-items: center; gap: 8px; }
.device-settings { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.device-heading { display: flex; align-items: center; gap: 12px; }
.device-heading > div { min-width: 0; flex: 1; }
.device-heading strong { font-size: 14px; }
.device-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.device-list { display: grid; gap: 7px; }
.device-row { min-width: 0; min-height: 46px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.device-row > div { min-width: 0; }
.device-row strong,.device-row time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-row strong { font-size: 13px; }
.device-row time { margin-top: 3px; color: var(--muted); font-size: 11px; }
.device-current { color: var(--success); font-size: 12px; font-weight: 700; }
.switch-control { width: 44px; height: 26px; flex: 0 0 auto; position: relative; }
.switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-control span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-strong); transition: background-color 160ms var(--ease-out); cursor: pointer; }
.switch-control span::after { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 20%, transparent); transition: transform 180ms var(--ease-out); }
.switch-control input:checked + span { background: var(--success); }
.switch-control input:checked + span::after { transform: translateX(18px); }
.switch-control input:focus-visible + span { outline: 3px solid color-mix(in oklch, var(--focus) 58%, transparent); outline-offset: 2px; }
.privacy-note { margin: 0 18px 16px; padding: 11px 12px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: flex-start; gap: 9px; color: var(--primary-hover); }
.privacy-note p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.55; }
.dialog-error { margin: -5px 18px 12px; color: var(--danger); font-size: 13px; }
.dialog-actions { min-height: 66px; padding: 11px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.dialog-actions .primary-button { min-height: 38px; }
.dialog-actions.split { display: grid; grid-template-columns: auto 1fr auto auto; }
.danger-note { margin: 0 18px 8px; padding: 11px 12px; border-radius: 10px; background: color-mix(in oklch, var(--danger) 8%, var(--bg)); color: var(--danger); font-size: 12px; line-height: 1.55; }
.search-form { padding: 8px 18px 14px; display: flex; gap: 8px; }
.search-form input { flex: 1; min-width: 0; }
.search-results { min-height: 170px; max-height: 360px; overflow-y: auto; border-top: 1px solid var(--line); padding: 8px; }
.search-hint { color: var(--muted); text-align: center; margin: 55px 0; }
.search-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.search-row:hover { background: var(--surface); }
.search-row > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.search-row span { color: var(--muted); font-size: 12px; }
.search-row button { border: 0; border-radius: 8px; min-height: 34px; padding: 0 11px; background: var(--primary); color: white; }
.search-row button[disabled] { background: var(--surface-strong); color: var(--muted); }
.message-search-dialog { width: min(560px,calc(100% - 32px)); height: min(680px,calc(100dvh - 48px)); }
.message-search-dialog[open] { display: flex; flex-direction: column; max-height: calc(var(--app-height,100dvh) - 24px); }
.message-search-dialog > .dialog-head,.message-search-form,.chat-date-toolbar,.message-search-summary { flex-shrink: 0; }
.message-search-form { margin: 0 18px 10px; min-height: 46px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; align-items: center; gap: 8px; }
.message-search-form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklch,var(--focus) 12%,transparent); }
.message-search-form > span { width: 22px; height: 22px; color: var(--muted); display: grid; place-items: center; }
.message-search-form svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.message-search-form input { min-height: 42px; min-width: 0; flex: 1; padding: 0; border: 0; border-radius: 0; background: transparent; }
.message-search-form input:focus { border: 0; box-shadow: none; }
.message-search-form > button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; }
.message-search-form > button:hover { background: var(--surface-strong); color: var(--ink); }
.message-search-summary { min-height: 34px; padding: 4px 18px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.chat-search-results-viewport { flex: 1 1 auto; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.message-search-results { min-height: 0; padding: 5px 8px 12px; }
.chat-date-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 8px; gap: 8px; }
.chat-date-toolbar button,.chat-calendar-navigation button,.chat-calendar-footer button { min-height: 40px; padding: 4px 10px; border: 0; border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .8125rem; }
#chatCalendarToggle { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#chatCalendarToggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#chatCalendarToggle[aria-expanded="true"] { background: var(--primary-soft); }
.chat-calendar { flex: 0 1 auto; min-height: 0; max-height: calc(100% - 250px); overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 12px; }
.chat-calendar-navigation { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.chat-calendar-navigation label { flex: 1; min-width: 0; }
.chat-calendar-navigation input { width: 100%; min-width: 0; min-height: 40px; padding: 4px 8px; font-size: 1rem; border: 0; background: var(--surface); }
.chat-calendar-navigation button { min-width: 40px; }
.chat-calendar-weekdays,.chat-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.chat-calendar-weekdays { text-align: center; font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.chat-calendar-day { min-width: 0; min-height: 48px; padding: 4px 0; border: 1px solid transparent; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; }
.chat-calendar-day strong { font-size: .875rem; }.chat-calendar-day small { font-size: .625rem; }
.heat-0 { background: oklch(.96 0 0); color: oklch(.43 0 0); }
.heat-1 { background: oklch(.8712 .10 56.6); color: oklch(.22 .035 56.6); }
.heat-2 { background: oklch(.779808 .10 56.6); color: oklch(.22 .035 56.6); }
.heat-3 { background: oklch(.70303872 .10 56.6); color: oklch(.22 .035 56.6); }
.heat-4 { background: oklch(.6385525248 .10 56.6); color: white; }
.chat-calendar-day[aria-current="date"] strong { text-decoration: underline; text-underline-offset: 3px; }
.chat-calendar-day[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
.chat-calendar button:focus-visible,.chat-date-toolbar button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chat-calendar button:hover,.chat-date-toolbar button:hover { filter: brightness(.96); }
.chat-calendar-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--muted); font-size: .6875rem; }
.chat-calendar-legend i { width: 12px; height: 12px; border-radius: 3px; }.chat-calendar-legend > span:last-child { margin-left: auto; }
.chat-calendar-footer { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .75rem; }
.chat-search-more { display: block; min-height: 44px; margin: 0 auto 16px; padding: 8px 16px; border: 0; border-radius: 8px; color: var(--ink); background: var(--surface); }
.message-search-result { width: 100%; min-height: 68px; padding: 10px; border: 0; border-radius: 10px; background: transparent; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 5px 12px; text-align: left; }
.message-search-result:hover { background: var(--surface); }
.message-search-result strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.message-search-result time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.message-search-result p { grid-column: 1 / -1; margin: 0; color: var(--ink); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.message-search-empty { margin: 72px 20px; color: var(--muted); text-align: center; line-height: 1.6; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast); display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 340px; padding: 11px 13px; border-radius: 10px; background: var(--ink); color: white; font-size: 13px; animation: toast-in 180ms cubic-bezier(.22,1,.36,1); }
.privacy-view { position: fixed; inset: 0; z-index: var(--z-popover); background: var(--bg); display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.privacy-logo-button { position:relative; width: 56px; height: 56px; margin-bottom: 8px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; }
.privacy-logo-button:hover { background: var(--surface); }
.privacy-logo-button:active { transform: scale(.96); }
.privacy-logo-button[aria-busy="true"] { opacity:1; }
.privacy-view h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.privacy-view p { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.app-shell.is-privacy-reset > .rail, .app-shell.is-privacy-reset > .conversation { visibility: hidden; pointer-events: none; }
.app-shell.is-low-key > .rail, .app-shell.is-low-key > .conversation { visibility: hidden; pointer-events: none; }
.low-key-workbench { position:absolute; inset:0; z-index:var(--z-workbench); display:grid; grid-template-rows:74px 47px minmax(0,1fr); overflow:hidden; background:oklch(.975 .006 75); color:oklch(.255 .018 55); touch-action:pan-y; }
.low-key-header { display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid oklch(.85 .012 70); background:oklch(.99 .003 70); }
.low-key-lockup { display:flex; align-items:center; gap:12px; }.low-key-lockup .brand-mark{width:40px;height:40px;border-radius:11px}.low-key-lockup strong{display:block;font-size:18px;letter-spacing:-.025em}.low-key-lockup span{display:block;margin-top:3px;color:oklch(.49 .02 55);font-size:12px}
.low-key-sync { min-height:36px; border:0; border-radius:999px; padding:0 14px; background:oklch(.92 .009 70); color:oklch(.41 .016 55); font-weight:700; letter-spacing:-.01em; }.low-key-sync:hover{background:oklch(.885 .012 70)}
.low-key-tabs { position:relative;z-index:2;isolation:isolate;display:flex;align-items:stretch;gap:3px;padding:0 30px;border-bottom:1px solid oklch(.85 .012 70);background:oklch(.99 .003 70);overflow-x:auto;scrollbar-width:none;pointer-events:auto }.low-key-tabs::-webkit-scrollbar{display:none}.low-key-tabs button{position:relative;z-index:1;flex:0 0 auto;min-height:46px;border:0;padding:0 13px;background:transparent;color:oklch(.48 .018 55);font-size:13px;cursor:pointer;pointer-events:auto;user-select:none;-webkit-user-select:none}.low-key-tabs button::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:transparent;pointer-events:none}.low-key-tabs button.is-active{color:oklch(.22 .02 55);font-weight:720}.low-key-tabs button.is-active::after{background:var(--primary)}
.low-key-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:24px 30px 28px; scrollbar-gutter:stable; }
.low-key-body.is-slide-next{animation:low-key-slide-next 190ms var(--ease-out)}.low-key-body.is-slide-previous{animation:low-key-slide-previous 190ms var(--ease-out)}
.low-key-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid oklch(.85 .012 70); border-radius:12px; overflow:hidden; background:oklch(1 0 0); }.low-key-metrics article{min-width:0;padding:16px 18px;box-shadow:inset -1px 0 0 oklch(.87 .01 70)}.low-key-metrics article:last-child{box-shadow:none}.low-key-metrics span,.low-key-metrics small{display:block;color:oklch(.51 .019 55);font-size:12px}.low-key-metrics strong{display:block;margin:5px 0 3px;font-size:28px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.low-key-metrics [data-daily-count="sentCount"] { color:#245bdb; }
.low-key-metrics [data-daily-count="receivedCount"] { color:#c22d3d; }
.low-key-overview-grid { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(280px,.88fr); gap:16px; margin-top:16px; }.low-key-trend,.low-key-rank,.low-key-ledger,.channel-board,.creative-grid,.creative-attribution,.funnel-board,.cohort-board,.low-key-insight{border:1px solid oklch(.85 .012 70);border-radius:12px;background:oklch(1 0 0)}
.low-key-panel-head{display:flex;align-items:center;justify-content:space-between;min-height:47px;padding:0 16px;border-bottom:1px solid oklch(.87 .01 70)}.low-key-panel-head strong{font-size:14px}.low-key-panel-head span{color:oklch(.47 .02 55);font-size:12px}.trend-chart-shell{padding:8px 10px 0}.low-key-trend svg{width:100%;height:230px;display:block;overflow:visible}.trend-grid{stroke:oklch(.91 .008 70);stroke-width:1}.trend-axis{stroke:oklch(.7 .014 65);stroke-width:1}.trend-tick{stroke:oklch(.76 .012 65);stroke-width:1}.trend-axis-label{fill:oklch(.48 .018 55);font-size:10px;font-variant-numeric:tabular-nums}.trend-axis-title{fill:oklch(.42 .02 55);font-size:10px;font-weight:700}.trend-area{fill:oklch(.95 .025 245);stroke:none}.trend-line{fill:none;stroke:oklch(.42 .12 245);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trend-point{fill:white;stroke:oklch(.42 .12 245);stroke-width:2}.trend-value{fill:oklch(.32 .045 245);font-size:10px;font-weight:750;font-variant-numeric:tabular-nums}.trend-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid oklch(.9 .008 70)}.trend-summary span{min-width:0;padding:10px 12px;color:oklch(.5 .018 55);font-size:10px}.trend-summary strong{display:block;margin-top:3px;color:oklch(.29 .025 55);font-size:13px;font-variant-numeric:tabular-nums}
.low-key-rank{padding-bottom:7px}.low-key-rank .low-key-panel-head{margin-bottom:7px}.low-key-rank-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:7px 15px}.low-key-rank-row span,.low-key-rank-row b{font-size:13px;font-weight:600}.low-key-rank-row b{font-variant-numeric:tabular-nums}.low-key-rank-row i{grid-column:1 / -1;display:block;height:8px;border-radius:999px;overflow:hidden;background:oklch(.93 .008 70)}.low-key-rank-row em{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.low-key-ledger{margin-top:16px;overflow:hidden}.low-key-ledger-head{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid oklch(.87 .01 70)}.low-key-return-chat{min-height:36px;padding:0;border:0;background:transparent;color:inherit;font-size:14px;font-weight:700;text-align:left}.low-key-return-chat:hover,.low-key-return-chat:focus-visible{color:oklch(.42 .12 245)}.low-key-ledger-actions{display:flex;align-items:center;gap:12px}.low-key-fill-button{min-height:30px;padding:0 10px;border:1px solid oklch(.82 .012 70);border-radius:7px;background:oklch(.98 .004 70);color:oklch(.42 .018 55);font-size:11px;font-weight:680}.low-key-fill-button:hover,.low-key-fill-button.is-active{border-color:oklch(.65 .05 210);background:oklch(.95 .018 210);color:oklch(.39 .09 230)}.low-key-live-lock{min-height:36px;padding:0 2px;border:0;background:transparent;display:flex;align-items:center;gap:6px;color:oklch(.5 .018 55);font-size:12px}.low-key-live-lock:hover{color:oklch(.32 .02 55)}.low-key-live-lock i{width:8px;height:8px;border-radius:50%;background:oklch(.56 .15 238)}.low-key-table-wrap{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.low-key-table-wrap table,.cohort-board table{width:100%;min-width:678px;border-collapse:collapse;table-layout:fixed}.low-key-table-wrap th,.low-key-table-wrap td{padding:12px 14px;border-bottom:1px solid oklch(.9 .008 70);color:oklch(.34 .017 55);font-size:12px;text-align:left;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.low-key-table-wrap th{background:oklch(.95 .006 70);color:oklch(.47 .017 55);font-weight:700}.low-key-table-wrap th:nth-child(1){width:86px}.low-key-table-wrap th:nth-child(2){width:98px}.low-key-table-wrap th:nth-child(3){width:102px}.low-key-table-wrap th:nth-child(5){width:128px}.low-key-table-wrap th:nth-child(6){width:68px}.low-key-table-wrap tbody tr:last-child td{border-bottom:0}.low-key-row.is-fresh{animation:low-key-row-in 240ms var(--ease-out)}.low-key-state{display:inline-flex;align-items:center;min-height:22px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700}.low-key-state.is-pending{color:oklch(.46 .1 65);background:oklch(.96 .04 75)}.low-key-state.is-verified{color:oklch(.42 .12 245);background:oklch(.94 .035 245)}.low-key-state.is-external{color:oklch(.45 .16 25);background:oklch(.94 .04 25)}.low-key-state.is-system{color:oklch(.36 .09 145);background:oklch(.94 .04 145)}
.low-key-source{font-weight:750}.low-key-row.is-local,.low-key-row.is-external{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.low-key-row.is-local .low-key-source{color:oklch(.48 .14 55)}.low-key-row.is-local td:nth-child(4){color:oklch(.31 .035 55)}.low-key-row.is-external .low-key-source{color:oklch(.45 .12 245)}.low-key-row.is-external td:nth-child(4){color:oklch(.31 .04 245)}
.low-key-composer{position:sticky;bottom:0;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:10px 0 max(8px,env(safe-area-inset-bottom));background:oklch(.975 .006 75)}.low-key-composer input{min-width:0;flex:1;border-color:oklch(.83 .012 70);background:oklch(1 0 0)}.low-key-composer>.low-key-submit{min-width:80px;border:0;border-radius:10px;background:oklch(.25 .02 55);color:white;font-weight:700}.low-key-composer button:disabled{opacity:.55;cursor:wait}
.low-key-note{display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:7px}.low-key-attachment,.low-key-response-button,.low-key-link-button,.low-key-linked-record{border:0;background:transparent;color:oklch(.43 .12 245);font:inherit;font-weight:680;padding:2px 0}.low-key-attachment:hover,.low-key-response-button:hover,.low-key-link-button:hover,.low-key-linked-record:hover{text-decoration:underline}.low-key-status-cell{display:inline-flex;align-items:center;gap:7px}.low-key-response-button,.low-key-link-button{color:oklch(.48 .08 55);font-size:11px}.low-key-link-button{color:oklch(.43 .1 245)}.low-key-linked-record{flex:0 0 auto;color:oklch(.47 .07 245);font-size:10px}.low-key-row.is-linked-target td{background:oklch(.94 .035 245);animation:search-target-pulse 1.2s var(--ease-out)}.low-key-reaction-summary{display:inline-flex;align-items:center;gap:3px}.low-key-reaction-summary button,.low-key-response-panel div button{position:relative;width:27px;height:27px;padding:2px;border:0;border-radius:7px;background:oklch(.95 .008 70);display:inline-grid;place-items:center}.low-key-reaction-summary button:hover,.low-key-response-panel div button:hover{background:oklch(.91 .012 70)}.low-key-reaction-summary .lark-emoji,.low-key-response-panel .lark-emoji{width:21px;height:21px}.low-key-reaction-summary b{position:absolute;right:-2px;bottom:-3px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:oklch(.32 .02 55);color:white;font-size:8px;line-height:14px}.low-key-response-panel{position:sticky;bottom:64px;z-index:2;display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 11px;border:1px solid oklch(.83 .012 70);border-radius:10px;background:oklch(.99 .003 70)}.low-key-response-panel>span{color:oklch(.47 .018 55);font-size:11px;font-weight:700}.low-key-response-panel>div{display:flex;gap:5px}.low-key-response-close{margin-left:auto;border:0;background:transparent;color:oklch(.43 .08 55);font-size:11px}.low-key-attach{min-width:58px;min-height:44px;padding:0 10px;border:1px solid oklch(.83 .012 70);border-radius:10px;background:oklch(1 0 0);display:inline-flex;align-items:center;justify-content:center;color:oklch(.41 .02 55);font-size:12px;font-weight:680;cursor:pointer}.low-key-attach:hover{border-color:oklch(.69 .04 70);background:oklch(.97 .008 70)}
.low-key-link-draft{flex:1 0 100%;min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr) 28px;align-items:center;gap:7px;padding:7px 8px;border:1px solid oklch(.84 .016 245);border-radius:9px;background:oklch(.965 .018 245)}.low-key-link-draft span{color:oklch(.43 .1 245);font-size:10px;font-weight:750}.low-key-link-draft strong{font-size:11px;white-space:nowrap}.low-key-link-draft p{min-width:0;margin:0;color:oklch(.39 .025 245);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.low-key-link-draft>.low-key-link-clear{min-width:28px;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:oklch(.42 .03 245);font-size:18px;line-height:1}.low-key-link-draft>.low-key-link-clear:hover{background:oklch(.91 .025 245)}
.low-key-composer.is-dragging{outline:2px solid oklch(.56 .12 245);outline-offset:-4px;background:oklch(.95 .018 245)}
.low-key-response-expand{border:0;background:transparent;color:oklch(.43 .1 245);font-size:11px;font-weight:700}.low-key-response-expand:hover{text-decoration:underline}.low-key-response-panel.is-expanded{flex-wrap:wrap}.low-key-response-panel>.low-key-response-all{flex:1 0 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(31px,1fr));gap:5px;max-height:210px;margin-top:2px;padding-top:9px;border-top:1px solid oklch(.87 .01 70);overflow-y:auto;overscroll-behavior:contain}.low-key-response-panel>.low-key-response-all button{width:31px;height:31px;justify-self:center}.low-key-response-panel>.low-key-response-all .lark-emoji{width:24px;height:24px}
.low-key-page-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.low-key-page-title span{color:oklch(.5 .018 55);font-size:12px}.low-key-page-title h2{margin:4px 0 0;font-size:22px;letter-spacing:-.03em}.low-key-page-title time{color:oklch(.5 .018 55);font-size:12px;white-space:nowrap}
.channel-board{padding:20px}.channel-scale{display:flex;justify-content:space-between;margin-left:138px;margin-bottom:10px;color:oklch(.55 .015 55);font-size:11px}.channel-board article{display:grid;grid-template-columns:120px minmax(80px,1fr) 58px 102px;align-items:center;gap:18px;min-height:60px;border-top:1px solid oklch(.9 .008 70)}.channel-board article:first-of-type{border-top:0}.channel-board article div{display:flex;flex-direction:column;gap:4px}.channel-board article strong{font-size:14px}.channel-board article div span,.channel-board article small{color:oklch(.5 .018 55);font-size:11px}.channel-board article>i{display:block;height:10px;overflow:hidden;border-radius:999px;background:oklch(.93 .008 70)}.channel-board article>i em{display:block;height:100%;border-radius:inherit;background:oklch(.47 .13 244)}.channel-board article b{font-size:13px;font-variant-numeric:tabular-nums}
.channel-board .channel-share-31{width:31%}.channel-board .channel-share-28{width:28%}.channel-board .channel-share-23{width:23%}.channel-board .channel-share-18{width:18%}
.low-key-insight{margin-top:16px;padding:17px 18px}.low-key-insight strong{font-size:13px}.low-key-insight p{margin:7px 0 0;color:oklch(.44 .018 55);font-size:13px;line-height:1.6}
.creative-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}.creative-tile{min-height:154px;padding:16px;box-shadow:inset -1px -1px 0 oklch(.87 .01 70);display:flex;flex-direction:column;justify-content:space-between}.creative-tile:nth-child(3n){box-shadow:inset 0 -1px 0 oklch(.87 .01 70)}.creative-tile:nth-last-child(-n+3){box-shadow:inset -1px 0 0 oklch(.87 .01 70)}.creative-tile:nth-child(3n):nth-last-child(-n+3){box-shadow:none}.creative-tile>span{width:max-content;padding:4px 6px;border-radius:6px;background:color-mix(in oklch,var(--primary-soft) 70%,white);color:oklch(.48 .09 55);font-size:11px;font-weight:700}.creative-tile div{display:grid;gap:4px}.creative-tile strong{font-size:15px}.creative-tile small{color:oklch(.5 .018 55)}.creative-tile b{font-size:28px;letter-spacing:-.035em;text-align:right}.creative-tile.tone-1 b{color:oklch(.52 .12 238)}.creative-tile.tone-2 b{color:oklch(.47 .1 145)}.creative-tile.tone-3 b{color:oklch(.52 .1 65)}
.creative-attribution{display:grid;gap:14px;margin-top:16px;padding:20px}.creative-attribution>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.creative-attribution strong{margin-right:8px}.creative-attribution span{min-width:50px;padding:7px 9px;border-radius:7px;background:oklch(.95 .008 70);font-size:12px;text-align:center}.creative-attribution i{width:24px;height:1px;background:oklch(.72 .016 70)}.creative-attribution p{margin:0;color:oklch(.44 .018 55);font-size:13px}
.funnel-board{display:grid;gap:10px;padding:24px}.funnel-board article{min-width:280px;min-height:56px;display:flex;align-items:center;gap:13px;padding:0 14px;background:oklch(.95 .006 70)}.funnel-board .funnel-width-100{width:100%}.funnel-board .funnel-width-85{width:85%}.funnel-board .funnel-width-70{width:70%}.funnel-board .funnel-width-55{width:55%}.funnel-board .funnel-width-40{width:40%}.funnel-board article:nth-child(2){background:oklch(.93 .014 75)}.funnel-board article:nth-child(3){background:oklch(.9 .034 78)}.funnel-board article:nth-child(4){background:oklch(.88 .06 75)}.funnel-board article:nth-child(5){background:oklch(.84 .105 70)}.funnel-board article>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:oklch(1 0 0 / .72);font-size:11px;font-weight:800}.funnel-board article div{display:grid;gap:3px}.funnel-board article strong{font-size:14px}.funnel-board article small{font-size:12px;color:oklch(.41 .017 55)}.funnel-board article i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:oklch(.48 .12 145)}
.cohort-board{overflow-x:auto}.cohort-board table{min-width:540px}.cohort-board th,.cohort-board td{height:56px;padding:0 16px;box-shadow:inset -1px -1px 0 oklch(.88 .01 70);text-align:center;font-size:13px}.cohort-board th{background:oklch(.95 .006 70);text-align:left}.cohort-board thead th{color:oklch(.49 .018 55);font-size:12px;text-align:center}.cohort-board thead th:first-child{text-align:left}.cohort-board tbody tr:last-child>*{box-shadow:inset -1px 0 0 oklch(.88 .01 70)}.cohort-board tbody tr:last-child>*:last-child{box-shadow:none}.cohort-board tr>*:last-child{box-shadow:inset 0 -1px 0 oklch(.88 .01 70)}.cohort-0{background:oklch(.95 .02 145)}.cohort-1{background:oklch(.91 .05 145)}.cohort-2{background:oklch(.87 .08 145)}.cohort-3{background:oklch(.83 .11 145)}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes search-target-pulse { 0% { transform: scale(.985); } 45% { transform: scale(1.01); } }
@keyframes low-key-slide-next { from { opacity:.45; transform:translateX(24px); } }
@keyframes low-key-slide-previous { from { opacity:.45; transform:translateX(-24px); } }
@keyframes low-key-row-in { from { opacity:.2; transform:translateY(7px); } }

@media (max-width: 760px) {
  .auth-panel { padding: 34px 0; }
  input, textarea { font-size: 16px; line-height: 1.25; }
  .auth-mark { margin-bottom: 30px; }
  .app-shell { display: block; position: fixed; overflow: hidden; height: var(--app-height, 100dvh); }
  .rail, .conversation { position: absolute; inset: 0; width: 100%; transition: transform 200ms cubic-bezier(.22,1,.36,1); }
  .rail { border-right: 0; transform: translateX(0); }
  .conversation { transform: translateX(100%); background: var(--bg); }
  .app-shell.is-chat-open .rail { transform: translateX(-22%); }
  .app-shell.is-chat-open .conversation { transform: translateX(0); }
  .conversation-active { grid-template-rows: calc(58px + env(safe-area-inset-top)) minmax(0, 1fr) auto; }
  .conversation-header { min-height: 58px; padding: env(safe-area-inset-top) 8px 0; gap: 8px; }
  .conversation-header .avatar { width: 34px; height: 34px; }
  .conversation-actions { gap: 0; }
  .conversation-actions .quiet-button { min-height: 40px; padding-inline: 5px; font-size: 12px; }
  #deleteConversationButton { display: none; }
  .mobile-only { display: inline-grid; }
  .message-viewport { padding: 18px 12px 14px; scroll-padding-bottom: 12px; }
  .return-to-latest { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); }
  .message { max-width: 88%; gap: 9px; }
  .message .avatar { width: 36px; height: 36px; }
  .bubble { max-width: min(70vw, 32ch); padding: 9px 11px; }
  .message-media-button { max-width: min(54vw, 220px); }
  .message-video { max-height: 54vh; }
  .voice-message { width: clamp(168px, 58vw, 250px); }
  .composer { width: 100%; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); }
  .composer-main { gap: 2px; }
  .composer-accessory.is-open .composer-accessory-inner { margin-top: 7px; padding-top: 7px; }
  .emoji-picker { height: 276px; }
  .emoji-grid { grid-template-columns: repeat(8, 1fr); }
  .sticker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .custom-sticker-tools { padding-inline: 0; }
  .sticker-upload-button { padding-inline: 8px; }
  .sticker-search-form button { padding-inline: 9px; }
  .message-sticker { width: min(96px, 27vw); }
  .message-sticker img { max-width: 96px; max-height: 96px; }
  .media-picker { min-height: 217px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 14px; }
  .file-message { width: min(72vw, 300px); }
  .drop-overlay { display: none; }
  .media-option small { display: none; }
  .selection-bar { width: calc(100% - 20px); grid-template-columns: auto 1fr auto auto; }
  .composer .icon-button { width: 40px; height: 44px; }
  .composer textarea { padding-inline: 11px; font-size: 16px; line-height: 20px; }
  .send-button { width: 42px; }
  .recording-bar { min-height: 44px; }
  .recording-bar .quiet-button { min-height: 40px; }
  .low-key-workbench { grid-template-rows:calc(58px + env(safe-area-inset-top)) 44px minmax(0,1fr); }
  .low-key-header { min-height:58px; padding:env(safe-area-inset-top) 14px 0; }
  .low-key-lockup { gap:9px; }.low-key-lockup .brand-mark{width:34px;height:34px;border-radius:10px}.low-key-lockup strong{font-size:16px}.low-key-lockup span{font-size:11px}.low-key-sync{min-height:32px;padding-inline:11px;font-size:12px}
  .low-key-tabs{padding:0 9px 0 42px;gap:0}.low-key-tabs button{min-height:43px;padding-inline:10px;font-size:12px}.low-key-tabs button::after{left:10px;right:10px}.low-key-body{padding:14px 12px 20px}
  .low-key-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.low-key-metrics article{padding:13px;box-shadow:inset -1px -1px 0 oklch(.87 .01 70)}.low-key-metrics article:nth-child(2n){box-shadow:inset 0 -1px 0 oklch(.87 .01 70)}.low-key-metrics article:nth-last-child(-n+2){box-shadow:inset -1px 0 0 oklch(.87 .01 70)}.low-key-metrics article:nth-child(2n):nth-last-child(-n+2){box-shadow:none}.low-key-metrics strong{font-size:25px}
  .low-key-overview-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.trend-chart-shell{padding-inline:4px}.low-key-trend svg{height:210px}.trend-summary span{padding:9px 8px}.trend-summary strong{font-size:12px}.low-key-ledger{margin-top:12px}.low-key-ledger-head{min-height:44px}.low-key-composer{margin-top:12px}.low-key-composer input,.low-key-composer button{min-height:42px}
  .low-key-page-title{margin-bottom:14px}.low-key-page-title h2{font-size:19px}.low-key-page-title time{font-size:11px}.channel-board{padding:10px 12px}.channel-scale{margin-left:0}.channel-board article{grid-template-columns:76px minmax(60px,1fr) 42px;gap:9px}.channel-board article small{display:none}
  .creative-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creative-tile{min-height:128px}.creative-tile:nth-child(3n){box-shadow:inset -1px -1px 0 oklch(.87 .01 70)}.creative-tile:nth-child(2n){box-shadow:inset 0 -1px 0 oklch(.87 .01 70)}.creative-tile:nth-last-child(-n+3){box-shadow:inset -1px -1px 0 oklch(.87 .01 70)}.creative-tile:nth-last-child(-n+2){box-shadow:inset -1px 0 0 oklch(.87 .01 70)}.creative-tile:nth-child(2n):nth-last-child(-n+2){box-shadow:none}.creative-tile b{font-size:24px}.creative-attribution{padding:15px}.creative-attribution>div{gap:7px}.creative-attribution i{width:12px}.funnel-board{padding:14px}.funnel-board article{min-width:220px;min-height:50px}
  .image-preview-dialog { height: var(--app-height, 100dvh); }
  .toast-region { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  .settings-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .message-search-dialog { width: 100%; height: var(--app-height,100dvh); max-height: none; border: 0; border-radius: 0; }
  .message-search-dialog .dialog-head { padding-top: max(14px,env(safe-area-inset-top)); }
  .dialog-actions.split { grid-template-columns: 1fr 1fr; }
  .dialog-actions.split > span { display: none; }
  .dialog-actions.split .text-button { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}