/* Native client illustrations. The surrounding controls remain the live demo. */
.demo-window { min-height: 570px; }
.demo-window .conversation { padding: 0; min-height: 440px; }
.demo-window .demo-window-top { min-height: 53px; padding: 14px 20px; }
.demo-window .demo-window-top > div { font-size: 12px; }
.demo-window #demo-channel { font-size: 10px; }
.demo-window .demo-badge { font-size: 8px; }
.demo-window .prompt-tabs { padding: 10px 18px; gap: 7px; }
.demo-window .prompt-tabs button { font-size: 11px; padding: 8px 11px; }
.demo-window .demo-window-bottom { padding: 12px 19px; font-size: 9px; }
.native-shell { --app-ink: #252725; --app-muted: #777a76; --app-line: #e7e8e4; --app-accent: #444; display: grid; grid-template-columns: 147px minmax(0, 1fr); min-height: 448px; background: #fff; color: var(--app-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.native-sidebar { display: flex; flex-direction: column; padding: 19px 10px 13px; border-right: 1px solid var(--app-line); background: #f8f8f7; min-width: 0; }
.native-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px; margin-bottom: 24px; font-size: 15px; font-weight: 650; }
.native-brand img { width: 23px; height: 23px; object-fit: contain; color-scheme: light; }
.native-nav-group { display: grid; gap: 4px; margin-bottom: 28px; }
.native-nav-item { display: flex; align-items: center; gap: 7px; padding: 8px 7px; border-radius: 6px; font-size: 10px; white-space: nowrap; line-height: 1.4; }
.native-nav-item .icon { width: 12px; height: 12px; flex-shrink: 0; }
.native-nav-item.current { background: #eaeae7; font-weight: 550; }
.native-nav-label { display: block; padding: 0 8px; margin-bottom: 9px; font-size: 9px; color: var(--app-muted); }
.native-history-item { display: block; margin: 11px 8px; font-size: 10px; color: #777; }
.native-profile { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 36px 7px 0; font-size: 11px; }
.native-profile-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dbdfd6; color: #4c5846; font-size: 8px; font-weight: 650; }
.native-profile small { display: block; color: var(--app-muted); font-size: 8px; margin-top: 3px; }
.native-chat { min-width: 0; display: flex; flex-direction: column; }
.native-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 13px 23px; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.native-chat-heading > strong { font-weight: 600; }
.native-heading-meta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 9px; color: var(--app-muted); }
.native-heading-meta .icon { width: 11px; height: 11px; }
.native-thread { flex: 1; width: 100%; padding: 25px 26px 24px; }
.native-shell .message { gap: 10px; }
.native-shell .message + .message { margin-top: 26px; }
.native-shell .avatar { width: 31px; height: 31px; border-radius: 6px; font-size: 10px; }
.native-shell .lotse-avatar { background: transparent; }
.native-shell .lotse-avatar img { width: 30px; height: 30px; object-fit: contain; color-scheme: light; }
.native-shell .message-head { gap: 7px; font-size: 12px; margin-bottom: 6px; color: var(--app-ink); }
.native-shell .message-head strong { font-weight: 650; }
.native-shell .message-head > span { font-size: 9px; color: var(--app-muted); }
.native-shell .message-head .bot-tag { color: var(--app-muted); background: #f0f1ed; font-size: 7px; padding: 3px 4px; }
.native-shell .message-text { font-size: 14px; line-height: 1.7; color: var(--app-ink); letter-spacing: -.15px; }
.native-shell .message-text strong { color: inherit; font-weight: 650; }
.native-shell .response-short-detail { margin: 9px 0 0; font-size: 12px; line-height: 1.65; color: var(--app-muted); }
.native-shell .response-details { margin-top: 9px; }
.native-shell .response-details li { font-size: 12px; line-height: 1.75; color: var(--app-ink); padding-left: 13px; }
.native-shell .response-details li:before { background: #aaa; top: 9px; }
.native-shell .source-pills { margin-top: 15px; gap: 6px; }
.native-shell .source-pill { border-color: #e1e4de; border-radius: 6px; background: #f7f8f5; padding: 6px 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: #64705c; }
.native-shell .source-pill img { height: 12px; width: 12px; }
.native-shell .source-pill:hover, .native-shell .source-pill[aria-expanded=true] { border-color: #90a779; background: #edf3e5; }
.native-shell .source-expanded { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; line-height: 1.7; padding: 12px; }
.native-shell .response-meta { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; color: #89917f; margin-top: 10px; }
.native-shell .response-meta .icon { height: 11px; width: 11px; }
.native-composer-area { margin-top: auto; padding: 0 24px 12px; }
.native-composer { border: 1px solid #d9dcd5; border-radius: 17px; background: #fff; padding: 13px 15px 9px; }
.native-placeholder { display: block; color: #93968e; font-size: 12px; line-height: 1.5; }
.native-composer-tools { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.native-add { display: flex; align-items: center; color: #73776f; }
.native-add .icon { width: 15px; height: 15px; }
.native-composer-context { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #89917f; }
.native-context-dot { width: 5px; height: 5px; border-radius: 50%; background: #8da471; }
.native-send { display: grid; place-items: center; margin-left: auto; height: 24px; width: 24px; border-radius: 50%; color: #fff; background: #323631; font-size: 17px; line-height: 1; }
.native-composer-caption { display: block; font-size: 8px; color: #a2a59c; margin-top: 8px; text-align: center; }
.native-shell .write-preview { margin-top: 12px; padding: 15px; }
.native-shell .write-preview .destination { font-size: 11px; line-height: 1.5; }
.native-shell .write-preview .destination img { height: 15px; width: 15px; }
.native-shell .write-preview p { font-size: 13px; line-height: 1.6; }
.native-shell .write-access { font-size: 10px; line-height: 1.6; }
.native-shell .confirm-write { font-size: 11px; padding: 10px 14px; margin-top: 13px; }
.native-shell .write-success { font-size: 11px; }

/* Slack: workspace violet, channel rail, compact threaded messages. */
.demo-window[data-client=slack] .demo-window-top { background: #3f0e40; border-color: #582658; color: #fff; }
.demo-window[data-client=slack] #demo-channel, .demo-window[data-client=slack] .window-divider { color: #dcc7de; }
.demo-window[data-client=slack] .demo-badge { color: #e0cbe2; border-color: #765076; }
.demo-window[data-client=slack] .prompt-tabs { background: #fff; }
.demo-window[data-client=slack] .prompt-tabs button.selected { color: #4a194c; background: #f1eaf2; border-color: #e2d4e4; }
.native-slack { --app-ink: #242424; --app-muted: #7d7d7d; }
.native-slack .native-sidebar { background: #4a154b; border-right: none; color: #f3eaf3; padding: 17px 7px 13px; }
.native-workspace { display: flex; align-items: center; gap: 7px; padding: 0 5px 18px; font-size: 13px; }
.workspace-tile { width: 24px; height: 24px; display: grid; place-items: center; background: #fff3; border: 1px solid #ffffff24; border-radius: 6px; font-size: 12px; }
.native-chevron { margin-left: auto; color: #d0b6d1; }
.native-slack .native-nav-group { margin-bottom: 20px; }
.native-slack .native-nav-item { color: #dbc9dd; font-size: 9px; padding: 7px 8px; }
.native-slack .native-nav-label { color: #c5a7c7; margin: 0 8px 8px; padding: 0; font-size: 10px; }
.native-channel { display: flex; gap: 6px; align-items: center; padding: 7px 9px; font-size: 11px; color: #e5d9e6; white-space: nowrap; }
.native-channel.current { background: #1164a3; border-radius: 5px; color: #fff; font-size: 10px; }
.native-slack .native-nav-label:not(:first-child) { margin-top: 17px; }
.native-lotse-channel img { height: 18px; width: 18px; border-radius: 3px; }
.native-online { width: 5px; height: 5px; background: #64cda0; border-radius: 50%; margin-left: auto; }
.native-slack .native-profile small { color: #c4a6c6; }
.native-slack .native-profile-avatar { border-radius: 5px; background: #e1d3b8; }
.native-slack .native-chat-heading { background: #fff; }
.native-hash { color: #6e6e6e; margin-right: 3px; font-weight: 400; }
.native-slack .native-thread { padding-top: 24px; }
.native-slack .lotse-avatar { background: #e8efd9; }
.native-slack .native-composer { border-radius: 7px; padding: 0 12px 8px; border-color: #c9cac7; }
.native-formatting { display: flex; align-items: center; gap: 16px; color: #787a75; font-size: 12px; padding: 8px 1px; margin: 0 -3px 7px; border-bottom: 1px solid #f0f0ed; }
.native-slack .native-placeholder { font-size: 11px; }
.native-slack .native-composer-tools { margin-top: 10px; }
.native-slack .native-send { background: #19865b; border-radius: 4px; width: 27px; }
.native-slack .native-composer-context { color: #6b6d69; }

/* ChatGPT: neutral chrome, a right-aligned user bubble, open answer. */
.demo-window[data-client=chatgpt] .demo-window-top { background: #fff; border-color: #e9e9e6; color: #242424; }
.demo-window[data-client=chatgpt] .prompt-tabs { background: #fafafa; border-color: #ededeb; }
.demo-window[data-client=chatgpt] .prompt-tabs button.selected { color: #333; border-color: #deded9; background: #eaeae7; }
.native-chatgpt { --app-ink: #262626; --app-muted: #848484; background: #fff; }
.native-chatgpt .native-sidebar { background: #f8f8f7; }
.native-chatgpt .native-chat-heading { border-color: transparent; }
.native-chatgpt .message-user .avatar, .native-chatgpt .message-user .message-head { display: none; }
.native-chatgpt .message-user .message-content { flex: none; max-width: 88%; margin-left: auto; }
.native-chatgpt .message-user .message-text { background: #f1f1ee; border-radius: 17px 17px 3px 17px; padding: 10px 14px; font-size: 13px; }
.native-chatgpt .message-assistant .avatar { width: 24px; height: 24px; }
.native-chatgpt .message-assistant .avatar img { height: 24px; width: 24px; }
.native-chatgpt .message-assistant .message-time { display: none; }
.native-chatgpt .native-composer { border-radius: 23px; background: #f4f4f1; border-color: #eeeeea; padding: 14px 17px 11px; }
.native-chatgpt .native-send { background: #242424; }

/* Claude: warm paper, restrained navigation, a serif reading surface. */
.demo-window[data-client=claude] .demo-window-top { color: #3b3932; background: #f6f4ed; border-color: #e4dfd5; }
.demo-window[data-client=claude] .prompt-tabs { background: #faf8f2; border-color: #e8e3d9; }
.demo-window[data-client=claude] .prompt-tabs button.selected { background: #ece6db; border-color: #ddd4c4; color: #7b5c42; }
.native-claude { --app-ink: #37352f; --app-muted: #8a867b; --app-line: #e8e3d9; background: #faf9f5; }
.native-claude .native-sidebar { background: #f0eee6; }
.native-claude .native-brand { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; letter-spacing: -.6px; font-weight: 500; }
.native-claude .native-nav-item.current { background: #e4e0d5; }
.native-claude .native-chat-heading { border-color: transparent; }
.native-claude .native-profile-avatar { background: #d8c8b5; color: #6d5742; }
.native-claude .message-user .avatar, .native-claude .message-user .message-head { display: none; }
.native-claude .message-user .message-content { padding: 12px 15px; background: #efece4; border-radius: 10px; }
.native-claude .message-user .message-text { font-size: 13px; }
.native-claude .message-assistant .message-text, .native-claude .message-assistant .response-details li { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.65; letter-spacing: -.12px; }
.native-claude .message-assistant .message-head { margin-bottom: 9px; }
.native-claude .message-assistant .message-time { display: none; }
.native-claude .message-assistant .avatar { width: 23px; height: 23px; }
.native-claude .message-assistant .avatar img { width: 23px; height: 23px; }
.native-claude .message-assistant .message-head .bot-tag { background: #eee7dc; color: #97785c; }
.native-claude .native-composer { border-radius: 13px; border-color: #dfd8cb; box-shadow: 0 3px 9px #42331305; }
.native-claude .native-send { background: #c77954; border-radius: 6px; }
.native-claude .native-composer-context { color: #8a867b; }

/* Promptly chat chrome. */
.demo-window[data-client=promptly] .demo-window-top { color: #253c58; background: #f5f8ff; border-color: #e1e8f3; }
.demo-window[data-client=promptly] .prompt-tabs { background: #f8faff; border-color: #e2e8f2; }
.demo-window[data-client=promptly] .prompt-tabs button.selected { color: #3461ac; background: #e6eefc; border-color: #d7e3f8; }
/* Promptly: white-to-blue chat surface, blue header and model pill. */
.native-promptly { --app-ink: #1f2937; --app-muted: #64748b; --app-line: #dbeafe; background: linear-gradient(135deg, #fff, #eff6ff); }
.native-promptly .native-sidebar { background: #f8fafc; }
.native-promptly .native-nav-item.current { color: #2563eb; background: #eff6ff; }
.native-promptly .native-chat-heading { background: linear-gradient(90deg, #eff6ff, #dbeafe); }
.native-promptly .native-work-chip { color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; padding: 4px 12px; }
.native-promptly .message-user .message-text { background: #f1f5f9; border-radius: 12px; padding: 11px 14px; }
.native-promptly .native-composer { border-radius: 20px; border-color: #cbd5e1; background: #ffffffed; box-shadow: 0 3px 10px #0f172a08; }
.native-promptly .native-send { background: #2563eb; border-radius: 50%; }
.native-promptly .source-pill { color: #2563eb; border-color: #dbeafe; background: #eff6ff; }
img[src$="/promptly.png"] { filter: invert(1); }

.snapshot-proof-id { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-family: var(--mono); font-size: 10px; color: #6c805b; }
.snapshot-proof-id .icon { width: 12px; height: 12px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .native-shell { grid-template-columns: 125px minmax(0, 1fr); }
  .native-sidebar { padding-left: 6px; padding-right: 6px; }
  .native-thread { padding: 22px 19px; }
  .native-nav-item { font-size: 9px; gap: 5px; padding-left: 5px; padding-right: 5px; }
  .native-channel.current { font-size: 9px; padding-left: 7px; }
  .native-workspace { font-size: 12px; }
}
@media (max-width: 640px) {
  .demo-window { min-height: 0; }
  .demo-window .demo-window-top { padding: 13px 15px; }
  .demo-window #demo-channel { font-size: 9px; }
  .demo-window .prompt-tabs { padding: 9px 12px; gap: 3px; }
  .demo-window .prompt-tabs button { font-size: 10px; padding: 8px 9px; }
  .native-shell { grid-template-columns: minmax(0, 1fr); min-height: 440px; }
  .native-sidebar { display: none; }
  .native-chat-heading { padding: 13px 18px; font-size: 11px; }
  .native-thread { padding: 24px 18px; }
  .native-shell .message { gap: 9px; }
  .native-shell .message-text { font-size: 13px; }
  .native-shell .message-head { font-size: 11px; }
  .native-shell .source-pill { font-size: 9px; padding: 6px; gap: 4px; }
  .native-shell .source-pill img { width: 11px; height: 11px; }
  .native-shell .message-user .message-content { max-width: 100%; }
  .native-composer-area { padding: 0 17px 12px; }
  .native-claude .message-assistant .message-text, .native-claude .message-assistant .response-details li { font-size: 15px; }
  
  .demo-window .demo-window-bottom { padding: 11px 14px; font-size: 8px; flex-wrap: wrap; gap: 6px 12px; }
}

.motion-paused .refreshing { animation: none !important; }