:root{--font-body:"Manrope", "Segoe UI", sans-serif;--font-heading:"Sora", "Segoe UI", sans-serif;--radius-xs:8px;--radius-sm:12px;--radius-md:16px;--radius-lg:20px;--shadow-sm:0 1px 2px #00000038;--shadow-md:0 18px 40px #00000042;--ring:#5865f26b}body[data-theme=dark]{--bg:#1b1d22;--bg-overlay:radial-gradient(circle at 18% 0%, #7289da2b, transparent 45%);--surface-main:#23252b;--surface-panel:#2b2d31;--surface-elevated:#313338;--surface-soft:#1f2025;--text-primary:#f2f3f5;--text-secondary:#b5bac1;--text-muted:#949ba4;--border:#3f4147;--border-strong:#4a4d55;--brand:#5865f2;--brand-hover:#4752c4;--danger:#f87171;--danger-soft:#f8717138;--you-bg:#5865f233;--you-border:#5865f280;--stranger-bg:#2d3035;--stranger-border:#41444b;--chip-bg:#1f2125;--chip-border:#3f4147;--input-bg:#1b1d22}body[data-theme=light]{--bg:#e8ebf1;--bg-overlay:radial-gradient(circle at 16% 0%, #4f46e524, transparent 42%);--surface-main:#fff;--surface-panel:#f8f9fc;--surface-elevated:#fff;--surface-soft:#f2f4f8;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border:#d5d9e2;--border-strong:#bfc6d3;--brand:#4f46e5;--brand-hover:#4338ca;--danger:#dc2626;--danger-soft:#dc262624;--you-bg:#e9edff;--you-border:#bcc7ff;--stranger-bg:#fff;--stranger-border:#d5d9e2;--chip-bg:#eef1f7;--chip-border:#d5d9e2;--input-bg:#fff}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg);background-image:var(--bg-overlay);line-height:1.45}.app-shell{justify-content:center;min-height:100vh;padding:18px;display:flex}.app-container{background:var(--surface-main);border:1px solid var(--border);border-radius:var(--radius-lg);width:min(1024px,100%);min-height:calc(100vh - 36px);max-height:calc(100vh - 36px);box-shadow:var(--shadow-md);flex-direction:column;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--border);background:var(--surface-panel);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.brand-block h1{font-family:var(--font-heading);letter-spacing:-.01em;font-size:1.2rem;font-weight:700}.tagline{color:var(--text-secondary);margin-top:1px;font-size:.8rem}.header-actions{align-items:center;gap:8px;display:flex}.theme-toggle{border:1px solid var(--chip-border);background:var(--chip-bg);min-width:62px;height:34px;color:var(--text-primary);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:999px;padding:0 12px;font-size:.76rem;font-weight:700}.online-count{border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--text-secondary);border-radius:999px;padding:7px 11px;font-size:.8rem}.online-count span{color:var(--text-primary);font-weight:700}.main-content{flex-direction:column;flex:1;gap:10px;min-height:0;padding:14px;display:flex}.intro-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px}.intro-eyebrow{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;align-items:center;gap:8px;margin-bottom:10px;padding:4px 10px;font-size:.72rem;font-weight:700;display:inline-flex}.intro-card h2{font-family:var(--font-heading);margin-bottom:8px;font-size:1.16rem}.intro-card p{color:var(--text-secondary);max-width:72ch;margin-bottom:14px}.start-controls{flex-direction:column;gap:8px;display:flex}.start-label{color:var(--text-muted);font-size:.82rem;font-weight:600}.start-actions{gap:8px;display:flex}.start-btn,.control-btn{border-radius:var(--radius-xs);cursor:pointer;border:1px solid #0000;height:40px;font-size:.9rem;font-weight:600;transition:background-color .16s,border-color .16s,transform .1s}.start-btn:focus-visible,.control-btn:focus-visible,.theme-toggle:focus-visible,#message-input:focus-visible{box-shadow:0 0 0 4px var(--ring);outline:none}.start-btn{background:var(--brand);border-color:var(--brand);color:#fff;min-width:150px}.start-btn:hover,.send-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}.chat-interface{flex:1;grid-template-rows:auto minmax(170px,1fr) auto;gap:10px;min-height:0;display:grid}.video-container{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-panel);gap:10px;padding:10px;display:flex}.video-wrapper{aspect-ratio:4/3;border-radius:var(--radius-sm);background:#111318;flex:1;position:relative;overflow:hidden}.video-wrapper video{object-fit:cover;width:100%;height:100%}.video-loading{z-index:2;color:#f3f4f6;background:#00000094;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:.82rem;display:flex;position:absolute;inset:0}.video-spinner{border:3px solid #ffffff52;border-top-color:#8ea1e1;border-radius:50%;width:22px;height:22px;animation:.9s linear infinite spin}.video-label{z-index:3;color:#fff;text-transform:uppercase;letter-spacing:.04em;background:#00000094;border-radius:999px;padding:3px 8px;font-size:.7rem;font-weight:700;position:absolute;bottom:8px;left:8px}.chat-messages{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-panel);flex-direction:column;gap:8px;min-height:0;padding:12px;display:flex;overflow-y:auto}.message{border:1px solid var(--stranger-border);background:var(--stranger-bg);max-width:min(72ch,93%);box-shadow:var(--shadow-sm);border-radius:10px;padding:9px 11px}.message-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;font-size:.71rem;font-weight:700;display:block}.message-text{color:var(--text-primary);font-size:.92rem}.you-message{background:var(--you-bg);border-color:var(--you-border);margin-left:auto}.you-message .message-label{color:var(--brand)}.stranger-message{margin-right:auto}.stranger-message .message-label{color:var(--danger)}.system-message{background:var(--chip-bg);max-width:100%;box-shadow:none;color:var(--text-secondary);border-color:#0000;align-self:center;font-size:.8rem}.chat-controls{grid-template-columns:auto auto 1fr auto;gap:8px;display:grid}.control-btn{background:var(--chip-bg);border-color:var(--chip-border);min-width:80px;color:var(--text-primary)}.control-btn:hover{background:var(--surface-soft)}.stop-btn{color:var(--danger);background:var(--danger-soft);border-color:#0000}.next-btn{color:var(--brand)}.send-btn{background:var(--brand);border-color:var(--brand);color:#fff}#message-input{border-radius:var(--radius-xs);border:1px solid var(--chip-border);background:var(--input-bg);width:100%;height:40px;color:var(--text-primary);padding:0 11px;font-size:.9rem}#message-input::placeholder{color:var(--text-muted)}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=992px){.app-shell{padding:0}.app-container{border:none;border-radius:0;width:100%;min-height:100dvh;max-height:100dvh}.main-content{padding:10px}.chat-controls{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"stop next send""input input input"}.stop-btn{grid-area:stop}.next-btn{grid-area:next}.send-btn{grid-area:send}#message-input{grid-area:input}}@media (width<=768px){.header{flex-direction:column;align-items:flex-start;padding:12px}.header-actions{justify-content:space-between;width:100%}.intro-card{padding:14px}.start-actions{flex-direction:column}.start-btn{width:100%}.video-container{flex-direction:column}.chat-messages{padding:10px}}@media (width<=420px){.brand-block h1{font-size:1.08rem}.theme-toggle{min-width:56px;font-size:.72rem}.online-count{padding:6px 10px;font-size:.76rem}.start-btn,.control-btn,#message-input{height:38px;font-size:.87rem}}