/* App replicas share interaction, not their visual language. All rules are scoped. */
.app-demo { grid-area: scene; margin: 28px 0 0; min-width: 0; }
.app-demo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-demo button { font: inherit; cursor: pointer; }
.app-demo button:disabled { cursor: default; }
.app-demo button:focus-visible, .app-demo [tabindex]:focus-visible { outline: 3px solid var(--leaf); outline-offset: -3px; }
.demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-heading h2, .app-demo > h2 { font: 600 19px/1.4 var(--sans); letter-spacing: -.02em; }
.demo-local { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; }
.demo-local svg { width: 16px; height: 16px; }
.demo-apps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.demo-apps button { display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; gap: 6px; min-width: 0; min-height: 78px; padding: 9px 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; line-height: 1.2; }
.demo-apps img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.demo-apps button:hover { background: var(--soft); border-color: var(--ink-2); }
.demo-apps [aria-selected="true"] { border-color: var(--leaf-ink); box-shadow: inset 0 0 0 1px var(--leaf-ink); background: var(--memory); }
.demo-selected { display: none; position: absolute; top: 5px; right: 5px; color: var(--leaf-ink); }
.demo-selected svg { width: 14px; height: 14px; stroke-width: 2.5; }
[aria-selected="true"] .demo-selected { display: flex; }
.demo-window { --d-bg: #fff; --d-text: #202329; --d-muted: #68727e; --d-line: #e1e5e8; --d-side: #fff; --d-accent: #2485c5; --d-selected: #419bd4; --d-selected-text: #fff; height: 540px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--d-bg); color: var(--d-text); box-shadow: 0 5px 16px #1115120a; display: flex; flex-direction: column; font: 14px/1.42 var(--sans); isolation: isolate; }
.demo-window button { border: 0; background: none; color: inherit; }
.demo-titlebar { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; flex: none; border-bottom: 1px solid var(--d-line); background: var(--d-bg); color: var(--d-muted); font-size: 12px; font-weight: 600; }
.demo-traffic { position: absolute; left: 12px; top: 10px; display: flex; gap: 6px; }
.demo-traffic i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px #0000000d; }
.demo-traffic i:nth-child(2) { background: #febc2e; }.demo-traffic i:nth-child(3) { background: #28c840; }
.demo-window-label { position: absolute; right: 12px; font-size: 11px; font-weight: 400; }
.demo-workspace { display: flex; min-height: 0; flex: 1; position: relative; }
.demo-sidebar { display: flex; flex-direction: column; width: 190px; flex: none; background: var(--d-side); border-right: 1px solid var(--d-line); min-height: 0; }
.demo-sidebar-heading { min-height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 16px; }
.demo-sidebar-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0; padding: 6px 12px 10px; color: var(--d-muted); font-size: 12px; }
.demo-sidebar-label svg { width: 14px; height: 14px; }
.demo-chat-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.demo-chat { display: flex; gap: 9px; align-items: center; width: 100%; min-height: 66px; padding: 10px; text-align: left; position: relative; }
.demo-chat:hover { background: color-mix(in srgb, var(--d-text) 6%, transparent); }
.demo-chat[aria-current="true"] { color: var(--d-selected-text); background: var(--d-selected); }
.demo-chat-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.demo-chat-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.demo-chat-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--d-muted); }
.demo-chat[aria-current="true"] .demo-chat-copy > span { color: inherit; opacity: .9; }
.demo-chat-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--d-accent); margin-left: auto; }
.demo-chat[aria-current="true"] .demo-chat-dot { display: none; }
.demo-avatar { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 500; background: #668499; }
.demo-avatar.violet { background: #9276d7; }.demo-avatar.cyan { background: #399dcc; }.demo-avatar.coral { background: #e77573; }.demo-avatar.orange { background: #da9756; }.demo-avatar.green { background: #70a44f; }.demo-avatar.neutral { background: #494949; }
.demo-sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px; font-size: 12px; border-top: 1px solid var(--d-line); }
.demo-sidebar-footer .demo-avatar { width: 26px; height: 26px; font-size: 12px; }
.demo-online { display: block; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #38a15c; }
.demo-conversation { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.demo-chat-header { display: flex; gap: 12px; align-items: center; flex: none; min-height: 58px; padding: 8px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-bg); }
.demo-chat-heading { display: flex; flex-direction: column; min-width: 0; }
.demo-chat-heading b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-chat-heading > span { font-size: 12px; color: var(--d-muted); }
.demo-icon { display: inline-flex; justify-content: center; align-items: center; min-width: 36px; min-height: 36px; padding: 6px; border-radius: 7px; }
.demo-icon:hover:not(:disabled) { background: color-mix(in srgb, var(--d-text) 8%, transparent); }
.demo-info { margin-left: auto; color: var(--d-muted) !important; }
.demo-nav-open, .demo-nav-close { display: none; }
.demo-history-wrap { position: relative; min-height: 0; flex: 1; }
.demo-history { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6b7c6f60 transparent; }
.demo-history-content { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
.app-telegram .demo-history { background: linear-gradient(125deg,#d9dfba,#b5cea8 60%,#9ec797); }
.demo-day { display: flex; justify-content: center; margin: 6px 0 10px; color: var(--d-muted); font-size: 12px; }
.app-telegram .demo-day span { padding: 3px 9px; border-radius: 14px; background: #526d4b99; color: #fff; }
.demo-message { display: flex; max-width: 92%; align-self: flex-start; border-radius: 11px 11px 11px 3px; background: var(--d-bg); padding: 7px 10px 5px; box-shadow: 0 1px 1px #00000018; }
.demo-message.out { align-self: flex-end; background: #effddd; border-radius: 11px 11px 3px 11px; }
.demo-message-content { min-width: 0; width: 100%; }
.demo-message p { margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.demo-message time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--d-muted); font-size: 10px; white-space: nowrap; margin-top: 3px; }
.demo-message time span, .demo-message time svg { width: 15px; height: 13px; color: #4e9d40; }
.demo-message-tools { display: flex; gap: 5px; margin-top: 6px; }
.demo-message-tools button { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 7px; border-radius: 12px; color: var(--d-muted); font-size: 11px; border: 1px solid var(--d-line); }
.demo-message-tools button svg { width: 13px; height: 13px; }
.demo-message-tools button:hover, .demo-message-tools [aria-pressed="true"] { background: #e7f0fb; color: #245885; border-color: #a9c9ec; }
.demo-message-tools [aria-pressed="true"] svg { fill: currentColor; }
.demo-bottom { position: absolute; bottom: 12px; right: 12px; background: var(--d-bg) !important; box-shadow: 0 2px 8px #0002; border-radius: 50%; color: var(--d-accent) !important; }
.demo-composer { padding: 10px 12px 8px; background: var(--d-bg); border-top: 1px solid var(--d-line); flex: none; }
.demo-compose-row { display: flex; gap: 10px; align-items: center; }
.demo-preview { flex: 1; min-width: 0; min-height: 50px; max-height: 140px; overflow-y: auto; padding: 4px; font-size: 14px; line-height: 1.5; color: var(--d-text); overflow-wrap: anywhere; cursor: default; }
[data-phase="ghost"] .demo-preview { color: var(--d-muted); }
.demo-preview kbd { display: inline-block; padding: 0 4px; margin-left: 6px; border: 1px solid currentColor; border-radius: 4px; font: 11px/1.4 var(--sans); vertical-align: 1px; }
.demo-compose-send { background: var(--d-accent) !important; color: #fff !important; border-radius: 50%; min-width: 34px; min-height: 34px; }
.demo-compose-send:disabled { opacity: .32; }
.demo-composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; color: var(--d-muted); font-size: 12px; }
.demo-composer-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.demo-composer-footer img, .demo-composer-footer svg { width: 14px; height: 14px; }
.demo-composer-footer button { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.demo-composer-footer button:hover { color: var(--d-accent); }
.demo-compose-tools { display: none; }
.demo-info-panel { position: absolute; inset: 0 0 0 auto; z-index: 3; width: min(100%,340px); padding: 18px; overflow-y: auto; background: var(--d-bg); border-left: 1px solid var(--d-line); box-shadow: -4px 0 16px #0001; font-size: 14px; }
.demo-info-panel > button { float: right; margin-top: -8px; margin-right: -10px; }
.demo-info-panel h3 { display: flex; gap: 7px; align-items: center; margin: 0 20px 14px 0; font-size: 15px; }
.demo-info-panel p { margin: 10px 0; font-size: 14px; }
.demo-info-panel .demo-info-label { margin: 16px 0 5px; color: var(--d-muted); font-size: 12px; }
.demo-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.demo-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.3; }
.demo-actions .demo-primary { border-color: var(--leaf-ink); background: var(--memory); }
.demo-primary kbd { display: grid; place-items: center; min-width: 44px; height: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 2px 0 var(--line); font: 600 14px var(--sans); }
.demo-primary:disabled { border-color: var(--line); background: var(--paper); }
.demo-actions .demo-send-action { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.demo-actions .demo-reset { margin-left: auto; min-width: 48px; padding: 10px; }
.demo-actions button:hover:not(:disabled) { filter: brightness(.96); }
.demo-caveat, .demo-caption { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.demo-caveat { border-left: 2px solid var(--line); padding-left: 10px; }
.demo-caption svg, .demo-caveat svg { width: 17px; height: 17px; margin-top: 2px; }
.demo-caveat a { display: inline-flex; align-items: center; gap: 3px; text-underline-offset: 3px; }
.demo-caveat a svg { width: 14px; height: 14px; }
.demo-fallback { padding: 20px; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.demo-fallback p { margin: 14px 0; }
/* Discord: compact direct messages, server rail and an open message feed. */
.app-discord { --d-side:#f2f3f5; --d-selected:#e3e5e8; --d-selected-text:#2e3338; --d-accent:#5865f2; --d-rail:#e3e5e8; --d-field:#ebedef; }
.app-discord .demo-titlebar { background:var(--d-rail); border:0; }
.demo-discord-rail { display:flex; flex-direction:column; align-items:center; gap:12px; width:52px; flex:none; padding:12px 0; background:var(--d-rail); }
.demo-discord-rail > span { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--d-side); }
.demo-discord-rail > i { width:26px; border-bottom:2px solid var(--d-line); }
.demo-discord-rail img { width:28px; height:28px; }
.app-discord .demo-sidebar { width:176px; border:0; }
.app-discord .demo-sidebar-heading { min-height:58px; font-size:14px; padding:10px; box-shadow:0 1px 2px #0001; }
.app-discord .demo-chat { min-height:48px; margin:2px 6px; width:calc(100% - 12px); padding:8px; border-radius:5px; }
.app-discord .demo-chat-copy > span { display:none; }
.app-discord .demo-chat .demo-avatar { width:28px; height:28px; font-size:12px; }
.app-discord .demo-sidebar-footer { background:var(--d-rail); border:0; }
.app-discord .demo-chat-header > .demo-avatar { width:26px; height:26px; font-size:11px; }
.demo-message.feed-message { padding:9px 0; gap:10px; align-self:stretch; max-width:100%; background:transparent; box-shadow:none; border-radius:0; }
.feed-message .demo-avatar { width:32px; height:32px; font-size:12px; }
.demo-message-author { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:4px; font-size:13px; }
.demo-message-author time { margin:0; font-size:10px; }
.app-discord .demo-day { align-items:center; gap:10px; }
.app-discord .demo-day::before, .app-discord .demo-day::after { content:''; height:1px; background:var(--d-line); flex:1; }
.app-discord .demo-composer { border:0; margin:0 12px 12px; border-radius:8px; background:var(--d-field); }
/* Browser frames surround the same explicitly fictional support inbox. */
.is-browser { --d-side:#f7f8fa; --d-selected:#e7eefb; --d-selected-text:#273655; --d-accent:#3269c6; --d-shell:#e9edf6; --d-address:#f1f3f7; --d-out:#edf3ff; }
.is-browser .demo-titlebar { background:var(--d-shell); justify-content:flex-start; padding-left:78px; height:35px; border:0; }
.demo-browser-tab { display:flex; align-items:center; gap:8px; background:var(--d-bg); border-radius:9px 9px 0 0; margin-top:7px; height:28px; padding:0 12px; color:var(--d-text); min-width:200px; font-size:11px; font-weight:400; }
.demo-browser-tab svg { width:14px; height:14px; }.demo-browser-tab > span { margin-left:auto; }
.demo-address { display:flex; align-items:center; gap:10px; min-height:37px; padding:5px 10px; color:var(--d-muted); border-bottom:1px solid var(--d-line); }
.demo-address > span { display:flex; align-items:center; gap:6px; flex:1; min-width:0; white-space:nowrap; border-radius:20px; padding:4px 10px; background:var(--d-address); font-size:11px; }
.demo-address svg { width:15px; height:15px; }
.is-browser .demo-message { border:1px solid var(--d-line); box-shadow:none; }
.is-browser .demo-message.out { background:var(--d-out); }
.is-browser .demo-composer { margin:0 12px 12px; border:1px solid var(--d-line); border-radius:8px; }
.app-safari { --d-shell:#edeeee; --d-address:#fafafa; }
.app-safari .demo-titlebar { height:44px; padding-left:72px; }
.app-safari .demo-traffic { top:17px; }
.app-safari .demo-address { width:100%; gap:8px; border:0; padding-right:12px; }
.app-safari .demo-address > span { border:1px solid var(--d-line); border-radius:6px; justify-content:center; }
.demo-safari-tabs { display:flex; justify-content:center; align-items:center; gap:7px; padding:5px; background:var(--d-bg); border-bottom:1px solid var(--d-line); font-size:11px; color:var(--d-muted); }
.demo-safari-tabs svg { width:13px; height:13px; }
.app-edge { --d-shell:#e5edf4; --d-address:#f5f6f7; }
.app-edge .demo-titlebar { padding-left:10px; padding-right:80px; }
.app-edge .demo-browser-tab { border-radius:6px 6px 0 0; min-width:180px; }
.app-edge .demo-address > span { border-radius:5px; border:1px solid var(--d-line); }
.demo-windows-controls { display:flex; align-items:center; gap:16px; position:absolute; right:12px; top:8px; color:var(--d-muted); }
.demo-windows-controls i { font-style:normal; font-size:13px; }
/* The shell follows the site theme; branded sidebars keep their own colors. */
:root[data-theme="dark"] .demo-window { --d-nav:#a3c8ff; --d-bg:#20252c; --d-text:#e8eaf0; --d-muted:#aab2bf; --d-line:#39414b; --d-side:#20252c; }
:root[data-theme="dark"] .app-telegram .demo-history { background:#172b29; }
:root[data-theme="dark"] .app-telegram .demo-message.out { background:#304b42; }
:root[data-theme="dark"] .app-discord { --d-bg:#313338; --d-side:#2b2d31; --d-selected:#404249; --d-selected-text:#f2f3f5; --d-rail:#1e1f22; --d-field:#383a40; --d-line:#41434a; }
:root[data-theme="dark"] .is-browser { --d-selected:#374963; --d-selected-text:#eee; --d-shell:#292e38; --d-address:#323d50; --d-out:#323d50; }
:root[data-theme="dark"] .app-safari { --d-shell:#2c2c2d; --d-address:#414142; }
:root[data-theme="dark"] .app-edge { --d-shell:#28333e; --d-address:#303940; }
.app-demo [hidden] { display: none !important; }
@media (min-width:1180px) {
  .hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 38px; }
  .h1-hook { font-size: clamp(44px,4.25vw,60px); }
  .app-demo { margin-top: 0; }
  .hero-title { padding-top: 36px; }
}
@media (min-width:720px) and (max-width:1179px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; column-gap: 32px; grid-template-areas: "title get" "lead get" "trust trust" "scene scene"; grid-template-rows: auto auto auto auto; }
  .hero-title { padding: 0; }.get { margin-top: 0; }.trust { margin-top: 10px; }
  .h1-hook { font-size: 46px; }.lead { margin-top: 14px; }
}
@media (max-width:719px) {
  .demo-heading h2 { font-size: 18px; }.demo-local { display: none; }
  .demo-apps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .demo-apps button { flex-direction: row; min-height: 50px; font-size: 13px; gap: 5px; padding: 7px 4px; }
  .demo-apps img { width: 23px; height: 23px; }.demo-selected { top: 2px; right: 3px; }.demo-selected svg { width: 10px; height: 10px; }
  .demo-window { height: 530px; }
  .demo-sidebar, .app-discord .demo-sidebar { display: none; position: absolute; inset: 0; z-index: 5; width: 100%; border: 0; }
  .nav-open .demo-sidebar { display: flex; }.nav-open .demo-conversation { visibility: hidden; }
  .demo-nav-close { display: inline-flex; }
  .demo-nav-open { display: inline-flex; gap: 4px; margin-left: -6px; color: var(--d-nav, var(--d-accent)) !important; font-size: 12px !important; }
  .demo-nav-open svg { width: 18px; height: 18px; }
  .demo-chat-header { padding: 8px 10px; gap: 9px; min-height: 56px; }
  .demo-chat-heading b { font-size: 14px; }.demo-chat-heading > span { font-size: 11px; }
  .demo-history-content { padding: 12px; }.demo-message { max-width: 94%; }
  .demo-composer { padding: 8px; }.demo-preview { min-height: 60px; max-height: 150px; }
  .demo-composer-footer { flex-wrap: wrap; gap: 0 8px; }.demo-composer-footer > span { font-size: 12px; }
  .demo-composer-footer button { min-height: 32px; }
  .demo-actions { gap: 6px; flex-wrap: wrap; }.demo-actions button { font-size: 14px; padding-inline: 10px; }
  [data-phase="accepted"] > .demo-actions .demo-primary { width: calc(100% - 56px); justify-content: flex-start; order: 0; }
  [data-phase="accepted"] > .demo-actions .demo-reset { order: 1; } [data-phase="accepted"] > .demo-actions .demo-send-action { order: 2; width: 100%; }
  .demo-caption { font-size: 12px; }.demo-caveat { font-size: 13px; }
  .demo-browser-tab { min-width: 160px; }
  .demo-address { gap: 6px; }.demo-address > svg:nth-child(2) { display: none; }
  .demo-discord-rail { display:none; }
  .app-safari .demo-address > svg { display:none; }
  .app-safari .demo-address { padding-left:0; }
  .app-edge .demo-browser-tab { min-width:0; flex:1; }
}
@media (prefers-reduced-motion:no-preference) {
  .demo-apps button, .demo-chat, .demo-actions button { transition: background-color .15s, border-color .15s; }
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .demo-window { --d-nav:#a3c8ff; --d-bg:#20252c; --d-text:#e8eaf0; --d-muted:#aab2bf; --d-line:#39414b; --d-side:#20252c; }
:root:not([data-theme="light"]) .app-telegram .demo-history { background:#172b29; }
:root:not([data-theme="light"]) .app-telegram .demo-message.out { background:#304b42; }
:root:not([data-theme="light"]) .app-discord { --d-bg:#313338; --d-side:#2b2d31; --d-selected:#404249; --d-selected-text:#f2f3f5; --d-rail:#1e1f22; --d-field:#383a40; --d-line:#41434a; }
:root:not([data-theme="light"]) .is-browser { --d-selected:#374963; --d-selected-text:#eee; --d-shell:#292e38; --d-address:#323d50; --d-out:#323d50; }
:root:not([data-theme="light"]) .app-safari { --d-shell:#2c2c2d; --d-address:#414142; }
:root:not([data-theme="light"]) .app-edge { --d-shell:#28333e; --d-address:#303940; }
}

@media (max-width:359px) {
  .demo-apps button { flex-direction: column; min-height: 68px; gap: 5px; font-size: 12px; }
}

/* Live demo: an actual editor, with the generated suggestion kept separate. */
.app-demo .demo-preview { display:block; width:100%; min-height:62px; max-height:150px; resize:vertical; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; line-height:1.45; padding:9px 10px; cursor:text; }
.demo-editor-wrap { position:relative; flex:1; min-width:0; }
.demo-placeholder { position:absolute; top:9px; left:10px; right:10px; color:var(--d-muted); pointer-events:none; line-height:1.45; }
.demo-editor-wrap[data-empty="false"] .demo-placeholder { display:none; }
.demo-speaker { display:flex; gap:6px; padding:8px 10px 0; }
.demo-speaker button { display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line); border-radius:7px; padding:5px 9px; color:inherit; background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.demo-window .demo-speaker button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.demo-speaker svg { width:16px; height:16px; }
.demo-input-help { margin:0; padding:2px 12px 9px; font-size:12px; line-height:1.5; color:var(--ink-2); }
.demo-thinking { width:16px; height:16px; border:2px solid var(--line); border-top-color:#218142; border-radius:50%; animation:demo-spin 1s linear infinite; }
@keyframes demo-spin { to { transform:rotate(360deg); } }
.demo-primary img { flex:none; }
.demo-caption a { text-decoration:underline; text-underline-offset:3px; }
.app-demo .demo-caption { font-size:13px; line-height:1.5; align-items:flex-start; }
@media (prefers-reduced-motion:reduce) { .demo-thinking { animation:none; } }
@media (max-width:540px) { .demo-input-help { font-size:11px; } }

.app-demo textarea:focus-visible { outline:2px solid var(--d-accent); outline-offset:-2px; }

@media (max-width:720px) { .app-demo .demo-preview { font-size:16px; } }

/* Familiar, working messenger details. Photos are one shared contact sheet. */
.demo-window { position:relative; height:610px; }
.demo-photo-tile { display:block; background-image:url('/media/demo-life/life-atlas.v1.webp'); background-size:400% 300%; background-position:var(--photo-x) var(--photo-y); background-repeat:no-repeat; }
.demo-avatar { position:relative; overflow:hidden; width:40px; height:40px; }
.demo-avatar > .demo-photo-tile { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.demo-tour { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0 0 12px; color:var(--ink-2); font-size:12px; }
.demo-tour > span { display:flex; align-items:center; gap:5px; }
.demo-tour svg { width:15px; height:15px; }
.demo-titlebar > .demo-icon { position:absolute; right:4px; min-height:26px; min-width:26px; padding:4px; }.demo-titlebar > .demo-icon svg { width:14px; height:14px; }
.demo-sidebar { width:205px; }
.demo-sidebar-heading { min-height:50px; gap:6px; padding:6px 8px; font-size:15px; }
.demo-sidebar-heading > .demo-icon { color:var(--d-muted); }.demo-sidebar-heading b { flex:1; }
.demo-search { display:flex; align-items:center; gap:7px; padding:7px 9px; margin:0 10px 9px; background:color-mix(in srgb,var(--d-muted) 9%,var(--d-bg)); border:1px solid transparent; border-radius:20px; color:var(--d-muted); }
.demo-search:focus-within { border-color:var(--d-accent); }
.demo-search svg { width:16px; height:16px; }.demo-search input { width:100%; min-width:0; background:transparent; border:0; padding:0; color:var(--d-text); font:13px/1.5 var(--sans); outline:0; }
.demo-folders { display:flex; gap:0; padding:0 5px; border-bottom:1px solid var(--d-line); }
.demo-folders button { flex:1; padding:9px 3px; font-size:11px; color:var(--d-muted); border-radius:0; border-bottom:2px solid transparent; }
.demo-folders button[aria-pressed="true"] { color:var(--d-accent); border-bottom-color:var(--d-accent); font-weight:600; }
.demo-chat { min-height:71px; gap:8px; padding:10px 8px; }.demo-chat-copy { flex:1; }
.demo-chat-meta { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:7px; color:var(--d-muted); }.demo-chat-meta time { font-size:9px; }.demo-chat-meta svg { width:11px; height:11px; }
.demo-chat[aria-current="true"] .demo-chat-meta { color:inherit; }.demo-chat-dot { width:7px; height:7px; }
.demo-sidebar-footer { padding:8px; }.demo-sidebar-footer > .demo-icon { min-width:28px; min-height:28px; padding:4px; }.demo-sidebar-footer > .demo-icon svg { width:16px; height:16px; }
.demo-search-empty { padding:14px; font-size:13px; color:var(--d-muted); }
.demo-contact { display:flex; align-items:center; gap:10px; text-align:left; min-width:0; padding:0; flex:1; }.demo-contact:hover b { color:var(--d-accent); }.demo-contact .demo-avatar { width:34px; height:34px; }
.demo-chat-heading { flex:1; }.demo-header-tools { display:flex; gap:1px; color:var(--d-muted); }.demo-header-tools .demo-icon { min-width:30px; min-height:34px; padding:6px; }.demo-header-tools svg { width:18px; height:18px; }
.demo-chat-header { gap:8px; padding:8px 12px; }
.demo-history-wrap { display:flex; flex-direction:column; }.demo-history { flex:1; min-height:0; height:auto; }
.demo-history-content { padding:16px 22px; gap:9px; }
.demo-message { position:relative; max-width:91%; }.demo-message p:empty { display:none; }
.demo-message-menu { display:flex; gap:0; position:absolute; right:0; top:-28px; z-index:2; border:1px solid var(--d-line); background:var(--d-bg); box-shadow:0 2px 6px #0002; border-radius:7px; opacity:0; pointer-events:none; }
.demo-message:hover .demo-message-menu,.demo-message:focus-within .demo-message-menu { opacity:1; pointer-events:auto; }
.demo-message-menu .demo-icon { min-width:28px; min-height:27px; padding:5px; }.demo-message-menu svg { width:16px; height:16px; }
.demo-message:focus-within { z-index:2; }
.demo-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:5px; }.demo-reactions button { border-radius:14px; padding:3px 7px; background:color-mix(in srgb,var(--d-accent) 15%,var(--d-bg)); border:1px solid var(--d-accent); font-size:13px; }.demo-reactions span { font-size:11px; }
.demo-quote { display:flex; flex-direction:column; gap:3px; margin:1px 0 7px; padding:5px 8px; width:100%; border-left:3px solid var(--d-accent) !important; background:color-mix(in srgb,var(--d-accent) 7%,transparent) !important; text-align:left; font-size:12px; border-radius:3px; }
.demo-quote b { color:var(--d-accent); }.demo-quote span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-forward-label { display:flex; gap:5px; align-items:center; font-size:11px; color:var(--d-accent); margin-bottom:5px; }.demo-forward-label svg { width:12px; height:12px; }
.demo-pinned { display:flex; gap:9px; align-items:center; text-align:left; padding:6px 12px; border-bottom:1px solid var(--d-line) !important; background:var(--d-bg) !important; flex:none; max-height:52px; }
.demo-pinned > span { display:flex; flex-direction:column; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }.demo-pinned b { color:var(--d-accent); font-size:11px; }
.demo-media-photo { display:block; position:relative; width:220px; max-width:100%; aspect-ratio:1.45; border-radius:8px; overflow:hidden; margin:0 0 7px; padding:0; }
.demo-media-photo > .demo-photo-tile { width:100%; height:100%; background-size:400% 435%; }
.demo-media-photo img { width:100%; height:100%; object-fit:cover; }.demo-media-photo > svg { position:absolute; right:7px; bottom:7px; background:#0006; color:white; padding:3px; border-radius:4px; width:22px; height:22px; }
.demo-file { display:flex; align-items:center; gap:10px; padding:7px 0; margin-bottom:6px; max-width:100%; text-align:left; }.demo-file > svg:first-child { width:35px; height:40px; color:var(--d-accent); }.demo-file > svg:last-child { width:16px; height:16px; }.demo-file span { display:flex; flex-direction:column; min-width:0; }.demo-file b { font-size:12px; overflow-wrap:anywhere; }.demo-file small { font-size:11px; color:var(--d-muted); }
.demo-layout { display:flex; flex-direction:column; position:relative; width:240px; max-width:100%; padding:13px !important; margin:0 0 8px; color:#234b28 !important; background:#f0efdb !important; border-radius:6px; text-align:left; overflow:hidden; }
.demo-layout > span:first-child { font-size:8px; font-weight:700; }.demo-layout i { font-weight:400; font-style:normal; margin-left:25px; }.demo-layout > b { font-family:Georgia,serif; font-size:24px; line-height:1.05; margin:20px 0 5px; z-index:1; }.demo-layout-art { position:absolute; right:-10px; bottom:16px; max-width:110px; transform:rotate(-12deg); font-size:40px; line-height:1; }.demo-layout small { font-size:8px; }
.demo-sticker { display:block; font-size:76px; line-height:1.2; padding:6px; }
.demo-composer { padding:7px 9px 8px; }.demo-compose-row { gap:3px; }.demo-compose-row > .demo-icon { min-width:29px; min-height:34px; padding:5px; color:var(--d-muted); }.demo-compose-row > .demo-icon svg { width:20px; height:20px; }
.demo-speaker { padding:3px 2px 0; }.demo-speaker button { padding:4px 7px; font-size:11px; }.demo-speaker .more-info-trigger { width:26px; height:26px; min-width:26px; }
.app-demo .demo-preview { min-height:58px; padding:9px 6px; }.demo-placeholder { left:6px; }
.demo-compose-context { display:flex; gap:8px; align-items:center; padding:5px 2px; border-bottom:1px solid var(--d-line); font-size:12px; }.demo-compose-context > span { flex:1; display:flex; flex-direction:column; min-width:0; }.demo-compose-context span span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.demo-compose-context b { color:var(--d-accent); }.demo-compose-context .demo-icon { min-height:28px; }
.demo-attachment-chip { display:flex; align-items:center; gap:8px; font-size:12px; padding:5px; }.demo-attachment-chip > .demo-photo-tile,.demo-attachment-chip > img { width:40px; height:40px; border-radius:5px; object-fit:cover; }.demo-attachment-chip .demo-icon { margin-left:auto; }
.app-discord .demo-sidebar { width:185px; }.app-discord .demo-sidebar-heading { font-size:12px; }.app-discord .demo-chat-meta { display:none; }.app-discord .demo-folders button { font-size:10px; }.app-discord .demo-titlebar > .demo-icon { color:var(--d-muted); }
.app-discord .demo-message.feed-message { padding:8px 0; }.app-discord .demo-history-content { padding:16px; gap:5px; }
.demo-url { display:flex; flex:1; align-items:center; justify-content:flex-start; min-width:0; padding:5px 10px; gap:7px; border-radius:20px; background:var(--d-address) !important; font-size:11px !important; text-align:left; }.demo-url span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.demo-address { gap:2px; padding:4px 7px; }.demo-address > .demo-icon { min-width:26px; min-height:26px; padding:5px; }.demo-address .demo-icon svg { width:14px; height:14px; }.demo-address [aria-pressed="true"] { color:var(--d-accent); }.demo-address [aria-pressed="true"] svg { fill:currentColor; }
.demo-browser-tabs { display:flex; gap:3px; flex:1; min-width:0; }.demo-browser-tab { min-width:0; flex:1; max-width:200px; justify-content:flex-start; opacity:.65; background:transparent !important; cursor:pointer; }.demo-browser-tab[aria-pressed="true"] { opacity:1; background:var(--d-bg) !important; }
.app-edge .demo-browser-tab { min-width:0; }.app-safari > .demo-browser-tabs { flex:none; background:var(--d-shell); padding:0 8px; }.app-safari .demo-browser-tab { max-width:none; border-radius:6px 6px 0 0; justify-content:center; margin-top:0; }.app-safari .demo-address { gap:1px; }.app-safari .demo-url { border:1px solid var(--d-line); border-radius:5px; justify-content:center; }
.app-edge .demo-url { border-radius:5px; }
.demo-catalog { position:absolute; inset:72px 0 0; background:var(--d-bg); padding:20px; overflow:auto; z-index:6; }.app-safari .demo-catalog { top:72px; }.demo-store-heading { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--d-muted); }.demo-store-heading b { display:flex; gap:6px; align-items:center; color:var(--d-text); }.demo-catalog h3 { font-size:26px; font-family:Georgia,serif; margin:25px 0 20px; }.demo-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.demo-products button { text-align:left; padding:0; }.demo-products .demo-photo-tile { aspect-ratio:1; width:100%; border-radius:10px; margin-bottom:10px; }.demo-products b { display:block; font-size:13px; }.demo-products button > span:last-child { display:flex; align-items:center; gap:5px; color:var(--d-accent); font-size:12px; margin-top:5px; }.demo-products svg { width:14px; height:14px; }.demo-catalog-chat { display:flex; align-items:center; gap:8px; padding:12px 16px !important; background:var(--d-accent) !important; color:white !important; border-radius:8px; margin-top:30px; }
.demo-layer { position:absolute; inset:30px 0 0; z-index:20; display:flex; align-items:stretch; justify-content:flex-end; }.is-browser .demo-layer { top:72px; }
.demo-layer-backdrop { position:absolute; inset:0; background:#0003 !important; width:100%; height:100%; cursor:default !important; border-radius:0; }
.demo-panel { position:relative; display:flex; flex-direction:column; width:min(360px,100%); min-height:0; color:var(--d-text); background:var(--d-bg); border-left:1px solid var(--d-line); box-shadow:-6px 0 26px #0002; }
.demo-panel > header { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--d-line); flex:none; }.demo-panel h3 { margin:0; font-size:15px; }.demo-panel-body { overflow:auto; min-height:0; padding:14px; }.demo-panel-body > p { font-size:13px; line-height:1.5; }.demo-panel-body h4 { margin:20px 0 10px; font-size:13px; }.demo-panel-body blockquote { margin:0 0 12px; padding:8px 10px; font-size:13px; border-left:3px solid var(--d-accent); background:var(--d-side); overflow-wrap:anywhere; }
.demo-menu-row { display:flex; align-items:center; gap:12px; width:100%; padding:10px 6px; min-height:42px; text-align:left; font-size:13px !important; border-radius:6px; }.demo-menu-row > span { flex:1; }.demo-menu-row > svg { width:18px; height:18px; color:var(--d-muted); }.demo-menu-row > svg:last-child { width:13px; height:13px; }.demo-menu-row:hover { background:var(--d-side); }
.demo-emoji-row { display:flex; justify-content:space-between; gap:3px; }.demo-emoji-row button { font-size:23px; padding:5px; }.demo-emoji-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }.demo-emoji-grid button { padding:8px 2px; font-size:25px; border-radius:6px; }.demo-emoji-grid button:hover,.demo-sticker-grid button:hover { background:var(--d-side); }
.demo-sticker-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.demo-sticker-grid button { font-size:65px; padding:10px; border:1px solid var(--d-line); border-radius:10px; background:var(--d-side); }
.demo-attachment-gallery { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.demo-attachment-gallery button { padding:0; aspect-ratio:1; border-radius:8px; overflow:hidden; }.demo-attachment-gallery .demo-photo-tile { width:100%; height:100%; }
.demo-upload { display:flex; align-items:center; gap:10px; position:relative; padding:12px 6px; border:1px solid var(--d-line); border-radius:7px; font-size:13px; cursor:pointer; }.demo-upload input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }.demo-upload:focus-within { outline:2px solid var(--d-accent); }.demo-panel-note { color:var(--d-muted); font-size:12px !important; line-height:1.5; }
.demo-lightbox > .demo-photo-tile { width:100%; aspect-ratio:1; border-radius:8px; }.demo-lightbox img { width:100%; max-height:350px; object-fit:contain; }.demo-layout-large { width:100%; min-height:230px; }.demo-layout-large > b { font-size:36px; }.demo-layout-large .demo-layout-art { font-size:60px; max-width:150px; }
.demo-profile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0; }.demo-profile > .demo-avatar { width:80px; height:80px; }.demo-profile > span { color:var(--d-muted); font-size:12px; }.demo-profile-actions { display:flex; justify-content:center; gap:22px; padding:10px 0; }.demo-profile-actions [aria-pressed="true"] { color:var(--d-accent); background:var(--d-side); }.demo-shared-media { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.demo-shared-media .demo-media-photo { width:100%; aspect-ratio:1; }.demo-shared-media .demo-media-photo .demo-photo-tile { background-size:400% 300%; }.demo-shared-media .demo-file { grid-column:1 / -1; }.demo-shared-media > p { font-size:13px; grid-column:1 / -1; }
.demo-memory-card { display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--d-line); border-radius:8px; }.demo-memory-card svg { color:var(--d-accent); }.demo-memory-card p { margin:0; font-size:14px; }
.demo-search-results { display:flex; flex-direction:column; gap:3px; }.demo-search-result { display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; padding:10px 5px; border-bottom:1px solid var(--d-line) !important; font-size:12px !important; }.demo-search-result > span { display:flex; flex-direction:column; flex:1; gap:5px; min-width:0; overflow-wrap:anywhere; }.demo-search-result time { font-size:10px; color:var(--d-muted); }
.demo-call { text-align:center; padding:22px 0 8px; }.demo-call > .demo-avatar { width:100px; height:100px; margin:0 auto 20px; }.demo-call h3 { font-size:21px; }.demo-call > p { color:var(--d-muted); font-size:13px; }.demo-call time { display:block; padding:15px; font-variant-numeric:tabular-nums; }.demo-call-actions { display:flex; justify-content:center; gap:18px; margin:12px 0 22px; }.demo-call-actions button { border-radius:50%; width:46px; height:46px; background:var(--d-side); }.demo-call-actions button:last-child { background:#d13c45; color:white; transform:rotate(135deg); }.demo-call-actions [aria-pressed="true"] { background:var(--d-accent); color:white; }.demo-call.video-on > .demo-avatar { border-radius:12px; width:180px; height:135px; }
.demo-highlight { outline:2px solid var(--d-accent); outline-offset:3px; }.alternate-wallpaper.app-telegram .demo-history { background:var(--d-side); background-image:radial-gradient(var(--d-line) 1px,transparent 1px); background-size:18px 18px; }
.is-compact .demo-message p { font-size:12px; }.is-compact .demo-history-content { gap:4px; }
.app-demo.demo-expanded { position:fixed; inset:15px; z-index:1000; margin:0; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:auto; }.demo-expanded .demo-window { height:calc(100dvh - 270px); min-height:380px; }.demo-expanded .demo-caption { margin-bottom:8px; }
@media (max-width:719px) {
 .demo-window { height:590px; }.demo-tour { gap:5px 12px; font-size:11px; }.demo-tour > span:nth-child(2) { display:none; }
 .demo-contact .demo-avatar { width:29px; height:29px; }.demo-contact { gap:6px; }.demo-contact .demo-chat-heading b { font-size:13px; }.demo-header-tools .demo-icon { min-width:27px; padding:4px; }.demo-header-tools .demo-icon[data-tool="profile"] { display:none; }
 .demo-history-content { padding:14px 12px; }.demo-message-menu { position:static; justify-content:flex-end; box-shadow:none; background:none; border:0; opacity:1; pointer-events:auto; margin-top:2px; }.demo-message-menu .demo-icon { min-height:23px; min-width:25px; padding:4px; }.demo-message-menu .demo-icon:not(:last-child) { display:none; }.demo-message-menu svg { width:13px; height:13px; }
 .demo-compose-row > .demo-icon { min-width:25px; padding:3px; }.demo-compose-row { gap:0; }.demo-composer { padding:7px; }.app-demo .demo-preview { font-size:16px; }
 .demo-media-photo { width:190px; }.demo-sidebar,.app-discord .demo-sidebar { width:100%; }.demo-sidebar-heading { padding:6px 10px; }
 .demo-address > .demo-icon { min-width:23px; padding:4px; }.demo-address [data-tool="browser-forward"],.demo-address [data-tool="reload"] { display:none; }.demo-url { padding:5px; font-size:9px !important; gap:4px; }.app-safari .demo-titlebar { padding-left:63px; }.app-safari .demo-address { padding-right:4px; }.demo-address [data-tool="bookmark"] { display:none; }
 .demo-browser-tab { padding:0 8px; font-size:10px; }.demo-browser-tab svg { width:12px; height:12px; }.app-edge .demo-titlebar { padding-right:68px; }.demo-windows-controls { gap:11px; right:8px; }
 .demo-catalog { padding:15px; }.demo-catalog h3 { font-size:23px; }.demo-products { gap:8px; grid-template-columns:1fr 1fr; }.demo-products button:last-child { display:none; }.demo-products b { font-size:12px; }
 .demo-panel { width:100%; border:0; }.demo-layer { top:30px; }.is-browser .demo-layer { top:72px; }.demo-panel-body { padding:12px; }.demo-call { padding-top:10px; }
 .app-demo.demo-expanded { inset:5px; padding:10px; }.demo-expanded .demo-window { min-height:400px; }
}
@media (prefers-reduced-motion:no-preference) { .demo-message-menu { transition:opacity .12s; }.demo-highlight { animation:demo-highlight 2s forwards; } @keyframes demo-highlight { to { outline-color:transparent; } } }

.demo-search { position:relative; }.demo-search-placeholder { position:absolute; left:32px; pointer-events:none; font-size:12px; }.demo-search[data-empty="false"] .demo-search-placeholder { display:none; }
.demo-turn-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; padding:2px 5px 6px; color:var(--d-muted); }
.demo-reply-status { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.demo-reply-status > svg { width:17px; height:17px; }
.demo-typing { display:flex; gap:3px; align-items:center; height:16px; }
.demo-typing i { width:4px; height:4px; background:var(--d-accent); border-radius:50%; animation:demo-typing 1s ease-in-out infinite; }
.demo-typing i:nth-child(2) { animation-delay:.15s; }.demo-typing i:nth-child(3) { animation-delay:.3s; }
.demo-reply-error { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px; background:var(--d-field); border:1px solid var(--d-line); border-radius:8px; font-size:14px; }
.demo-reply-error button { display:flex; align-items:center; gap:6px; min-height:36px; padding:5px 10px; border:1px solid var(--d-muted); border-radius:6px; background:var(--d-bg); color:inherit; font:inherit; cursor:pointer; }
.demo-reply-error svg { width:16px; height:16px; }
.demo-install { display:grid; grid-template-columns:auto 1fr; gap:12px 16px; align-items:center; padding:20px; border-top:1px solid var(--d-line); background:var(--d-bg); color:var(--d-text); animation:demo-install-in .55s cubic-bezier(.2,.8,.2,1) both; }
.demo-install b { display:block; font-size:18px; line-height:1.3; }.demo-install p { margin:5px 0 0; font-size:13px; color:var(--d-muted); }
.demo-install-art { display:flex; align-items:center; gap:7px; }.demo-install-art > span { color:var(--d-muted); }.demo-install-art svg { width:24px; height:24px; }.demo-install-art img { border-radius:11px; animation:demo-icon-in .7s .15s both; }.demo-install-art kbd { padding:4px 5px; border:1px solid var(--d-line); border-bottom-width:3px; border-radius:6px; font-size:12px; }
.demo-install-link { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:8px 16px; color:#fff; background:#187e39; border:1px solid #187e39; border-radius:9px; font-size:15px; font-weight:600; text-decoration:none; }.demo-install-link svg { width:20px; height:20px; }.demo-install-link:hover { background:#12662d; }.demo-install-link:focus-visible { outline:3px solid var(--d-accent); outline-offset:3px; }
.demo-actions[hidden] { display:none; }
@keyframes demo-typing { 50% { transform:translateY(-3px); opacity:.5; } }
@keyframes demo-install-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes demo-icon-in { from { transform:scale(.7) rotate(-8deg); } to { transform:scale(1) rotate(0); } }
@media(max-width:540px) { .demo-turn-header { gap:5px; }.demo-reply-status { font-size:12px; }.demo-install { padding:14px; gap:10px; }.demo-install-art > span,.demo-install-art kbd { display:none; }.demo-install b { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .demo-typing i,.demo-install,.demo-install-art img { animation:none; } }

/* The suggestion occupies the same field as a native inline completion. */
.demo-inline { position:absolute; top:9px; left:6px; right:6px; max-height:202px; overflow:auto; color:var(--d-muted); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; }
.demo-inline[hidden],.has-suggestion .demo-placeholder { display:none; }
.demo-inline kbd { display:inline-block; padding:0 5px; border:1px solid currentColor; border-radius:4px; font-size:12px; line-height:1.4; vertical-align:middle; }
.app-demo .demo-preview { max-height:220px; }
.demo-primary kbd { padding:3px 6px; border:1px solid currentColor; border-radius:5px; font:inherit; font-size:12px; opacity:.8; }
.panel-variants { width:min(480px,100%); }
.demo-variants-list { display:grid; gap:10px; }
.demo-variants-list button { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--d-line); border-radius:10px; background:var(--d-bg); color:var(--d-text); text-align:left; font:inherit; line-height:1.45; cursor:pointer; overflow-wrap:anywhere; }
.demo-variants-list button:hover,.demo-variants-list button:focus-visible { border-color:var(--d-accent); background:var(--d-side); }
.demo-variants-list svg { flex:none; width:18px; height:18px; color:var(--d-accent); }
.demo-variants-loading { display:flex; align-items:center; gap:10px; min-height:80px; }
@media(max-width:720px) { .demo-inline { font-size:16px; } }
@media(hover:none) { .demo-primary kbd { display:none; } }

/* Mattermost channels and Zoom Chat keep their own navigation and message layout. */
.demo-team-rail { display:flex; flex-direction:column; align-items:center; gap:14px; width:48px; padding:14px 5px; flex:none; background:var(--d-side); border-right:1px solid var(--d-line); }
.demo-team-rail > img { width:29px; height:29px; margin-bottom:12px; }
.demo-team-rail > button:last-child { margin-top:auto; }
.demo-channel-mark { display:grid; place-items:center; flex:none; width:32px; height:32px; font-size:24px; font-weight:500; }
.app-mattermost { --d-accent:#1c58d9; --d-side:#1e325c; --d-selected:#314b7a; --d-selected-text:#fff; }
.app-mattermost .demo-titlebar { background:#172b4d; color:#fff; border-color:#334869; }
.app-mattermost .demo-sidebar,.app-mattermost .demo-team-rail { color:#e5eaf3; --d-muted:#bdc9df; --d-line:#435779; --d-accent:#8ab4ff; }
.app-mattermost .demo-sidebar { width:180px; }
.app-mattermost .demo-search { background:#ffffff14; color:#dce5f6; }
.app-mattermost .demo-chat { min-height:44px; padding:7px 10px; }
.app-mattermost .demo-chat-copy > span,.app-mattermost .demo-chat-meta time { display:none; }
.app-mattermost .demo-chat .demo-avatar { width:26px; height:26px; border-radius:5px; }
.app-mattermost .demo-avatar,.app-mattermost .demo-avatar .demo-photo-tile { border-radius:5px; }
.app-mattermost .demo-history { background:var(--d-bg); }
.app-mattermost .demo-day,.app-zoom .demo-day { align-items:center; gap:12px; }
.app-mattermost .demo-day::before,.app-mattermost .demo-day::after,.app-zoom .demo-day::before,.app-zoom .demo-day::after { content:''; height:1px; flex:1; background:var(--d-line); }
.app-mattermost .demo-compose-row,.app-zoom .demo-compose-row { border:1px solid var(--d-line); border-radius:8px; padding:4px; }
.app-mattermost .demo-message.feed-message,.app-zoom .demo-message.feed-message { padding:9px 0; }
.app-mattermost .demo-message-author time,.app-zoom .demo-message-author time { justify-content:flex-start; }
.app-mattermost .demo-message-author b { color:var(--d-text); }
.app-zoom { --d-bg:#fff; --d-text:#222230; --d-side:#f5f5f8; --d-accent:#0b5cff; --d-selected:#e7efff; --d-selected-text:#17439c; --d-line:#e0e2e8; }
.app-zoom .demo-titlebar { color:#0b5cff; }
.app-zoom .demo-sidebar { width:180px; }
.app-zoom .demo-chat { min-height:64px; margin:2px 6px; width:calc(100% - 12px); border-radius:8px; }
.app-zoom .demo-history { background:var(--d-bg); }
.app-zoom .demo-message-content > p { display:inline-block; padding:9px 12px; border-radius:8px; background:var(--d-side); }
.app-zoom .demo-message.out .demo-message-content > p { background:var(--d-selected); color:var(--d-selected-text); }
.app-zoom .demo-compose-send,.app-mattermost .demo-compose-send { border-radius:7px; }
[data-theme="dark"] .app-mattermost { --d-bg:#20242c; --d-text:#e1e5ed; --d-muted:#a9b1c0; --d-line:#3b4350; --d-side:#19263e; --d-selected:#344d73; --d-selected-text:#fff; }
[data-theme="dark"] .app-zoom { --d-bg:#242427; --d-text:#ededf1; --d-muted:#b2b3bd; --d-line:#404147; --d-side:#303035; --d-selected:#173b6c; --d-selected-text:#dfebff; --d-accent:#6ea4ff; }
[data-theme="dark"] .app-zoom .demo-titlebar { color:#91baff; }
@media(max-width:719px) { .demo-team-rail { display:none; } .app-mattermost .demo-sidebar,.app-zoom .demo-sidebar { width:100%; } }