:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0a0a;--text:#f3f3f3;--green:#1dd17e;--green-shadow:#1dd17e38;--red:#ff6262;--red-shadow:#ff626233;--disabled:#d9d9d9}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:Arial,sans-serif}button,input,textarea,select{font:inherit}.page{grid-template-rows:minmax(0,1fr) clamp(190px,25dvh,280px);height:100dvh;padding:0;display:grid;overflow:hidden}.video-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:0;min-height:0;display:grid}.panel{min-width:0;min-height:0;display:block;position:relative}.panel video,.remote-idle{object-fit:cover;background:#000;width:100%;height:100%;min-height:0;display:block}.remote-idle{background:#000;position:relative;overflow:hidden}.remote-idle>video{object-fit:cover;width:100%;height:100%;display:block}.controls{grid-template-columns:1fr 1fr;align-items:center;gap:16px;height:100%;display:grid}.control-button{cursor:pointer;border:0;border-radius:36px;width:100%;height:100%;min-height:0;font-size:clamp(22px,2vw,28px);font-weight:800;transition:transform .18s,box-shadow .18s,filter .18s}.control-button.primary{color:#fff;box-shadow:0 18px 40px var(--green-shadow);background:#18c964;border:0}.control-button.secondary{color:#fff;box-shadow:0 14px 34px var(--red-shadow);background:#ef4444;border:0}.control-button:hover:not(:disabled){filter:saturate(1.08);transform:translateY(-2px)}.control-button:active:not(:disabled){transform:translateY(0)}.control-button:disabled{background:var(--disabled);color:#8d8d8d;box-shadow:none;cursor:not-allowed;border:0}.remote-idle-image{position:absolute;inset:0}.remote-idle-logo{object-fit:cover}.online-meta-badge{color:#ffffffd6;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000006b;padding:6px 12px;font-size:11px;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}.online-meta-badge a{color:#fff;font-weight:700;text-decoration:none}.online-badge{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;align-items:center;padding:10px 16px;font-size:14px;font-weight:500;display:inline-flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.online-count{align-items:center;gap:14px;display:inline-flex}.online-dot{background:#32d74b;border-radius:999px;width:14px;height:14px;box-shadow:0 0 16px #32d74be6}.bottom-grid{z-index:30;background:#f3f3f3;grid-template-columns:1fr 1fr;gap:0;min-height:0;display:grid;position:relative}.controls-panel,.chat-panel{background:#fff;min-height:0;padding:18px}.chat-panel{z-index:40;padding:0;position:relative}@media (max-width:720px){.page{grid-template-rows:minmax(0,56dvh) minmax(0,44dvh);height:100dvh;min-height:100dvh;overflow:hidden}.video-grid{grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-columns:1fr;min-height:0}.panel{height:100%;min-height:0;overflow:hidden}.bottom-grid{grid-template-rows:68px minmax(0,1fr);grid-template-columns:1fr;min-height:0}.controls-panel,.chat-panel{min-height:0}.panel video,.remote-idle,.video-wrapper{aspect-ratio:auto;width:100%;height:100%;min-height:0}.video-wrapper{position:relative;inset:auto}.panel>.remote-idle{position:relative}.controls{grid-template-columns:1fr 1fr;gap:10px;height:100%}.control-button{border-radius:18px;height:56px;min-height:0;font-size:18px}.controls-panel{background:#fff;padding:6px 10px}.chat-panel{background:#fff;padding:0}.chat-messages{padding:10px 10px 6px}.chat-input-area{margin-bottom:0}.bottom-grid,.p2p-chat-box{height:100%}.online-meta-badge{padding:5px 10px;font-size:10px;bottom:58px}.online-badge{padding:8px 12px;font-size:12px;bottom:12px}.video-watermark{font-size:15px;bottom:10px;right:10px}.video-watermark-tv{border-radius:7px;min-width:28px;height:22px;padding:0 6px}}.loading-overlay{z-index:9999;background:var(--bg);flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:80px;display:flex;position:fixed;inset:0}.loading-logo-wrapper{width:100%;height:100%;position:absolute;inset:0}.loading-logo{object-fit:cover}.loading-spinner{z-index:10;border:4px solid #fff3;border-left-color:var(--green);border-radius:50%;width:54px;height:54px;animation:1s linear infinite spin;position:relative;box-shadow:0 0 16px #00000080}@keyframes spin{to{transform:rotate(360deg)}}.video-wrapper{width:100%;height:100%;position:absolute;inset:0}.video-overlay{opacity:0;z-index:10;background:linear-gradient(#0000 0%,#000c 100%);align-items:center;gap:12px;padding:24px 16px 16px;transition:opacity .2s;display:flex;position:absolute;bottom:0;left:0;right:0}.video-watermark{z-index:9;letter-spacing:.01em;text-shadow:0 2px 10px #0000008c,0 0 18px #ffc8002e;align-items:center;gap:4px;font-size:18px;font-weight:800;display:inline-flex;position:absolute;bottom:12px;right:14px}.video-watermark-text{color:#111}.video-watermark-tv{color:#fff;min-width:34px;height:26px;text-shadow:none;background:#ffb400;border-radius:8px;justify-content:center;align-items:center;padding:0 8px;display:inline-flex;box-shadow:0 4px 14px #ffb40052}.video-wrapper:hover .video-overlay{opacity:1}.mic-select{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border:1px solid #fff3;border-radius:8px;outline:none;flex:1;padding:8px 12px;font-size:14px}.mic-select:hover{background:#000c;border-color:#fff6}.mic-select option{color:#fff;background:#222}.mic-track,.volume-track{color:#fff;align-items:center;gap:12px;width:100%;display:flex}.mic-icon,.volume-icon{fill:currentColor;opacity:.9;width:24px;height:24px}.volume-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;flex:1;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .1s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:14px;height:14px;transition:transform .1s}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.media-error-screen{text-align:center;z-index:20;background:#000 url(/denied-camera.jpg) 50%/cover no-repeat;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:absolute;inset:0}.media-error-content{background:linear-gradient(#0000 0%,#0009 20%,#000000f2 100%);flex-direction:column;align-items:center;gap:16px;width:100%;padding:64px 24px 24px;display:flex}.media-error-screen p{color:#fff;opacity:.9;margin:0;font-size:16px;line-height:1.5}.retry-media-button{color:#fff;cursor:pointer;background:#18c964;border:none;border-radius:8px;padding:10px 20px;font-size:16px;font-weight:600;transition:transform .1s}.retry-media-button:hover{transform:translateY(-2px)}.p2p-chat-box{z-index:41;background:radial-gradient(circle at 0 0,#1dd17e14,#0000 28%),radial-gradient(circle at 100% 100%,#ff626212,#0000 28%),#fff;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;width:100%;height:100%;padding:0;display:grid;position:relative;overflow:visible}@media (max-width:768px){.p2p-chat-box{min-height:380px}}.chat-messages{scrollbar-width:thin;scrollbar-color:#0003 transparent;flex-direction:column;gap:12px;min-height:0;padding:14px 14px 8px;display:flex;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:#00000026;border-radius:4px}.chat-message{word-wrap:break-word;border-radius:14px;max-width:min(78%,380px);padding:8px 10px;font-size:12px;line-height:1.35}.msg-me{color:#fff;background:linear-gradient(135deg,#18c964,#12a14e);border-bottom-right-radius:4px}.msg-peer{color:#333;background:#f1f3f4;border-bottom-left-radius:4px}.chat-row{align-items:flex-start;gap:8px;max-width:100%;display:flex}.chat-row-peer{justify-content:flex-start}.chat-row-me{justify-content:flex-end}.chat-stack{flex-direction:column;gap:6px;width:50%;max-width:50%;display:flex}.chat-row-me .chat-stack{align-items:flex-end}.chat-row-peer .chat-stack{align-items:flex-start}.chat-avatar{border-radius:999px;flex:0 0 28px;place-items:center;width:28px;height:28px;font-size:9px;font-weight:800;display:grid;position:relative;overflow:hidden}.chat-avatar-peer{background:#fff;box-shadow:0 4px 10px #00000014}.chat-avatar-me{color:#fff;background:#111}.chat-avatar-image{object-fit:cover}.policy-message{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:10px;display:grid}.policy-avatar{background:#fff;border-radius:999px;width:44px;height:44px;position:relative;overflow:hidden;box-shadow:0 6px 18px #00000014}.policy-avatar-image{object-fit:cover}.policy-bubble{color:#1f1f1f;background:#f1f3f4;border-radius:6px 18px 18px;max-width:100%;padding:12px 14px}.policy-name{color:#111;margin:0 0 6px;font-size:14px;font-weight:800}.policy-text{margin:0;font-size:14px;line-height:1.45}.policy-link{color:#111;margin-top:8px;font-size:13px;font-weight:700;text-decoration:none;display:inline-block}.chat-input-area{z-index:50;background:#fff;border:0;border-top:1px solid #e8e8e8;border-radius:0;align-items:center;gap:8px;min-height:42px;margin-top:auto;margin-bottom:0;padding:4px 8px;display:flex;position:relative}.chat-input{color:#333;resize:none;background:0 0;border:none;outline:none;flex:1;height:18px;min-height:18px;max-height:18px;padding:0 4px;font-family:inherit;font-size:14px;overflow:hidden}.chat-input::placeholder{color:#999}.chat-input:disabled{opacity:.5;cursor:not-allowed}.emoji-button{cursor:pointer;background:0 0;border:none;border-radius:50%;padding:4px;font-size:20px;transition:transform .1s}.emoji-button:hover{transform:scale(1.1)}.send-button{cursor:pointer;color:#fff;opacity:1;background:#111;border:none;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex}.send-button svg{width:16px;height:16px;transition:transform .1s}.send-button:hover:not(:disabled) svg{opacity:1;transform:translate(2px)}.send-button:disabled{color:#9f9f9f;cursor:not-allowed;background:#dcdcdc}.chat-input-area-disabled .chat-input{color:#9a9a9a}.emoji-picker-container{z-index:99999;border-radius:8px;position:absolute;bottom:calc(100% + 8px);left:0;right:auto;overflow:hidden;box-shadow:0 8px 32px #0009}
