/* The conversation preview owns its layout and motion; no global voice-demo overrides. */
.conversation-demo {
    --cd-accent: #5663ec;
    --cd-accent-soft: color-mix(in srgb,var(--cd-accent) 10%,var(--surface));
    --cd-ink: var(--text);
    --cd-muted: var(--muted);
    --cd-panel: var(--surface);
    --cd-tint: var(--surface-soft);
    --cd-line: var(--line);
    position: relative;
    width: min(100%,940px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--cd-line);
    border-radius: 26px;
    background: var(--cd-panel);
    color: var(--cd-ink);
    font-family: "Talder Text",ui-sans-serif,system-ui,sans-serif;
    box-shadow: 0 28px 75px color-mix(in srgb,var(--cd-accent) 12%,transparent),0 3px 8px rgba(0,0,0,.04);
    isolation: isolate;
}
.conversation-demo[data-mode="telepathy"] { --cd-accent:#8b53da; }
.conversation-demo[data-mode="talk"] { --cd-accent:#207fba; }
.conversation-demo *, .conversation-demo *::before, .conversation-demo *::after { box-sizing:border-box; }
.conversation-demo [hidden] { display:none!important; }
.conversation-demo button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.conversation-demo button:disabled { cursor:default; opacity:.46; }
.conversation-demo button:focus-visible,.conversation-demo input:focus-visible,.cd-viewport:focus-visible { outline:3px solid var(--cd-accent); outline-offset:3px; }
.conversation-demo svg { display:block; width:20px; height:20px; flex:none; }
.conversation-demo p { margin:0; }
.cd-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cd-fallback { padding:32px; }
.cd-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:42px; padding:3px 12px; border-bottom:1px solid var(--cd-line); }
.cd-scenes { display:flex; gap:3px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cd-scenes button { display:flex; align-items:center; gap:6px; flex:none; min-height:36px; padding:6px 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--cd-muted); font-size:12px; font-weight:750; transition:background .22s,color .22s; }
.cd-scenes button>span { font-size:18px; line-height:1; }
.cd-scenes button[aria-pressed="true"] { color:var(--cd-ink); background:var(--cd-tint); border-color:var(--cd-line); box-shadow:0 2px 3px rgba(0,0,0,.03); }
.cd-scenes button:hover { background:var(--cd-accent-soft); }
.cd-icon-button { display:grid; place-items:center; width:36px; height:36px; flex:none; border:0; border-radius:11px; background:transparent; color:var(--cd-muted); }
.cd-reset:hover svg { transform:rotate(-45deg); }
.cd-reset svg { width:17px; height:17px; transition:transform .3s; }
.cd-workspace { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr); }
.cd-scene { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; padding:28px 23px; overflow:hidden; text-align:center; border-right:1px solid var(--cd-line); background:radial-gradient(ellipse at 45% 52%,color-mix(in srgb,var(--cd-accent) 13%,var(--cd-panel)),var(--cd-tint) 70%); }
.cd-scene-copy { position:relative; z-index:1; }
.cd-kicker { display:block; margin-bottom:6px; color:var(--cd-muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:800; }
.conversation-demo .cd-headline { max-width:230px; margin:0 auto; font-family:"Talder Display",system-ui,sans-serif; font-size:27px; line-height:1.08; font-weight:750; letter-spacing:-.045em; }
.cd-avatar-mark { display:grid; width:100%; height:100%; overflow:hidden; place-items:center; border-radius:50%; background:linear-gradient(135deg,#FF6B6B,rgba(255,107,107,.7)); color:#fff; box-shadow:0 0 13px rgba(255,107,107,.4); }
.cd-avatar-mark svg { width:100%; height:100%; color:inherit; fill:currentColor; }
.conversation-demo .cd-scene-hint { max-width:235px; min-height:47px; margin-top:4px; color:var(--cd-muted); font-size:12px; line-height:1.45; }
.cd-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; padding:6px 14px; border-top:1px solid var(--cd-line); color:var(--cd-muted); background:var(--cd-panel); font-size:9px; line-height:1.4; }
.cd-turns { white-space:nowrap; font-variant-numeric:tabular-nums; }
@keyframes cd-dot { 0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1} }
@keyframes cd-choice { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes cd-cursor { to{opacity:0} }
@keyframes cd-live-character-in { from { opacity:0; filter:blur(2px); } to { opacity:1; filter:blur(0); } }
@keyframes cd-heart { 0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1)} }
@keyframes cd-play { to{transform:translateX(0)} }
@keyframes cd-audio-bar { from{transform:scaleY(.65);opacity:.45} to{transform:scaleY(1.18);opacity:1} }
@keyframes cd-red-name { from{background-position:100% 50%}to{background-position:0 50%} }

:root[data-theme="dark"] .conversation-demo { --cd-accent:#a4a9ff; }
:root[data-theme="dark"] .conversation-demo[data-mode="talk"] { --cd-accent:#7fcfff; }
:root[data-theme="dark"] .conversation-demo[data-mode="telepathy"] { --cd-accent:#c99dff; }

@media (max-width:760px) {
    .conversation-demo { max-width:580px; border-radius:21px; }
    .cd-workspace { grid-template-columns:1fr; }
    .cd-scene { display:block; padding:15px 17px 17px; text-align:left; border-right:0; border-bottom:1px solid var(--cd-line); }
    .cd-scene-copy { min-height:0; }
    .cd-kicker { font-size:9px; margin-bottom:3px; }
    .conversation-demo .cd-headline { max-width:none; margin:0; font-size:22px; }
    .conversation-demo .cd-scene-hint { display:none; }
    .cd-toolbar { padding-inline:7px; }
    .cd-scenes button { padding:5px 8px; font-size:10px; }
    .cd-scenes button>span { font-size:15px; }
    .cd-reset { width:32px; }
    .cd-footer { font-size:8px; padding-inline:11px; }
}
@media (max-width:360px) {
    .cd-scenes button { font-size:9px; padding-inline:6px; gap:3px; }
    .cd-scenes button>span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .conversation-demo *,.conversation-demo *::before,.conversation-demo *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
    .cd-voice-preview.is-playing .cd-waveform::after { transform:none; }
}


/* ChatView: native proportions, blue/light ThemeManager palettes and original SVG artwork. */
.cv-native {
    --cv-bg:#F0F2F5; --cv-ink:#111827; --cv-muted:#6B7280; --cv-accent:#111827; --cv-battery-color:#1B8E4B; --cv-pattern-opacity:.09;
    --cv-mine-start:#000; --cv-mine-end:#595959; --cv-other-start:#F3F4F6; --cv-other-end:#fff;
    --cv-border:#E5E7EB; --cv-mine-border:#ffffff2e; --cv-shine:.42; --cv-shadow:#00000009;
    --cv-date-tint:rgba(255,255,255,.88); --cv-date-border:rgba(0,0,0,.08); --cv-date-text:#111827; --cv-date-shadow:rgba(0,0,0,.06);
    --cv-glass:#ffffffa6; --cv-glass-edge:#0000000f; --cv-wallpaper-ink:#000;
    --cv-blob-one:#DBDDBB; --cv-blob-two:#6BA587; --cv-blob-three:#D5D88D; --cv-blob-four:#88B884;
    position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:430px;
    overflow:hidden; isolation:isolate; color:var(--cv-ink); background:var(--cv-bg);
    font-family:-apple-system,BlinkMacSystemFont,"Talder Text","Segoe UI",sans-serif;
}
:root[data-theme="dark"] .cv-native {
    --cv-bg:#0C1635; --cv-ink:#fff; --cv-muted:#ffffffa6; --cv-accent:#62A0E0; --cv-battery-color:#34C759; --cv-pattern-opacity:.11;
    --cv-mine-start:#4A78C8; --cv-mine-end:#62A0E0; --cv-other-start:#1C2E52; --cv-other-end:#152248;
    --cv-border:#ffffff24; --cv-mine-border:#ffffff24; --cv-shine:.045; --cv-shadow:#00000049;
    --cv-date-tint:rgba(255,255,255,.10); --cv-date-border:rgba(255,255,255,.14); --cv-date-text:#fff; --cv-date-shadow:rgba(0,0,0,.12);
    --cv-glass:#00000059; --cv-glass-edge:#ffffff2e; --cv-wallpaper-ink:#fff;
    --cv-blob-one:#162D61; --cv-blob-two:#244A7D; --cv-blob-three:#18345F; --cv-blob-four:#315A88;
}
@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) .cv-native {
        --cv-bg:#0C1635; --cv-ink:#fff; --cv-muted:#ffffffa6; --cv-accent:#62A0E0; --cv-battery-color:#34C759; --cv-pattern-opacity:.11;
        --cv-mine-start:#4A78C8; --cv-mine-end:#62A0E0; --cv-other-start:#1C2E52; --cv-other-end:#152248;
        --cv-border:#ffffff24; --cv-mine-border:#ffffff24; --cv-shine:.045; --cv-shadow:#00000049;
        --cv-date-tint:rgba(255,255,255,.10); --cv-date-border:rgba(255,255,255,.14); --cv-date-text:#fff; --cv-date-shadow:rgba(0,0,0,.12);
        --cv-glass:#00000059; --cv-glass-edge:#ffffff2e; --cv-wallpaper-ink:#fff;
        --cv-blob-one:#162D61; --cv-blob-two:#244A7D; --cv-blob-three:#18345F; --cv-blob-four:#315A88;
    }
}
.cv-wallpaper { position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 82% 10%,color-mix(in srgb,var(--cv-blob-one) 27%,transparent),transparent 62%),
    radial-gradient(ellipse at 16% 22%,color-mix(in srgb,var(--cv-blob-two) 27%,transparent),transparent 62%),
    radial-gradient(ellipse at 22% 90%,color-mix(in srgb,var(--cv-blob-three) 27%,transparent),transparent 62%),
    radial-gradient(ellipse at 90% 82%,color-mix(in srgb,var(--cv-blob-four) 27%,transparent),transparent 62%),var(--cv-bg);
}
.cv-wallpaper>svg { width:100%; height:100%; color:var(--cv-wallpaper-ink); opacity:var(--cv-pattern-opacity); mix-blend-mode:normal; }
.cv-native .cv-glass {
    border:.8px solid var(--cv-glass-edge); background:var(--cv-glass); color:var(--cv-ink);
    box-shadow:0 2px 7px var(--cv-shadow),inset 0 1px 0 #ffffff12;
    backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
    transition:transform .24s cubic-bezier(.22,1.4,.45,1),background .2s;
}
.cv-native button.cv-glass:active { transform:scale(.93); }
.cv-native .cd-chat-header { position:relative; z-index:2; display:flex; gap:8px; align-items:center; min-height:60px; padding:8px 12px; background:linear-gradient(var(--cv-bg),transparent); }
.cv-back { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; padding:0; }
.cv-back svg { width:21px; height:21px; }
.cv-profile { display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; height:44px; padding:0 12px 0 5px; border-radius:22px; text-align:left; }
.cv-profile-copy { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.cv-profile-copy strong { color:var(--cv-ink); font-size:15px; font-weight:600; }
.cv-profile-copy .cd-shiny-name { width:max-content; max-width:100%; color:transparent; background:linear-gradient(90deg,#FF5252,#D32F2F,#FF5252,#FF8A80,#FF5252,#D32F2F,#FF5252,#FF8A80,#FF5252); background-size:200% 100%; background-position:100% 50%; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:cd-red-name 2s linear infinite; filter:drop-shadow(0 .5px .5px #5a0f1630); }
.cv-profile-copy [data-peer-status] { display:block; color:var(--cv-muted); font-size:11px; white-space:nowrap; }
.cd-small-avatar { position:relative; width:36px; height:36px; flex:none; }
.cd-small-avatar .cd-avatar-mark { box-shadow:0 0 5.4px rgba(255,107,107,.4); }
.cd-small-avatar i { position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; background:#3DB870; border:2px solid var(--cv-bg); border-radius:50%; }
.cv-battery { display:flex; align-items:center; gap:7px; margin-left:auto; padding:0 12px; height:44px; flex:none; border-radius:22px; font-size:14.7px; font-weight:750; font-variant-numeric:tabular-nums; }
.cv-native .cv-battery { color:var(--cv-battery-color); }
.cv-battery svg { width:28.76px; height:14.42px; }
.cv-native .cd-viewport { position:relative; height:255px; min-height:0; flex:1; overflow:auto; overscroll-behavior-y:auto; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:var(--cv-border) transparent; overflow-anchor:none; scroll-behavior:smooth; }
.cv-native .cd-viewport.is-page-scroll-only { overflow-y:hidden; scrollbar-width:none; }
.cv-native .cd-viewport.is-page-scroll-only::-webkit-scrollbar { display:none; }
.cv-date { display:flex; min-height:46px; flex:none; justify-content:center; padding:5px 0 8px; }
.cv-date>span { padding:7px 16px; border:1px solid var(--cv-date-border); border-radius:999px; background:var(--cv-date-tint); color:var(--cv-date-text); font-size:14px; font-weight:700; line-height:1.15; box-shadow:0 1px 4px var(--cv-date-shadow); backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); }
.cv-native .cd-feed { display:flex; flex-direction:column; gap:8px; min-height:calc(100% - 46px); padding:8px 12px 13px; }
.cv-native .cd-message { position:relative; display:flex; align-self:flex-start; width:fit-content; max-width:85%; flex:none; transform-origin:bottom left; }
.cv-native .cd-message-you { align-self:flex-end; transform-origin:bottom right; }
.cv-native .cd-message-media { width:220px; }
.cv-native .cd-card { position:relative; isolation:isolate; min-width:68px; max-width:100%; padding:10px 12px 14px 18px; color:var(--cv-ink); }
.cv-native .cd-message-you .cd-card { padding:10px 18px 14px 12px; color:#fff; }
.cv-native .cv-bubble-surface { position:absolute; inset:0; z-index:-1; overflow:visible; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 3px 5px var(--cv-shadow)); }
.cv-stop-start { stop-color:var(--cv-other-start); }.cv-stop-end { stop-color:var(--cv-other-end); }.cv-stop-shine { stop-opacity:var(--cv-shine); }
.cv-bubble-border { stroke:var(--cv-border); stroke-width:1; }
.cd-message-you .cv-stop-start { stop-color:var(--cv-mine-start); }.cd-message-you .cv-stop-end { stop-color:var(--cv-mine-end); }.cd-message-you .cv-stop-shine { stop-opacity:.13; }
.cd-message-you .cv-bubble-border { stroke:var(--cv-mine-border); stroke-width:.75; }
.cv-native .cd-message-content { color:inherit; font-size:16px; line-height:1.38; overflow-wrap:anywhere; }
.cv-native .cd-message-content p { color:inherit; font:inherit; }
.cv-native .cd-message-bottom { display:flex; justify-content:flex-end; align-items:center; gap:4px; margin-top:4px; min-height:13px; font-size:10px; line-height:1; color:var(--cv-muted); }
.cv-native .cd-message-you .cd-message-bottom { color:#ffffffbd; }
.cv-read-status { display:block; width:15px; height:15px; flex:none; background:currentColor; -webkit-mask:url("../../images/app/icons/checkmark-circle-medium.png") center/contain no-repeat; mask:url("../../images/app/icons/checkmark-circle-medium.png") center/contain no-repeat; }
.cd-message-bottom time { font-variant-numeric:tabular-nums; }
.cd-receipt { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.is-read .cv-read-status { color:rgba(255,255,255,.85); -webkit-mask-image:url("../../images/app/icons/checkmark-circle-fill-medium.png"); mask-image:url("../../images/app/icons/checkmark-circle-fill-medium.png"); filter:drop-shadow(0 0 2px rgba(255,255,255,.22)); }
.cd-react { position:relative; display:grid; place-items:center; width:26px; height:22px; margin:-4px -4px -4px 2px; padding:4px; border:0; border-radius:50%; background:transparent; color:var(--cv-muted); }
.cd-react svg { width:13px; height:13px; transition:transform .25s; }
.cd-react:hover { background:#ef54891a; }
.cd-react[aria-pressed="true"] { color:#e65992; }.cd-react[aria-pressed="true"] svg { fill:currentColor; transform:scale(1.15); }
.cd-heart-particle { position:absolute; top:0; left:9px; font-size:13px; pointer-events:none; animation:cd-heart .85s ease-out both; }
.cv-native .cd-typing { min-width:110px; max-width:85%; }.cv-native .cd-typing .cd-message-bottom { font-size:9px; line-height:1.3; }
.cd-dots { display:flex; align-items:center; gap:5px; height:24px; }
.cd-dots i { width:6px; height:6px; border-radius:50%; background:var(--cv-muted); animation:cd-dot 1.1s ease-in-out infinite; }
.cd-dots i:nth-child(2) { animation-delay:.14s; }.cd-dots i:nth-child(3) { animation-delay:.28s; }
.cd-live-words { white-space:pre-wrap; }
.cd-live-character { display:inline; opacity:0; animation:cd-live-character-in .16s cubic-bezier(.16,1,.3,1) forwards; }
.cd-live-words::after,.cd-draft .cd-message-content::after { content:""; display:inline-block; width:2px; height:1em; margin-left:3px; vertical-align:-.1em; background:currentColor; animation:cd-cursor .9s steps(2,end) infinite; }
.cd-draft { opacity:.75; }.cd-draft .cv-bubble-border { stroke-dasharray:4 3; }
.cd-latest { position:absolute; bottom:115px; right:18px; z-index:3; padding:8px 12px; border:1px solid var(--cv-border); border-radius:20px; color:var(--cv-ink); background:var(--cv-other-start); box-shadow:0 5px 12px var(--cv-shadow); font-size:11px!important; }
.cv-native .cd-choices { position:relative; display:flex; gap:6px; min-height:40px; flex:none; align-items:center; overflow:auto; padding:5px 12px; scrollbar-width:none; }
.cd-choices button { flex:none; min-height:30px; padding:6px 10px; border:1px solid var(--cv-glass-edge); border-radius:16px; background:var(--cv-glass); backdrop-filter:blur(14px); color:var(--cv-ink); font-size:11px; font-weight:600; animation:cd-choice .4s both; animation-delay:var(--enter-delay,0ms); transition:transform .2s,background .2s; }
.cd-choices button:hover:not(:disabled) { transform:translateY(-2px); background:var(--cv-other-start); }
.cd-choices button.is-telepathy-cta { border-color:#a970ff; color:#fff; background:linear-gradient(135deg,#a657ff,#7c36e9); box-shadow:0 5px 15px #8845ef42; }
.cd-choices button.is-telepathy-cta:hover:not(:disabled) { background:linear-gradient(135deg,#b66dff,#8742ef); box-shadow:0 7px 18px #8845ef52; }
.cd-choices button.is-telepathy-off { border-color:color-mix(in srgb,#8c45f2 38%,var(--cv-glass-edge)); color:#8c45f2; }
.cd-system-message { display:flex; align-self:center; justify-content:center; width:100%; padding:4px 8px; }
.cd-system-message>span { display:flex; align-items:center; gap:6px; max-width:92%; padding:7px 12px; border:1px solid var(--cv-border); border-radius:999px; color:var(--cv-muted); background:color-mix(in srgb,var(--cv-other-start) 78%,transparent); box-shadow:0 2px 7px var(--cv-shadow); font-size:10px; line-height:1.2; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.cd-system-message svg { width:13px; height:13px; flex:none; color:#8c45f2; }
.cd-system-message.is-active>span { border-color:#8c45f252; color:var(--cv-ink); background:color-mix(in srgb,#8c45f2 13%,var(--cv-other-start)); }
.cd-system-message.is-active svg { color:#33cc66; filter:drop-shadow(0 0 4px #33cc665c); }
.cv-native .cd-dock { position:relative; z-index:2; flex:none; padding:8px 12px 14px; background:linear-gradient(transparent,var(--cv-bg)); }
.cv-native .cd-composer { display:flex; gap:8px; align-items:flex-end; margin:0; padding:0; border:0; background:transparent; }
.cv-attach { width:38px; height:38px; display:grid; place-items:center; padding:0; border-radius:19px; flex:none; }
.cv-attach svg { width:21px; height:21px; transition:transform .2s; }.cv-attach[aria-expanded="true"] svg { transform:rotate(45deg); }
.cv-input-shell { flex:1; min-width:0; height:38px; border-radius:20px; }
.cv-native input { display:block; width:100%; min-width:0; height:100%; margin:0; padding:9px 14px; color:var(--cv-ink); border:0; border-radius:20px; background:transparent; font:inherit; font-size:16px; line-height:20px; }
.cv-native input::placeholder { color:var(--cv-muted); opacity:1; }.cv-input-shell:focus-within { box-shadow:0 0 0 2px color-mix(in srgb,var(--cv-accent) 23%,transparent); }
.cv-actions { display:flex; align-items:center; gap:4px; flex:none; height:38px; padding:0 4px; border-radius:19px; }
.cv-telepathy,.cv-native .cd-talk,.cv-native .cd-send { display:grid; position:relative; place-items:center; width:30px; height:30px; padding:0; flex:none; border:0; border-radius:50%; transition:transform .18s cubic-bezier(.22,1.3,.36,1),background .18s,box-shadow .18s; will-change:transform; }
.cv-native .cd-send { color:#fff; background:var(--cv-mine-start); }.cv-native .cd-send svg { width:15px; height:15px; }
.cv-native .cd-send:not([hidden]),.cv-native .cd-talk:not([hidden]) { animation:cv-action-in .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes cv-action-in { from { opacity:0; transform:scale(.6) rotate(-15deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.cv-telepathy { color:#fff; background:#8C45F2; }.cv-telepathy svg { width:17px; height:17px; }
.cv-telepathy[aria-pressed="true"] { background:#33CC66; box-shadow:0 0 12px #33cc6630; }
.cv-native .cd-talk { background:transparent; color:var(--cv-accent); touch-action:none; user-select:none; -webkit-user-select:none; }
.cv-native .cd-talk svg { width:28px; height:28px; }.cv-native .cd-talk.is-recording { background:#D05080; color:#fff; transform:scale(1.08); }
.cv-actions button:active { transform:scale(.86); }.cv-native .cd-talk.is-recording::after { content:""; position:absolute; inset:-4px; border:2px solid #D05080; border-radius:50%; animation:cd-arrival .9s infinite; pointer-events:none; }
.cv-recording { display:flex; align-items:center; gap:7px; padding:5px 8px; margin-bottom:8px; border:1px solid #d0508040; border-radius:18px; background:var(--cv-other-start); color:var(--cv-ink); font-size:11px; transform-origin:bottom center; will-change:opacity,transform,filter; }
.cv-record-dot { width:7px; height:7px; flex:none; background:#D05080; border-radius:50%; animation:cd-dot 1s infinite; }.cv-recording>time { margin-left:auto; font-variant-numeric:tabular-nums; }
.cv-recording .cd-cancel { width:28px; height:28px; color:#D05080; }
.cv-telepathy-banner { display:flex; align-items:center; justify-content:center; gap:5px; margin-bottom:8px; color:var(--cv-muted); font-size:10px; transform-origin:bottom center; will-change:opacity,transform,filter; }.cv-telepathy-banner svg { width:13px; height:13px; color:#33CC66; }
.cd-voice-preview { display:flex; width:100%; min-width:185px; align-items:center; gap:9px; padding:6px 0; border:0; color:inherit; background:transparent; transition:transform .18s cubic-bezier(.22,1.3,.36,1),opacity .18s; }
.cd-voice-preview:hover { transform:translateX(3px); }.cd-voice-preview:active { transform:scale(.97); }
.cd-voice-preview>svg { width:30px; height:30px; padding:5px; border-radius:50%; background:#ffffff20; }
.cd-waveform { display:flex; position:relative; align-items:center; gap:2px; height:27px; flex:1; overflow:hidden; }
.cd-waveform i { display:block; flex:1; height:var(--h); min-width:2px; max-width:5px; border-radius:3px; background:currentColor; opacity:.65; }
.cd-voice-preview time { font-size:11px; font-variant-numeric:tabular-nums; }
.cd-voice-preview.is-playing .cd-waveform::after { content:""; position:absolute; inset:0; border-right:2px solid currentColor; background:#ffffff24; transform:translateX(-100%); animation:cd-play var(--play-time,3s) linear forwards; }
.cd-voice-preview.is-playing .cd-waveform i { animation:cd-audio-bar .48s ease-in-out infinite alternate; animation-delay:calc(var(--h) * -3ms); }
.cd-preview-note { display:block; font-size:9px; opacity:.7; }.cv-native .cd-talk-caption { margin:5px 0; }
.cv-photo-message { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; margin-bottom:7px; }
.cv-location-message { position:relative; width:100%; height:112px; overflow:hidden; display:grid; place-items:center; border:1px solid #ffffff8f; border-radius:10px; margin-bottom:7px; background:#dfeadf; box-shadow:inset 0 0 0 1px #385b6812; }
.conversation-demo .cv-map-art { position:absolute; inset:0; display:block; width:100%; height:100%; }
.cv-map-pin { position:absolute;top:42%;left:53%;color:#cf3d63;filter:drop-shadow(0 3px 3px #0003);transform:translate(-50%,-50%); }.cv-map-pin svg { width:31px; height:31px; }.cv-map-label { position:absolute; bottom:5px; left:5px; right:5px; border-radius:5px; padding:4px 5px; background:#fffffff0; color:#273d31; font-size:9px; font-weight:700; line-height:1.2; text-align:center;box-shadow:0 2px 8px #3654451a; }
.cv-overlay,.cv-attachment-menu { position:absolute; z-index:5; inset:0; }
.cv-overlay { padding:62px 20px 20px; overflow:auto; background:var(--cv-bg); }
.cv-overlay-close { position:absolute; top:10px; right:12px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; }
.cv-overlay-content h4 { margin:0 0 8px; color:var(--cv-ink); font-size:23px; letter-spacing:-.025em; }.cv-list-caption { color:var(--cv-muted); font-size:12px; }
.cv-chat-row { display:flex; align-items:center; gap:12px; width:100%; padding:16px 0; margin-top:12px; border:0; border-block:1px solid var(--cv-border); background:transparent; color:var(--cv-ink); text-align:left; }
.cv-chat-row img { width:48px; height:48px; border-radius:50%; object-fit:cover; }.cv-chat-row span { display:grid; gap:4px; }.cv-chat-row small { color:var(--cv-muted); font-size:12px; }
.cv-chat-row i,.cv-online-label i { width:8px; height:8px; border-radius:50%; background:#3DB870; margin-left:auto; }
.cv-profile-preview { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }.cv-profile-preview>img { width:90px; height:90px; border-radius:50%; object-fit:cover; }.cv-profile-preview>p { color:var(--cv-muted); font-size:14px; }.cv-profile-preview small { color:var(--cv-muted); font-size:11px; }
.cv-online-label { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--cv-muted); }.cv-profile-preview>button { display:flex; align-items:center; gap:8px; margin-top:8px; padding:10px 16px; border:1px solid var(--cv-border); border-radius:20px; color:var(--cv-ink); background:var(--cv-other-start); }
.cv-attachment-menu { backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); background:#00000018; }
.cv-attachment-dismiss { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:transparent; }
.cv-attachment-sheet { position:absolute; left:12px; bottom:63px; padding:8px; width:min(280px,calc(100% - 24px)); background:var(--cv-other-end); border:1px solid var(--cv-border); border-radius:24px; box-shadow:0 18px 50px #0003; transform-origin:bottom left; }
.cv-attachment-sheet>button { display:flex; gap:12px; align-items:center; width:100%; border:0; border-radius:16px; padding:12px; text-align:left; background:transparent; color:var(--cv-ink); animation:cd-choice .25s both; }
.cv-attachment-sheet>button:nth-child(2) { animation-delay:40ms; }.cv-attachment-sheet>button:nth-child(3) { animation-delay:80ms; }
.cv-attachment-sheet>button:hover { background:var(--cv-glass); }.cv-attachment-sheet>button>svg { width:24px; height:24px; }.cv-attachment-sheet span { display:grid; gap:3px; }.cv-attachment-sheet strong { font-size:15px; font-weight:600; }.cv-attachment-sheet small { font-size:11px; color:var(--cv-muted); }
@media (max-width:760px) {
    .cv-native { height:680px; }
    .cv-native .cd-message { max-width:88%; }
    .cv-native .cd-choices { flex-wrap:wrap; justify-content:center; align-content:center; min-height:48px; overflow:visible; padding-block:8px; }
    .cd-choices button { max-width:100%; white-space:normal; text-align:center; }
}
@media (max-width:390px) {
    .cv-native .cd-chat-header { gap:6px; padding-inline:8px; }.cv-battery { padding-inline:8px; gap:4px; font-size:12px; }
    .cv-profile { padding-right:10px; }.cv-profile-copy strong { font-size:15px; }.cv-profile-copy [data-peer-status] { font-size:10px; }
    .cv-native .cd-dock { padding-inline:8px; }.cv-native .cd-composer { gap:6px; }.cv-native input { padding-inline:11px; }
}