.lyso-intro[data-intro-lesson="collaborate"] .lyso-intro-window { height: clamp(440px, 60vw, 560px); }
.lyso-collab { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--text); }
.lyso-intro[data-intro-ready="true"] .lyso-collab { display: block; }
.lyso-collab-set { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 340px; font-family: inherit; font-size: 14px; }
.lyso-collab * { box-sizing: border-box; }
.lyso-collab-identity { height: 32px; text-align: center; color: var(--muted); font-size: 13px; }
.lyso-collab-phone { padding: 7px; border: 1px solid var(--line); border-radius: 34px; background: var(--bg); box-shadow: 0 12px 30px #0002; }
.lyso-collab-screen { position: relative; min-height: 570px; display: flex; flex-direction: column; border-radius: 27px; overflow: hidden; background: var(--panel); }
.lyso-collab-status { display: flex; justify-content: space-between; padding: 10px 19px 7px; font-size: 12px; }
.lyso-collab-status > svg { width: 51px; height: 14px; }
.lyso-collab-home { width: 90px; height: 4px; border-radius: 4px; margin: auto auto 9px; background: var(--muted); opacity: .6; flex-shrink: 0; }
.lyso-collab-lock { position: absolute; inset: 0; color: #fff; background: radial-gradient(ellipse at 90% 85%, #bc859066, transparent 62%), radial-gradient(ellipse at 0 10%, #71a4b388, transparent 65%), linear-gradient(150deg, #1d3549, #344b6c 52%, #655873); }
.lyso-collab[data-view="notification"] .lyso-collab-screen { filter: brightness(var(--collab-lock-brightness, .64)); }
.lyso-collab[data-view="notification"] .lyso-collab-status { z-index: 1; color: #fff; }
.lyso-collab[data-view="notification"] .lyso-collab-status > strong { visibility: hidden; }
.lyso-collab[data-view="notification"] .lyso-collab-home { position: relative; z-index: 1; background: #fff; }
.lyso-collab-lock-clock { display: flex; flex-direction: column; align-items: center; padding-top: 47px; text-shadow: 0 2px 12px #14243233; }
.lyso-collab-lock-clock > svg { width: 17px; height: 21px; margin-bottom: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lyso-collab-lock-clock > span { font-size: 15px; font-weight: 500; }
.lyso-collab-lock-clock > strong { font-size: 72px; line-height: 1.2; font-weight: 500; letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.lyso-collab-notification { margin: 32px 12px 0; padding: 14px 16px; border: 1px solid #ffffff85; background: #f4f7f5ed; color: #172d3e; box-shadow: 0 7px 20px #10253524; border-radius: 17px; opacity: 0; transform: translateY(-18px); }
.lyso-collab-notification-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.lyso-collab-notification-head small { margin-left: auto; color: #536674; font-size: 11px; font-weight: 400; }
.lyso-collab-notification strong { display: block; margin: 9px 0 5px; font-size: 16px; line-height: 1.3; }
.lyso-intro .lyso-collab-notification p { margin: 0; font-size: 14px; color: #425565; }
.lyso-collab-mail-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; background: #286fa5; color: #fff; }
.lyso-collab-mail-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lyso-collab[data-view="notification"] .lyso-collab-ring { border-color: #286fa5; }
/* Mail app chrome is neutral; only the HTML message uses Lyso's email branding. */
.lyso-collab { --collab-mail-bg: #fff; --collab-mail-text: #20262e; --collab-mail-muted: #65707c; --collab-mail-line: #dde1e7; --collab-mail-accent: #286fa5; }
html[data-public-colour-scheme="dark"] .lyso-collab { --collab-mail-bg: #24272d; --collab-mail-text: #f0f2f5; --collab-mail-muted: #afb7c2; --collab-mail-line: #40454f; --collab-mail-accent: #8cc7f4; }
.lyso-collab[data-view="email"] .lyso-collab-screen, .lyso-collab[data-view="phone"] .lyso-collab-screen { height: 570px; background: var(--collab-mail-bg); color: var(--collab-mail-text); }
.lyso-collab[data-view="email"] .lyso-collab-status, .lyso-collab[data-view="phone"] .lyso-collab-status { flex-shrink: 0; }
.lyso-collab[data-view="email"] .lyso-collab-home, .lyso-collab[data-view="phone"] .lyso-collab-home { background: var(--collab-mail-muted); margin-top: 5px; }
.lyso-collab-email { display: flex; flex-direction: column; flex: 1; min-height: 0; font-family: Arial, Helvetica, sans-serif; }
.lyso-collab-mail-toolbar, .lyso-collab-mail-actions { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 9px 15px; color: var(--collab-mail-accent); }
.lyso-collab-mail-toolbar { border-bottom: 1px solid var(--collab-mail-line); }
.lyso-collab-mail-toolbar > strong { color: var(--collab-mail-text); font-size: 14px; margin-right: 37px; }
.lyso-collab-mail-toolbar span, .lyso-collab-mail-actions span { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.lyso-collab-mail-toolbar svg, .lyso-collab-mail-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lyso-collab-mail-meta { padding: 12px 15px; flex-shrink: 0; border-bottom: 1px solid var(--collab-mail-line); }
.lyso-intro .lyso-collab-mail-meta h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.25; color: var(--collab-mail-text); overflow-wrap: anywhere; }
.lyso-collab-mail-sender { display: flex; gap: 8px; align-items: center; }
.lyso-collab-mail-avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; background: #e3edf5; color: #335c7a; border-radius: 50%; font-size: 14px; }
.lyso-collab-mail-sender > div { flex: 1; min-width: 0; }
.lyso-collab-mail-sender strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.lyso-collab-mail-sender small { display: block; color: var(--collab-mail-muted); font-size: 10px; overflow-wrap: anywhere; }
.lyso-collab-email-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--collab-mail-bg); }
.lyso-collab-email-document { padding: 14px 10px; color: var(--collab-email-text); background: var(--collab-email-surface); }
.lyso-collab-mail-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--collab-mail-muted); }
.lyso-collab-mail-loading svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lyso-collab-mail-loading circle { opacity: .2; }
.lyso-collab-email-card { background: var(--collab-email-card); border: 1px solid var(--collab-email-border); border-radius: 12px; overflow: hidden; }
.lyso-collab-email-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--collab-email-primary); color: var(--collab-email-primary-text); padding: 14px 16px; }
.lyso-collab-email-brand strong { font-size: 21px; }
.lyso-collab-email-brand span { max-width: 120px; text-align: right; font-size: 10px; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }
.lyso-collab-email-content { padding: 20px 17px; }
.lyso-intro .lyso-collab-email-content h4 { color: var(--collab-email-text); font-size: 22px; line-height: 1.2; margin: 0 0 12px; overflow-wrap: anywhere; }
.lyso-intro .lyso-collab-email-document p { color: var(--collab-email-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.lyso-collab-email-task { padding: 13px; margin: 18px 0; border: 1px solid #d8dee5; border-radius: 10px; background: #f5f5f5; }
.lyso-collab-email-task > small { display: block; margin-bottom: 7px; color: #66717d; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.lyso-collab-email-task > div { display: flex; gap: 12px; }
.lyso-collab-email-task span { flex: 0 0 40px; color: #66717d; font-size: 12px; }
.lyso-collab-email-task strong { color: #1f2933; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.lyso-collab-email-action { display: inline-flex; align-items: center; padding: 12px 20px; margin: 0 0 18px; border: 1px solid var(--collab-email-primary-dark); border-radius: 999px; color: var(--collab-email-primary-text); background: var(--collab-email-primary); font-size: 14px; font-weight: 800; }
.lyso-intro .lyso-collab-email-document .lyso-collab-email-fallback { font-size: 11px; }
.lyso-collab-email-link { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--collab-email-primary-dark); text-decoration: underline; overflow-wrap: anywhere; }
.lyso-collab-email-footer { padding: 15px 17px; border-top: 1px solid var(--collab-email-border); background: var(--collab-email-surface); }
.lyso-intro .lyso-collab-email-footer p { font-size: 11px; }
.lyso-collab-email-footer > span { display: table; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--collab-email-border); border-radius: 8px; background: var(--collab-email-card); font-size: 11px; color: var(--collab-email-primary-dark); }
.lyso-collab-email-legal { display: block; text-align: center; margin-top: 10px; font-size: 10px; color: var(--collab-email-muted); }
.lyso-collab-mail-actions { border-top: 1px solid var(--collab-mail-line); padding-top: 11px; padding-bottom: 8px; }
.lyso-collab[data-view="email"] .lyso-collab-ring { border-color: #fff; }
.lyso-collab-primary { display: inline-flex; align-items: center; justify-content: center; padding: 9px 13px; background: var(--accent); color: var(--accent-contrast, var(--bg)); border-radius: 8px; font-size: 14px; font-weight: 700; }
/* Kevin opens a website, not an installed Lyso app. Browser chrome stays fixed
   around the independently scrolling, Lyso-styled page. */
.lyso-collab-phone-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lyso-collab-browser-toolbar { padding: 3px 10px 10px; border-bottom: 1px solid var(--collab-mail-line); flex-shrink: 0; }
.lyso-collab-browser-address { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 36px; padding: 0 11px; border-radius: 10px; background: color-mix(in srgb, var(--collab-mail-text) 9%, var(--collab-mail-bg)); color: var(--collab-mail-text); font: 14px Arial, Helvetica, sans-serif; }
.lyso-collab-browser-address > span:not(.lyso-collab-browser-reader) { display: flex; align-items: center; gap: 6px; }
.lyso-collab-browser-address > span > svg { width: 13px; height: 15px; color: var(--collab-mail-muted); }
.lyso-collab-browser-reader { font-size: 13px; }
.lyso-collab-browser-toolbar svg, .lyso-collab-browser-actions svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lyso-collab-browser-viewport { flex: 1; min-height: 0; overflow: hidden; overflow-anchor: none; scroll-behavior: auto; background: var(--panel); color: var(--text); }
.lyso-collab-browser-page { display: flow-root; }
.lyso-collab-browser-actions { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 11px 18px 8px; border-top: 1px solid var(--collab-mail-line); color: var(--collab-mail-accent); }
.lyso-collab-browser-actions .is-disabled { color: var(--collab-mail-muted); opacity: .4; }
.lyso-collab-browser-tabs { position: relative; display: grid; place-items: center; }
.lyso-collab-browser-tabs small { position: absolute; font: 11px Arial, Helvetica, sans-serif; }
.lyso-collab-thread-head { border-bottom: 1px solid var(--line); padding: 10px 16px; }
.lyso-collab-thread-head h3 { font-size: 18px; margin: 3px 0; line-height: 1.3; }
.lyso-collab-thread-head small { display: block; color: var(--muted); font-size: 11px; }
.lyso-collab-wordmark { display: block; color: var(--accent); font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; }
.lyso-collab-messages { padding: 12px 15px; display: flex; flex-direction: column; gap: 10px; }
.lyso-collab-message { max-width: 88%; align-self: flex-start; }
.lyso-collab-message.is-outgoing { align-self: flex-end; }
.lyso-collab-message small { display: block; color: var(--muted); font-size: 11px; margin: 0 2px 3px; }
.lyso-collab-bubble { padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px 11px 11px 3px; background: var(--panel-alt); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.lyso-collab-message.is-outgoing .lyso-collab-bubble { background: var(--accent); color: var(--accent-contrast, var(--bg)); border-color: transparent; border-radius: 11px 11px 3px 11px; }
.lyso-collab-composer { display: flex; gap: 8px; align-items: flex-end; margin: 4px 12px 12px; }
.lyso-collab-composer > span:first-child { flex: 1; padding: 10px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; color: var(--muted); min-height: 40px; font-size: 14px; overflow-wrap: anywhere; }
.lyso-collab-composer > span.is-typing { border-color: var(--accent); color: var(--text); }
.lyso-collab-composer > span.is-typing::after { content: ''; display: inline-block; height: 14px; border-left: 1px solid currentColor; vertical-align: -2px; margin-left: 1px; }
.lyso-collab-safety { display: block; padding: 0 14px 12px; font-size: 10px; color: var(--muted); line-height: 1.4; text-align: center; }
.lyso-collab-desktop { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.lyso-collab-desktop-head { padding: 13px 16px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.lyso-collab-desktop-head > span:not(.lyso-collab-menu-icon) { font-size: 12px; color: var(--muted); }
.lyso-collab-avatar { display: grid; place-items: center; width: 28px; height: 28px; background: var(--panel-alt); border-radius: 50%; }
.lyso-collab-desktop-head .lyso-collab-avatar { margin-left: auto; }
.lyso-collab-menu-icon { width: 26px; font-size: 21px; }
.lyso-collab-workspace { position: relative; min-height: 440px; }
.lyso-collab-focus, .lyso-collab-list { padding: 20px; }
.lyso-collab h2 { font-size: 24px; margin: 0 0 10px; }
.lyso-collab-search { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 12px; }
.lyso-collab-search span { float: right; }
.lyso-collab-tiles { display: flex; gap: 8px; margin: 12px 0; }
.lyso-collab-tiles > span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; background: var(--panel); }
.lyso-collab-tiles strong { margin-right: 10px; }
.lyso-collab-intake, .lyso-collab-waiting { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px; margin-top: 12px; background: var(--panel); }
.lyso-collab-intake h3, .lyso-collab-waiting h3 { margin: 0 0 8px; font-size: 16px; }
.lyso-collab-intake p { margin: 0; padding: 5px 0; font-size: 14px; }
.lyso-collab-intake p::before { content: '□'; margin-right: 9px; color: var(--muted); }
.lyso-collab-waiting { border-left-color: #c49435; }
.lyso-collab-waiting > strong { font-size: 15px; }
.lyso-collab-waiting small { display: block; color: var(--muted); margin: 5px 0; font-size: 12px; }
.lyso-collab-waiting-badge { display: inline-block; padding: 2px 6px; border: 1px solid #c49435; border-radius: 5px; color: var(--text); }
.lyso-collab-waiting-overlay, .lyso-collab-confirm-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 14px; background: #0005; }
.lyso-collab-manage-sheet { width: min(100%, 500px); padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 30px #0003; }
.lyso-collab-manage-sheet h2 { font-size: 23px; }
.lyso-collab-manage-sheet h3 { font-size: 15px; margin: 15px 0 6px; }
.lyso-collab-manage-sheet small { display: block; color: var(--muted); font-size: 12px; }
.lyso-collab-field { margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); font-size: 14px; }
.lyso-collab-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.lyso-collab-manage-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.lyso-collab-manage-actions > :last-child { margin-left: auto; }
.lyso-collab-manage-actions .lyso-collab-update { padding: 9px 13px; font-size: 14px; }
.lyso-collab-confirm { width: min(100%, 370px); padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 30px #0004; }
.lyso-collab-confirm p { font-size: 14px; line-height: 1.5; }
.lyso-collab-confirm > div { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.lyso-collab-confirm > div > span { padding: 8px 18px; border: 1px solid var(--line); border-radius: 7px; }
.lyso-collab-confirm [data-collab-confirm-stop] { background: var(--accent); color: var(--accent-contrast, var(--bg)); }
.lyso-collab-access-ended { padding: 12px 16px; border-top: 1px solid var(--line); }
.lyso-collab-access-ended strong, .lyso-collab-access-ended small { display: block; margin-bottom: 4px; }
.lyso-collab-access-ended small { color: var(--muted); font-size: 12px; }
.lyso-collab-update { display: inline-block; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 6px; font-size: 12px; color: var(--accent); }
.lyso-collab-nav { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 192px; padding: 18px 10px; background: var(--panel); border-right: 1px solid var(--line); box-shadow: 12px 0 20px #0002; }
.lyso-collab-nav > * { display: block; padding: 9px 12px; font-size: 14px; }
.lyso-collab-nav .is-active { background: var(--panel-alt); border-radius: 8px; }
.lyso-collab-nav b { font-size: 11px; margin-left: 4px; }
.lyso-collab-conversation-row { display: flex; gap: 12px; align-items: center; padding: 15px; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.lyso-collab-conversation-row > div { flex: 1; }
.lyso-collab-conversation-row strong { font-size: 16px; }
.lyso-collab-conversation-row small { color: var(--muted); font-size: 12px; display: block; }
.lyso-collab-conversation-row p { font-size: 14px; margin: 5px 0 0; }
.lyso-collab-thread { background: var(--panel); min-height: 440px; }
.lyso-collab-thread .lyso-collab-messages { min-height: 295px; }
.lyso-collab-pointer { position: absolute; width: 22px; height: 26px; fill: var(--text); stroke: var(--bg); stroke-width: 1.4; z-index: 6; }
.lyso-collab-ring { position: absolute; width: 32px; height: 32px; border: 2px solid var(--accent); border-radius: 50%; z-index: 5; }
@media (prefers-reduced-motion: reduce) { .lyso-collab-composer > span.is-typing::after { display: none; } }
@media (max-width:700px) { .lyso-intro[data-intro-lesson="collaborate"] .lyso-intro-window { height:600px; } }
.lyso-intro[data-intro-lesson="collaborate"] .lyso-intro-player:fullscreen .lyso-intro-window { height:100%; min-height:0; }