:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;flex-direction:column;min-width:320px;min-height:100vh;height:100vh}h1{font-size:3.2em;line-height:1.1}#app{max-width:90%;margin:0 auto;padding:2rem;text-align:center;width:100%;height:100%;display:flex;flex-direction:column}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button,.button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s}.button{padding:10px 20px;margin:5px;border-radius:4px;background-color:#4caf50;color:#fff}.button:hover{background-color:#45a049}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:disabled,.button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7}.session-type-selector{padding:10px 15px;margin:5px;border-radius:4px;border:1px solid #ccc;background-color:#2c3e50;color:#fff;font-size:1em;font-weight:500;cursor:pointer;min-width:180px}.session-type-selector:hover{border-color:#4caf50}.session-type-selector:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf504d}.session-type-selector option{background-color:#2c3e50;color:#fff;padding:10px}#status{padding:10px;margin:10px;border-radius:4px;position:sticky;top:0;z-index:100}.connected{background-color:#dff0d8;color:#3c763d}.disconnected{background-color:#f1d79d;color:#8a6d3b}.error{background-color:#fcf8e3;color:#a94442}#chat-container{flex:1;overflow-y:auto;border:1px solid #ccc;margin:10px 10px 80px;padding:10px;border-radius:4px;display:flex;flex-direction:column}.message:hover{box-shadow:0 3px 8px #00000026}.user{background-color:#e3f2fd;color:#333;align-self:flex-end;border-bottom-right-radius:3px;margin-left:auto}.assistant{background-color:#fce4ec;color:#333;align-self:flex-start;border-bottom-left-radius:3px;margin-right:auto}.system{background-color:#fff3e0;color:#666;font-style:italic;max-width:90%;align-self:center;text-align:center;font-size:.9em}.role-label{font-size:.75em;color:#666;margin-bottom:4px;font-weight:700}.conversation-end{background-color:#f5f5f5b3;color:#666;font-style:italic;padding:8px 15px;border-radius:20px;margin:15px auto;text-align:center;max-width:60%;font-size:.9em}.message-content{line-height:1.4}#controls{position:fixed;bottom:0;left:0;right:0;padding:15px;box-shadow:0 -2px 5px #0000001a;display:flex;justify-content:center;gap:10px;z-index:100}@media (prefers-color-scheme: dark){#chat-container{background-color:#1e1e1e;border-color:#333}.user{background-color:#2c3e50;color:#e4e4e4}.assistant{background-color:#4a235a;color:#e4e4e4}.system{background-color:#2d3436;color:#b2bec3}.conversation-end{background-color:#2d2d2db3;color:#b2bec3}#controls{background-color:#242424}.role-label{color:#b2bec3}.connected{background-color:#264d33;color:#a5d6a7}.disconnected{background-color:#4d3d26;color:#ffe082}.error{background-color:#4d2626;color:#ef9a9a}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button,#chat-container{background-color:#f9f9f9}#controls{background-color:#fff}}@media (max-width: 768px){.message{max-width:85%}.button,button{padding:8px 16px;font-size:14px}#app{padding:1rem}}@media (max-width: 480px){.message{max-width:90%}#chat-container{margin:5px 5px 70px;padding:8px}.button,button{padding:8px 12px;font-size:13px}#app{padding:.5rem}}@media (prefers-color-scheme: dark){#system-prompt-container{background-color:#2d3436;color:#b2bec3}.system-prompt-textarea{background-color:#1e1e1e;color:#e4e4e4;border-color:#333}#save-confirmation{color:#a5d6a7}}.header{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:10px}.header-controls{display:flex;align-items:center;gap:10px}.timer-container{display:flex;align-items:center;gap:5px}.button-container{display:flex;gap:5px}#system-prompt-container{margin:10px 10px 20px;padding:15px;border-radius:4px;background-color:#fff3e0;transition:all .3s ease;border:1px solid #ccc}#system-prompt-container h2{margin-top:0;margin-bottom:10px;font-size:1.2em}.editor-container{display:flex;flex-direction:column;gap:10px}.system-prompt-textarea{width:100%;min-height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;resize:vertical}.prompt-controls{display:flex;justify-content:flex-end}#save-confirmation{color:#4caf50;font-weight:700;padding:5px;margin-bottom:10px}.message.assistant{text-align:left;align-self:flex-start}.message.user{text-align:right;align-self:flex-end}.message.assistant .message-content{text-align:left}.message.user .message-content{text-align:right}.message{margin:10px 0;padding:12px;border-radius:12px;position:relative;max-width:70%;box-shadow:0 1px 2px #0000001a;word-wrap:break-word}.message.user{background-color:#4285f4;color:#fff;margin-left:auto;border-bottom-right-radius:4px}.message.assistant{background-color:#dadce0;color:#202124;margin-right:auto;border-bottom-left-radius:4px}.message-time{display:none}@media (prefers-color-scheme: dark){#system-prompt-container{background-color:#2d3436;color:#b2bec3}.system-prompt-textarea{background-color:#1e1e1e;color:#e4e4e4;border-color:#333}#save-confirmation{color:#a5d6a7}.message.assistant{background-color:#3c4043;color:#e8eaed}}@media (max-width: 768px){.header{flex-direction:column;align-items:flex-start}.header-controls{flex-direction:column;align-items:flex-start;width:100%;margin-top:10px}.button-container{width:100%;justify-content:space-between}.system-prompt-textarea{min-height:150px}}