.room{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:16px}.top{display:flex;gap:8px;align-items:center;background:#fff;border-radius:12px;padding:10px;box-shadow:0 6px 20px #0000000f}.badge{background:#f1f5f9;color:#0f172a;border-radius:999px;padding:6px 10px;font-size:12px}.spacer{flex:1}.type{background:#e2e8f0;color:#0f172a;border-radius:999px;padding:6px 10px;font-size:12px}.type.turn{background:#fee2e2;color:#991b1b}.type.stun{background:#dcfce7;color:#166534}.type.host{background:#dbeafe;color:#1e40af}.type.state{background:#f1f5f9;color:#334155}.btn{padding:8px 12px;border:none;border-radius:8px;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer}.btn.ghost{background:#f1f5f9;color:#0f172a}.btn.hang{background:#ef4444}.select{padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font-size:12px;color:#0f172a}.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.video-item{background:#fff;border-radius:12px;padding:10px;box-shadow:0 6px 20px #0000000f;display:grid;gap:8px}.label{font-size:12px;color:#64748b}video{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;object-fit:cover}.chat{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 20px #0000000f;display:grid;grid-template-rows:1fr auto}.messages{height:320px;overflow:auto;margin-bottom:8px;display:flex;flex-direction:column;gap:8px;overflow-anchor:none}.msg{display:grid;gap:4px}.msg.me{justify-items:end}.msg.other{justify-items:start}.msg.system{justify-items:center}.meta{font-size:12px;color:#94a3b8}.bubble{max-width:90%;padding:8px 10px;border-radius:12px;background:#f1f5f9;color:#0f172a}.msg.me .bubble{background:#3b82f6;color:#fff}.input{display:flex;gap:8px}.inputBox{flex:1;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px}.inputBox:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.send{padding:10px 12px;border:none;border-radius:8px;background:#22c55e;color:#fff;font-weight:600;cursor:pointer}@media (max-width: 992px){.room{grid-template-columns:1fr}.messages{height:240px}}@media (max-width: 600px){.room{padding:10px}.top{flex-wrap:wrap;gap:6px}.btn{padding:6px 10px;font-size:12px}.badge{padding:4px 8px;font-size:11px}.videos{grid-template-columns:1fr}.messages{height:180px}.input{gap:6px}.inputBox{font-size:12px;padding:8px 10px}.send{padding:8px 10px;font-size:12px}}.page{height:95vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center center;background-repeat:no-repeat;padding:16px;position:relative}.page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff38}.page .card{position:relative;z-index:1}.card{width:100%;max-width:360px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #00000014;padding:20px;display:grid;gap:12px}.title{font-size:20px;font-weight:600;text-align:center}.input{padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px}.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.btn{padding:10px 12px;border:none;border-radius:8px;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer}.btn:active{transform:translateY(1px)}.error{color:#ef4444;font-size:12px}@media (max-width: 480px){.card{max-width:92vw;padding:14px;gap:10px}}@media (max-height: 560px){.card{transform:scale(.95)}}