*{box-sizing:border-box}body{color:#e2e8f0;background:#0f172a;margin:0;font-family:system-ui,sans-serif}.center{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:12px 20px;font-size:16px}button.danger{background:#dc2626}.call-page{justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.call-surface{aspect-ratio:16/9;background:#1e293b;border-radius:16px;width:min(1120px,100%);min-height:360px;position:relative;overflow:hidden;box-shadow:0 24px 80px #00000059}.videos{position:absolute;inset:0}.remote-tile,.local-tile{margin:0}.remote-tile{position:absolute;inset:0}.local-tile{z-index:2;width:160px;position:absolute;bottom:16px;right:16px}.remote-tile video,.local-tile video{object-fit:cover;background:#1e293b;width:100%;height:100%;display:block;transform:scaleX(-1)}.remote-tile video{border-radius:16px}.local-tile video{aspect-ratio:4/3;border:2px solid #e2e8f0b3;border-radius:12px;box-shadow:0 12px 32px #00000073}.remote-tile figcaption,.local-tile figcaption{color:#e2e8f0;background:#0f172ab3;border-radius:999px;padding:3px 8px;font-size:12px;position:absolute;bottom:8px;left:8px}.call-top-bar{z-index:3;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:absolute;top:16px;left:16px;right:16px}.call-quality{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.call-status{color:#e2e8f0;text-align:right;background:#0f172ab3;border-radius:999px;max-width:60%;margin:0;padding:4px 10px;font-size:14px}.call-hangup{z-index:3;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}@media (width<=640px){.call-page{background:#1e293b;align-items:flex-start;min-height:100svh;padding:0}.call-surface{aspect-ratio:auto;width:100%;min-height:100svh;box-shadow:none;border-radius:0}.remote-tile video{border-radius:0}.local-tile{width:104px;bottom:88px;right:12px}.call-top-bar{flex-direction:column;top:12px;left:12px;right:12px}.call-status{text-align:left;max-width:100%}.call-hangup{bottom:24px}}.quality{pointer-events:none;background:#1e293b;border-radius:999px;padding:4px 10px;font-size:14px}.quality-excellent{color:#bbf7d0;background:#14532d}.quality-good{color:#dcfce7;background:#166534}.quality-medium{color:#fef08a;background:#854d0e}.quality-poor{color:#fecaca;background:#991b1b}.quality-reconnecting,.quality-connecting{color:#bfdbfe;background:#1e3a8a}.quality-disconnected{color:#cbd5e1;background:#334155}