*{box-sizing:border-box;margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100%;height:100vh}.timeout-container{width:100%;padding:0;margin:0}.timeout-background{width:100%;height:2px;background-color:#a5a5a533;border-radius:2px;overflow:hidden;position:relative}.timeout-progress{height:100%;background-color:var(--progress-bar);border-radius:2px;position:relative;margin-left:auto;overflow:hidden}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes glow-sweep{0%{left:-40px}to{left:100%}}.timeout-progress:after{content:"";position:absolute;top:0;bottom:0;width:240px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);animation:glow-sweep 2s linear infinite}.timeout-progress:before{content:"";position:absolute;top:0;bottom:0;left:-20px;width:40px;background:linear-gradient(to right,transparent,rgba(255,255,255,.5),transparent)}:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #666666;--accent: #cc0044;--accent-hover: #990033;--message-me: #e2004b;--message-stranger: #e8e8e8;--message-me-text: #ffffff;--message-stranger-text: #1a1a1a;--border: #d0d0d0;--status-connecting: #ff9800;--status-connected: #4caf50;--shadow: rgba(0, 0, 0, .1);--stop: rgb(224, 0, 0);--progress-bar: #ce00a1}.dark{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--bg-tertiary: #3a3a3a;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--accent: #bb003eb9;--accent-hover: #cc0044b9;--message-me: #dd004ab9;--message-stranger: #2a2a2a;--message-me-text: #ffffff;--message-stranger-text: #e8e8e8;--border: #404040;--status-connecting: #ff9800;--status-connected: #66bb6a;--shadow: rgba(0, 0, 0, .3);--stop: rgb(177, 0, 0);--progress-bar: #a0007d}.app{display:flex;flex-direction:column;height:100vh;background-color:var(--bg-primary);color:var(--text-primary)}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border);box-shadow:0 2px 4px var(--shadow)}.header-title{margin:0;font-size:1.5rem;font-weight:600}.status-box{display:flex;justify-content:center}.status-banner{padding:.75rem 1.5rem;text-align:center;font-weight:500;font-size:.9rem;border-radius:2rem}.status-disconnected{background-color:var(--bg-secondary);color:var(--text-secondary)}.status-connecting{background-color:var(--status-connecting);color:#fff}.status-connected{background-color:var(--status-connected);color:#fff}.chat-log{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-style:italic}.message-bubble{max-width:70%;padding:.75rem 1rem;border-radius:1rem;word-wrap:break-word;display:flex;flex-direction:column;gap:.25rem;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-me{align-self:flex-end;background-color:var(--message-me);color:var(--message-me-text);border-bottom-right-radius:.25rem}.message-stranger{align-self:flex-start;background-color:var(--message-stranger);color:var(--message-stranger-text);border-bottom-left-radius:.25rem}.message-content{font-size:1rem;line-height:1.4}.message-time{font-size:.75rem;opacity:.7;align-self:flex-end}.typing-indicator{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background-color:var(--message-stranger);color:var(--message-stranger-text);max-width:70%;align-self:flex-start;border-radius:1rem 1rem 1rem .25rem}.typing-dot{width:8px;height:8px;background-color:var(--text-secondary);border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(1){animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.typing-text{font-size:.9rem;opacity:.8;font-style:italic}.chat-input-container{padding:1rem 1.5rem;background-color:var(--bg-secondary);border-top:1px solid var(--border);box-shadow:0 -2px 4px var(--shadow)}.chat-input-form{display:flex;flex-direction:column;gap:.75rem}.chat-input{width:100%;padding:.75rem 1rem;font-size:1rem;border:1px solid var(--border);border-radius:.5rem;background-color:var(--bg-primary);color:var(--text-primary);outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--accent)}.chat-input:disabled{opacity:.5;cursor:not-allowed}.chat-controls{display:flex;justify-content:center}.checkbox-wrapper{padding-top:.4rem}.checkbox-wrapper .switch{appearance:none;background-color:var(--text-secondary);border-radius:72px;border-style:none;flex-shrink:0;height:20px;margin:0;position:relative;width:30px}.checkbox-wrapper .switch:before{content:"";inset:-6px;position:absolute}.checkbox-wrapper .switch,.checkbox-wrapper .switch:after{transition:all .1s ease-out}.checkbox-wrapper .switch:after{background-color:var(--bg-tertiary);border-radius:50%;content:"";height:14px;left:3px;position:absolute;top:3px;width:14px}.checkbox-wrapper input[type=checkbox]{cursor:default}.checkbox-wrapper .switch:hover{background-color:var(--text-primary);transition-duration:0s}.checkbox-wrapper .switch:checked{background-color:var(--accent)}.checkbox-wrapper .switch:checked:after{background-color:var(--bg-secondary);left:13px}.checkbox-wrapper :focus:not(.focus-visible){outline:0}.checkbox-wrapper .switch:checked:hover{background-color:var(--accent-hover)}.button-group{display:flex;gap:.75rem}.btn{flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s,transform .1s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-stop{background-color:var(--stop);color:#fff}.btn-skip{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-skip:hover:not(:disabled){background-color:var(--border)}.btn-send{background-color:var(--accent);color:#fff}.btn-send:hover:not(:disabled){background-color:var(--accent-hover)}.btn-new-chat{background-color:var(--accent);color:#fff}.btn-new-chat:hover:not(:disabled){background-color:var(--accent-hover)}.btn-icon{background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:background-color .2s}.btn-icon:hover{background-color:var(--bg-tertiary)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--bg-primary);padding:2rem;border-radius:.5rem;width:90%;max-width:500px;box-shadow:0 5px 15px var(--shadow)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1rem}.modal-header h2{margin:0}.btn-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-primary)}.modal-body{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600}.form-group textarea,.form-group input[type=number]{width:100%;border:1px solid var(--border);border-radius:.25rem;background-color:var(--bg-secondary);color:var(--text-primary);padding:.5rem}.form-group-inline{flex-direction:row;align-items:center;gap:1rem}.modal-footer{display:flex;justify-content:flex-end;gap:1rem;border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem}input[type=range]{appearance:none;width:100%;height:6px;border-radius:3px;background:var(--bg-tertiary);outline:none;margin:0}.range-value{margin-left:5px}.range-value:before{content:"("}.range-value:after{content:")"}.checkbox-group{display:flex;flex-direction:column;gap:.75rem;padding:.5rem 0}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:400}.checkbox-label input[type=checkbox]{width:1.25rem;height:1.25rem;cursor:pointer;accent-color:var(--accent)}.checkbox-label span{-webkit-user-select:none;user-select:none}@media (max-width: 768px){.modal-overlay{align-items:stretch;padding:0}.modal-content{width:100%;max-width:none;height:100%;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden}.modal-header{position:sticky;top:0;background-color:var(--bg-primary);z-index:10;padding:1rem;margin-bottom:0;border-bottom:1px solid var(--border);flex-shrink:0}.modal-body{flex:1;overflow-y:auto;padding:1rem;gap:1.25rem;-webkit-overflow-scrolling:touch}.modal-footer{position:sticky;bottom:0;background-color:var(--bg-primary);z-index:10;padding:1rem;margin-top:0;border-top:1px solid var(--border);flex-shrink:0}.form-group textarea{font-size:16px}.header{padding:.2rem 1rem}.header-title{font-size:1rem}.status-banner{font-size:14px;padding:.5rem .75rem}.chat-log{padding:1rem}.message-content{font-size:14px}.message-bubble{max-width:85%}.chat-input-container{padding:.75rem 1rem}.chat-input{padding:.6rem .75rem;font-size:16px}.button-group{gap:.5rem}.btn{margin:auto;padding:.4rem .6rem;font-size:14px}}@media (max-width: 480px){.header-title{font-size:1.1rem}.message-bubble{max-width:90%}}