* { box-sizing: border-box; }
:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #242a2a; background: #edf0ec; font-synthesis: none; --green: #159653; --green-dark: #08703b; --line: #e5e9e5; --muted: #8b9690; --rail: #242e2b; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid #91caa8; outline-offset: 3px; }
input:focus, textarea:focus, select:focus { outline: none; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.app-shell { display: grid; grid-template-columns: 70px 304px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: #fff; }
.app-shell.with-details { grid-template-columns: 70px 304px minmax(330px, 1fr) 322px; }
.rail { background: var(--rail); color: #b4c0b8; display: flex; align-items: center; flex-direction: column; padding: 30px 0 22px; gap: 26px; }
.brand-mark, .login-mark { position: relative; display: grid; place-items: center; font-size: 24px; font-weight: 750; letter-spacing: -3px; padding-right: 3px; border-radius: 14px; width: 42px; height: 42px; color: #fff; background: #359962; }
.brand-mark span, .login-mark span { position: absolute; right: 5px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: #c1f4b9; }
.rail-button { color: inherit; border: 0; background: transparent; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.rail-button.active { background: #3b4942; color: #8be4a3; }
.rail-button:hover { background: #35423b; }
.rail-button svg { width: 24px; height: 24px; }
.rail-spacer { flex: 1; }
.rail-caption { font-size: 10px; text-align: center; color: #829389; line-height: 1.8; letter-spacing: 2px; }
.conversation-sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #f7f9f6; }
.sidebar-header { padding: 28px 22px 18px; }
.title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: 1px; }
.small-label { font-size: 10px; font-weight: 500; color: #809185; border: 1px solid #dfe7dd; border-radius: 5px; padding: 4px 6px; }
.device-label { display: block; font-size: 11px; color: #7a897e; margin-bottom: 8px; }
.device-selector { display: flex; align-items: center; height: 42px; border: 1px solid #dce3d9; border-radius: 8px; background: #fff; padding: 0 12px; gap: 9px; }
.device-dot, .connection-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #abb3ad; flex-shrink: 0; }
.device-dot.online, .connection-dot.online { background: #27a968; box-shadow: 0 0 0 3px #27a96815; }
.connection-dot.connecting { background: #d2a350; }
.device-selector select { min-width: 0; width: 100%; appearance: none; background: transparent; border: 0; color: #37473b; font-size: 12px; height: 100%; }
.device-selector svg { width: 15px; height: 15px; color: #8d998f; }
.device-caption { display: flex; justify-content: space-between; align-items: center; margin: 8px 1px 20px; font-size: 10px; color: #99a39a; min-height: 16px; }
.text-button { padding: 1px 0; color: #668d70; font-size: 10px; border: 0; background: transparent; }
.text-button:disabled { color: #b5bdb5; }
.search-box { display: flex; align-items: center; background: #eaf0e8; color: #8f9b8f; height: 36px; border-radius: 7px; padding: 0 10px; gap: 7px; }
.search-box svg { width: 15px; height: 15px; }
.search-box input { border: 0; background: transparent; width: 100%; color: #425346; font-size: 11px; min-width: 0; }
.search-box input::placeholder { color: #99a496; }
.new-conversation-button { display: block; margin: 12px 0 -6px auto; border: 0; background: transparent; color: #85a073; font-size: 10px; padding: 4px 0; }
.new-conversation-button:disabled { color: #b2bda8; }
.sidebar-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.sidebar-actions .new-conversation-button { margin: 0 0 0 auto; }
.sync-sessions-button { border: 1px solid #d8e5d5; border-radius: 6px; background: #eef4eb; padding: 6px 9px; color: #4f8059; font-size: 10px; }
.sync-sessions-button:disabled { opacity: .6; }
.session-sync-status { min-height: 13px; color: #8c9986; font-size: 9px; line-height: 1.5; margin: 8px 0 0; }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 14px; }
.conversation-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 12px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; margin-bottom: 3px; }
.conversation-item:hover { background: #edf2ea; }
.conversation-item.selected { background: #e5eee2; border-color: #dce8d7; }
.conversation-item.pinned:not(.selected) { background: #f0f3ed; }
.avatar { flex-shrink: 0; display: grid; place-items: center; height: 42px; width: 42px; border-radius: 12px; color: #52745b; background: #dfeada; font-size: 16px; font-weight: 500; overflow: hidden; }
.avatar.brand { background: #e7e6d8; color: #858058; }
.avatar.group { background: #dfe9ef; color: #5d7b90; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-copy { flex: 1; min-width: 0; }
.conversation-line { display: flex; align-items: center; gap: 5px; }
.conversation-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 550; }
.conversation-time { flex-shrink: 0; font-size: 9px; color: #9ba69a; }
.conversation-preview { margin-top: 7px; font-size: 11px; color: #8a9789; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-badge { color: #99a394; font-size: 9px; border: 1px solid #d9e0d5; border-radius: 3px; padding: 1px 3px; font-weight: 400; flex-shrink: 0; }
.unread-badge { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px; font-size: 9px; color: #fff; background: #e77869; border-radius: 8px; }
.connection-footer { min-height: 38px; padding: 10px 21px; border-top: 1px solid #e6eae3; display: flex; align-items: center; gap: 7px; color: #8b988c; font-size: 9px; }
.connection-footer .connection-dot { height: 5px; width: 5px; }
.footer-spacer { flex: 1; }
.mobile-logout { display: none; }
.main-pane { position: relative; min-width: 0; min-height: 0; background: #f4f6f1; }
.empty-chat { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.empty-chat-art { width: 118px; height: 104px; color: #bfcdba; margin-bottom: 20px; }
.empty-chat-art svg { height: 100%; width: 100%; stroke-width: 1.3; }
.empty-chat-art rect { fill: #e8eee3; }
.empty-chat-art circle { fill: #b2c2ab; stroke: none; }
.empty-chat h2 { font-size: 19px; letter-spacing: 1px; font-weight: 500; color: #667860; margin: 0 0 12px; }
.empty-chat p { margin: 0; max-width: 320px; font-size: 12px; color: #9aa594; line-height: 1.8; }
.empty-caption { color: #b0baa8; letter-spacing: 2px; font-size: 10px; margin-top: 38px; }
.chat-workspace { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.chat-header { display: flex; align-items: center; gap: 13px; padding: 22px 30px; min-height: 90px; border-bottom: 1px solid #e3e8df; background: #fafbf8; }
.header-avatar { width: 40px; height: 40px; border-radius: 12px; }
.chat-heading { flex: 1; min-width: 0; }
.chat-title-row { display: flex; gap: 8px; align-items: center; }
.chat-heading h2 { font-size: 17px; margin: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-heading p { margin: 7px 0 0; color: #9aa395; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind-badge { color: #84977c; font-size: 9px; background: #eaf0e3; padding: 3px 5px; border-radius: 4px; white-space: nowrap; }
.chat-header-actions { display: flex; align-items: center; gap: 13px; }
.header-action { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 7px 0; color: #82917b; background: transparent; border: 0; font-size: 10px; white-space: nowrap; }
.header-action:hover { color: #267b48; }
.header-action svg { width: 17px; height: 17px; }
.count-badge { border-radius: 7px; padding: 1px 4px; background: #e3eade; font-size: 9px; color: #6d8561; }
.chat-notice { background: #fcf7e9; border-bottom: 1px solid #ede4cd; color: #9c8152; font-size: 11px; line-height: 1.7; padding: 10px 30px; }
.contact-profile { background: #fafbf8; border-bottom: 1px solid #e3e8df; padding: 12px 30px; max-height: 220px; overflow: auto; }
.contact-profile dl { margin: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 14px; font-size: 11px; line-height: 1.5; }
.contact-profile dt { color: #8c9986; }
.contact-profile dd { margin: 0; color: #51634e; overflow-wrap: anywhere; user-select: text; }
.phone-history-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 30px 0; color: #8c9a84; font-size: 10px; }
.phone-history-toolbar button { white-space: nowrap; }
.phone-history-toolbar .error { color: #b16f52; }
.phone-history-toolbar button:disabled { opacity: .6; }
.timeline-wrap { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.message-list { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 32px 30px; scroll-behavior: auto; }
.message-search { display: flex; align-items: center; gap: 12px; padding: 10px 30px; border-bottom: 1px solid #e3e8df; background: #fafbf8; }
.message-search input { min-width: 0; flex: 1; border: 1px solid #dfe7d9; border-radius: 6px; padding: 7px 10px; color: #425346; background: #fff; font-size: 11px; }
.message-search button { white-space: nowrap; }
.history-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 30px 0; min-height: 28px; color: #8c9a84; font-size: 10px; }
.history-toolbar button { white-space: nowrap; }
.history-toolbar button:disabled { opacity: .6; cursor: wait; }
.read-caption { margin-left: auto; white-space: nowrap; color: #9ba692; font-size: 9px; }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; color: #fff; background: #a3674e; font-size: 10px; flex-shrink: 0; }
.task-cancel-button { display: block; margin-top: 10px; padding: 5px 9px; border: 1px solid #ddd7cb; border-radius: 5px; background: #faf8f3; color: #8b7151; font-size: 10px; }
.task-cancel-button:disabled { opacity: .6; cursor: wait; }
.status-label.cancelled, .task-status.cancelled { color: #8c9686; }
.date-divider { text-align: center; margin: 0 0 24px; font-size: 10px; color: #a7b09f; }
.date-divider span { display: inline-block; padding: 5px 12px; background: #eaeee5; border-radius: 5px; }
.message-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; }
.message-row.outgoing { flex-direction: row-reverse; }
.message-avatar { width: 33px; height: 33px; border-radius: 9px; font-size: 12px; margin-top: 1px; }
.message-avatar.self { color: #62936b; background: #d6e8cc; }
.message-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(76%, 540px); }
.outgoing .message-content { align-items: flex-end; }
.message-sender { font-size: 10px; color: #9ca794; padding: 0 1px; margin-bottom: 5px; }
.message-bubble { border-radius: 3px 13px 13px 13px; background: #fff; border: 1px solid #e5eadd; color: #3d4937; padding: 11px 14px; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; min-width: 34px; }
.outgoing .message-bubble { border-radius: 13px 3px 13px 13px; border-color: #c9dfbc; background: #dceece; color: #344d2a; }
.message-bubble.system { color: #95a08d; background: #eaf0e3; border: 0; font-size: 11px; }
.message-foot { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 9px; color: #a2ac99; }
.message-foot .status-label { color: #8c9d7f; }
.message-foot .status-label.failed { color: #c16e5b; }
.message-foot .status-label.pending { color: #b08b46; }
.message-media { padding: 7px; min-width: 190px; }
.message-media img { max-width: 100%; max-height: 320px; border-radius: 7px; object-fit: contain; display: block; background: #edf1e8; cursor: pointer; }
.message-media video { display: block; max-width: 100%; max-height: 330px; width: 360px; border-radius: 7px; background: #18251b; }
.message-media audio { display: block; max-width: 100%; width: 280px; height: 40px; }
.media-status { color: #8e9e80; font-size: 11px; padding: 12px; min-width: 170px; line-height: 1.8; white-space: normal; }
.media-status.failed { color: #ba7660; }
.media-caption { display: block; font-size: 10px; color: #8c9b82; margin: 7px 6px 3px; white-space: normal; }
.media-retry { color: #487d4f; background: transparent; padding: 0; border: 0; font-size: 11px; text-decoration: underline; margin: 5px 12px 9px; }
.raw-message { width: min(100%, 540px); white-space: normal; }
.raw-message-title { color: #718067; font-size: 11px; margin-bottom: 7px; }
.raw-message-content, .raw-message-json { margin: 0; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; user-select: text; }
.raw-message-fields { margin-top: 10px; border-top: 1px solid #dfe6d8; padding-top: 7px; }
.raw-message-fields summary { cursor: pointer; color: #607e50; font-size: 11px; }
.raw-message-json { margin-top: 8px; }
.raw-message-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.raw-message-action { border: 1px solid #cad8c0; border-radius: 5px; background: #f6f9f2; color: #547146; padding: 5px 9px; cursor: pointer; font-size: 11px; }
.raw-message-action:hover { background: #eaf2e2; }
.raw-message-action:focus-visible { outline: 2px solid #698d54; outline-offset: 2px; }
.raw-message-feedback { display: block; color: #718067; font-size: 11px; margin-top: 5px; }
.message-bubble.message-card { width: 310px; padding: 0; white-space: normal; overflow: hidden; }
.message-card-kind { margin: 0 14px; padding: 8px 0 6px; border-bottom: 1px solid #edf0e8; color: #87967c; font-size: 10px; letter-spacing: .5px; }
.message-card-body { padding: 12px 14px; }
.message-card-heading { display: flex; align-items: flex-start; gap: 12px; }
.message-card-text { min-width: 0; flex: 1; }
.message-card-title { font-size: 13px; font-weight: 550; line-height: 1.6; color: #3f5139; overflow-wrap: anywhere; }
.message-card-description { margin-top: 5px; font-size: 11px; line-height: 1.7; color: #87907e; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-card-icon { display: grid; flex: 0 0 47px; place-items: center; width: 47px; height: 51px; background: #eef3e8; color: #7b9569; border-radius: 7px; font-size: 27px; }
.message-card-icon[hidden] { display: none; }
.message-card-icon.file-icon { font-size: 10px; letter-spacing: .3px; background: #f5eee0; color: #a58b55; }
.message-card-icon.call-icon { height: 38px; width: 38px; flex-basis: 38px; font-size: 23px; background: #edf4e7; color: #76a35b; }
.message-card-thumbnail { flex: 0 0 55px; width: 55px; height: 55px; border-radius: 6px; object-fit: cover; background: #eff2ea; }
.message-card-note { display: block; margin-top: 11px; font-size: 10px; line-height: 1.7; color: #939b8c; overflow-wrap: anywhere; }
.message-card-source { margin-top: 12px; font-size: 10px; color: #95a08a; }
.message-card-link { display: inline-block; margin-top: 9px; font-size: 11px; color: #5a8951; text-decoration: none; }
.message-card-link:hover { text-decoration: underline; }
.message-card-button { display: inline-block; border: 1px solid #d6e3cc; border-radius: 6px; padding: 7px 12px; background: #f0f6ea; color: #5f874d; font-size: 11px; cursor: pointer; }
.message-card-button:hover { background: #e6f0de; }
.message-card-button:focus-visible, .message-card-link:focus-visible, .message-card-raw > summary:focus-visible { outline: 2px solid #698d54; outline-offset: 2px; }
.message-card-raw { border-top: 1px solid #edf0e8; padding: 0 14px; }
.message-card-raw > summary { font-size: 10px; color: #a0aa95; cursor: pointer; padding: 7px 0; width: fit-content; }
.message-card-raw > .raw-message { width: 100%; border: 0; border-radius: 0; padding: 3px 0 10px; background: transparent; }
.message-card-raw .raw-message-content, .message-card-raw .raw-message-json { max-height: 240px; font-size: 10px; }
.message-card-raw .raw-message-title { font-size: 10px; }
.sticker-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 80px; justify-content: center; }
.sticker-image { display: block; max-width: 100%; max-height: 210px; object-fit: contain; }
.message-bubble.card-emoji { width: 228px; }
.card-emoji .message-card-title, .card-emoji .message-card-description { margin-top: 8px; text-align: center; }
.card-call .message-card-heading { align-items: center; }
.location-marker { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 11px; min-height: 72px; border-radius: 6px; color: #7a9575; background: #eef3e8; font-size: 11px; }
.location-pin { font-size: 34px; line-height: 1; }
.location-coordinates { font-variant-numeric: tabular-nums; font-size: 9px; margin-top: 8px; }
.music-playback { margin-top: 10px; }
.message-card-audio { display: block; max-width: 100%; width: 280px; height: 38px; }
.outgoing .message-card-kind, .outgoing .message-card-raw { border-color: #c9dfbc; }
.share-card-source { display: flex; align-items: center; gap: 7px; color: #8d9985; font-size: 11px; margin-bottom: 10px; }
.share-card-icon { flex: 0 0 21px; width: 21px; height: 21px; border-radius: 5px; object-fit: cover; }
.share-card-cover { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; margin-top: 12px; border-radius: 6px; background: #f0f3eb; }
.contact-card-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 7px; object-fit: cover; }
.file-download, .file-request { margin-top: 10px; }
.file-error { color: #b57d65; }
.system-message-row { justify-content: center; }
.system-message-row .message-content { align-items: center; max-width: min(90%, 540px); }
.message-bubble.card-system, .outgoing .message-bubble.card-system { width: auto; min-width: 120px; background: #eaf0e4; border-color: transparent; border-radius: 8px; }
.card-system .message-card-kind { display: none; }
.card-system .message-card-body { padding: 8px 12px; }
.system-message-text { color: #8c9982; font-size: 11px; line-height: 1.85; text-align: center; white-space: pre-wrap; }
.card-system .message-card-raw { border-color: #dfe8d7; }
.card-system .raw-message { text-align: left; }
.timeline-empty { display: grid; place-content: center; min-height: 180px; text-align: center; color: #a0ad95; font-size: 12px; line-height: 2; }
.timeline-empty p { margin: 0; }
.jump-latest { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: #fff; color: #6e8c5c; box-shadow: 0 2px 12px #354d2420; border: 1px solid #dde8d3; border-radius: 20px; padding: 8px 15px; font-size: 11px; }
.composer { border-top: 1px solid #e1e8da; background: #fafbf8; padding: 13px 27px 18px; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 5px; font-size: 10px; color: #9ba991; }
.composer-label { color: #829775; }
.composer-device-state.offline { color: #b89a67; }
.composer textarea { display: block; width: 100%; border: 0; background: transparent; resize: none; color: #35472e; font-size: 13px; line-height: 1.7; min-height: 74px; max-height: 170px; padding: 5px 0; }
.composer textarea::placeholder { color: #a8b29e; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 5px; color: #a7b29c; font-size: 10px; }
.send-button { display: flex; align-items: center; gap: 15px; color: #fff; background: var(--green); border: 0; border-radius: 7px; font-size: 12px; padding: 10px 17px; }
.send-button svg { width: 15px; height: 15px; stroke-width: 1.4; }
.send-button:hover { background: #108448; }
.send-button:disabled { background: #d9e4d2; color: #a8b89e; }
.icon-button { display: grid; place-items: center; border: 0; background: transparent; color: #8a9b80; padding: 5px; border-radius: 5px; }
.icon-button:hover { background: #e9f0e2; }
.mobile-back { display: none; }
.mobile-chat-tools, .phone-input-toggle { display: none; }
.chat-bottom-bar { flex-shrink: 0; }
.chat-bottom-content { min-width: 0; }
.mobile-root-page { height: 100%; display: flex; flex-direction: column; background: #ededed; }
.mobile-page-header { padding: 24px; border-bottom: 1px solid #e1e1e1; }
.mobile-page-header h1 { font-size: 22px; letter-spacing: 0; }
.mobile-page-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.mobile-cell-group { background: #fff; margin: 12px 0; }
.mobile-cell { width: 100%; display: flex; align-items: center; gap: 16px; border: 0; background: #fff; padding: 17px 22px; min-height: 58px; font-size: 16px; text-align: left; color: #181818; }
.mobile-cell + .mobile-cell { border-top: 1px solid #f0f0f0; }
.mobile-cell-icon { display: grid; place-items: center; flex: 0 0 26px; color: #07c160; font-size: 24px; }
.mobile-cell-icon.favorites-icon { color: #e5a045; }.mobile-cell-icon.album-icon { color: #5b8fe2; }.mobile-cell-icon.code-icon { color: #e5a045; }.mobile-cell-icon.settings-icon { color: #5e8bcd; }
.mobile-cell-note { margin-left: auto; color: #8e8e93; font-size: 12px; }
.mobile-chevron { margin-left: auto; color: #b6b6b6; font-size: 25px; }.mobile-cell-note + .mobile-chevron { margin-left: 0; }
.mobile-page-hint { padding: 10px 22px; color: #929292; font-size: 12px; line-height: 1.8; }
.mobile-self-card { display: flex; align-items: center; gap: 18px; background: #fff; padding: 28px 22px; }
.mobile-self-card .avatar { width: 64px; height: 64px; border-radius: 10px; font-size: 24px; }
.mobile-self-copy { min-width: 0; }.mobile-self-copy h2 { font-size: 21px; margin: 0 0 8px; overflow-wrap: anywhere; }.mobile-self-copy p { margin: 0 0 5px; color: #777; font-size: 13px; overflow-wrap: anywhere; }.mobile-self-copy > span { color: #999; font-size: 12px; }
.mobile-sign-out { display: block; width: 100%; min-height: 55px; border: 0; background: #fff; color: #c84b4b; margin-top: 24px; font-size: 16px; }
.details-panel { min-height: 0; background: #fafbf8; border-left: 1px solid #e2e9db; display: flex; flex-direction: column; }
.details-header { display: flex; align-items: center; justify-content: space-between; padding: 25px 18px 0; min-height: 90px; border-bottom: 1px solid #e3e9dc; gap: 10px; }
.details-tabs { height: 100%; display: flex; align-items: center; gap: 17px; }
.details-tab { align-self: stretch; display: flex; align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 11px; color: #99a58f; padding: 0 0 22px; white-space: nowrap; }
.details-tab.active { color: #548341; border-bottom-color: #7ca968; }
.details-header > .icon-button { margin-bottom: 22px; }
.details-content { padding: 22px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.panel-intro { margin-bottom: 21px; }
.panel-intro h3 { font-size: 13px; color: #596f4c; font-weight: 500; margin: 0 0 10px; }
.panel-intro p { font-size: 10px; color: #a0ac96; line-height: 1.9; margin: 0; }
.task-card { border: 1px solid #e1e9d8; background: #fff; border-radius: 9px; margin-bottom: 10px; padding: 13px; }
.task-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #75876a; }
.task-card time { font-size: 9px; color: #b2bbaa; }
.task-card-body { font-size: 11px; color: #5d7051; margin: 11px 0; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.task-status { display: inline-block; border-radius: 4px; background: #edf2e7; color: #8e9d80; font-size: 9px; padding: 4px 6px; line-height: 1.5; }
.task-status.pending { color: #ad8b4f; background: #fbf4e6; }
.task-status.success { color: #448351; background: #edf6e9; }
.task-status.failed { color: #bf7964; background: #fdf0e9; }
.task-error { margin: 10px 0 0; color: #bf7964; line-height: 1.8; font-size: 10px; overflow-wrap: anywhere; }
.task-id { margin: 10px 0 0; color: #b1baaa; font-size: 9px; overflow-wrap: anywhere; }
.menu-actions { display: flex; gap: 8px; }
.advanced-menus summary { font-size: 11px; color: #85917f; cursor: pointer; margin-bottom: 18px; }
.phone-menu { flex-shrink: 0; background: #f9faf7; border-top: 1px solid var(--line); padding: 9px 20px 0; }
.phone-menu-caption { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: 10px; color: #889582; padding-bottom: 9px; }
.phone-menu-caption .text-button { white-space: nowrap; }
.phone-menu-bar { display: flex; }
.phone-menu-group { flex: 1; min-width: 0; position: relative; }
.phone-menu-button { width: 100%; min-height: 43px; padding: 10px 5px; background: transparent; color: #52664c; font-size: 12px; border: 0; border-top: 1px solid #e4e9df; border-right: 1px solid #e4e9df; }
.phone-menu-group:last-child .phone-menu-button { border-right: 0; }
.phone-menu-button:hover, .phone-submenu-button:hover { background: #eaf0e5; }
.phone-menu-button[aria-expanded="true"] { color: #18844a; background: #eaf0e5; }
.phone-submenu { position: absolute; z-index: 12; bottom: calc(100% + 8px); left: 4px; right: 4px; min-width: 120px; background: #fff; border: 1px solid #dae2d5; border-radius: 8px; box-shadow: 0 6px 22px #32442d20; overflow: hidden; }
.phone-menu-group:last-child .phone-submenu { left: auto; width: calc(100% - 8px); }
.phone-submenu-button { display: block; width: 100%; padding: 13px 9px; background: #fff; border: 0; border-bottom: 1px solid #edf0ea; color: #465b42; font-size: 12px; }
.phone-submenu-button:last-child { border-bottom: 0; }
.phone-menu-button:disabled, .phone-submenu-button:disabled { color: #a5aea0; background: #f7f8f5; }
.phone-menu-button small, .phone-submenu-button small { display: block; font-size: 9px; margin-top: 4px; font-weight: 400; }
.secondary-button { border: 1px solid #dce7d1; background: #f1f6eb; color: #7b9669; border-radius: 6px; padding: 8px 10px; font-size: 10px; }
.secondary-button:hover { border-color: #a8c695; color: #51853a; }
.secondary-button:disabled { opacity: .5; }
.inline-status { min-height: 16px; color: #88a072; line-height: 1.7; font-size: 10px; margin: 10px 0; }
.inline-status.error { color: #bd7962; }
.menu-card { padding: 13px; border: 1px solid #e0e8d7; background: #fff; border-radius: 8px; margin-bottom: 12px; }
.menu-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.menu-card-head input { border: 0; background: transparent; flex: 1; color: #607b4e; font-size: 12px; width: 0; padding: 3px 0; }
.delete-menu-button { border: 0; color: #b5bda9; background: transparent; padding: 2px; font-size: 16px; }
.menu-field { display: block; margin: 9px 0; color: #a0ad93; font-size: 9px; }
.menu-field input { display: block; width: 100%; padding: 8px; font-size: 10px; color: #758b64; background: #f8faf5; border: 1px solid #e6ecdf; border-radius: 4px; margin-top: 5px; }
.menu-field input:focus { border-color: #a2bd8e; }
.menu-send-button { width: 100%; border: 0; color: #688e54; background: #eaf2e3; font-size: 10px; border-radius: 5px; padding: 9px; margin-top: 6px; }
.menu-send-button:hover { background: #deebd3; }
.list-empty { padding: 30px 15px; text-align: center; font-size: 11px; color: #a0ab97; line-height: 1.9; }
.list-empty strong { display: block; color: #819374; font-size: 12px; font-weight: 400; margin-bottom: 5px; }
.toast-stack { position: fixed; z-index: 30; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 8px; max-width: calc(100vw - 40px); pointer-events: none; }
.toast { padding: 11px 18px; font-size: 12px; color: #f4f8f1; background: #354b30f0; box-shadow: 0 4px 16px #263e2030; border-radius: 8px; line-height: 1.7; max-width: 500px; overflow-wrap: anywhere; }
.toast.error { background: #875c49f5; }
.login-dialog { border: 1px solid #dfe8d9; border-radius: 20px; padding: 0; background: #fdfefa; max-width: min(440px, calc(100vw - 32px)); width: 440px; color: #425439; box-shadow: 0 26px 80px #1e3e2230; }
.login-dialog::backdrop { background: #e9eee3e6; backdrop-filter: blur(5px); }
.login-form { padding: 39px 38px 28px; }
.login-mark { margin-bottom: 25px; background: #379867; width: 47px; height: 47px; }
.eyebrow { color: #9aac8d; font-size: 9px; letter-spacing: 2px; }
.login-form h2 { font-size: 23px; font-weight: 500; margin: 12px 0 12px; letter-spacing: -.5px; }
.login-description { color: #9daa92; font-size: 11px; line-height: 1.9; margin: 0 0 29px; }
.login-form > label:not(.remember-label) { display: block; font-size: 11px; color: #738c62; margin-bottom: 9px; }
.login-form > input { width: 100%; border: 1px solid #dce7d1; background: #f6f9f1; border-radius: 7px; color: #536e44; padding: 13px; font-size: 12px; }
.login-form > input:focus { border-color: #8db77a; box-shadow: 0 0 0 3px #b4d4a520; }
.login-form > input::placeholder { color: #b1bda5; }
.remember-label { margin-top: 14px; display: flex; align-items: center; gap: 7px; color: #9aaa8e; font-size: 10px; cursor: pointer; }
.remember-label input { accent-color: #6e9f57; width: 12px; height: 12px; margin: 0; }
.login-error { min-height: 17px; color: #c17b60; font-size: 11px; margin: 15px 0 12px; line-height: 1.7; }
.login-button { display: flex; align-items: center; justify-content: space-between; width: 100%; color: #fff; border: 0; border-radius: 8px; background: #4d9358; padding: 14px 16px; font-size: 12px; }
.login-button:hover { background: #3c8047; }
.login-button:disabled { opacity: .6; }
.login-footnote { color: #bac3b0; text-align: center; font-size: 9px; margin: 22px 0 0; line-height: 1.7; }
.dialog-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-title-row h2 { margin-top: 0; }
.dialog-title-row .icon-button { margin-top: -10px; }
.conversation-form > input { margin-bottom: 18px; }
.conversation-form > select { width: 100%; border: 1px solid #dce7d1; border-radius: 7px; padding: 12px; background: #f6f9f1; color: #728c60; font-size: 12px; }
.sr-only { position: absolute; height: 1px; width: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { .app-shell { grid-template-columns: 78px 328px minmax(0, 1fr); } .app-shell.with-details { grid-template-columns: 78px 328px minmax(350px, 1fr) 344px; } .message-list { padding-left: 44px; padding-right: 44px; } }
@media (max-width: 1150px) { .app-shell, .app-shell.with-details { grid-template-columns: 62px 275px minmax(0, 1fr); } .rail { padding-top: 25px; } .sidebar-header { padding: 24px 18px 15px; } .chat-header { padding: 20px 22px; } .chat-header-actions { gap: 12px; } .header-action span:not(.count-badge) { display: none; } .details-panel { position: absolute; width: 322px; top: 0; right: 0; bottom: 0; z-index: 10; box-shadow: -10px 0 30px #31452512; } .message-list { padding: 24px 22px; } .message-content { max-width: 80%; } }
@media (max-width: 720px) { .app-shell, .app-shell.with-details { grid-template-columns: 1fr; } .rail { display: none; } .mobile-logout { display: block; margin-left: 10px; } .conversation-sidebar { grid-column: 1; grid-row: 1; } .main-pane { grid-column: 1; grid-row: 1; display: none; } .app-shell.chat-open .conversation-sidebar { display: none; } .app-shell.chat-open .main-pane { display: block; } .sidebar-header { padding: 25px 22px 18px; } .title-row { margin-bottom: 24px; } .conversation-list { padding-left: 12px; padding-right: 12px; } .conversation-item { padding: 17px 12px; } .conversation-name { font-size: 14px; } .conversation-preview { font-size: 12px; } .conversation-time { font-size: 10px; } .avatar { width: 45px; height: 45px; } .mobile-back { display: grid; margin-left: -7px; } .chat-header { padding: 15px 16px; min-height: 78px; gap: 9px; } .header-avatar { width: 36px; height: 36px; } .chat-heading h2 { font-size: 15px; } .chat-header-actions { gap: 15px; } .chat-heading p { font-size: 9px; } .message-list { padding: 20px 15px; } .message-content { max-width: 80%; } .message-avatar { width: 31px; height: 31px; } .message-bubble { font-size: 13px; padding: 9px 12px; } .message-media { padding: 6px; min-width: 160px; } .message-media audio { width: 230px; } .composer { padding: 10px 18px 15px; padding-bottom: max(15px, env(safe-area-inset-bottom)); } .composer textarea { min-height: 63px; } .composer-bottom { font-size: 9px; } .send-button { padding: 9px 13px; gap: 10px; } .details-panel { width: min(360px, 100vw); } .details-header { min-height: 78px; padding-top: 18px; } .login-form { padding: 32px 27px 25px; } .login-form h2 { font-size: 22px; } .chat-notice { padding: 9px 18px; } .toast-stack { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 720px) { .message-search { padding: 9px 16px; gap: 9px; } .history-toolbar { padding: 8px 16px 0; gap: 8px; font-size: 9px; } .read-caption { font-size: 8px; } }

@media (max-width: 720px) { .phone-history-toolbar { padding: 9px 16px 0; font-size: 9px; gap: 6px 10px; } .contact-profile { padding: 12px 16px; } .contact-profile dl { grid-template-columns: 65px minmax(0, 1fr); font-size: 10px; } }

/* Address book shares device scope with messages, and keeps profile selection separate. */
.mobile-view-tabs { display: none; }
.contacts-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.contacts-filter button { border: 0; border-radius: 5px; padding: 5px 8px; font-size: 11px; background: transparent; color: #8c998f; }
.contacts-filter button.active { background: #e0ecdf; color: #387548; font-weight: 600; }
.contacts-filter button:hover { background: #eaf0e8; }
.contacts-total { font-size: 10px; color: #8c998f; margin-left: auto; }
.contacts-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 18px; }
.contact-group-letter { padding: 10px 13px 6px; font-size: 11px; color: #8b998b; font-weight: 600; }
.contact-row { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 12px; margin: 0 0 2px; }
.contact-row:hover { background: #edf2ea; }
.contact-row.selected { background: #e5eee2; border-color: #dce8d7; }
.contact-row-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.contact-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 550; }
.contact-row-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #93a08f; font-size: 10px; }
.contacts-more { display: block; width: calc(100% - 24px); border: 1px solid #dce6d8; border-radius: 7px; background: #eef4eb; padding: 10px; margin: 14px 12px 6px; font-size: 11px; color: #65866a; }
.contacts-workspace { height: 100%; display: flex; min-height: 0; flex-direction: column; }
.addressbook-header { display: flex; align-items: center; gap: 10px; padding: 25px 32px; min-height: 90px; background: #fafbf8; border-bottom: 1px solid var(--line); }
.addressbook-header h2 { font-size: 17px; font-weight: 550; margin: 0; }
.addressbook-header > span { margin-left: auto; color: #a0ad9b; font-size: 11px; }
.contact-detail-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 48px 30px; }
.addressbook-empty { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; }
.contact-empty-icon { height: 88px; width: 88px; border-radius: 26px; background: #e7eee2; display: grid; place-items: center; color: #b2c5a8; font-size: 35px; margin-bottom: 24px; }
.addressbook-empty h2 { font-size: 18px; font-weight: 500; color: #73856b; margin: 0 0 14px; }
.addressbook-empty p { font-size: 12px; color: #9ba594; line-height: 1.8; max-width: 250px; margin: 0; }
.addressbook-profile { max-width: 620px; margin: 0 auto; padding: 38px 40px 30px; background: #fff; border: 1px solid #e2e9dd; border-radius: 16px; box-shadow: 0 8px 34px #536c4410; }
.contact-detail-heading { display: flex; align-items: center; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid #eef1eb; }
.contact-large-avatar { width: 76px; height: 76px; border-radius: 20px; font-size: 28px; }
.contact-detail-heading > div:last-child { min-width: 0; }
.contact-detail-heading h2 { font-size: 22px; font-weight: 550; margin: 0 0 10px; overflow-wrap: anywhere; }
.contact-detail-heading p { font-size: 12px; color: #96a18e; line-height: 1.6; margin: 10px 0 0; overflow-wrap: anywhere; }
.contact-detail-fields { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 18px 16px; margin: 28px 0 22px; font-size: 12px; line-height: 1.8; }
.contact-detail-fields dt { color: #98a18f; }
.contact-detail-fields dd { margin: 0; color: #53614d; overflow-wrap: anywhere; white-space: pre-wrap; }
.contact-chat-button { display: block; width: 170px; border: 0; border-radius: 7px; background: #25a663; color: #fff; font-size: 13px; padding: 12px 18px; margin: 25px auto 0; }
.contact-chat-button:hover { background: #168d50; }
.contact-chat-button:disabled { background: #bdcdb9; color: #f5f8f2; }
.contact-chat-hint, .contact-detail-status { font-size: 10px; color: #93a08b; line-height: 1.8; text-align: center; }
.contact-detail-status { color: #9b9074; min-height: 0; }
@media (max-width: 720px) {
  .mobile-view-tabs { display: flex; flex-shrink: 0; padding: 8px 16px; gap: 8px; border-top: 1px solid var(--line); background: #f7f9f6; }
  .mobile-view-tabs button { flex: 1; background: transparent; border: 0; padding: 9px; color: #92a08b; font-size: 13px; border-radius: 6px; }
  .mobile-view-tabs button.active { background: #e5eee0; color: #3d8250; font-weight: 600; }
  .app-shell.contacts-mode .conversation-sidebar { display: flex; }
  .app-shell.contacts-mode .main-pane { display: none; }
  .app-shell.contacts-mode.contacts-open .conversation-sidebar { display: none; }
  .app-shell.contacts-mode.contacts-open .main-pane { display: block; }
  .addressbook-header { min-height: 78px; padding: 18px 22px; }
  .contact-detail-wrap { padding: 24px 16px; }
  .addressbook-profile { padding: 25px 22px; border-radius: 12px; }
  .contact-large-avatar { width: 62px; height: 62px; border-radius: 15px; font-size: 23px; }
  .contact-detail-heading { gap: 16px; }
  .contact-detail-heading h2 { font-size: 19px; }
  .contact-detail-fields { grid-template-columns: 78px minmax(0, 1fr); font-size: 11px; gap: 16px 12px; }
}

.card-redpacket.message-bubble, .card-transfer.message-bubble { border-color: #efd2ae; background: #fffaf3; }
.card-redpacket .message-card-kind, .card-transfer .message-card-kind { color: #a97942; border-color: #f0dfc9; }
.payment-main { display: flex; align-items: flex-start; gap: 13px; background: #ee9b3b; border-radius: 8px; padding: 17px 13px; }
.payment-icon { flex: 0 0 36px; width: 36px; height: 40px; border: 1px solid #ffdcaf; border-radius: 8px; display: grid; place-items: center; color: #fff7e8; font-size: 24px; }
.payment-copy { min-width: 0; }
.payment-main .message-card-title { color: #fff; font-size: 13px; }
.payment-main .message-card-description { color: #fff1db; }
.payment-amount { color: #fff; font-size: 23px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; margin-bottom: 4px; }
.card-redpacket .message-card-note, .card-transfer .message-card-note { color: #a78966; }
.card-redpacket .message-card-raw, .card-transfer .message-card-raw { border-color: #f0dfc9; }
.live-location-icon { color: #4e9273; background: #e4f2e8; }
.record-preview { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.record-details { margin-top: 13px; border-top: 1px solid #e2eadc; }
.record-details > summary { padding: 11px 0 0; font-size: 11px; color: #62884f; cursor: pointer; }
.record-list { list-style: none; padding: 0; margin: 5px 0 0; max-height: 380px; overflow-y: auto; }
.record-entry { padding: 12px 0; border-bottom: 1px solid #e7ecdf; }
.record-entry:last-child { border-bottom: 0; }
.record-entry-heading { display: flex; flex-direction: column; gap: 4px; }
.record-entry-name { font-size: 11px; color: #556e48; font-weight: 550; overflow-wrap: anywhere; }
.record-entry-time { color: #a1ab95; font-size: 9px; }
.record-entry-content { font-size: 11px; color: #8a967d; line-height: 1.8; margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.live-avatar { border-radius: 50%; }
.live-avatar-fallback { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #e8ecdf; color: #6b805c; }
.live-source-name { overflow-wrap: anywhere; }
.card-live .live-cover { max-height: 280px; object-fit: cover; object-position: center; border-radius: 8px; }
.card-finder .live-cover { display: block; width: 100%; max-height: 330px; object-fit: cover; object-position: center; border-radius: 8px; }
.finder-cover-stage { position: relative; margin-top: 10px; overflow: hidden; border-radius: 8px; background: #edf1e8; }
.finder-duration { position: absolute; right: 8px; bottom: 8px; border-radius: 5px; padding: 3px 6px; background: #263626b8; color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.game-entry-list { list-style: none; padding: 0; margin: 12px 0 0; }
.game-entry { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #e6ecdf; }
.game-entry-icon { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #eef2e8; }
.game-entry-copy { flex: 1; min-width: 0; }
.game-entry .message-card-link { margin-top: 4px; }
.live-footer { padding-top: 10px; color: #98723f; }

/* Moments keep their own timeline and composer, within the selected phone account. */
.moments-sidebar-copy { font-size: 12px; line-height: 1.9; margin: 0; color: #8b998b; }
.moments-targets { flex: 1; min-height: 0; padding: 10px 14px; }
.moments-target { display: block; width: 100%; padding: 18px 15px; text-align: left; color: #4b5b4c; background: transparent; border: 1px solid transparent; border-radius: 10px; font-size: 14px; margin-bottom: 8px; }
.moments-target span { display: block; margin-top: 8px; font-size: 11px; color: #95a18e; }
.moments-target.active { background: #e6eee0; border-color: #dce7d6; color: #33804d; }
.moments-target:hover { background: #edf2e8; }
.moments-target-summary { border-top: 1px solid var(--line); padding: 22px 15px; margin-top: 20px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; color: #8a997e; }
.moments-workspace { height: 100%; min-height: 0; display: flex; flex-direction: column; background: #f5f7f2; }
.moments-header { display: flex; align-items: center; gap: 14px; padding: 28px 36px; border-bottom: 1px solid var(--line); background: #fafbf8; }
.moments-header h2 { font-size: 24px; font-weight: 550; line-height: 1.4; margin: 8px 0 7px; overflow-wrap: anywhere; }
.moments-header p { color: #8d9b84; font-size: 11px; line-height: 1.6; margin: 0; }
.moments-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.moments-compose-open, .moment-publish-button { padding: 10px 15px; background: #259861; border: 0; border-radius: 7px; font-size: 12px; color: #fff; }
.moments-compose-open:hover, .moment-publish-button:hover { background: #16834f; }
.moments-compose-open:disabled, .moment-publish-button:disabled { background: #b5c8ae; }
.moments-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 36px 50px; }
.moments-sync-status, .moments-publish-status { max-width: 760px; margin: 0 auto 16px; font-size: 11px; line-height: 1.8; color: #91a083; overflow-wrap: anywhere; }
.moments-publish-status:empty { display: none; }
.moments-sync-status.error, .moments-publish-status.error { color: #b37a5c; }
.moments-posts { max-width: 760px; margin: 0 auto; }
.moment-post { background: #fff; padding: 27px 28px; border: 1px solid #e0e8d9; border-radius: 12px; margin-bottom: 18px; box-shadow: 0 3px 14px #54663b06; }
.moment-post-heading { display: flex; gap: 12px; align-items: center; }
.moment-avatar { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; }
.moment-author { color: #4e7565; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.moment-author:disabled { color: #63785e; cursor: default; }
.moment-author-copy { display: grid; flex: 1; min-width: 0; gap: 5px; }
.moment-author-nickname { color: #929292; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.moment-time { margin-left: auto; color: #a1ad96; font-size: 10px; flex-shrink: 0; }
.moment-post-text { font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; margin: 16px 0 18px; color: #3e4939; }
.moment-shared-card { max-width: 480px; margin: 16px 0 18px; padding: 15px; border: 1px solid #e1e9d9; border-radius: 9px; background: #f5f8f1; }
.moment-shared-card .message-card-title { font-size: 14px; }
.moment-shared-card .message-card-description { font-size: 12px; }
.moment-shared-card .message-card-note { margin-bottom: 0; }
.moment-interactions { margin-top: 18px; border-top: 1px solid #edf1e8; padding-top: 12px; }
.moment-interaction-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; justify-content: flex-end; }
.moment-interaction-actions > button { flex: 0 0 auto; white-space: nowrap; }
.moment-like-button, .moment-comment-button, .moment-interaction-check { border: 0; border-radius: 5px; background: #eef3e9; color: #587359; padding: 7px 10px; font-size: 12px; }
.moment-like-button.liked { color: #2c925e; background: #e4f2e6; }
.moment-like-button:disabled, .moment-comment-button:disabled { opacity: .5; cursor: default; }
.moment-interaction-hint, .moment-interaction-status { font-size: 11px; line-height: 1.8; color: #8d9b84; margin: 8px 0 0; overflow-wrap: anywhere; }
.moment-interaction-status.error { color: #b37a5c; }
.moment-interaction-check { margin-top: 7px; font-size: 11px; }
.moment-own-comments { background: #f2f5ee; border-radius: 5px; padding: 10px 12px; margin-top: 12px; }
.moment-own-comments-label { color: #91a083; font-size: 10px; }
.moment-own-comment { color: #53664c; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0 0; }
.moment-comment-form { display: flex; gap: 9px; align-items: flex-end; margin-top: 12px; }
.moment-comment-input { flex: 1; min-width: 0; border: 1px solid #dce5d4; border-radius: 6px; padding: 9px 10px; background: #fbfcf8; color: #3e4939; font: inherit; font-size: 12px; line-height: 1.6; resize: vertical; }
.moment-comment-submit { padding: 9px 12px; border: 0; border-radius: 6px; background: #259861; color: white; font-size: 12px; flex-shrink: 0; }
.moment-comment-submit:disabled { background: #b5c8ae; }
.moment-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 480px; margin-top: 16px; }
.moment-preview-toolbar { display: grid; gap: 7px; max-width: 480px; margin-top: 12px; }
.moment-preview-controls { display: flex; align-items: center; gap: 12px; }
.moment-preview-all { flex-shrink: 0; min-height: 34px; padding: 7px 12px; border: 1px solid #dcdcdc; border-radius: 4px; background: #f7f7f7; color: #07964b; font-size: 12px; }
.moment-preview-all:hover { background: #eeeeee; }.moment-preview-all:disabled { color: #999; background: #f4f4f4; cursor: default; }
.moment-preview-progress { width: 94px; height: 5px; border: 0; border-radius: 4px; overflow: hidden; background: #e8e8e8; accent-color: #07b65b; }
.moment-preview-progress::-webkit-progress-bar { background: #e8e8e8; border-radius: 4px; }.moment-preview-progress::-webkit-progress-value { background: #07b65b; border-radius: 4px; }.moment-preview-progress::-moz-progress-bar { background: #07b65b; border-radius: 4px; }
.moment-preview-summary, .moment-preview-hint { color: #919191; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 720px) { .moment-preview-all { min-height: 40px; }.moment-preview-toolbar { margin-top: 10px; } }
.moment-media { min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 5px; background: #edf1e8; position: relative; display: grid; place-items: center; }
.moment-media-grid.single { grid-template-columns: minmax(0, 340px); }
.moment-media-grid.single .moment-media { aspect-ratio: auto; min-height: 160px; max-height: 420px; }
.moment-media img, .moment-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.moment-media img[role="button"] { cursor: zoom-in; }
.moment-media img[role="button"]:focus-visible { outline: 3px solid #07c160; outline-offset: -3px; }
.moment-image-viewer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; color: #f5f5f5; background: #141414fa; overflow: hidden; }
.moment-image-viewer[open] { display: flex; flex-direction: column; }.moment-image-viewer::backdrop { background: #000b; }
.moment-viewer-header { display: flex; align-items: center; min-height: 64px; padding: 12px 28px; gap: 16px; flex-shrink: 0; }
.moment-viewer-header h2 { margin: 0; font-size: 14px; font-weight: 400; color: #c9c9c9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-viewer-close { margin-left: auto; border: 0; background: transparent; color: #ddd; width: 44px; height: 40px; font-size: 32px; border-radius: 4px; }.moment-viewer-close:hover { background: #ffffff17; }
.moment-viewer-content { display: flex; position: relative; flex: 1; min-height: 0; align-items: stretch; padding: 0 72px; }
.moment-viewer-stage { display: flex; flex: 1; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.moment-viewer-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }.moment-viewer-stage img[hidden] { display: none; }
.moment-viewer-stage.zoomed { display: block; touch-action: auto; }.moment-viewer-stage.zoomed img { max-width: none; max-height: none; margin: 0 auto; }
.moment-viewer-arrow { position: absolute; z-index: 1; top: calc(50% - 28px); width: 48px; height: 56px; border: 0; border-radius: 5px; background: #ffffff0a; color: #eee; font-size: 44px; line-height: 1; }.moment-viewer-arrow.previous { left: 12px; }.moment-viewer-arrow.next { right: 12px; }.moment-viewer-arrow:hover { background: #ffffff20; }.moment-viewer-arrow:disabled { color: #ffffff30; background: transparent; }
.moment-viewer-footer { display: flex; gap: 18px; align-items: center; min-height: 74px; padding: 16px 30px; color: #aaa; font-size: 12px; flex-shrink: 0; }.moment-viewer-tools { margin-left: auto; display: flex; gap: 10px; }.moment-viewer-tools button { border: 1px solid #ffffff30; border-radius: 4px; background: #ffffff0c; color: #ddd; padding: 9px 14px; font-size: 12px; }.moment-viewer-tools button:disabled { opacity: .4; cursor: default; }
@media (max-width: 720px) { .moment-viewer-header { min-height: 56px; padding: 8px 12px; }.moment-viewer-content { padding: 0 8px; }.moment-viewer-arrow { width: 34px; height: 44px; font-size: 34px; background: #0007; }.moment-viewer-arrow.previous { left: 8px; }.moment-viewer-arrow.next { right: 8px; }.moment-viewer-footer { flex-wrap: wrap; gap: 8px 12px; min-height: 84px; padding: 14px 16px max(14px,env(safe-area-inset-bottom)); }.moment-viewer-tools { gap: 8px; }.moment-viewer-tools button { padding: 10px 12px; } }
.moment-media-grid.single img, .moment-media-grid.single video { height: auto; max-height: 420px; object-fit: contain; }
.moment-video-load { position: absolute; z-index: 1; border: 1px solid #ffffff70; color: #fff; background: #263829c7; padding: 12px 20px; font-size: 12px; border-radius: 22px; }
.moment-media-note { text-align: center; padding: 24px; font-size: 11px; line-height: 1.8; color: #95a18b; }
.moment-media-fallback { display: grid; gap: 9px; justify-items: center; width: 100%; padding: 18px; }
.moment-media-fallback .moment-media-note { padding: 0; }
.moment-media-fetch { border: 1px solid #b6c6aa; border-radius: 5px; background: #f7f9f3; color: #446331; padding: 7px 10px; font-size: 11px; cursor: pointer; }
.moment-media-fetch:disabled { opacity: .55; cursor: default; }
.moment-media-status { font-size: 11px; color: #7e8c75; line-height: 1.6; overflow-wrap: anywhere; text-align: center; }
.moment-media-video .moment-video-cover + .moment-media-fallback { position: absolute; bottom: 0; left: 0; right: 0; background: #f5f7f0ed; padding: 14px; }
.moment-cover-unavailable .moment-video-load { position: static; margin: 10px; }
.moments-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; margin: 25px auto; }
.moment-compose { max-width: 760px; margin: 0 auto 22px; padding: 23px; background: #fff; border: 1px solid #cbdcc2; border-radius: 12px; }
.moment-compose-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.moment-compose-title h3 { font-size: 15px; font-weight: 550; margin: 0; }
.moment-compose textarea { width: 100%; resize: vertical; min-height: 110px; max-height: 360px; padding: 12px; border-radius: 7px; border: 1px solid #e0e8d7; background: #f9fbf6; font-size: 13px; line-height: 1.8; color: #43563b; }
.moment-compose textarea:focus { border-color: #99bc88; }
.moment-compose-bottom { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
.moment-compose-bottom > span { flex: 1; color: #9ba88d; font-size: 10px; line-height: 1.8; }
.contact-moments-button { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid #e8eee3; border-bottom: 1px solid #e8eee3; padding: 17px 0; margin-top: 18px; color: #557a5b; font-size: 13px; background: transparent; text-align: left; }
.contact-moments-button span { color: #b0bcaa; font-size: 23px; line-height: 1; }
@media (max-width: 900px) { .moments-header { padding: 24px; } .moments-scroll { padding: 18px 22px 40px; } .moment-post { padding: 22px; } .moment-time { font-size: 9px; } }
@media (max-width: 720px) {
  .app-shell.moments-mode .conversation-sidebar { display: flex; }
  .app-shell.moments-mode .main-pane { display: none; }
  .app-shell.moments-mode.moments-open .conversation-sidebar { display: none; }
  .app-shell.moments-mode.moments-open .main-pane { display: block; }
  .moments-header { padding: 17px 16px; gap: 8px; flex-wrap: wrap; }
  .moments-header h2 { font-size: 20px; max-width: 260px; }
  .moments-header-actions { width: 100%; justify-content: flex-end; }
  .moments-scroll { padding: 16px 12px 28px; }
  .moment-post { padding: 19px 16px; border-radius: 9px; }
  .moment-post-heading { gap: 9px; flex-wrap: wrap; }
  .moment-avatar { width: 35px; height: 35px; }
  .moment-author { flex: 1; font-size: 12px; }
  .moment-time { width: 100%; margin-left: 44px; }
  .moment-post-text { font-size: 13px; }
  .moment-compose { padding: 18px 15px; }
}
.moment-image-tools { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.moment-image-tools > span { color: #9ba88d; font-size: 10px; line-height: 1.8; }
.moment-attachments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.moment-attachments:empty { display: none; }
.moment-attachment { position: relative; min-width: 0; border: 1px solid #dde7d5; border-radius: 7px; background: #f5f8f0; overflow: hidden; }
.moment-attachment img, .moment-attachment-placeholder { width: 100%; height: 136px; object-fit: cover; display: block; }
.moment-attachment-placeholder { display: grid; place-items: center; font-size: 11px; color: #97a58d; padding: 15px; text-align: center; }
.moment-attachment-remove { position: absolute; right: 5px; top: 5px; border: 0; border-radius: 50%; width: 23px; height: 23px; background: #34452bc9; color: #fff; line-height: 1; font-size: 18px; }
.moment-attachment-name { display: block; padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: #879a76; }
.moment-attachment-error { display: block; padding: 0 9px 9px; font-size: 10px; line-height: 1.7; color: #b87959; overflow-wrap: anywhere; }
@media (max-width: 720px) { .moment-attachments { gap: 6px; } .moment-attachment img, .moment-attachment-placeholder { height: 100px; } .moment-image-tools { gap: 8px; align-items: flex-start; } }

/* Mobile workspace: independent root tabs and full-screen detail pages. */
@media (max-width: 720px), (max-width: 950px) and (max-height: 500px) {
  :root { --green: #07c160; --green-dark: #06ad56; --line: #e5e5e5; }
  body { background: #ededed; overflow: hidden; }
  .app-shell, .app-shell.with-details { height: var(--app-height, 100dvh); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: #ededed; }
  .rail { display: none; }.mobile-back { display: grid; }
  .conversation-sidebar { display: flex; min-width: 0; grid-area: 1 / 1; border: 0; background: #fff; }
  .main-pane { display: none; min-width: 0; grid-area: 1 / 1; background: #ededed; }
  .app-shell.chat-open .conversation-sidebar { display: none; }.app-shell.chat-open .main-pane { display: block; }
  .app-shell.contacts-mode .conversation-sidebar, .app-shell.moments-mode .conversation-sidebar { display: flex; }
  .app-shell.contacts-mode .main-pane, .app-shell.moments-mode .main-pane { display: none; }
  .app-shell.contacts-mode.contacts-open .conversation-sidebar, .app-shell.moments-mode.moments-open .conversation-sidebar { display: none; }
  .app-shell.contacts-mode.contacts-open .main-pane, .app-shell.moments-mode.moments-open .main-pane { display: block; }
  .app-shell.discover-mode .conversation-sidebar, .app-shell.me-mode .conversation-sidebar { display: none; }
  .app-shell.discover-mode .main-pane, .app-shell.me-mode .main-pane { display: block; }
  .mobile-view-tabs { grid-area: 2 / 1; display: flex; flex-shrink: 0; gap: 0; padding: 5px 0 calc(5px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #ddd; background: #f7f7f7; z-index: 20; }
  .mobile-view-tabs button { flex: 1; min-height: 49px; padding: 3px 0; border: 0; border-radius: 0; background: none; color: #202020; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; line-height: 1.3; }
  .mobile-view-tabs button.active { background: none; color: #07b65b; font-weight: 500; }
  .mobile-view-tabs svg { width: 25px; height: 25px; stroke-width: 1.7; }
  .mobile-tab-icon { position: relative; display: flex; }
  .mobile-nav-badge { position: absolute; left: 17px; top: -5px; padding: 1px 4px; min-width: 16px; height: 16px; border-radius: 9px; background: #fa5151; color: #fff; font-size: 9px; line-height: 14px; }
  .app-shell.chat-open:not(.contacts-mode):not(.moments-mode):not(.discover-mode):not(.me-mode) > .mobile-view-tabs,
  .app-shell.contacts-mode.contacts-open > .mobile-view-tabs,
  .app-shell.moments-mode.moments-open > .mobile-view-tabs { display: none; }
  .sidebar-header { background: #ededed; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px; flex-shrink: 0; }
  .title-row { margin-bottom: 10px; min-height: 28px; }.title-row h1 { font-size: 21px; font-weight: 600; letter-spacing: 0; }.small-label { font-size: 9px; border-color: #dcdcdc; color: #838383; }
  .sidebar-header .workspace-owner, .sidebar-header .device-label, .sidebar-header .device-caption, .sidebar-header .wechat-device-profile, .sidebar-header .small-label, .connection-footer { display: none; }
  .device-selector { margin-bottom: 9px; height: 36px; border: 0; border-radius: 7px; background: #f8f8f8; padding-left: 11px; }
  .device-selector select { height: 36px; font-size: 12px; color: #6b6b6b; }
  .search-box { height: 36px; border-radius: 7px; background: #fff; }.search-box input { font-size: 14px; }
  .sidebar-actions { margin-top: 6px; min-height: 28px; }.sidebar-actions button { font-size: 11px; min-height: 30px; }.session-sync-status { margin: 2px 0 0; font-size: 9px; max-height: 28px; overflow: hidden; }
  .conversation-list, .contacts-list { padding: 0; background: #fff; }
  .conversation-item { border: 0; border-radius: 0; margin: 0; min-height: 79px; padding: 13px 16px; gap: 12px; background: #fff; position: relative; }
  .conversation-item::after { content: ''; position: absolute; height: 1px; background: #eee; bottom: 0; left: 78px; right: 0; }
  .conversation-item.selected { background: #fff; }.conversation-item:active, .contact-row:active { background: #e5e5e5; }
  .conversation-item.pinned { background: #f7f7f7; }.conversation-name { color: #191919; font-size: 16px; font-weight: 500; }.conversation-preview { color: #999; font-size: 12px; margin-top: 5px; }.conversation-time { color: #aaa; font-size: 10px; }.conversation-badge { font-size: 9px; }
  .conversation-item .avatar { width: 49px; height: 49px; border-radius: 6px; font-size: 19px; }.unread-badge { background: #fa5151; }
  .chat-header { min-height: 56px; flex-shrink: 0; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; gap: 8px; background: #ededed; }
  .chat-header .header-avatar { display: none; }.chat-header .mobile-back { margin: 0; width: 32px; min-height: 44px; color: #1d1d1d; }
  .chat-heading h2 { font-size: 17px; font-weight: 550; }.chat-heading p, .chat-title-row .kind-badge { display: none; }
  .chat-header-actions { gap: 1px; }.header-action { width: 35px; min-height: 44px; justify-content: center; color: #222; }.header-action svg { width: 21px; height: 21px; }.header-action .count-badge { position: absolute; right: -2px; top: 1px; }
  .mobile-chat-tools { display: inline-flex; }#openMenusButton { display: none; }
  .message-search, .phone-history-toolbar, .history-toolbar { display: none; }
  .mobile-tools-open .message-search { display: flex; padding: 8px 12px; }
  .mobile-tools-open .phone-history-toolbar, .mobile-tools-open .history-toolbar { display: flex; flex-wrap: wrap; padding: 6px 12px; font-size: 10px; }
  .mobile-tools-open .message-search input { font-size: 14px; min-height: 35px; }
  .chat-notice { font-size: 10px; padding: 6px 14px; max-height: 48px; overflow-y: auto; }
  .timeline-wrap { min-height: 0; }.message-list { padding: 18px 12px; background: #ededed; overscroll-behavior: contain; }
  .message-row { gap: 9px; margin-bottom: 19px; }.message-avatar { height: 38px; width: 38px; border-radius: 5px; }
  .message-content { max-width: calc(100% - 57px); }.message-bubble { font-size: 15px; line-height: 1.55; border: 0; border-radius: 5px; padding: 11px 12px; color: #191919; }.outgoing .message-bubble { border-radius: 5px; background: #95ec69; color: #161e14; }
  .message-bubble.message-card { width: min(290px, 100%); }.message-card-body { padding: 11px 12px; }.message-card-title { color: #292929; font-size: 14px; }.message-card-description { font-size: 12px; }.message-card-note { font-size: 10px; }
  .message-foot { font-size: 9px; }.message-sender { font-size: 11px; color: #8c8c8c; }.message-media { min-width: 0; max-width: 100%; }.message-media audio { width: min(230px, 100%); }.date-divider { margin-bottom: 18px; }.date-divider span { background: transparent; color: #aaa; }
  .chat-bottom-bar { display: flex; align-items: flex-end; border-top: 1px solid #d9d9d9; background: #f7f7f7; padding-bottom: env(safe-area-inset-bottom, 0px); overflow: visible; z-index: 15; }
  .chat-bottom-content { flex: 1; overflow: visible; }.phone-input-toggle { display: block; align-self: stretch; flex: 0 0 46px; width: 46px; min-height: 52px; padding: 0; border: 0; border-right: 1px solid #e2e2e2; background: #f7f7f7; color: #333; font-size: 24px; }
  .composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 7px 9px; border: 0; background: #f7f7f7; }
  .composer-toolbar, .composer-bottom > #composerHint { display: none; }.composer textarea { grid-column: 1; width: 100%; min-height: 40px; height: 40px; max-height: 120px; padding: 10px; background: #fff; border: 0; border-radius: 5px; resize: none; font-size: 16px; line-height: 20px; }
  .composer-bottom { grid-column: 2; padding: 0; margin: 0; }.send-button { min-height: 40px; padding: 8px 12px; border-radius: 5px; background: #07c160; color: #fff; font-size: 14px; }.send-button svg { display: none; }.send-button:disabled { opacity: .45; }
  .phone-menu { padding: 0; border: 0; background: #f7f7f7; overflow: visible; }.phone-menu-caption { gap: 5px; padding: 0 8px; min-height: 32px; font-size: 9px; }.phone-menu-caption > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.phone-menu-caption button { font-size: 10px; min-height: 32px; }
  .phone-menu-bar { min-height: 48px; }.phone-menu-button { min-height: 48px; padding: 10px 3px; color: #272727; font-size: 13px; border-color: #dedede; }.phone-menu-button[aria-expanded="true"] { color: #07b65b; background: #e8eee6; }
  .phone-submenu { bottom: calc(100% + 8px); min-width: 116px; max-height: min(45dvh, 340px); overflow-y: auto; border-color: #d8d8d8; border-radius: 7px; box-shadow: 0 4px 24px #0002; }.phone-submenu-button { min-height: 46px; padding: 13px 8px; color: #222; font-size: 13px; }
  .public-chat.menu-mode .composer, .public-chat.input-mode .phone-menu { display: none; }
  .details-panel { position: absolute; inset: 0; width: 100%; z-index: 40; box-shadow: none; }.details-header { min-height: 60px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }.details-content { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .contacts-filter { gap: 4px; overflow-x: auto; }.contacts-filter button { font-size: 12px; padding: 8px; flex-shrink: 0; }.contact-row { border-radius: 0; padding: 12px 16px; min-height: 66px; }.contact-row-name { font-size: 16px; color: #202020; }.contact-group-letter { padding-left: 16px; background: #ededed; }.addressbook-header { min-height: 58px; padding: 8px 16px; background: #ededed; }.addressbook-header h2 { font-size: 17px; }.contact-detail-wrap { padding: 25px 18px; background: #ededed; }.addressbook-profile { border-radius: 10px; padding: 22px 18px; background: #fff; }.contact-chat-button { background: #07c160; }
  .mobile-page-header { min-height: 58px; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 14px; }.mobile-page-header h1 { font-size: 21px; }.mobile-cell { min-height: 58px; }.mobile-self-card { padding: 30px 22px; }
  .moments-header { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; gap: 8px; min-height: 64px; background: #ededed; }.moments-header .eyebrow { display: none; }.moments-header h2 { font-size: 17px; }.moments-header p { font-size: 10px; margin-top: 4px; }.moments-header-actions { gap: 5px; }.moments-header-actions button { padding: 8px; font-size: 11px; min-height: 40px; }
  .moments-scroll { padding: 12px 10px calc(25px + env(safe-area-inset-bottom, 0px)); }.moment-post { border: 0; box-shadow: none; padding: 18px 13px; margin-bottom: 9px; border-radius: 6px; }.moment-media-grid { max-width: 100%; gap: 4px; }.moment-post-text { font-size: 15px; line-height: 1.7; }.moment-author { font-size: 14px; }.moment-time { font-size: 9px; }.moment-interaction-actions button { min-height: 40px; }.moment-raw pre { max-width: 100%; }.moment-compose { padding: 15px; }.moment-compose textarea { font-size: 16px; }.moment-compose-bottom { flex-wrap: wrap; }
  .toast-stack { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 28px); }.keyboard-open .chat-bottom-bar { padding-bottom: 0; }
}

.moment-repost { text-align: right; }
.moment-repost:empty { display: none; }
.moment-repost-button, .moment-repost-close, .moment-raw-copy, .moment-raw-download { border: 0; border-radius: 5px; background: #eef3e9; color: #587359; padding: 7px 10px; font-size: 12px; }
.moment-repost-preview { margin-top: 12px; border: 1px solid #dce5d4; background: #f9fbf6; padding: 15px; border-radius: 7px; text-align: left; }
.moment-repost-preview h4 { margin: 0 0 10px; font-size: 13px; color: #53664c; }
.moment-repost-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; }
.moment-repost-media-count, .moment-repost-hint, .moment-repost-status { font-size: 11px; line-height: 1.8; color: #8d9b84; overflow-wrap: anywhere; }
.moment-repost-submit { border: 0; padding: 9px 12px; border-radius: 5px; background: #259861; color: white; font-size: 12px; margin-right: 8px; }
.moment-repost-submit:disabled { background: #b5c8ae; cursor: default; }
.moment-raw-information { margin-top: 12px; border-top: 1px solid #edf1e8; padding-top: 10px; font-size: 11px; color: #8d9b84; }
.moment-raw-information summary { cursor: pointer; }
.moment-raw-json { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #f6f8f2; padding: 12px; font-size: 11px; line-height: 1.6; }
.moment-raw-copy, .moment-raw-download { margin-right: 7px; font-size: 11px; }
.moment-live-photo-label { position: absolute; left: 8px; bottom: 8px; font-size: 10px; border-radius: 4px; padding: 4px 6px; color: white; background: #263829b8; pointer-events: none; }

.moment-live-photo-wrapper { min-width: 0; position: relative; }