:root{--bg-main: #050816;--bg-panel: rgba(9, 13, 32, .95);--border-neon: #3ef3ff;--accent-pink: #ff4fd8;--accent-yellow: #ffe66d;--text-main: #f5f7ff;--text-sub: #9ca3c7;--system-text: #cbd5f5}html,body{margin:0;padding:0;width:100%;height:100%;background:radial-gradient(circle at top,#13132b,#020107 55%,#000);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app{display:flex;flex-direction:column;width:100%;max-width:1100px;min-height:100vh;padding:24px 32px;background:radial-gradient(circle at top left,rgba(255,79,216,.08),transparent 55%),radial-gradient(circle at bottom right,rgba(62,243,255,.08),transparent 60%)}.app-header h1{margin:0;font-size:28px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-yellow);text-shadow:0 0 6px rgba(255,229,128,.7),0 0 16px rgba(255,229,128,.4)}.connection-buttons button{position:relative;padding:8px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.8);background:radial-gradient(circle at top,#3ef3ff40,#0f172afa);color:var(--text-main);font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.connection-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 12px #3ef3ff99;border-color:var(--border-neon)}.connection-buttons button:active:not(:disabled){transform:translateY(0);box-shadow:0 0 6px #3ef3ff66}.connection-buttons button:disabled{opacity:.4;cursor:default;box-shadow:none}.connection-buttons button:nth-child(3):hover:not(:disabled){box-shadow:0 0 14px #ff4d7abf}.partner-info{font-size:14px;margin-bottom:8px;color:var(--text-sub)}.partner-info .room-id{margin-left:6px;font-size:12px;color:#6b7280}.matching-indicator{position:relative;align-self:center;margin:10px 0 6px;width:140px;height:80px;display:flex;align-items:center;justify-content:center}.ring{position:absolute;border-radius:999px;border:1px solid rgba(62,243,255,.4);animation:ringPulse 2.4s infinite ease-out}.ring1{width:50px;height:24px}.ring2{width:80px;height:32px;animation-delay:.4s}.ring3{width:110px;height:40px;animation-delay:.8s}.matching-text{position:relative;font-size:12px;color:var(--accent-pink);letter-spacing:.28em;text-indent:.28em}@keyframes ringPulse{0%{transform:scale(.9);opacity:.9}to{transform:scale(1.15);opacity:0}}.message-list{flex:1;margin-top:6px;padding:10px 8px;border-radius:12px;background:radial-gradient(circle at top left,#0f172afa,#020617fa);border:1px solid rgba(51,65,85,.95);overflow-y:auto;min-height:220px;max-height:480px}.message-list::-webkit-scrollbar{width:8px}.message-list::-webkit-scrollbar-track{background:#0f172acc}.message-list::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#3ef3ff,#ff4fd8);border-radius:999px}.console-line{display:flex;align-items:baseline;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;margin-bottom:4px;white-space:pre-wrap;word-break:break-word}.console-line.self{color:#a7f3d0}.console-line.partner{color:#bfdbfe}.console-line.system{color:var(--system-text);opacity:.9}.console-name{font-weight:600}.console-sep{padding:0 2px;color:#e5e7eb}.console-text{flex:1}.console-prefix{color:#fbbf24;font-weight:600}.input-area{margin-top:10px;display:flex;flex-direction:row;gap:8px;align-items:flex-end}.input-area textarea{flex:1;min-height:56px;max-height:140px;padding:8px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.85);background:#0f172afa;color:var(--text-main);resize:vertical;outline:none;font-size:16px;line-height:1.5}.input-area textarea:disabled{opacity:.5}.input-area textarea:focus{border-color:var(--border-neon);box-shadow:0 0 0 1px #3ef3ffb3}.input-buttons{display:flex;flex-direction:column;gap:6px}.input-buttons button{padding:8px 16px;border-radius:999px;border:1px solid rgba(148,163,184,.9);background:radial-gradient(circle at top,#3ef3ff4d,#0f172afa);color:var(--text-main);font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.input-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 12px #3ef3ff99;border-color:var(--border-neon)}.input-buttons button:disabled{opacity:.4;cursor:default;box-shadow:none}@media(max-width:768px){.app{padding:12px 10px 16px;max-width:100%}.app-header h1{font-size:20px;text-align:center}.connection-panel{flex-direction:column;align-items:stretch;gap:10px}.connection-panel label,.connection-panel input{width:100%}.connection-buttons{width:100%;justify-content:space-between}.connection-buttons button{flex:1;padding:8px 6px;font-size:13px}.connection-status{margin-left:0;text-align:right;font-size:12px}.chat-area{padding:10px 8px;border-radius:12px}.partner-info{font-size:13px}.message-list{min-height:220px;max-height:none;height:calc(100vh - 260px);padding:8px 6px}.console-line{font-size:13px}.input-area{width:100%;flex-direction:column;gap:6px}.input-area textarea{width:100%;min-height:70px;max-height:180px;font-size:16px}.input-buttons{flex-direction:row;justify-content:flex-end}.input-buttons button{flex:0 0 auto;padding-inline:18px}}@media(max-width:480px){.app-header h1{font-size:18px}.message-list{height:calc(100vh - 250px)}.connection-panel{padding:12px}.chat-area{padding:10px 8px}}*,*:before,*:after{box-sizing:border-box}:root{--bg-main: #050516;--bg-panel: rgba(10, 10, 30, .95);--border-neon: #3ef3ff;--accent-pink: #ff4fd8;--accent-yellow: #ffe66d;--text-main: #f7f9ff;--text-sub: #9ca3c7;--system-text: #cbd5f5;--danger: #ff4d6a}html,body{margin:0;padding:0;width:100%;height:100%;background:radial-gradient(circle at top,#111827,#02010a 60%,#000);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{display:flex;justify-content:center;align-items:stretch}.app{display:flex;flex-direction:column;width:100%;min-height:100vh;padding:24px 16px;background:transparent}.app-header{padding:8px 0 16px}.app-header h1{margin:0;font-size:28px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-pink);text-shadow:0 0 6px rgba(255,79,216,.7),0 0 16px rgba(255,79,216,.4)}.connection-panel{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:16px;background:linear-gradient(135deg,#080a1ef5,#030514fa);border-radius:12px;border:1px solid rgba(62,243,255,.5);box-shadow:0 0 18px #3ef3ff4d}.connection-panel label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-sub);min-width:180px}.connection-panel input{padding:6px 10px;border-radius:8px;border:1px solid rgba(148,163,184,.7);background:#0f172af5;color:var(--text-main);outline:none;font-size:16px}.connection-panel input:focus{border-color:var(--border-neon);box-shadow:0 0 0 1px #3ef3ffb3}.connection-buttons{display:flex;gap:8px}.connection-buttons button{position:relative;padding:8px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.8);background:radial-gradient(circle at top,#3ef3ff40,#0f172afa);color:var(--text-main);font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.connection-buttons button:nth-child(3){border-color:#ff4d7ae6;background:radial-gradient(circle at top,#ff4d7a4d,#180a16fa)}.connection-status{margin-left:auto;font-size:13px;color:var(--text-sub);white-space:nowrap}.connection-status strong{color:var(--accent-pink)}.chat-area{flex:1;display:flex;flex-direction:column;margin-top:8px;padding:16px 20px;border-radius:16px;background:radial-gradient(circle at top,#111827fa,#030712fa);border:1px solid rgba(75,85,99,.9);box-shadow:0 0 22px #0f172ae6,0 0 32px #3b82f659;min-height:0}.message-list{flex:1;margin-top:6px;padding:10px 8px;border-radius:12px;background:radial-gradient(circle at top left,#0f172afa,#020617fa);border:1px solid rgba(51,65,85,.95);overflow-y:auto}.input-area{margin-top:10px;display:flex;flex-direction:row;gap:8px}@media(max-width:768px){.app{padding:12px 10px 16px}}