*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#05070f;color:#e8e8e8;overflow:hidden}#app{height:100%;background:radial-gradient(circle at 30% 20%,#0b1120,#05070f 45%)}.shell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;height:100%;min-height:100%}.sidebar{border-right:1px solid #1b2233;padding:18px 14px;background:#080a14e6;display:grid;grid-template-rows:auto 1fr auto;gap:14px}.sidebar-header{display:flex;flex-direction:column;gap:6px}.title{font-weight:800;letter-spacing:.4px;font-size:18px}.status-line{display:flex;align-items:center;gap:8px;font-size:13px;color:#c7d2fe}.participants{overflow:auto}.participants-title{font-size:14px;color:#9ca3af;margin-bottom:8px}.participants-list{display:flex;flex-direction:column;gap:8px}.participant{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid #1f2b44;border-radius:10px;background:#0b1020}.participant .name{font-weight:600}.participant .status{font-size:12px;color:#9ca3af}.participant.online .status{color:#22c55e}.participant.offline .status{color:#f87171}.ghost{background:transparent;border:1px solid #1f2b44;color:#a5b4fc;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:700}.ghost.full{width:100%}.ghost:hover{border-color:#3b82f6;color:#c7d2fe}.dot{opacity:.6}.pill{padding:2px 8px;border-radius:999px;border:1px solid #1f2b44}.chat-area{display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:100%}.top{padding:16px 18px;border-bottom:1px solid #1b2233;display:flex;align-items:center;justify-content:space-between;gap:12px}.room-title{font-weight:800;letter-spacing:.3px;font-size:18px}.room-sub{font-size:13px;color:#9ca3af}.chat{padding:18px 16px 10px;overflow:auto;display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}.messages{display:flex;flex-direction:column;gap:10px}typing{min-height:18px;font-size:13px;color:#a5b4fc;opacity:.85}.typing{min-height:18px;font-size:13px;color:#a5b4fc;opacity:.85}.day-separator{text-align:center;margin:8px 0;font-size:12px;color:#9ca3af}.msg{max-width:760px;width:fit-content;padding:12px 14px;border-radius:18px;border:1px solid #294268;background:linear-gradient(160deg,#1d3051,#23395f);box-shadow:0 16px 30px #00000059}.msg.mine{margin-left:auto;background:linear-gradient(160deg,#264a7c,#2b5b9b);border-color:#3a6fb4}.msg.system{margin:0 auto;text-align:center;background:transparent;border:none;box-shadow:none;color:#9ca3af}.msg .head{display:flex;gap:10px;font-size:12px;opacity:.75;margin-bottom:6px}.msg .text{white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:1.5;color:#f3f4f6}.messages a{color:#7dc3ff;text-decoration:underline;font-weight:600}.messages a:active{color:#a5d8ff}.link-preview{margin-top:8px;border:1px solid #2a4260;border-radius:14px;padding:12px;background:linear-gradient(180deg,#0f1a2e,#142235);color:#cbd5e1}.link-preview a{color:#9bc9ff;text-decoration:none;word-break:break-word;font-weight:700;display:inline-block;margin-bottom:4px}.link-preview .domain{font-size:12px;color:#9ca3af}.video-embed{margin-top:8px;width:min(560px,100%);aspect-ratio:16/9;border:1px solid #1f2b44;border-radius:12px;overflow:hidden}.video-embed iframe{width:100%;height:100%;border:0}.composer{padding:12px 12px 14px;border-top:1px solid #1b2233;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;background:#060810cc}.input-wrap{position:relative;width:100%}.composer input{width:100%;padding:14px 14px 18px;border-radius:12px;border:1px solid #1f2b44;background:#0b1020;color:#e8e8e8;outline:none;font-size:18px}.composer input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.composer button{width:52px;height:52px;padding:0;border-radius:14px;border:1px solid #1f2b44;background:linear-gradient(135deg,#2563eb,#22d3ee);color:#fff;cursor:pointer;font-size:22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.composer button:disabled{opacity:.6;cursor:default}.composer button:hover:not(:disabled){filter:brightness(1.05)}.counter{position:absolute;right:12px;bottom:6px;font-size:12px;color:#9ca3af}.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid #1f2b44;background:#0b1020;color:#c7d2fe;cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{border-color:#3b82f6;color:#e0e7ff}@media (max-width: 960px){.shell{grid-template-columns:1fr}.sidebar{position:absolute;left:0;top:0;bottom:0;width:260px;transform:translate(-100%);transition:transform .2s ease;z-index:5}.sidebar.open{transform:translate(0)}.chat-area{grid-template-rows:auto 1fr auto}}@media (max-width: 640px){.top{flex-direction:row;align-items:center}.composer{grid-template-columns:1fr auto}.composer button{width:48px;height:48px}.ghost.full{width:100%;text-align:center}.chat{padding:12px}}