:root{--color-primary: #667eea;--color-primary-light: #7c93e8;--color-primary-dark: #5a67d8;--color-secondary: #764ba2;--color-secondary-light: #8a5fc4;--color-secondary-dark: #6b4390;--color-background: #ffffff;--color-surface: #f8f9fa;--color-surface-variant: #e9ecef;--color-text: #333333;--color-text-secondary: #666666;--color-text-tertiary: #999999;--color-text-on-primary: #ffffff;--color-text-on-dark: #f8f9fa;--color-border: #dee2e6;--color-border-light: #e9ecef;--color-border-dark: #ced4da;--color-success: #28a745;--color-success-light: #34ce57;--color-success-dark: #218838;--color-warning: #ffc107;--color-warning-light: #ffd43b;--color-warning-dark: #e0a800;--color-error: #dc3545;--color-error-light: #e74c3c;--color-error-dark: #c82333;--color-info: #17a2b8;--color-info-light: #39c0ed;--color-info-dark: #138496;--color-header-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--color-card-bg: var(--color-background);--color-card-shadow: rgba(0, 0, 0, .1);--color-button-primary: var(--color-primary);--color-button-primary-hover: var(--color-primary-dark);--color-button-primary-text: var(--color-text-on-primary);--color-button-secondary: #6c757d;--color-button-secondary-hover: #5a6268;--color-button-secondary-text: var(--color-text-on-primary);--color-button-success: var(--color-success);--color-button-success-hover: var(--color-success-dark);--color-button-success-text: var(--color-text-on-primary);--color-button-danger: var(--color-error);--color-button-danger-hover: var(--color-error-dark);--color-button-danger-text: var(--color-text-on-primary);--color-overlay: rgba(0, 0, 0, .7);--color-overlay-light: rgba(0, 0, 0, .5);--color-overlay-dark: rgba(0, 0, 0, .85);--color-primary-alpha: rgba(102, 126, 234, .1);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .25);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--border-radius-2xl: 24px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px}@media(prefers-color-scheme:dark){:root{--color-primary: #7c93e8;--color-primary-light: #94a7ed;--color-primary-dark: #5a67d8;--color-secondary: #8a5fc4;--color-secondary-light: #9d74d6;--color-secondary-dark: #6b4390;--color-background: #121212;--color-surface: #1e1e1e;--color-surface-variant: #2d2d2d;--color-text: #f8f9fa;--color-text-secondary: #adb5bd;--color-text-tertiary: #6c757d;--color-text-on-primary: #ffffff;--color-text-on-dark: #f8f9fa;--color-border: #495057;--color-border-light: #6c757d;--color-border-dark: #343a40;--color-success: #34ce57;--color-success-light: #56d679;--color-success-dark: #28a745;--color-warning: #ffd43b;--color-warning-light: #ffe066;--color-warning-dark: #ffc107;--color-error: #e74c3c;--color-error-light: #f5655a;--color-error-dark: #dc3545;--color-info: #39c0ed;--color-info-light: #5bc9f5;--color-info-dark: #17a2b8;--color-header-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--color-card-bg: var(--color-surface);--color-card-shadow: rgba(0, 0, 0, .3);--color-button-secondary: #6c757d;--color-button-secondary-hover: #5a6268;--color-overlay: rgba(0, 0, 0, .8);--color-overlay-light: rgba(0, 0, 0, .6);--color-overlay-dark: rgba(0, 0, 0, .9);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .6);--color-primary-alpha: rgba(124, 147, 232, .1)}}.text-primary{color:var(--color-text)}.text-secondary{color:var(--color-text-secondary)}.bg-surface{background-color:var(--color-surface)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-info{color:var(--color-info)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-dark)}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-background)}h1{font-size:3.2em;line-height:1.1;color:var(--color-text)}h2,h3,h4,h5,h6{color:var(--color-text)}button{border-radius:var(--border-radius-md);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-button-secondary);color:var(--color-button-secondary-text);cursor:pointer;transition:all .25s}button:hover{border-color:var(--color-primary);background-color:var(--color-button-secondary-hover)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button.primary{background-color:var(--color-button-primary);color:var(--color-button-primary-text)}button.primary:hover{background-color:var(--color-button-primary-hover)}button.success{background-color:var(--color-button-success);color:var(--color-button-success-text)}button.success:hover{background-color:var(--color-button-success-hover)}button.danger{background-color:var(--color-button-danger);color:var(--color-button-danger-text)}button.danger:hover{background-color:var(--color-button-danger-hover)}#app{width:100%;height:100vh;display:flex;flex-direction:column}code,pre{font-family:Courier New,Courier,monospace;background-color:var(--color-surface-variant);padding:2px 6px;border-radius:var(--border-radius-sm);color:var(--color-text)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-dark)}input,textarea{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:.5em .8em;font-family:inherit;font-size:1em}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-alpha)}.nickname-modal-overlay[data-v-0df20f30]{position:fixed;inset:0;background-color:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}.nickname-modal[data-v-0df20f30]{background-color:var(--color-card-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-lg);max-width:400px;width:90%;text-align:center}.nickname-modal h2[data-v-0df20f30]{margin:0 0 var(--spacing-sm) 0;color:var(--color-text)}.nickname-modal p[data-v-0df20f30]{margin:0 0 var(--spacing-md) 0;color:var(--color-text-secondary)}.nickname-input[data-v-0df20f30]{width:100%;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);font-size:1em;box-sizing:border-box}.error[data-v-0df20f30]{color:var(--color-error);font-size:.9em;margin:var(--spacing-sm) 0}button[data-v-0df20f30]{width:100%}.connection-status[data-v-ce1f7fb7]{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-bg);color:var(--color-text-on-primary);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.status-left h1[data-v-ce1f7fb7]{margin:0;font-size:1.5em;color:#fff}.status-center[data-v-ce1f7fb7]{flex:1;display:flex;justify-content:center}.status-indicator[data-v-ce1f7fb7]{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.95em;font-weight:500}.dot[data-v-ce1f7fb7]{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#fff}.status-indicator.connected .dot[data-v-ce1f7fb7]{background-color:#34ce57}.status-indicator.error .dot[data-v-ce1f7fb7]{background-color:#dc3545;animation:pulse-ce1f7fb7 1s infinite}.status-indicator.connecting .dot[data-v-ce1f7fb7]{background-color:#ffc107;animation:pulse-ce1f7fb7 .6s infinite}@keyframes pulse-ce1f7fb7{0%,to{opacity:1}50%{opacity:.5}}.status-right[data-v-ce1f7fb7]{display:flex;align-items:center;gap:var(--spacing-md)}.token-display[data-v-ce1f7fb7],.nickname-display[data-v-ce1f7fb7]{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.9em}.label[data-v-ce1f7fb7]{opacity:.9}.token[data-v-ce1f7fb7]{font-family:monospace;font-weight:700;background-color:#fff3;padding:2px 8px;border-radius:4px}button.small[data-v-ce1f7fb7]{padding:.4em .8em;font-size:.85em;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}button.small[data-v-ce1f7fb7]:hover{background-color:#ffffff4d}@media(max-width:768px){.status-left h1[data-v-ce1f7fb7]{font-size:1.2em}.status-right[data-v-ce1f7fb7]{gap:var(--spacing-sm);font-size:.8em}.token-display[data-v-ce1f7fb7]{display:none}}.room-list[data-v-8f1b832a]{display:flex;flex-direction:column;height:100%;border-right:1px solid var(--color-border);padding:var(--spacing-md);background-color:var(--color-surface);min-width:200px;max-width:280px;overflow:hidden}.room-header[data-v-8f1b832a]{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.room-header h3[data-v-8f1b832a]{margin:0;font-size:1.1em}button.small[data-v-8f1b832a]{padding:.3em .6em;font-size:.9em}.room-create[data-v-8f1b832a]{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.create-input[data-v-8f1b832a]{flex:1;padding:.4em .6em;font-size:.9em}.room-items[data-v-8f1b832a]{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-xs)}.room-item[data-v-8f1b832a]{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);border-radius:var(--border-radius-md);background-color:var(--color-background);transition:background-color .2s;cursor:pointer}.room-item[data-v-8f1b832a]:hover{background-color:var(--color-surface-variant)}.room-item.active[data-v-8f1b832a]{background-color:var(--color-primary);color:var(--color-text-on-primary)}.room-info[data-v-8f1b832a]{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0}.room-name[data-v-8f1b832a]{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-count[data-v-8f1b832a]{font-size:.85em;opacity:.7;white-space:nowrap}.room-item.active .member-count[data-v-8f1b832a]{color:var(--color-text-on-primary)}.join-btn[data-v-8f1b832a]{padding:.2em .5em;font-size:.8em;white-space:nowrap}.error[data-v-8f1b832a]{color:var(--color-error);font-size:.85em;padding:var(--spacing-sm);background-color:#dc35451a;border-radius:var(--border-radius-sm);margin-top:var(--spacing-sm)}.chat-room[data-v-0e12fa05]{display:flex;flex-direction:column;height:100%;flex:1;background-color:var(--color-background)}.chat-header[data-v-0e12fa05]{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0}.chat-header h2[data-v-0e12fa05]{margin:0;flex:1}button.danger[data-v-0e12fa05]{padding:.4em .8em;font-size:.9em}.messages[data-v-0e12fa05]{flex:1;overflow-y:auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.message[data-v-0e12fa05]{display:flex;animation:fadeIn-0e12fa05 .2s ease-in}@keyframes fadeIn-0e12fa05{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.system[data-v-0e12fa05]{justify-content:center;padding:var(--spacing-xs) 0}.system-message[data-v-0e12fa05]{color:var(--color-text-tertiary);font-size:.9em}.chat-message[data-v-0e12fa05]{max-width:80%}.chat-message.own[data-v-0e12fa05]{align-self:flex-end}.message-header[data-v-0e12fa05]{display:flex;gap:var(--spacing-sm);margin-bottom:2px;font-size:.85em}.nickname[data-v-0e12fa05]{font-weight:600;color:var(--color-primary)}.timestamp[data-v-0e12fa05]{color:var(--color-text-tertiary)}.message-body[data-v-0e12fa05]{background-color:var(--color-surface);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);word-wrap:break-word;white-space:pre-wrap;line-height:1.4;color:var(--color-text)}.chat-message.own .message-body[data-v-0e12fa05]{background-color:var(--color-primary);color:var(--color-text-on-primary)}.chat-input-area[data-v-0e12fa05]{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);background-color:var(--color-surface);flex-shrink:0}.chat-input[data-v-0e12fa05]{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-family:inherit;font-size:1em;resize:vertical;max-height:150px}.chat-input-area button[data-v-0e12fa05]{padding:var(--spacing-sm) var(--spacing-lg);height:fit-content}.no-room[data-v-0e12fa05]{display:flex;align-items:center;justify-content:center;height:100%;flex:1;color:var(--color-text-secondary);font-size:1.2em}.member-list[data-v-de792592]{display:flex;flex-direction:column;height:100%;border-left:1px solid var(--color-border);padding:var(--spacing-md);background-color:var(--color-surface);min-width:180px;max-width:240px;overflow:hidden}.member-header h3[data-v-de792592]{margin:0 0 var(--spacing-md) 0;font-size:1.05em}.member-items[data-v-de792592]{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-xs)}.member-item[data-v-de792592]{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);border-radius:var(--border-radius-md);background-color:var(--color-background);transition:background-color .2s;font-size:.9em}.member-item[data-v-de792592]:hover{background-color:var(--color-surface-variant)}.member-item.offline[data-v-de792592]{opacity:.6}.member-info[data-v-de792592]{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0}.online-dot[data-v-de792592]{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--color-success);flex-shrink:0}.online-dot.offline[data-v-de792592]{background-color:var(--color-text-tertiary)}.member-name-block[data-v-de792592]{display:flex;align-items:center;gap:var(--spacing-xs);min-width:0}.member-name[data-v-de792592]{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.you-badge[data-v-de792592]{font-size:.8em;color:var(--color-primary);white-space:nowrap}.member-token[data-v-de792592]{font-family:monospace;font-size:.8em;color:var(--color-text-tertiary);white-space:nowrap;margin-left:4px}.app-container[data-v-d980ae6c]{display:flex;flex-direction:column;height:100vh;width:100%}.main-layout[data-v-d980ae6c]{display:flex;flex:1;overflow:hidden;background-color:var(--color-background)}