@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
:root {
  --paper: #fffdfa; --ink: #101114; --ink-soft: #303238; --muted: #747982;
  --line: #d8d9dc; --line-strong: #b9bcc2; --coral: #ff554d; --coral-hover: #ed443d;
  --coral-soft: #ffe4e1; --blue: #1877f2; --blue-soft: #e5f2ff; --green: #27814e;
  --green-soft: #e1f2e5; --message-blue: #eaf5ff; --message-green: #edf8f0; --message-gray: #f4f4f3;
  --shadow-dialog: 0 30px 80px rgba(24,22,18,.18);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(24,119,242,.32); outline-offset: 3px; }
.hidden { display: none !important; }
.brand-button { appearance: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 10px; padding: 0; cursor: pointer; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; }
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
.brand-lockup img { width: 32px; height: 32px; object-fit: contain; }
.brand-lockup strong { letter-spacing: -.03em; }
.site-header { position: relative; z-index: 10; width: min(100% - 96px,1500px); min-height: 88px; margin: 0 auto; display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(280px,1fr); align-items: center; gap: 32px; border-bottom: 1px solid var(--line); }
.site-nav { display: flex; align-items: center; gap: 34px; height: 100%; }
.nav-link { position: relative; height: 100%; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 650; cursor: pointer; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--coral); transform: scaleX(0); transition: transform 160ms ease; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.header-actions, .room-global-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.language-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.72); }
.lang-option { min-width: 48px; min-height: 38px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.lang-option.active { background: var(--coral); color: #fff; }
.button { min-height: 48px; border: 1px solid transparent; border-radius: 12px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 760; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: var(--coral); border-color: var(--coral); }
.button-primary:hover { background: var(--coral-hover); border-color: var(--coral-hover); }
.button-small { min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 13px; }
.button-quiet { color: var(--ink); background: #fff; border-color: var(--line); }
.button-quiet:hover { background: #f7f7f6; border-color: var(--line-strong); }
.hero { width: min(100% - 96px,1500px); min-height: 800px; margin: 0 auto; padding: 34px 0 28px; display: grid; grid-template-columns: minmax(430px,.86fr) minmax(680px,1.72fr); gap: 24px; align-items: center; }
.hero-copy { padding: 18px 0 8px; transform: translateY(-34px); }
.eyebrow { margin: 0 0 28px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.hero h1, .section-intro h2 { margin: 0; font-family: var(--display); font-size: clamp(62px,5.6vw,84px); line-height: .92; letter-spacing: 0; font-weight: 800; }
.no-wrap { white-space: nowrap; }
html:lang(zh-CN) .hero h1 { font-size: clamp(60px,4.8vw,72px); line-height: 1.04; letter-spacing: -.045em; }
.hero-description { max-width: 500px; margin: 30px 0 34px; color: var(--ink-soft); font-size: clamp(17px,1.25vw,21px); line-height: 1.48; letter-spacing: -.02em; }
.hero-cta { width: min(100%,410px); min-height: 72px; padding: 0 28px; border-radius: 13px; font-size: 19px; }
.hero-cta .ph-arrow-right { margin-left: auto; }
.privacy-proof { margin-top: 30px; display: flex; align-items: flex-start; gap: 14px; color: var(--green); }
.privacy-proof > i { margin-top: 2px; font-size: 22px; }
.privacy-proof div { display: flex; flex-direction: column; gap: 5px; }
.privacy-proof strong { color: var(--ink); font-size: 14px; }
.privacy-proof span { max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-preview { height: 720px; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 210px minmax(0,1fr); background: #fff; }
.preview-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fffdfa; }
.preview-status, .sidebar-presence { min-height: 92px; padding: 24px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.status-dot, .dot, .mobile-status-dot, .online-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.preview-status div, .sidebar-presence div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.preview-status strong, .sidebar-presence strong { font-size: 13px; }
.preview-status span:last-child, .sidebar-presence span:last-child { color: var(--muted); font-size: 12px; }
.device-list { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; }
.device-item { position: relative; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.device-item.selected { background: var(--coral-soft); }
.device-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px; }
.device-avatar.coral { background: #ffd0cb; color: #8e2420; }
.device-avatar.blue { background: var(--blue-soft); color: var(--blue); }
.device-item > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.device-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.device-item div span { color: var(--muted); font-size: 11px; }
.preview-side-note { margin: auto 16px 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.preview-side-note i { color: var(--green); font-size: 17px; }
.preview-conversation { min-width: 0; display: flex; flex-direction: column; background: #fff; }
.preview-header { min-height: 92px; padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.preview-header > div { display: flex; flex-direction: column; gap: 3px; }
.preview-kicker { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.preview-header strong { font-size: 16px; }
.preview-action, .preview-message button, .preview-file-row button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.preview-feed { flex: 1; min-height: 0; overflow: hidden; padding: 18px 28px 16px 20px; display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 12px 14px; align-content: start; }
.preview-feed time { align-self: start; padding-top: 10px; color: var(--muted); font-size: 10px; text-align: right; }
.preview-message { position: relative; min-width: 0; border-radius: 12px; padding: 14px 16px; }
.text-preview { min-height: 90px; background: var(--message-blue); }
.image-preview { min-height: 210px; background: var(--message-green); }
.file-preview { background: var(--message-gray); }
.content-label { margin-bottom: 12px; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.content-label i { color: var(--blue); font-size: 15px; }
.preview-message-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.preview-message > button { position: absolute; right: 12px; top: 39px; }
.image-preview img { display: block; width: min(100%,340px); height: 142px; object-fit: cover; border-radius: 8px; }
.image-preview > button { top: auto; bottom: 14px; }
.preview-file-row { min-height: 66px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 12px; }
.file-type-icon { width: 38px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: var(--blue); color: #fff; font-size: 21px; }
.preview-file-row > div { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.preview-file-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.preview-file-row div span { color: var(--muted); font-size: 10px; }
.preview-composer { min-height: 82px; padding: 12px 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(0,1fr) 46px; gap: 10px; align-items: center; }
.preview-attach, .preview-send { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font-size: 18px; }
.preview-send { width: 46px; color: #fff; background: var(--coral); border-color: var(--coral); }
.preview-placeholder { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; color: #9a9da4; font-size: 12px; }
.benefit-strip { width: min(100% - 96px,1500px); margin: 0 auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.benefit-strip article { min-height: 142px; padding: 28px 34px; display: flex; align-items: center; gap: 18px; }
.benefit-strip article + article { border-left: 1px solid var(--line-strong); }
.benefit-icon { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 25px; }
.coral-soft { color: var(--coral); background: var(--coral-soft); }.green-soft { color: var(--green); background: var(--green-soft); }.blue-soft { color: var(--blue); background: var(--blue-soft); }
.benefit-strip h2 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.02em; }
.benefit-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.explain-section, .privacy-section { width: min(100% - 96px,1500px); margin: 0 auto; padding: 120px 0; display: grid; grid-template-columns: .9fr 1.45fr; gap: clamp(60px,9vw,150px); }
.section-intro h2 { font-size: clamp(50px,4.6vw,76px); }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.steps li { min-height: 124px; padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 58px 1fr; gap: 24px; }
.steps > li > span { color: var(--coral); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.steps h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.03em; }
.steps p { max-width: 530px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.privacy-section { margin-bottom: 90px; padding: 90px; border: 1px solid var(--line-strong); border-radius: 18px; grid-template-columns: 1fr 1fr; background: #f5f7f4; }
.large-lock { width: 64px; height: 64px; margin-bottom: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 28px; }
.privacy-heading h2 { max-width: 540px; margin: 0; font-size: clamp(38px,4vw,66px); line-height: 1.02; letter-spacing: -.06em; }
.privacy-copy { align-self: end; }
.privacy-copy p { max-width: 570px; margin: 0 0 30px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.text-button { padding: 8px 0; border: 0; border-bottom: 2px solid var(--coral); background: transparent; display: inline-flex; align-items: center; gap: 12px; font-weight: 800; cursor: pointer; }
.resources-section { width: min(100% - 96px,1500px); margin: 0 auto 120px; padding-top: 8px; }
.resources-heading { max-width: 720px; margin-bottom: 42px; }
.resources-heading .eyebrow { margin-bottom: 18px; }
.resources-heading h2 { margin: 0 0 18px; font-size: clamp(38px,4vw,62px); line-height: 1; letter-spacing: -.055em; }
.resources-heading > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.resource-grid { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3,1fr); }
.resource-card { position: relative; min-height: 250px; padding: 30px 34px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background 160ms ease; }
.resource-card + .resource-card { border-left: 1px solid var(--line); }
.resource-card:hover { background: #fff4f1; }
.resource-card > span { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.resource-card h3 { max-width: 290px; margin: 54px 0 10px; font-size: 23px; letter-spacing: -.035em; }
.resource-card p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.resource-card > i { position: absolute; top: 30px; right: 32px; font-size: 20px; }
.site-footer { width: min(100% - 96px,1500px); min-height: 112px; margin: 0 auto; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; color: var(--muted); font-size: 13px; }
.site-footer > span { justify-self: end; }
.footer-copy { text-align: center; }.footer-copy > p { margin: 0 0 8px; }.legal-links { display: flex; align-items: center; justify-content: center; gap: 16px; }.legal-links a { color: inherit; text-underline-offset: 3px; }.legal-links a:hover { color: var(--coral); }
.analytics-privacy-note { margin-top: 18px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
.analytics-settings { padding: 0; border: 0; color: var(--muted); background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.guide-footer .analytics-settings { color: inherit; }
.analytics-consent { position: fixed; right: 24px; bottom: 24px; z-index: 200; width: min(calc(100% - 48px),560px); padding: 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fffdfa; box-shadow: var(--shadow-dialog); display: flex; align-items: center; gap: 24px; }
.analytics-consent-copy { min-width: 0; flex: 1; }
.analytics-consent-copy strong { display: block; margin-bottom: 6px; font-size: 15px; }
.analytics-consent-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.analytics-consent-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.analytics-consent-actions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; }
.analytics-consent-actions .analytics-accept { border-color: var(--coral); background: var(--coral); color: #fff; }
.start-dialog { width: min(calc(100% - 32px),540px); padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-dialog); }
.start-dialog::backdrop { background: rgba(16,17,20,.44); backdrop-filter: blur(5px); }
.start-dialog[open] { animation: dialog-in 180ms ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog-topline { min-height: 72px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.icon-control, .reveal-btn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.dialog-copy { padding: 38px 38px 22px; }
.dialog-copy .eyebrow { margin-bottom: 16px; }
.dialog-copy h2 { margin: 0 0 14px; font-size: 38px; letter-spacing: -.05em; }
.dialog-copy > p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
#join-form { padding: 0 38px 22px; }
#join-form label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 750; }
.pass-field { position: relative; }
.pass-field input { width: 100%; height: 58px; padding: 0 58px 0 16px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--ink); background: #fff; }
.pass-field input::placeholder { color: #a3a6ac; }
.reveal-btn { position: absolute; top: 9px; right: 9px; border: 0; background: transparent; }
.dialog-submit { width: 100%; margin-top: 14px; }
.dialog-security { min-height: 58px; padding: 0 38px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; }
.leave-dialog { width: min(calc(100% - 32px),440px); padding: 28px; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-dialog); }
.leave-dialog::backdrop { background: rgba(16,17,20,.44); backdrop-filter: blur(5px); }
.leave-dialog[open] { animation: dialog-in 180ms ease-out; }
.leave-dialog-icon { width: 44px; height: 44px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 50%; color: #a82f29; background: #ffe2de; font-size: 22px; }
.leave-dialog-copy h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.035em; }
.leave-dialog-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.leave-dialog-actions { margin-top: 26px; display: flex; justify-content: flex-end; gap: 10px; }
.button-danger { border-color: #a82f29; background: #a82f29; color: #fff; }
.room { height: 100dvh; min-height: 620px; padding: 0 38px 34px; display: flex; flex-direction: column; background: var(--paper); overflow: hidden; }
.room-global-header { flex: 0 0 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.room-global-header .brand-button { font-size: 19px; }.room-global-header .brand-mark { width: 36px; height: 36px; }
.room-shell { flex: 1; min-height: 0; width: min(100%,1440px); margin: 28px auto 0; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 258px minmax(0,1fr); background: #fff; }
.room-sidebar { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fffdfa; }
.sidebar-presence { min-height: 86px; padding: 20px; }
.dot.off { background: #d19a37; animation: pulse 1.2s infinite; }.dot.on { background: var(--green); animation: none; }
@keyframes pulse { 50% { opacity: .4; } }
.sidebar-room-info { padding: 24px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.sidebar-room-info span, .sidebar-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-room-info strong { font-size: 17px; }.sidebar-label { padding: 24px 20px 8px; }.room-device-list { padding: 4px 10px; }
.online-dot { position: absolute; right: 14px; width: 8px; height: 8px; }.remote-device { opacity: .6; }
.sidebar-security { margin: auto 18px 18px; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; color: var(--green); }
.sidebar-security > i { margin-top: 2px; font-size: 19px; }.sidebar-security p { margin: 0; display: flex; flex-direction: column; gap: 5px; }.sidebar-security strong { color: var(--ink); font-size: 12px; }.sidebar-security span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.room-header { flex: 0 0 86px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.room-heading p { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }.room-heading h1 { margin: 0; font-size: 21px; letter-spacing: -.04em; }.room-title-mobile { display: none; }
.messages-wrap { position: relative; flex: 1; min-height: 0; background: #fff; }.messages { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 34px; scroll-behavior: smooth; }.messages::-webkit-scrollbar { width: 8px; }.messages::-webkit-scrollbar-thumb { background: #d9dadd; border-radius: 999px; border: 2px solid #fff; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; pointer-events: none; }
.empty-icon { width: 52px; height: 52px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--coral); background: var(--coral-soft); font-size: 22px; }.empty-title { margin: 0 0 7px; color: var(--ink); font-size: 16px; font-weight: 750; }.empty-state > p:last-child { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.drop-hint { position: absolute; inset: 16px; z-index: 20; border: 2px dashed var(--coral); border-radius: 14px; background: rgba(255,253,250,.94); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--coral); }.drop-hint i { font-size: 40px; }.drop-hint strong { color: var(--ink); }.drop-hint span { color: var(--muted); font-size: 12px; }
.msg { width: min(100%,760px); margin: 0 0 22px; display: flex; align-items: flex-start; }.msg.mine { margin-left: auto; justify-content: flex-end; }.msg .avatar { display: none; }.msg .col { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }.msg.mine .col { align-items: flex-end; }
.bubble { position: relative; min-width: 220px; max-width: 100%; padding: 15px 16px; border-radius: 13px; background: var(--message-gray); color: var(--ink); line-height: 1.55; font-size: 15px; overflow-wrap: anywhere; }.msg.mine .bubble { background: var(--message-blue); }
.msg-kind { margin-bottom: 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.msg-kind i { color: var(--blue); font-size: 15px; }.msg.mine .msg-kind i { color: var(--coral); }.message-text { white-space: pre-wrap; }.message-text a { color: #075fc7; text-decoration-color: rgba(7,95,199,.38); text-underline-offset: 3px; }.meta { margin-top: 6px; color: #9a9da4; font-size: 10px; }
.msg-actions { min-height: 28px; margin-top: 12px; display: flex; gap: 8px; }.msg-actions button { min-height: 30px; padding: 0 11px; border: 1px solid rgba(16,17,20,.13); border-radius: 8px; background: rgba(255,255,255,.72); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 700; }.msg-actions button:hover { background: #fff; }
.file-wrap { min-width: min(520px,70vw); }.file-card { display: flex; align-items: center; gap: 12px; }.file-icon { width: 46px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--blue); font-size: 22px; }.file-info { min-width: 0; flex: 1; }.file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 760; }.file-size { margin-top: 3px; color: var(--muted); font-size: 11px; }.file-expiry { margin-top: 11px; color: var(--muted); font-size: 10px; }.file-wrap.expired { opacity: .62; }.file-wrap.expired .file-icon { background: #999; }
.secure-image-preview { width: min(100%,520px); margin: 10px 0 0; display: block; border-radius: 9px; border: 1px solid rgba(16,17,20,.12); background: #e7e7e5; object-fit: cover; max-height: 360px; }.image-loading { min-height: 150px; margin-top: 10px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.5); color: var(--muted); font-size: 12px; }
.progress { height: 5px; background: rgba(16,17,20,.12); border-radius: 999px; margin-top: 12px; overflow: hidden; }.progress > i { display: block; height: 100%; width: 0; background: var(--coral); border-radius: inherit; transition: width .15s; }
.composer-wrap { flex: 0 0 auto; padding: 14px 18px 12px; border-top: 1px solid var(--line); background: #fffdfa; }.composer { display: grid; grid-template-columns: 46px minmax(0,1fr) 48px; gap: 10px; align-items: end; }.composer-icon, .send-btn { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 19px; }.send-btn { width: 48px; color: #fff; background: var(--coral); border-color: var(--coral); }.composer textarea { width: 100%; min-height: 46px; max-height: 140px; resize: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; line-height: 1.45; }.composer textarea::placeholder { color: #a3a6ac; }
.composer-hint { margin: 8px 0 0 56px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }.composer-hint span:last-child { color: var(--green); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translateX(-50%); min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-dialog); font-size: 13px; animation: toast-in .2s ease; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } }
@media (max-width:1100px) {
  .site-header,.hero,.benefit-strip,.explain-section,.privacy-section,.resources-section,.site-footer { width: min(100% - 48px,1500px); }.site-header { grid-template-columns: 1fr auto; }.site-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 72px; }.hero-copy { max-width: 720px; transform: none; }.hero h1 { font-size: clamp(58px,9vw,90px); }.product-preview { height: 680px; }.benefit-strip { margin-top: 38px; }.benefit-strip article { padding: 24px 20px; }.explain-section { grid-template-columns: 1fr 1.2fr; }.privacy-section { padding: 64px; }
  .room { padding: 0 20px 20px; }.room-shell { grid-template-columns: 220px minmax(0,1fr); }
}
@media (max-width:760px) {
  .site-header,.hero,.benefit-strip,.explain-section,.privacy-section,.resources-section,.site-footer { width: min(100% - 32px,1500px); }.site-header { min-height: 72px; gap: 12px; }.brand-button { font-size: 19px; }.brand-mark { width: 34px; height: 34px; }.header-actions { gap: 8px; }.header-start { display: none; }.language-switch .lang-option { min-width: 43px; padding: 0 9px; }
  .hero { min-height: auto; padding: 66px 0 26px; }.hero h1 { font-size: clamp(52px,16vw,76px); }html:lang(zh-CN) .hero h1 { font-size: clamp(50px,14.2vw,58px); letter-spacing: -.04em; }.hero-description { font-size: 17px; }.hero-cta { min-height: 62px; font-size: 16px; }
  .product-preview { height: 600px; grid-template-columns: 1fr; }.preview-sidebar { display: none; }.preview-feed { padding: 16px; grid-template-columns: minmax(0,1fr) 40px; }
  .benefit-strip { grid-template-columns: 1fr; }.benefit-strip article { min-height: 116px; }.benefit-strip article + article { border-left: 0; border-top: 1px solid var(--line); }
  .explain-section { padding: 88px 0; grid-template-columns: 1fr; gap: 58px; }.section-intro h2 { font-size: 52px; }.privacy-section { margin-bottom: 60px; padding: 42px 28px; grid-template-columns: 1fr; gap: 54px; }.privacy-heading h2 { font-size: 42px; }.privacy-copy p { font-size: 16px; }
  .site-footer { padding: 30px 0; grid-template-columns: 1fr; gap: 14px; }.site-footer > span { justify-self: start; }.dialog-copy,#join-form { padding-left: 24px; padding-right: 24px; }.dialog-security { padding: 0 24px; }
  .resources-section { margin-bottom: 76px; }.resource-grid { grid-template-columns: 1fr; }.resource-card { min-height: 210px; padding: 26px 24px; }.resource-card + .resource-card { border-left: 0; }.resource-card h3 { margin-top: 44px; }.resource-card > i { top: 26px; right: 24px; }
  .room { min-height: 540px; padding: 0; }.room-global-header { flex: 0 0 66px; padding: 0 14px; }.room-global-header .language-switch { display: none; }.room-global-header .brand-button span { display: none; }.room-global-actions { gap: 8px; }
  .room-shell { margin: 0; width: 100%; border: 0; border-radius: 0; grid-template-columns: 1fr; }.room-sidebar { display: none; }.room-header { flex: 0 0 74px; padding: 0 14px; }.room-heading { display: none; }.room-title-mobile { display: flex; flex-direction: column; gap: 4px; font-weight: 750; }.room-title-mobile small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 550; }.mobile-status-dot { width: 7px; height: 7px; }
  .messages { padding: 20px 14px 24px; }.msg { width: 100%; }.bubble { min-width: 0; max-width: 92%; }.file-wrap { min-width: min(100%,78vw); }.composer-wrap { padding: 10px 10px max(9px,env(safe-area-inset-bottom)); }.composer { grid-template-columns: 44px minmax(0,1fr) 46px; gap: 7px; }.composer-hint { display: none; }
  .analytics-consent { right: 16px; bottom: 16px; width: calc(100% - 32px); padding: 18px; align-items: stretch; flex-direction: column; gap: 16px; }.analytics-consent-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }