:root {
  --background: #f6f7fb;
  --surface: #ffffff;
  --surface-muted: #fafbfc;
  --border: #e0e3eb;
  --border-soft: #edf0f4;
  --text: #202432;
  --muted: #737b8c;
  --faint: #969dac;
  --brand: #5636d7;
  --brand-dark: #4020b9;
  --brand-soft: #eeeafe;
  --ink: #282b39;
  --success: #2bad82;
  --success-soft: #e8f7f1;
  --danger: #b33b51;
  --lime: #d8ff57;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a { cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid rgba(86, 54, 215, .28); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.demo-app, .demo-workspace { width: 100%; height: 100dvh; min-height: 520px; }
.demo-app { background: radial-gradient(circle at 72% -8%, rgba(86,54,215,.1), transparent 32%), var(--background); }
.workspace-layout { display: grid; width: 100%; height: 100%; grid-template-columns: 304px minmax(0, 1fr); }

/* Desktop sidebar, matching the regular SofIA application shell. */
.demo-sidebar { display: flex; min-height: 0; flex-direction: column; padding: 20px 18px; border-right: 1px solid var(--border); background: #fbfbfd; }
.demo-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 850; text-decoration: none; letter-spacing: -.02em; }
.demo-brand small { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.demo-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: var(--brand); color: #fff; font-size: 17px; box-shadow: 0 8px 18px rgba(86,54,215,.18); }
.sidebar-brand { min-height: 50px; padding-inline: 3px; }
.sidebar-demo-card { margin-top: 22px; padding: 19px; border: 1px solid #dcd6f7; border-radius: 19px; background: linear-gradient(145deg, #f2efff, #fff); }
.sidebar-label, .sidebar-heading { display: block; margin: 0 0 9px; color: var(--brand); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-demo-card h2 { margin: 0 0 9px; color: var(--ink); font-size: 20px; line-height: 1.05; letter-spacing: -.045em; }
.sidebar-demo-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sidebar-section { margin-top: 28px; }
.sidebar-heading { margin-bottom: 10px; padding-inline: 4px; color: #667085; }
.sidebar-equipment { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.sidebar-equipment.is-selected { border-color: #c8bdf5; background: var(--brand-soft); }
.sidebar-equipment-mark { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 14px; font-weight: 900; }
.sidebar-equipment.is-selected .sidebar-equipment-mark { background: var(--brand); color: #fff; }
.sidebar-equipment strong, .sidebar-equipment small { display: block; }
.sidebar-equipment strong { color: #343948; font-size: 12px; line-height: 1.25; }
.sidebar-equipment small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.sidebar-progress { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 15px 4px; border-top: 1px solid var(--border-soft); }
.sidebar-progress > span { color: var(--brand); font-size: 21px; font-weight: 900; letter-spacing: -.05em; }
.sidebar-progress p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
.sidebar-back { padding: 10px 4px; color: var(--muted); font-size: 11px; text-decoration: none; }
.sidebar-back:hover { color: var(--brand); }

/* The demo is the real chat surface, not a second landing page. */
.chat-panel { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.chat-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 340px; background-image: linear-gradient(rgba(86,54,215,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(86,54,215,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.chat-panel-header { position: relative; z-index: 3; display: flex; min-height: 72px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 22px; border-bottom: 1px solid rgba(224,227,235,.9); background: rgba(249,250,252,.88); backdrop-filter: blur(18px); }
.chat-title-wrap { display: flex; min-width: 0; align-items: center; gap: 11px; }
.chat-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: var(--brand); color: #fff; font-size: 17px; box-shadow: 0 7px 16px rgba(86,54,215,.17); }
.chat-panel-header h1 { margin: 0 0 3px; color: #2c3140; font-size: 15px; letter-spacing: -.02em; }
.chat-panel-header p { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 0; overflow: hidden; color: #7f8796; font-size: 10px; white-space: nowrap; }
.chat-panel-header p span:last-child { overflow: hidden; text-overflow: ellipsis; }
.online-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(43,173,130,.1); }
.chat-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.chat-header-actions > a { color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.chat-header-actions > a:hover { color: var(--brand); }
.chat-limit-badge { min-width: 40px; padding: 7px 9px; border: 1px solid #d9d1f6; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font-size: 10px; font-weight: 900; text-align: center; }

.conversation { position: relative; z-index: 1; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c9ced8 transparent; scrollbar-width: thin; }
.conversation-inner { display: flex; width: min(900px, 100%); min-height: 100%; flex-direction: column; margin: 0 auto; padding: 28px 32px 32px; }
.chat-welcome { margin: 0 auto 22px; padding-top: clamp(4px, 2vh, 24px); text-align: center; }
.chat-welcome-mark { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto; border-radius: 17px; background: var(--brand-soft); color: var(--brand); font-size: 22px; box-shadow: 0 0 0 8px rgba(255,255,255,.65); }
.chat-welcome > p { margin: 21px 0 7px; color: #7668b7; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.chat-welcome h2 { margin: 0; color: var(--text); font-size: clamp(28px, 4vw, 42px); line-height: 1; letter-spacing: -.055em; }
.chat-welcome > span:last-child { display: block; max-width: 540px; margin: 12px auto 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.message-list { display: flex; flex-direction: column; gap: 14px; margin-top: 0; }
.equipment-selected .chat-welcome { display: none; }
.message-row { display: flex; width: 100%; align-items: flex-start; gap: 9px; animation: message-in .25s ease-out both; }
.message-row.user { justify-content: flex-end; }
.assistant-mark { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; margin-top: 2px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 14px; box-shadow: 0 7px 16px rgba(86,54,215,.15); }
.message-bubble { max-width: min(650px, 82%); padding: 14px 16px; border: 1px solid var(--border); border-radius: 21px 21px 21px 5px; background: rgba(255,255,255,.95); color: #3c4251; font-size: 14px; font-weight: 500; line-height: 1.58; box-shadow: 0 8px 28px rgba(30,34,48,.05); }
.message-row.user .message-bubble { border-color: var(--ink); border-radius: 21px 21px 5px 21px; background: var(--ink); color: #fff; box-shadow: 0 9px 24px rgba(40,43,57,.14); }
.message-bubble p { margin: 0; }
.message-bubble p + p { margin-top: 8px; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 11px 0 6px; color: #292335; font-size: 1em; font-weight: 900; line-height: 1.35; }
.markdown-body ul, .markdown-body ol { margin: 8px 0; padding-left: 20px; }
.markdown-body li + li { margin-top: 5px; }
.markdown-body strong { color: #292335; font-weight: 900; }
.markdown-body em { color: #565d6c; }
.markdown-body blockquote { margin: 9px 0; padding: 7px 10px; border-left: 3px solid #9d8be8; background: #f5f2ff; color: #55506c; }
.markdown-body code { padding: 2px 5px; border-radius: 5px; background: #f1eff8; color: #503e9e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.markdown-body pre { margin: 9px 0; padding: 11px; overflow-x: auto; border-radius: 10px; background: #242736; color: #f4f2ff; }
.markdown-body pre code { padding: 0; background: transparent; color: inherit; }
.markdown-body hr { margin: 11px 0; border: 0; border-top: 1px solid var(--border); }
.welcome-bubble { max-width: 680px; }
.source-list { display: grid; justify-items: start; gap: 6px; margin-top: 11px; }
.source-tag { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 10px; font-weight: 650; }
.source-tag strong { font-weight: 950; }
.source-tag strong + span::before { content: "·"; margin-right: 6px; margin-left: 6px; color: #8a79d8; }

.equipment-selector { display: grid; gap: 9px; margin-top: 14px; }
.equipment-option { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); color: #343948; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.equipment-option:hover { border-color: #bfb2f1; background: #f3f0ff; transform: translateY(-1px); }
.equipment-option:disabled { cursor: wait; opacity: .72; transform: none; }
.equipment-option-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: #fff; color: var(--brand); font-size: 13px; font-weight: 900; box-shadow: 0 3px 10px rgba(32,36,50,.08); }
.equipment-option-copy { min-width: 0; flex: 1; }
.equipment-option-copy strong, .equipment-option-copy small { display: block; }
.equipment-option-copy strong { font-size: 13px; }
.equipment-option-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.equipment-option-arrow { color: var(--brand); font-size: 18px; }

.typing-row { display: flex; align-items: flex-start; gap: 9px; animation: message-in .2s ease-out both; }
.typing-bubble { display: inline-flex; min-height: 42px; max-width: min(390px, calc(100% - 39px)); align-items: center; padding: 9px 14px; border: 1px solid var(--border); border-radius: 20px 20px 20px 5px; background: #fff; color: #5d6474; font-size: 11px; font-weight: 700; line-height: 1.35; box-shadow: 0 8px 28px rgba(30,34,48,.05); }
.typing-copy { min-width: 0; }
.follow-up { display: grid; gap: 7px; margin-top: 12px; }
.follow-up button { min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: #454b5a; font-size: 11px; font-weight: 850; }
.follow-up button:hover { border-color: #bfb2f1; background: var(--brand-soft); color: var(--brand-dark); }
.follow-up button.escalate { border-color: #252936; background: #252936; color: #fff; }
.event-card, .ticket-card { margin-left: 39px; padding: 13px 15px; border: 1px solid #d9efe7; border-radius: 15px; background: var(--success-soft); color: #227b62; font-size: 12px; line-height: 1.5; animation: message-in .25s ease-out both; }
.event-card strong, .ticket-card strong { display: block; margin-bottom: 3px; font-size: 12px; }
.ticket-card { border-color: #d7cff7; background: var(--brand-soft); color: var(--brand-dark); }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: #6556a7; font-size: 10px; font-weight: 800; }

.composer-shell { position: relative; z-index: 3; flex: 0 0 auto; padding: 11px max(18px, calc((100% - 760px) / 2)) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(224,227,235,.85); background: rgba(249,250,252,.92); backdrop-filter: blur(20px); }
.suggestion-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; color: var(--muted); font-size: 10px; font-weight: 850; }
.suggestion-heading small { color: var(--faint); font-size: 9px; font-weight: 550; }
.suggestion-strip { display: flex; gap: 7px; margin: 0 0 9px; overflow-x: auto; scrollbar-width: none; }
.suggestion-strip:empty { display: none; }
.suggestion-strip::-webkit-scrollbar { display: none; }
.suggestion-button { width: max-content; max-width: 100%; flex: 0 0 auto; padding: 8px 11px; border: 1px solid #d8d1f7; border-radius: 999px; background: #f5f2ff; color: var(--brand-dark); font-size: 10px; font-weight: 850; line-height: 1.25; white-space: nowrap; }
.suggestion-button:hover { border-color: var(--brand); background: var(--brand-soft); }
.suggestion-button:disabled { cursor: not-allowed; opacity: .55; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 7px; border: 1px solid #d9dde6; border-radius: 22px; background: #fff; box-shadow: 0 12px 36px rgba(32,36,50,.08); transition: border-color .18s ease, box-shadow .18s ease; }
.composer:focus-within { border-color: #9c89e8; box-shadow: 0 12px 36px rgba(32,36,50,.08), 0 0 0 4px var(--brand-soft); }
.composer textarea { min-width: 0; min-height: 44px; max-height: 96px; flex: 1; resize: none; padding: 11px 12px; border: 0; outline: 0; overflow-y: auto; background: transparent; color: #2f3443; font-size: 15px; font-weight: 500; line-height: 21px; }
.composer textarea::placeholder { color: #8e95a3; }
.composer textarea:disabled { cursor: default; opacity: .72; }
.composer textarea[readonly]:not(:disabled) { cursor: default; }
.composer button { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 15px; background: var(--brand); color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 8px 18px rgba(86,54,215,.18); }
.composer button:hover { background: var(--brand-dark); }
.composer button:disabled { cursor: not-allowed; background: #d9dce3; color: #8e95a3; box-shadow: none; }
.composer-help { margin: 7px 2px 0; color: #8b93a3; font-size: 9px; font-weight: 550; text-align: center; }
.composer-help span { color: var(--brand); }

/* Entry disclaimer and conversion CTA. */
.intro-dialog, .limit-dialog { width: min(500px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--text); box-shadow: 0 28px 80px rgba(23,25,38,.28); }
.intro-dialog::backdrop, .limit-dialog::backdrop { background: rgba(24,26,38,.58); backdrop-filter: blur(6px); }
.intro-dialog-inner, .limit-dialog-inner { position: relative; padding: 29px; border: 1px solid #dedfea; border-radius: 22px; background: #fff; }
.intro-mark, .limit-number { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 18px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); font-size: 21px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.limit-number { background: var(--lime); color: var(--ink); font-size: 16px; }
.dialog-kicker { margin: 0 0 12px; color: var(--brand); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.intro-dialog h2, .limit-dialog h2 { max-width: 390px; margin: 0 0 13px; color: var(--ink); font-size: clamp(29px, 5vw, 40px); line-height: 1; letter-spacing: -.055em; }
.intro-dialog p, .dialog-copy { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.52; }
.intro-dialog ul { display: grid; gap: 8px; margin: 19px 0 22px; padding: 0; list-style: none; color: #555c6c; font-size: 12px; line-height: 1.45; }
.intro-dialog li { position: relative; padding-left: 19px; }
.intro-dialog li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 900; }
.demo-primary { display: inline-flex; width: 100%; min-height: 47px; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 0; border-radius: 13px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 850; box-shadow: 0 8px 18px rgba(86,54,215,.18); }
.demo-primary:hover { background: var(--brand-dark); }
.demo-primary:disabled { cursor: wait; background: #8d82bd; box-shadow: none; }
.intro-dialog-inner > a { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; text-align: center; text-decoration: none; }
.dialog-close { position: absolute; top: 15px; right: 15px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--muted); font-size: 21px; line-height: 1; }
.dialog-copy { margin-bottom: 22px; }
.interest-form { padding: 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: #fafbfc; }
.interest-form label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 12px; font-weight: 850; }
.interest-row { display: flex; gap: 8px; }
.interest-row input { min-width: 0; height: 43px; flex: 1; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; }
.interest-row .demo-primary { width: auto; min-height: 43px; padding-inline: 13px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.interest-privacy { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.interest-feedback { margin: 8px 0 0; color: var(--success); font-size: 10px; line-height: 1.45; }
.interest-feedback[data-state="pending"] { color: var(--muted); }
.interest-feedback[data-state="error"] { color: #b83c4c; }
.interest-row .demo-primary:disabled { cursor: wait; opacity: .72; }
.dialog-actions { display: grid; gap: 8px; margin-top: 14px; }
.dialog-whatsapp, .dialog-cv { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-size: 12px; font-weight: 850; text-decoration: none; }
.dialog-whatsapp { background: var(--ink); color: #fff; }
.dialog-cv { border: 1px solid #d8d1f7; background: var(--brand-soft); color: var(--brand-dark); }

/* Non-blocking conversion prompt shown only after real inactivity. */
.idle-cta { position: fixed; z-index: 8; right: 22px; bottom: 154px; width: min(340px, calc(100% - 44px)); padding: 18px; border: 1px solid #d8d1f7; border-radius: 18px; background: rgba(255,255,255,.97); color: var(--text); box-shadow: 0 22px 60px rgba(33,29,57,.2); backdrop-filter: blur(18px); animation: idle-cta-in .26s ease-out both; }
.idle-cta-close { position: absolute; top: 10px; right: 10px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--muted); font-size: 19px; line-height: 1; }
.idle-cta-kicker { margin: 0 34px 8px 0; color: var(--brand); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.idle-cta h2 { margin: 0 28px 8px 0; color: var(--ink); font-size: 22px; line-height: 1.05; letter-spacing: -.04em; }
.idle-cta > p:not(.idle-cta-kicker) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.idle-cta-actions { display: grid; gap: 7px; margin-top: 14px; }
.idle-cta-actions a, .idle-cta-actions button { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 11px; font-size: 11px; font-weight: 850; text-decoration: none; }
.idle-cta-actions a { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.idle-cta-actions button { border: 1px solid #d8d1f7; background: var(--brand-soft); color: var(--brand-dark); }

@keyframes message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes idle-cta-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 761px) {
  .suggestion-strip { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .workspace-layout { grid-template-columns: 1fr; }
  .demo-sidebar { display: none; }
  .chat-panel-header { min-height: 64px; padding: 10px 14px; }
  .chat-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .chat-panel-header h1 { font-size: 14px; }
  .chat-panel-header p { max-width: 58vw; font-size: 9px; }
  .chat-header-actions > a { display: none; }
  .conversation-inner { width: 100%; padding: 22px 12px 24px; }
  .chat-welcome { margin-bottom: 24px; padding-top: 8px; }
  .chat-welcome-mark { width: 47px; height: 47px; border-radius: 15px; font-size: 19px; }
  .chat-welcome > p { margin-top: 18px; }
  .chat-welcome h2 { font-size: clamp(28px, 9vw, 36px); }
  .chat-welcome > span:last-child { max-width: 330px; font-size: 12px; }
  .message-bubble { max-width: 92%; padding: 12px 13px; font-size: 13px; }
  .welcome-bubble { max-width: calc(100% - 38px); }
  .event-card, .ticket-card { margin-left: 39px; }
  .composer-shell { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .suggestion-button { max-width: 76vw; font-size: 10px; white-space: normal; }
  .source-tag { max-width: 100%; font-size: 9px; line-height: 1.35; }
  .composer { padding: 6px; border-radius: 20px; }
  .composer textarea { min-height: 42px; padding: 10px; font-size: 16px; }
  .composer button { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; }
  .intro-dialog-inner, .limit-dialog-inner { padding: 23px 19px max(22px, env(safe-area-inset-bottom)); border-radius: 19px; }
  .interest-row { display: grid; grid-template-columns: 1fr; }
  .interest-row .demo-primary { width: 100%; }
  .idle-cta { right: 12px; bottom: calc(142px + env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 16px; border-radius: 16px; }
  .idle-cta h2 { font-size: 20px; }
}

@media (max-height: 690px) and (max-width: 760px) {
  .chat-welcome { display: none; }
  .conversation-inner { padding-top: 14px; }
  .intro-dialog-inner { padding-block: 19px; }
  .intro-mark { width: 44px; height: 44px; margin-bottom: 13px; }
  .intro-dialog ul { margin-block: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}