:root{--nord-bg: #2E3440;--nord-fg: #D8DEE9;--nord-dark: #3B4252;--nord-accent: #81A1C1;--nord-green: #A3BE8C;--nord-red: #BF616A;font-family:Fira Code,monospace;color-scheme:dark;background-color:var(--nord-bg);color:var(--nord-fg)}body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;padding:0 15px}button{background:none;border:1px solid var(--nord-accent);color:var(--nord-fg);padding:5px 10px;font-size:1rem;cursor:pointer;font-family:inherit}button:hover{background-color:var(--nord-accent);color:var(--nord-bg)}input{background:var(--nord-dark);border:none;color:var(--nord-fg);padding:5px;font-family:inherit;font-size:1rem}input:focus{outline:1px solid var(--nord-accent)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-content{background-color:#3b4252;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000004d;width:300px;max-width:90%;text-align:center;display:flex;flex-direction:column;gap:15px;overflow:hidden;box-sizing:border-box}.modal-content h2{margin-bottom:15px;color:#d8dee9;font-size:1.5rem}.modal-content input{width:100%;padding:10px;margin-bottom:10px;border:1px solid #4C566A;border-radius:4px;background:#3b4252;color:#d8dee9;font-family:Fira Code,monospace;font-size:1rem;box-sizing:border-box}.modal-content input:focus{outline:1px solid #81A1C1}.modal-buttons{display:flex;justify-content:space-between}.modal-buttons button{padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-family:Fira Code,monospace;font-size:1rem;width:48%;box-sizing:border-box}.modal-buttons button[type=button]{background-color:#4c566a;color:#d8dee9}.modal-buttons button[type=button]:hover{background-color:#81a1c1;color:#2e3440}.modal-buttons button[type=submit]{background-color:#4caf50;color:#fff}.modal-buttons button[type=submit]:hover{background-color:#81a1c1;color:#2e3440}@media (max-width: 600px){.modal-content{width:90%;padding:15px}.modal-buttons{flex-direction:column;align-items:center}.modal-buttons button{width:100%;margin:5px 0}.modal-content h2{font-size:1.3rem}.modal-content input{font-size:.9rem}}.chat-container{background:#2e3440;color:#d8dee9;font-family:Fira Code,monospace;padding:20px;width:100%;max-width:450px;border-radius:8px;border:1px solid #4c566a;box-shadow:0 0 10px #0000004d;display:flex;flex-direction:column;gap:15px;margin:0 auto;overflow-x:hidden}.chat-header{text-align:center;border-bottom:1px solid #4c566a;padding-bottom:10px}.chat-header h3{margin:0;color:#88c0d0;font-size:1.6rem}.chat-header small{color:#81a1c1;cursor:pointer;font-size:.9rem;transition:color .3s ease}.chat-header small:hover{color:#88c0d0}.room-controls{display:flex;gap:15px;flex-wrap:wrap;max-width:90%;margin:0 auto}.room-controls input,.room-controls button{padding:10px 14px;font-family:Fira Code,monospace;background:#3b4252;color:#d8dee9;border:1px solid #4c566a;font-size:1rem;border-radius:6px;transition:background .3s ease,color .3s ease,border-color .3s ease;width:100%}.room-controls input:focus,.room-controls button:hover{background:#81a1c1;color:#2e3440;border-color:#88c0d0}.message-display{border:1px solid #4c566a;padding:15px;height:250px;overflow-y:auto;background:#3b4252;border-radius:6px;display:flex;flex-direction:column;gap:12px;word-wrap:break-word;word-break:break-word;white-space:pre-wrap;background-color:#2e3440}.message-display .message{display:flex;justify-content:flex-start}.message-display .message.me{justify-content:flex-end}.message-display .message .username{background-color:#4c566a;color:#d8dee9;padding:6px 10px;font-weight:700;border-radius:8px;font-size:1.2rem;display:inline-block;margin-right:12px;position:relative;z-index:1;box-shadow:0 3px 6px #0003}.message-display .message p{background:#81a1c1;color:#2e3440;padding:10px 14px;border-radius:8px;max-width:75%;font-size:15px;margin:4px 0;word-wrap:break-word;white-space:pre-wrap;word-break:break-word}.message-input{display:flex;gap:15px;flex-wrap:wrap;justify-content:space-between}.message-input input,.message-input button{min-width:120px;flex-grow:1;flex-basis:45%;background:#3b4252;border:1px solid #4c566a;color:#d8dee9;border-radius:8px;font-size:1.1rem;padding:10px 14px;transition:background .3s ease,color .3s ease,border-color .3s ease}.message-input input:focus,.message-input button:hover{background:#81a1c1;color:#2e3440;border-color:#88c0d0}@media (max-width: 600px){.chat-container{padding:10px;width:100%;max-width:100%;margin-left:-10px}.message-display{height:200px}.message-display .message p{font-size:12px}.room-controls input,.room-controls button{min-width:90%;flex:1;max-width:100%}.message-input input,.message-input button{min-width:45%}}