/* Normal chat only. The lock dashboard and low-sensitivity workbench keep their own palette. */
.conversation,.rail,.chat-library-dialog {
  --bg:#fff; --surface:#f5f6f8; --surface-strong:#e9edf3; --line:#dfe1e6;
  --ink:#1f2329; --muted:#646a73; --primary:#3370ff; --primary-hover:#245bdb;
  --primary-soft:#e1eaff; --focus:#3370ff; --success:#008f83;
  --chat-bg:#fff; --bubble-in:#f2f3f5; --bubble-out:#d3e3ff;
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.app-shell:not(.is-low-key) { background:#fff; }
.rail { background:#f7f8fa; border-color:#dfe1e6; }
.rail .rail-header { border-color:#e8eaed; }
.rail .brand-mark { background:#e1eaff; }
.rail .brand-mark i { background:#3370ff; }
.rail .rail-tabs button.is-active { color:#245bdb; }
.rail .friend-row { border-radius:6px; }
.rail .unread-badge { background:#e64759; }
.conversation .conversation-active { grid-template-rows:auto minmax(0,1fr) auto; }
.conversation .conversation-header { z-index:5; display:block; padding:0 24px; background:#fafbfc; border-bottom:1px solid #dfe1e6; }
.chat-header-main { min-height:44px; display:flex; align-items:center; gap:12px; }
.chat-contact-copy { flex:1; min-width:0; }
.conversation-header .chat-contact-copy h1 { margin:0; font-size:1.125rem; line-height:1.25; font-weight:650; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.conversation-header .chat-contact-copy p { margin-top:0; font-size:.75rem; line-height:16px; }
.conversation .conversation-actions { display:flex; align-items:center; gap:8px; }
.conversation .conversation-actions .icon-button { width:40px; height:44px; color:#646a73; }
.conversation .icon-button:hover { background:#e9edf3; color:#245bdb; }
.chat-nav { display:flex; align-items:center; gap:12px; min-height:32px; padding:0 0 0 48px; }
.chat-nav-tabs { display:flex; align-items:center; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.chat-nav-tabs::-webkit-scrollbar { display:none; }
.chat-nav button { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:0 12px; border:0; border-radius:6px; background:transparent; color:#353b45; font-size:.9375rem; white-space:nowrap; }
.chat-nav button.is-active { color:#245bdb; background:#e1e8ff; font-weight:600; }
.chat-nav button:hover { background:#e9edf3; }
.chat-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-nav .nav-image-icon { color:#3370ff; }
.chat-nav .nav-file-icon { color:#b88200; fill:#ffcf40; }
.chat-nav .nav-pin-icon { color:#008f83; }
.chat-nav .chat-layout-button { margin-left:auto; color:#646a73; font-size:.8125rem; }
.chat-layout-button[aria-pressed="true"] .layout-own-bubble { transform:translateX(-6px); }
/* Position measurements must not interpolate, including reduced-motion overrides. */
#messageMenu { transition-property:none; }
.chat-more-menu { position:relative; }
.chat-more-menu summary { list-style:none; cursor:pointer; }
.chat-more-menu summary::-webkit-details-marker { display:none; }
.chat-more-menu[open] summary { background:#e9edf3; }
.chat-more-panel { position:absolute; right:0; top:48px; width:160px; padding:6px; border:1px solid #dfe1e6; border-radius:8px; background:#fff; box-shadow:0 6px 24px #1f232922; }
.conversation .chat-more-panel .quiet-button { display:block; width:100%; min-height:44px; padding:0 12px; text-align:left; font-size:.875rem; }
.conversation #deleteConversationButton { display:block; }
.conversation .message-viewport { background:#fff; padding:24px 24px 16px; }
.conversation .message-list { width:min(1120px,100%); gap:8px; }
.conversation .message { max-width:min(88%,80ch); gap:12px; }
.conversation .message-sender { position:relative; display:flex; flex:0 0 44px; width:44px; flex-direction:column; align-items:center; gap:3px; }
.conversation .message-sender > .favorite-mark { position:absolute; top:-2px; right:0; line-height:12px; }
.conversation .message-body { position:relative; max-width:100%; }
.conversation .message-payload { display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:100%; }
.conversation .message.is-mine .message-payload { align-items:flex-end; }
.conversation .message-payload.has-quote { padding:10px 14px; gap:8px; border-radius:10px; background:var(--bubble-in); }
.conversation .message.is-mine .message-payload.has-quote { background:var(--bubble-out); }
.conversation .message-payload.has-quote > .bubble { padding:0; border-radius:0; background:transparent; }
.conversation .message-payload.has-quote > .quoted-message { align-self:stretch; width:100%; max-width:360px; min-width:0; min-height:24px; margin:0; padding:0 0 8px; border-bottom:1px solid #1f232920; border-radius:0; background:transparent; font-size:.75rem; }
.conversation .message-payload.has-quote > .quoted-message:hover { color:#245bdb; }
.conversation .message-payload.has-quote > .quoted-message strong { flex-shrink:0; max-width:96px; }
.conversation .message-payload.has-quote > .quoted-message span { flex:1; }
.conversation .bubble { padding:10px 14px; border-radius:10px; box-shadow:none; font-size:1rem; line-height:1.55; }
.conversation .bubble::before,.conversation .voice-message::before { display:none; }
.conversation .message .message-meta { color:#646a73; font-size:.625rem; line-height:12px; min-height:12px; margin:0; gap:2px; justify-content:center; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
.conversation .day-divider { color:#646a73; font-size:.8125rem; margin:12px 0 8px; }
.conversation .message .message-meta .read-state { position:relative; left:auto; bottom:auto; flex:0 0 12px; width:12px; height:12px; border:1.5px solid #8f959e; border-radius:50%; color:transparent; font-size:0; }
.conversation .message.is-mine .read-state.is-read { border-color:#00a69a; }
.conversation .message.is-mine .read-state.is-read::after { content:""; position:absolute; left:2px; top:2px; width:5px; height:3px; border-left:1.5px solid #00a69a; border-bottom:1.5px solid #00a69a; transform:rotate(-45deg); }
.conversation .message-reaction-chip { border-color:#dce3ef; background:#edf2fa; color:#45546b; }
.conversation .message.is-mine .message-reaction-chip { background:#bdd4fa; border-color:#b3cdf5; }
.conversation .quoted-message { background:#e9edf3; border-left-color:#8f959e; border-radius:6px; color:#646a73; }
.conversation[data-bubble-layout="left"] .message.is-mine { align-self:flex-start; flex-direction:row; margin-left:0; transform-origin:left top; }
.conversation[data-bubble-layout="left"] .message.is-mine .message-body,
.conversation[data-bubble-layout="left"] .message.is-mine .message-payload { align-items:flex-start; }
.conversation[data-bubble-layout="left"] .message.is-mine .message-reactions { justify-content:flex-start; text-align:left; }
.conversation .voice-message,.conversation .file-message { border-radius:10px; box-shadow:none; }
.conversation .composer { min-height:0; padding:6px 24px max(8px,env(safe-area-inset-bottom)); background:#fff; border-top:0; box-shadow:none; }
.conversation .composer-main { display:grid; grid-template-columns:minmax(0,1fr) repeat(5,40px); align-items:center; gap:4px; padding:0 8px; border:1px solid #d0d3d8; border-radius:10px; overflow:hidden; background:#fff; }
.conversation .composer-main:focus-within { border-color:#7ca1fa; }
.conversation .composer .message-editor { grid-column:1; grid-row:1; width:100%; min-width:0; min-height:36px; padding:6px 8px; border:0; border-radius:6px; background:#fff; font-size:1rem; line-height:24px; }
.conversation .composer .message-editor:focus { box-shadow:none; }
.conversation #voiceRecordButton { grid-column:2; grid-row:1; }
.conversation #emojiToggleButton { grid-column:3; grid-row:1; }
.conversation .composer-image-button { grid-column:4; grid-row:1; }
.conversation #mediaToggleButton { grid-column:5; grid-row:1; }
.conversation #sendButton { grid-column:6; grid-row:1; width:40px; height:36px; background:transparent; color:#3370ff; border-radius:6px; }
.conversation #sendButton:hover { background:#e1eaff; }
.conversation #sendButton:disabled { color:#8f959e; opacity:.55; }
.conversation .composer .icon-button { width:40px; height:36px; color:#646a73; }
.conversation .composer-image-button { position:relative; padding:0; cursor:pointer; overflow:hidden; }
.composer-image-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; cursor:pointer; }
.conversation .composer-image-button:focus-within { outline:2px solid #3370ff; outline-offset:-3px; }
.conversation .media-voice-option { display:none; border:0; background:transparent; color:inherit; font:inherit; }
.conversation .return-to-latest { right:24px; bottom:calc(var(--composer-height,52px) + 12px); border:1px solid #dfe1e6; box-shadow:0 3px 12px #1f23291a; color:#245bdb; }
.conversation .reply-bar { margin:0 0 8px; background:#f2f3f5; }
.conversation :is(button,summary):focus-visible,.chat-library-dialog :is(button,a):focus-visible { outline:2px solid #3370ff; outline-offset:2px; }
.chat-library-dialog { width:min(620px,calc(100vw - 32px)); max-height:min(720px,88dvh); padding:0; border:1px solid #dfe1e6; border-radius:12px; }
.chat-library-dialog > header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #dfe1e6; }
.chat-library-dialog h2 { margin:0; font-size:1.125rem; }
.chat-library-dialog header p { margin:4px 0 0; font-size:.8125rem; color:#646a73; }
.chat-library-list { max-height:calc(80dvh - 180px); overflow-y:auto; overscroll-behavior:contain; }
.chat-library-item { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid #eff0f1; }
.chat-library-item > button { display:flex; min-width:0; flex:1; gap:12px; border:0; padding:8px 0; text-align:left; color:#1f2329; background:transparent; }
.chat-library-item > button:hover { color:#245bdb; }
.chat-library-kind { width:36px; height:40px; display:grid; place-items:center; flex:none; background:#e1eaff; color:#245bdb; border-radius:6px; font-size:.8125rem; }
.chat-library-copy { display:grid; min-width:0; gap:6px; }
.chat-library-copy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-size:.9375rem; font-weight:500; }
.chat-library-copy small { font-size:.75rem; color:#646a73; }
.chat-library-item a { flex:none; padding:12px 4px; color:#245bdb; font-size:.8125rem; text-decoration:none; }
.chat-library-status { margin:0; padding:20px; font-size:.875rem; color:#646a73; text-align:center; }
.chat-library-dialog > button { display:block; margin:0 auto 16px; }
@media (max-width:1000px) and (min-width:761px) {
  .app-shell { grid-template-columns:260px minmax(0,1fr); }
  .conversation .conversation-header { padding-inline:16px; }
  .conversation .message-viewport { padding-inline:16px; }
  .conversation .composer { padding-inline:16px; }
}
@media (max-width:760px) {
  .conversation .conversation-header { padding:env(safe-area-inset-top) 8px 0; }
  .chat-header-main { min-height:36px; gap:6px; }
  .conversation .conversation-header #activeAvatar { width:28px; height:28px; flex:none; }
  .chat-contact-copy { display:flex; align-items:center; gap:6px; }
  .conversation-header .chat-contact-copy h1 { flex:0 1 auto; min-width:0; font-size:1rem; }
  .conversation-header .chat-contact-copy p { display:flex; flex:none; gap:4px; font-size:.6875rem; white-space:nowrap; }
  .conversation .conversation-actions { gap:0; }
  .conversation .conversation-actions .icon-button { width:36px; height:36px; }
  .conversation #mobileBack { width:32px; height:36px; }
  .conversation .chat-more-panel { top:40px; }
  .chat-nav { min-height:32px; gap:4px; padding:0; }
  .chat-nav-tabs { flex:1; gap:0; }
  .chat-nav button { min-height:32px; padding-inline:12px; font-size:.9375rem; }
  .chat-nav-tabs button { gap:4px; padding-inline:8px; font-size:.8125rem; }
  .chat-nav .chat-layout-button { gap:4px; padding-inline:8px; font-size:.75rem; }
  .conversation .message-viewport { padding:12px; }
  .conversation .message-list { gap:8px; }
  .conversation .message-sender { flex-basis:40px; width:40px; }
  .conversation .message { max-width:calc(100% - 24px); gap:8px; }
  .conversation .message.is-mine { margin-left:20px; }
  .conversation .bubble { max-width:100%; padding:10px 12px; font-size:1rem; line-height:1.5; }
  .conversation .message-payload.has-quote { padding:10px 12px; }
  .conversation .message .avatar,.conversation .message-peer-avatar,.conversation .message-lock-button { width:32px; height:32px; }
  .conversation .composer { padding:4px 8px max(4px,env(safe-area-inset-bottom)); background:#f5f6f8; }
  .conversation .composer-main { grid-template-columns:minmax(0,1fr) repeat(3,44px); grid-template-rows:auto; align-items:end; gap:0; border:1px solid #dfe1e6; border-radius:8px; padding:0 2px; background:#fff; }
  .conversation .composer .message-editor { grid-row:1; grid-column:1; min-height:36px; max-height:min(132px,25dvh); padding:7px 8px; border:0; border-radius:8px; line-height:22px; }
  .conversation #emojiToggleButton { grid-column:2; grid-row:1; }
  .conversation #voiceRecordButton,.conversation .composer-image-button { display:none; }
  .conversation #mediaToggleButton { grid-column:3; grid-row:1; }
  .conversation #sendButton { grid-column:4; grid-row:1; }
  .conversation .composer .icon-button,.conversation #sendButton { justify-self:center; width:44px; height:36px; }
  .conversation .composer .icon-button svg { width:24px; height:24px; }
  .conversation .media-voice-option { display:flex; }
  .conversation .media-picker { grid-template-columns:repeat(4,minmax(0,1fr)); min-height:136px; }
  .conversation .return-to-latest { right:12px; bottom:calc(var(--composer-height,48px) + 10px); }
  .conversation .emoji-picker { height:min(276px,calc(var(--app-height,100dvh) - 250px)); }
  .conversation .emoji-picker.is-custom { height:min(440px,calc(var(--app-height,100dvh) - 250px)); }
  .chat-library-item { padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .conversation .message.is-entering { animation:none; }
}
@media (max-width:360px) {
  .chat-nav { gap:0; }
  .chat-nav button { padding-inline:10px; gap:6px; font-size:.875rem; }
}