:root{font-family:Inter,Roboto,Segoe UI,Arial,sans-serif;line-height:1.5;font-weight:400;color:#fff;background:linear-gradient(135deg,#0f2027,#2c5364);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#00bfae;text-decoration:inherit;transition:color .2s}a:hover{color:#2c5364}body{margin:0;min-width:320px;min-height:100vh;background:inherit;color:#fff;display:flex;place-items:center}h1{font-size:3.2em;line-height:1.1;color:#fff}button{border-radius:2em;border:none;padding:.7em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background:linear-gradient(135deg,#00bfae,#2c5364);color:#fff;cursor:pointer;box-shadow:0 2px 8px #2c53641a;transition:background .2s,box-shadow .2s,border-color .25s}button:hover{background:linear-gradient(135deg,#2c5364,#00bfae)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}input,textarea{border-radius:2em;border:1.5px solid #00bfae;padding:.7em 1.2em;font-size:1em;font-family:inherit;background:#fffffff7;color:#232b2f;box-shadow:0 1px 4px #2c53640f}@media (prefers-color-scheme: light){:root{color:#232b2f;background:linear-gradient(135deg,#e0eafc,#cfdef3)}a:hover{color:#00bfae}button{background:linear-gradient(135deg,#00bfae,#2c5364);color:#fff}}body{font-family:Inter,Roboto,Segoe UI,Arial,sans-serif;margin:0;padding:0;background:linear-gradient(135deg,#0f2027,#2c5364);color:#fff}.app{max-width:1100px;margin:0 auto;padding:32px;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;margin-bottom:32px;background:linear-gradient(90deg,#232526,#414345);color:#fff;padding:32px 20px 28px;border-radius:1.2em;box-shadow:0 4px 24px #2c53641a}header h1{margin:0;font-size:2.4rem;letter-spacing:.02em}.connection-status{margin:14px 0;font-size:1.05rem;color:#00bfae;font-weight:600}.connection-status .connected{color:#00bfae}.connection-status .disconnected{color:#e74c3c}.connection-status .error{color:#f39c12}.mode-selector{margin:18px 0;display:flex;justify-content:center;gap:16px}.mode-selector button{background:linear-gradient(90deg,#00bfae,#2c5364);color:#fff;border:none;padding:10px 22px;border-radius:2em;cursor:pointer;font-size:1.08em;font-weight:600;transition:background .3s}.mode-selector button.active,.mode-selector button:hover{background:linear-gradient(90deg,#2c5364,#00bfae)}.session-info{background:#ffffff1a;padding:18px;border-radius:1em;box-shadow:0 2px 8px #2c536414;margin-bottom:24px;color:#fff}.session-info p{margin:0 0 10px}.target-input input{width:100%;padding:10px;border:1.5px solid #00bfae;border-radius:2em;box-sizing:border-box;background:#fffffff7;color:#232b2f;font-size:1.08em}main{flex:1;display:flex;flex-direction:column}.chat-container{background:#ffffffe6;border-radius:1.2em;box-shadow:0 4px 24px #2c53641a;padding:28px;flex:1;display:flex;flex-direction:column;color:#232b2f}.messages{flex:1;overflow-y:auto;margin-bottom:18px;padding:14px;border-radius:1em;background:#ffffffb3;box-shadow:0 2px 8px #2c536414;display:flex;flex-direction:column;gap:12px;color:#232b2f}.message{max-width:75%;padding:12px 18px;border-radius:1.5em;word-wrap:break-word;font-size:1.08em}.message.local{background:linear-gradient(90deg,#00bfae,#2c5364);color:#fff;align-self:flex-end;border-bottom-right-radius:.5em}.message.remote{background:#ecf0f1;color:#232b2f;align-self:flex-start;border-bottom-left-radius:.5em}.message-content{margin-bottom:4px}.message-time{font-size:.8rem;opacity:.8}.input-area{display:flex;gap:14px}.input-area input{flex:1;padding:12px;border:1.5px solid #00bfae;border-radius:2em;background:#fffffff7;color:#232b2f;font-size:1.08em}.input-area button{background:linear-gradient(90deg,#00bfae,#2c5364);color:#fff;border:none;padding:0 24px;border-radius:2em;cursor:pointer;font-size:1.08em;font-weight:600;transition:background .3s}.input-area button:hover{background:linear-gradient(90deg,#2c5364,#00bfae)}.input-area button:disabled{background:#bdc3c7;cursor:not-allowed}.video-container{background:#ffffff1a;border-radius:1.2em;box-shadow:0 4px 24px #2c53641a;padding:28px;flex:1;display:flex;flex-direction:column}.video-wrapper{position:relative;width:100%;height:500px;background:#232526;border-radius:1em;overflow:hidden;margin-bottom:18px;box-shadow:0 4px 24px #2c53641a}.remote-video{width:100%;height:100%;object-fit:cover;border-radius:1em}.local-video{position:absolute;width:32%;height:auto;bottom:24px;right:24px;border:2px solid #00bfae;border-radius:1em;z-index:1;box-shadow:0 2px 8px #2c53641a}.controls{display:flex;gap:14px;align-items:center;background:#ffffff2e;border-radius:2em;box-shadow:0 2px 8px #2c53641a;padding:.5em 1.5em}.controls button{background:linear-gradient(135deg,#00bfae,#2c5364);color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:1.3em;box-shadow:0 2px 8px #2c53641a;display:flex;align-items:center;justify-content:center;transition:background .2s,box-shadow .2s}.controls button:hover{background:linear-gradient(135deg,#2c5364,#00bfae)}.controls button:disabled{background:#bdc3c7;cursor:not-allowed}@media (max-width: 768px){.app{padding:8px}header{padding:18px 8px 16px;font-size:1.2rem}.video-wrapper{height:260px}.local-video{width:48%;bottom:8px;right:8px}}@media (max-width: 700px){.app{padding:4px;max-width:100vw;min-height:100vh}header{padding:10px 4px;font-size:1rem;border-radius:.7em}.room-actions,.room-info{padding:.5em;font-size:1em}.chat-container{padding:10px;border-radius:.7em;font-size:1em;margin:.5em 0}.video-chat-horizontal-container,.video-area{flex-direction:column!important;margin:0!important;padding:0!important;border-radius:.7em!important;width:100vw!important;min-width:0!important;max-width:100vw!important}.mode-selector{gap:8px}.mode-selector button{padding:8px 12px;font-size:1em}.security-notice{font-size:.95em;margin:6px 0}}.video-container{display:flex;height:100vh;background-color:#f0f2f5;gap:20px;padding:20px}.video-wrapper{flex:1;position:relative;background-color:#1a1a1a;border-radius:8px;overflow:hidden;aspect-ratio:16/9}.local-video{position:absolute;width:240px;height:180px;top:20px;left:20px;border:2px solid #fff;border-radius:8px;z-index:2;object-fit:cover}.remote-video{width:100%;height:100%;object-fit:contain;background-color:transparent;z-index:1}.chat-container{width:400px;min-width:400px;display:flex;flex-direction:column;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;height:calc(100vh - 40px)}.messages-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}.message{max-width:80%;padding:10px;border-radius:8px;margin-bottom:8px}.message.sent{align-self:flex-end;background-color:#0084ff;color:#fff}.message.received{align-self:flex-start;background-color:#e9ecef;color:#000}.message-content{word-wrap:break-word}.message-timestamp{font-size:.75rem;opacity:.7;margin-top:4px}.message-input-container{display:flex;gap:10px;padding:20px;border-top:1px solid #e9ecef;background-color:#fff}.message-input{flex:1;padding:10px;border:1px solid #e9ecef;border-radius:4px;font-size:14px}.message-input:focus{outline:none;border-color:#0084ff}.send-button{padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500}.send-button:hover{background-color:#0073e6}.send-button:disabled{background-color:#e9ecef;cursor:not-allowed}.controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:3}.controls button{padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500}.controls button:hover{background-color:#0073e6}.controls button:disabled{background-color:#e9ecef;cursor:not-allowed}.security-status{display:flex;align-items:center;gap:5px;font-size:14px;color:#666}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:#2a2a2a}.messages-container::-webkit-scrollbar-thumb{background:#404040;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#505050}.video-chat-container{max-width:100vw;height:100vh;margin:0;padding:0;position:relative;background:#181f23;display:flex;flex-direction:column;justify-content:flex-start}.shared-secret-status{text-align:center;margin:.7em 0 .2em;font-size:1.1em;z-index:10;position:relative}.whatsapp-video-section{position:relative;flex:1 1 auto;width:100%;height:100%;overflow:hidden;background:#181f23;display:flex;align-items:center;justify-content:center}.remote-video{width:100%;height:100%;object-fit:cover;border-radius:0;background:#222;box-shadow:none;z-index:1;pointer-events:none}.local-video-floating{position:absolute;top:2.5em;right:2.5em;width:180px;height:120px;border-radius:1em;box-shadow:0 4px 24px #00000040;border:2px solid #16a085;object-fit:cover;background:#333;z-index:20;transition:box-shadow .2s;pointer-events:none}.video-label.local{position:absolute;top:2.5em;right:2.5em;background:#16a085;color:#fff;font-size:.9em;padding:.2em .8em;border-radius:.7em;z-index:25;margin-top:.5em;pointer-events:none}.video-label.remote{position:absolute;top:1.2em;left:2em;background:#181f23b3;color:#fff;font-size:1em;padding:.2em .8em;border-radius:.7em;z-index:25;pointer-events:none}.controls button{background:#16a085;color:#fff;border:none;border-radius:50%;width:56px;height:56px;font-size:1.5em;box-shadow:0 2px 8px #0000002e;cursor:pointer;transition:background .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center}.controls button:active{background:#138d75}.chat-section{position:absolute;left:50%;bottom:0;transform:translate(-50%);width:100vw;max-width:480px;background:#181f23fa;border-top-left-radius:1.2em;border-top-right-radius:1.2em;box-shadow:0 -2px 16px #0000002e;z-index:20;padding:.7em 1em 1.2em;transition:bottom .3s;pointer-events:auto}.messages{max-height:180px;overflow-y:auto;margin-bottom:.7em}.input-area{display:flex;gap:.5em}.input-area input{flex:1 1 auto;border-radius:1em;border:1px solid #444;padding:.5em 1em;font-size:1em;background:#232b2f;color:#fff}.input-area button{background:#16a085;color:#fff;border:none;border-radius:1em;padding:.5em 1.2em;font-size:1em;cursor:pointer;transition:background .2s}.input-area button:active{background:#138d75}@media (max-width: 700px){.whatsapp-video-section{height:60vw;min-height:220px}.remote-video{width:100vw;height:60vw;min-height:220px}.local-video-floating{width:100px;height:70px;top:unset;bottom:7em;right:1em}.video-label.local{top:unset;bottom:7em;right:1em}.controls{bottom:1.2em;margin-bottom:.5em}.chat-section{max-width:100vw;border-radius:1.2em 1.2em 0 0;padding:.7em .5em 1.2em}}.video-chat-horizontal-container{display:flex;flex-direction:row;width:100vw;height:100vh;background:#181f23}.video-area{flex:1 1 0;display:flex;flex-direction:column;position:relative;min-width:0}.chat-section-right{width:400px;max-width:100vw;min-width:320px;height:100vh;position:relative;background:#181f23fa;border-left:1px solid #222;box-shadow:-2px 0 16px #00000014;z-index:30;display:flex;flex-direction:column;justify-content:flex-end;padding:.7em 1em 1.2em}@media (max-width: 900px){.video-chat-horizontal-container{flex-direction:column}.chat-section-right{width:100vw;max-width:100vw;min-width:0;height:40vh;position:absolute;left:0;bottom:0;border-left:none;border-top:1px solid #222;box-shadow:0 -2px 16px #0000002e;border-radius:1.2em 1.2em 0 0;z-index:40;padding:.7em 1em 1.2em}.video-area{height:60vh}}.controls{position:absolute;left:50%;bottom:2.5em;transform:translate(-50%);z-index:30;display:flex;gap:1.5em;pointer-events:auto}.local-video-floating-draggable{position:fixed;top:2.5em;right:2.5em;width:180px;height:120px;border-radius:1em;box-shadow:0 4px 24px #00000040;border:2px solid #16a085;object-fit:cover;background:#333;z-index:1000;cursor:move;transition:top .2s,left .2s,right .2s}@media (max-width: 700px){.local-video-floating-draggable{width:100px;height:70px;top:unset;bottom:7em;right:1em}}body,.video-chat-horizontal-container{font-family:Inter,Roboto,Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#0f2027,#2c5364)}.video-area{background:linear-gradient(120deg,#232526,#414345);border-radius:1.5em;margin:2em 1em 2em 2em;box-shadow:0 8px 32px #1f26872e;overflow:hidden}.whatsapp-video-section{background:transparent;border-radius:1.5em;box-shadow:0 4px 24px #0000001a}.remote-video{border-radius:1.2em;box-shadow:0 4px 32px #2c53642e;background:#1a222b}.local-video-floating-draggable{background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #00bfae;box-shadow:0 8px 32px #2c536440;border-radius:1em;transition:box-shadow .2s,top .2s,left .2s,right .2s}.chat-section-right{background:#ffffffe6;border-radius:1.5em 0 0 1.5em;box-shadow:-4px 0 24px #2c53641a;color:#232b2f;margin:2em 2em 2em 0;padding:2em 1.5em;width:340px;min-width:260px;max-width:90vw}.messages{background:#ffffffb3;border-radius:1.2em;box-shadow:0 2px 8px #2c536414;padding:1.2em;margin-bottom:1.2em;max-height:320px;color:#232b2f;font-size:1.05em}.input-area input{background:#fffffff7;border:1.5px solid #00bfae;color:#232b2f;border-radius:2em;padding:.8em 1.4em;font-size:1.08em;box-shadow:0 1px 4px #2c53640f}.input-area button{background:linear-gradient(90deg,#00bfae,#2c5364);color:#fff;border:none;border-radius:2em;padding:.8em 1.7em;font-size:1.08em;font-weight:600;box-shadow:0 2px 8px #2c53641a;transition:background .2s}.video-area{background:linear-gradient(120deg,#232526,#414345);border-radius:1.7em;margin:2em 1em 2em 2em;box-shadow:0 8px 32px #1f26872e;overflow:hidden}.security-status,.shared-secret-status{color:#fff;font-weight:600;margin:1.2em 0 .7em 2em;letter-spacing:.02em;text-shadow:0 2px 8px rgba(44,83,100,.18)}.video-label.local,.video-label.remote{color:#fff;font-size:1.05em;font-weight:600;text-shadow:0 2px 8px rgba(44,83,100,.18);background:#2c5364b3;border-radius:.7em;padding:.2em 1em}@media (max-width: 900px){.video-area,.chat-section-right{margin:0;border-radius:0}.chat-section-right{border-radius:1.2em 1.2em 0 0;margin:0;padding:1em .5em 1.2em;width:100vw;min-width:0;max-width:100vw}}