html,body{margin:0;height:100%;background:#fff;overscroll-behavior:none}
a,a:hover{color:var(--fg-1)}
input::placeholder{color:var(--kg-pebble)}
button{font:inherit}

.kp-root{position:fixed;inset:0;background:#fff;color:var(--fg-2);font-family:var(--font-body)}
.kp-scroller{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.kp-thread{max-width:720px;margin:0 auto;padding:104px 16px 168px;display:flex;flex-direction:column;gap:14px}
.kp-msgs{display:flex;flex-direction:column;gap:14px}

/* Icons — Lucide via CSS mask, inherits currentColor */
.kp-ico{display:inline-block;flex:none;background-color:currentColor;-webkit-mask:var(--kp-icon) center/contain no-repeat;mask:var(--kp-icon) center/contain no-repeat}

/* Hero */
.kp-hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 22px;text-align:center}
.kp-hero-agent{position:relative;width:260px;height:200px;margin:-12px 0 -8px}
.kp-hero-agent kg-agent{position:absolute;inset:0}
.kp-hero-name{font:300 26px/1.1 var(--font-display);letter-spacing:-0.02em;color:#000}
.kp-hero-sub{font-size:12px;color:var(--fg-3)}

/* Messages */
.kp-msg{display:flex;flex-direction:column;gap:6px}
.kp-msg.is-agent,.kp-msg.is-brief{align-items:flex-start}
.kp-msg.is-user{align-items:flex-end}
.kp-bubble{max-width:600px;background:var(--kg-fog);border-radius:28px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.kp-bubble.has-opts{width:100%}
.kp-lead{margin:0;font:400 16px/1.55 var(--font-body);letter-spacing:-0.01em;color:var(--fg-2);white-space:pre-wrap;text-wrap:pretty}
.kp-q{margin:0;font:500 18px/1.4 var(--font-body);letter-spacing:-0.02em;color:#000;text-wrap:pretty}
.kp-opts{margin-top:4px;background:#fff;border-radius:20px;box-shadow:0 0 0 1px var(--kg-mist);overflow:hidden}
.kp-opt{width:100%;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;background:#fff;border:none;text-align:left}
.kp-opt + .kp-opt{border-top:1px solid var(--kg-mist)}
button.kp-opt{cursor:pointer;transition:background var(--duration-fast)}
button.kp-opt:hover{background:var(--kg-fog)}
.kp-opt.is-dim{opacity:.4}
.kp-letter{flex:none;width:28px;height:28px;border-radius:8px;background:var(--kg-fog);color:var(--fg-3);display:flex;align-items:center;justify-content:center;font-size:13px}
.kp-opt.is-picked .kp-letter{background:var(--kg-black);color:#fff}
.kp-opt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kp-opt-label{font:400 16px/1.35 var(--font-body);letter-spacing:-0.01em;color:#000}
.kp-opt-sub{font-size:12px;color:var(--fg-3)}
.kp-user{max-width:82%;background:var(--kg-black);color:#fff;border-radius:24px;padding:12px 18px;font:400 16px/1.5 var(--font-body);letter-spacing:-0.01em;white-space:pre-wrap;overflow-wrap:anywhere}
.kp-saved{display:flex;align-items:center;gap:6px;padding-right:6px;font-size:11px;color:var(--fg-3)}
.kp-brief-card{display:flex;align-items:center;gap:14px;max-width:100%;padding:12px 20px 12px 12px;background:var(--kg-fog);border:none;border-radius:24px;cursor:pointer;text-align:left;transition:background var(--duration-fast)}
.kp-brief-card:hover{background:var(--kg-mist)}
.kp-brief-icon{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#000}
.kp-brief-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.kp-brief-title{font:500 16px/1.2 var(--font-body);letter-spacing:-0.01em;color:#000}
.kp-muted12{font-size:12px;color:var(--fg-3)}
.kp-typing{align-self:flex-start;display:flex;gap:5px;padding:18px 20px;border-radius:28px;background:var(--kg-fog)}
.kp-typing[hidden]{display:none}
.kp-typing span{width:7px;height:7px;border-radius:50%;background:var(--fg-3)}

/* Top bar */
.kp-top{position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,#fff 0%,#fff 55%,rgba(255,255,255,0) 100%)}
.kp-bar{max-width:720px;margin:0 auto;padding:16px 16px 28px;display:flex;align-items:center;gap:8px}
.kp-flex{flex:1}
.kp-round{pointer-events:auto;position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow-overlay);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000;transition:background var(--duration-fast)}
.kp-round:hover{background:var(--kg-fog)}
.kp-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.kp-ring #kp-ring{transition:stroke-dashoffset 400ms var(--ease-out)}
.kp-status{pointer-events:auto;min-width:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 18px 0 9px;border-radius:100px;background:#fff;box-shadow:var(--shadow-overlay)}
.kp-status-avatar{position:relative;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden}
.kp-status-avatar kg-agent{position:absolute;inset:0}
.kp-status-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.kp-status-name{font:500 16px/1 var(--font-body);letter-spacing:-0.01em;color:#000;white-space:nowrap}
.kp-status-label{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1;color:var(--fg-3);white-space:nowrap}
.kp-online-dot{width:6px;height:6px;border-radius:50%;background:var(--kg-green)}

/* Composer */
.kp-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;background:linear-gradient(0deg,#fff 0%,#fff 60%,rgba(255,255,255,0) 100%)}
.kp-composer-wrap{max-width:720px;margin:0 auto;padding:28px 16px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}
.kp-composer{pointer-events:auto;width:100%;margin:0;height:58px;display:flex;align-items:center;gap:8px;padding:0 8px 0 22px;border-radius:100px;background:#fff;box-shadow:var(--shadow-overlay),0 0 0 1px var(--kg-mist)}
.kp-composer input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;font:400 16px/1 var(--font-body);letter-spacing:-0.01em;color:#000}
.kp-send{flex:none;width:42px;height:42px;border-radius:50%;border:none;background:var(--kg-black);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--duration-fast)}
.kp-send:disabled{background:var(--kg-mist);cursor:default}
.kp-disclaimer{font-size:11px;color:var(--fg-4);text-align:center}

/* Brief sheet */
.kp-scrim{position:absolute;inset:0;z-index:10;background:rgba(8,8,11,.32);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-out)}
.kp-sheet{position:absolute;left:0;right:0;bottom:0;z-index:11;pointer-events:none;transform:translateY(105%);transition:transform var(--duration-slow) var(--ease-out)}
.kp-root.sheet-open .kp-scrim{opacity:1;pointer-events:auto}
.kp-root.sheet-open .kp-sheet{transform:translateY(0)}
.kp-sheet-panel{pointer-events:auto;max-width:640px;margin:0 auto;max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:32px 32px 0 0;box-shadow:var(--shadow-overlay)}
.kp-grip{display:flex;justify-content:center;padding:10px 0 0}
.kp-grip span{width:36px;height:4px;border-radius:4px;background:var(--kg-mist)}
.kp-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 0}
.kp-sheet-title{font:300 28px/1.1 var(--font-display);letter-spacing:-0.02em;color:#000}
.kp-sheet-meta{display:flex;align-items:center;gap:12px}
.kp-icon-btn{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid var(--border-1);box-shadow:var(--shadow-button);background:var(--bg-card);color:var(--fg-1);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}
.kp-icon-btn:hover{background:color-mix(in srgb,var(--bg-card) 94%,var(--fg-1))}
.kp-progress{margin:16px 24px 0;height:4px;border-radius:4px;background:var(--kg-mist);overflow:hidden}
.kp-progress div{height:100%;width:0;border-radius:4px;background:var(--kg-midnight);transition:width var(--duration-slow) var(--ease-out)}
.kp-fields{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 0}
.kp-field{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px dashed var(--border-2)}
.kp-field-dot{margin-top:2px;width:16px;height:16px;border-radius:50%;background:var(--kg-mist);display:flex;align-items:center;justify-content:center;color:#fff}
.kp-field.is-done .kp-field-dot{background:var(--kg-green)}
.kp-field-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.kp-field-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.kp-field-value{font:400 15px/1.4 var(--font-body);color:var(--fg-4);overflow-wrap:anywhere}
.kp-field.is-done .kp-field-value{color:#000}
.kp-link{padding:0;background:none;border:none;cursor:pointer;font:400 13px/1 var(--font-body);color:var(--fg-3);text-decoration:underline;text-decoration-color:var(--kg-silver);text-underline-offset:3px}
.kp-link:hover{color:#000;text-decoration-color:currentColor}
.kp-field .kp-link{margin-top:14px}
.kp-sheet-foot{padding:18px 24px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.kp-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.kp-fee-note{font:400 12px/1.5 var(--font-body);color:var(--fg-3)}

/* Primary button (design-system Button, variant primary, size lg, fullWidth) */
.kp-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:var(--radius-buttons);border:1px solid transparent;background:var(--accent);color:var(--fg-on-accent);box-shadow:var(--shadow-button);font:500 16px/1 var(--font-body);letter-spacing:var(--tracking-ui);white-space:nowrap;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.kp-cta:hover:not(:disabled){background:var(--accent-hover)}
.kp-cta:active:not(:disabled){background:var(--accent-press);transform:scale(.98)}
.kp-cta:disabled{opacity:.4;cursor:not-allowed}

#kp-checkout-error{margin:0;padding:12px 24px;font:400 14px/1.5 var(--font-body);color:var(--fg-1);}
