:root{color-scheme:dark;font-synthesis:none;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--sp-app-bg);color:var(--sp-text-primary);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.app{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto}.top-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:var(--sp-surface-raised);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--sp-border-subtle)}.brand-mark{width:30px;height:30px;border-radius:var(--sp-radius-md);background:var(--sp-accent-500);color:#0b0d14;font-weight:800;font-size:18px;display:grid;place-items:center;transition:transform var(--sp-motion-attention),background var(--sp-motion-flow)}.brand-mark:active{transform:scale(.92)}.top-bar-title{font-weight:600;flex:1}.icon-btn{width:38px;height:38px;border-radius:var(--sp-radius-pill);display:grid;place-items:center;color:var(--sp-text-secondary);transition:background var(--sp-motion-instant)}.icon-btn:active{background:var(--sp-border-subtle)}.host-dots{display:flex;gap:14px;padding:8px 16px;font-size:13px;color:var(--sp-text-secondary)}.host-dot{display:inline-flex;align-items:center;gap:6px}.host-dot .dot{width:8px;height:8px;border-radius:50%;background:var(--sp-text-muted)}.host-dot.alive .dot{background:var(--sp-status-success);box-shadow:0 0 8px var(--sp-status-success)}.screen-body{flex:1;overflow-y:auto;padding:12px 16px 96px}.card{background:var(--sp-surface-base);border:1px solid var(--sp-border-subtle);border-radius:var(--sp-radius-lg);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sp-shadow-sm);transition:transform var(--sp-motion-instant),border-color var(--sp-motion-instant)}.card:active{transform:scale(.99);border-color:var(--sp-border-default)}.card-title{font-weight:600;display:flex;align-items:center;gap:8px}.card-meta{font-size:12px;color:var(--sp-text-muted);margin-top:2px}.card-preview{font-size:13px;color:var(--sp-text-secondary);margin-top:8px;display:flex;justify-content:space-between;gap:10px}.status-dot{font-size:10px}.pill{border-radius:var(--sp-radius-pill);padding:12px 22px;background:var(--sp-surface-raised);border:1px solid var(--sp-border-default);font-weight:600;transition:all var(--sp-motion-attention)}.pill.primary{background:var(--sp-accent-500);color:#0b0d14;border-color:transparent;box-shadow:var(--sp-shadow-md)}.pill:disabled{opacity:.4}.segmented{display:flex;gap:8px}.segmented .seg{flex:1;padding:12px;border-radius:var(--sp-radius-md);background:var(--sp-surface-input);border:1px solid var(--sp-border-subtle);color:var(--sp-text-secondary);text-align:center}.segmented .seg.selected{border-color:var(--sp-border-focus);color:var(--sp-text-primary);background:var(--sp-surface-raised)}.field{margin:14px 0}.field>label{display:block;font-size:13px;color:var(--sp-text-secondary);margin-bottom:6px}select,input[type=text]{width:100%;padding:11px 12px;background:var(--sp-surface-input);color:var(--sp-text-primary);border:1px solid var(--sp-border-default);border-radius:var(--sp-radius-md);font-family:inherit;font-size:15px}.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:60px;height:60px;border-radius:var(--sp-radius-pill);background:var(--sp-accent-500);color:#0b0d14;display:grid;place-items:center;box-shadow:var(--sp-shadow-lg);transition:transform var(--sp-motion-attention)}.fab:active{transform:scale(.9)}.activity-strip{padding:8px 16px;min-height:64px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--sp-border-subtle)}.activity-line{font-size:12px;color:var(--sp-text-secondary);display:flex;gap:7px;opacity:.85}.activity-line:first-child{opacity:1;color:var(--sp-text-primary)}.bubble{border-radius:var(--sp-radius-lg);padding:11px 14px;margin:8px 0;max-width:88%}.bubble.user{background:var(--sp-surface-input);margin-left:auto}.bubble.agent{background:var(--sp-surface-raised);border-left:2px solid var(--sp-accent-500)}.bubble.partial{color:var(--sp-text-secondary);font-style:italic}.bubble-role{font-size:11px;color:var(--sp-text-muted);margin-bottom:3px}.mic-line{display:flex;align-items:center;gap:10px;padding:8px 16px;color:var(--sp-text-secondary);font-size:13px;min-height:28px}.waveform{display:flex;gap:3px;align-items:center;height:16px}.waveform span{width:3px;background:var(--sp-accent-500);border-radius:2px;animation:wave .9s ease-in-out infinite}@keyframes wave{0%,to{height:4px}50%{height:16px}}.composer{padding:12px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;border-top:1px solid var(--sp-border-subtle);background:var(--sp-surface-floating)}.tap-btn{width:200px;max-width:70vw;height:64px;border-radius:var(--sp-radius-pill);background:var(--sp-accent-500);color:#0b0d14;font-size:17px;font-weight:700;box-shadow:var(--sp-shadow-md);transition:transform var(--sp-motion-attention),background var(--sp-motion-flow)}.tap-btn:active{transform:scale(.96)}.tap-btn:disabled{background:var(--sp-surface-raised);color:var(--sp-text-muted);border:1px solid var(--sp-border-default);box-shadow:none;font-size:14px;cursor:not-allowed}.tap-btn:disabled:active{transform:none}.tap-btn.recording{background:var(--sp-status-danger);animation:pulse 1.4s ease-in-out infinite}.tap-btn.speaking{background:var(--sp-accent-700)}@keyframes pulse{0%,to{box-shadow:var(--sp-shadow-md)}50%{box-shadow:0 0 0 8px #ff6b812e}}.composer-row{display:flex;gap:18px;justify-content:center;font-size:13px;color:var(--sp-text-secondary)}.composer-row button{display:inline-flex;align-items:center;gap:6px}.voice-lang-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:var(--sp-radius-pill);background:var(--sp-surface-raised);border:1px solid var(--sp-border-default);font-size:12px;font-weight:700;color:var(--sp-text-secondary);margin-right:auto}.activity-inline{margin:8px 0 0 4px;padding-left:10px;border-left:2px solid var(--sp-border-default);display:flex;flex-direction:column;gap:3px;animation:fadeIn var(--sp-motion-flow)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play-ctl{width:48px;height:48px;border-radius:var(--sp-radius-pill);display:grid;place-items:center;background:var(--sp-surface-raised);border:1px solid var(--sp-border-default);color:var(--sp-text-secondary);transition:transform var(--sp-motion-instant),background var(--sp-motion-instant)}.play-ctl:active{transform:scale(.9);background:var(--sp-border-subtle)}.bubble-controls{display:flex;gap:10px;margin-top:8px}.bubble-ctl{width:36px;height:36px;border-radius:var(--sp-radius-pill);display:grid;place-items:center;background:var(--sp-surface-input);border:1px solid var(--sp-border-default);color:var(--sp-accent-300);transition:transform var(--sp-motion-instant),background var(--sp-motion-instant)}.bubble-ctl:active{transform:scale(.9);background:var(--sp-border-subtle)}.bubble-ctl.boost{width:auto;padding:0 12px;gap:3px;font-size:12px;font-weight:700}.bubble-ctl.boost.on{color:#0b0d14;background:var(--sp-accent-500);border-color:transparent}.mic-icon{display:inline-flex;align-items:center;transition:color var(--sp-motion-flow)}.mic-icon.speaking-anim{color:var(--sp-accent-500);animation:speakPulse 1s ease-in-out infinite}@keyframes speakPulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}.voice-lang-btn.lang-en{color:var(--sp-status-info);border-color:var(--sp-status-info)}.voice-lang-btn.lang-nl{color:var(--sp-status-warning);border-color:var(--sp-status-warning)}.voice-lang-btn:disabled{opacity:.4;cursor:not-allowed}.center{height:100dvh;display:grid;place-items:center;text-align:center;padding:24px}.muted{color:var(--sp-text-muted)}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end}.sheet{width:100%;max-width:560px;margin:0 auto;background:var(--sp-surface-modal);border-radius:var(--sp-radius-xl) var(--sp-radius-xl) 0 0;padding:20px 18px max(20px,env(safe-area-inset-bottom));border:1px solid var(--sp-border-default)}.sheet-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sp-border-subtle)}