:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20242e;background:#f5f6f8;font-synthesis:none;font-size:16px;--accent:#5553dc;--line:#dfe2e8}*{box-sizing:border-box}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #8a87f2;outline-offset:4px}[hidden]{display:none!important}.app{max-width:1240px;margin:0 auto;padding:0 40px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:center;font-size:27px;font-weight:750;letter-spacing:-1px;color:#20242e}.brand-icon{display:grid;place-items:center;width:36px;height:36px;margin-right:10px;background:var(--accent);color:white;border-radius:11px;font-size:31px;line-height:1}.brand-period{color:var(--accent)}.header-note{font-size:14px;color:#6b7180}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 0 25px}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:1.7px;color:#777b89!important;margin:0 0 10px!important}h1{font-size:clamp(24px,2.5vw,32px);line-height:1.2;font-weight:650;letter-spacing:-.8px;margin:0 0 9px}.intro p{color:#6c7281;font-size:16px;margin:0}.status{display:flex;align-items:center;gap:9px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:50px;padding:10px 16px;font-size:14px}.status strong{font-weight:550}.status>span{height:7px;width:7px;background:#7d8596;border-radius:50%}.status[data-state=connected]>span{background:#1c8a62}.status[data-state=searching]>span,.status[data-state=connecting]>span{background:#7771e8;animation:pulse 1.5s infinite}.stage{position:relative;overflow:hidden;background:#1c202a;isolation:isolate;border-radius:18px;height:min(53vw,510px);min-height:330px;color:white;border:1px solid #292e3a}.stage>video{width:100%;height:100%;object-fit:contain;display:block}.stage-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding:20px 23px;background:linear-gradient(#151923ad,transparent);z-index:2;font-size:13px}.video-label{color:#edf0f8}.privacy-label{display:flex;gap:7px;align-items:center;color:#bfc4d0}.privacy-label svg{width:14px;height:14px}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 220px 50px 30px;text-align:center;transform:translateX(70px)}.camera-symbol{display:grid;place-items:center;width:70px;height:70px;border:1px solid #414653;background:#292e39;border-radius:23px;margin-bottom:20px;color:#b5b9ca}.camera-symbol svg{width:30px;height:30px}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.empty-state h2{font-size:23px;font-weight:550;letter-spacing:-.3px;margin:0 0 11px}.empty-state p{font-size:15px;color:#acb2c1;margin:0;line-height:1.5}.self-preview{position:absolute;width:210px;height:150px;bottom:20px;right:20px;border:1px solid #505461;border-radius:12px;background:#2b303b;overflow:hidden;box-shadow:0 5px 20px #0003}.self-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.self-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:#2b303b;color:#abb2c3;font-size:12px}.self-empty svg{width:24px;height:24px}.you-label{position:absolute;bottom:10px;left:12px;font-size:12px;color:#f3f5fc;text-shadow:0 1px 5px #000;background:#20242ca6;padding:3px 7px;border-radius:5px}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 10px}.main-controls,.device-controls{display:flex;align-items:center;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;border-radius:11px;padding:12px 23px;font-size:15px;font-weight:600;border:1px solid transparent;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:translateY(1px)}.button svg{height:18px;width:18px}.primary{color:white;background:var(--accent)}.primary:hover:not(:disabled){background:#4442c4}.secondary,.icon-button{background:white;color:#424957;border-color:var(--line)}.secondary:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#ebeef4}.icon-button{padding:12px 15px}.icon-button[aria-pressed=true]{background:#f9e4e4;border-color:#ebc1c1;color:#a7353e}.icon-button[aria-pressed=true] svg{opacity:.65}.control-label{font-size:14px;font-weight:500}.message{font-size:14px;color:#626b7b;min-height:40px;line-height:1.5;padding:4px 0 12px}.message.error{color:#a22c37}.safety-row{border-top:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:25px}.safety-row p{font-size:14px;line-height:1.7;color:#606977;margin:0}.safety-row p span{color:#7c8390;font-size:13px}.safety-actions{display:flex;gap:18px;white-space:nowrap}.text-button{display:flex;align-items:center;gap:7px;border:0;background:none;color:#626979;padding:4px 0;font-size:14px}.text-button:hover:not(:disabled){color:#292447;text-decoration:underline}.text-button svg{height:15px;width:15px}footer{padding:18px 0 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#858b97}.play-audio{position:absolute;z-index:4;top:70px;left:50%;transform:translateX(-50%);padding:12px 18px;border:0;border-radius:10px;background:#fff;color:#222;box-shadow:0 2px 10px #0004}.search-animation{display:flex;gap:5px;margin-top:18px}.search-animation i{width:6px;height:6px;border-radius:50%;background:#a09cf6;animation:pulse 1.2s infinite}.search-animation i:nth-child(2){animation-delay:.2s}.search-animation i:nth-child(3){animation-delay:.4s}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:28px;color:#222834;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#151a2c88;backdrop-filter:blur(3px)}dialog h2{font-size:23px;margin:0 0 14px}dialog p{font-size:15px;line-height:1.6;color:#6b7180}dialog label{display:block;margin:20px 0 9px;font-size:14px;font-weight:600}dialog select{width:100%;padding:12px;border-radius:9px;border:1px solid #bec4d0;background:white;color:#252c38}dialog .small{font-size:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}@keyframes pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:900px){.stage{height:480px}}@media(max-width:700px){.app{padding:0 20px}.header{height:77px}.header-note{display:none}.intro{padding:25px 0 20px;align-items:flex-start}.intro p:not(.eyebrow){font-size:14px}.intro h1{max-width:250px;font-size:26px}.status{padding:8px 11px;font-size:13px;margin-top:23px}.stage{height:55vh;min-height:365px;max-height:580px;border-radius:14px}.stage-top{padding:15px}.privacy-label{font-size:0}.privacy-label svg{width:15px;height:15px}.empty-state{transform:none;padding:60px 20px 160px}.empty-state h2{font-size:20px}.empty-state p{font-size:14px;max-width:260px}.camera-symbol{width:58px;height:58px;border-radius:19px;margin-bottom:17px}.self-preview{width:133px;height:100px;bottom:14px;right:14px}.controls{flex-wrap:wrap;padding-top:15px;gap:10px}.button{font-size:14px;padding:12px 17px;min-height:47px}.device-controls{gap:7px}.control-label{display:none}.icon-button{padding:12px;width:46px}.main-controls{gap:7px;flex-wrap:wrap}.safety-row{flex-direction:column;gap:10px;padding:15px 0}.safety-row p{font-size:13px}.safety-actions{align-self:flex-end}footer{flex-direction:column;font-size:12px;gap:7px}.message{padding-top:6px;font-size:13px}}@media(max-width:380px){.app{padding:0 12px}.intro h1{font-size:23px}.controls{gap:12px}.stage{min-height:360px}.button{padding:11px 13px}.icon-button{padding:11px}.dialog-actions{flex-wrap:wrap}}
.diagnostics{background:white;border:1px solid var(--line);border-radius:12px;padding:16px;margin:4px 0 20px;font-size:14px}.diagnostics summary{cursor:pointer;font-weight:600}.diagnostics p{line-height:1.5;color:#616b7b}.diagnostics dl{display:flex;gap:28px;flex-wrap:wrap}.diagnostics dt{font-size:12px;color:#757d8c;margin-bottom:6px}.diagnostics dd{margin:0;font-weight:600}.diagnostics #relayResult{color:#3f4771;margin-bottom:0}
/* Accounts and private conversations */
input,textarea{font:inherit;min-width:0;border:1px solid #c8ced9;border-radius:9px;padding:11px 12px;background:white;color:#252c38}input:focus-visible,textarea:focus-visible{outline:3px solid #8a87f2;outline-offset:2px}dialog input{width:100%}.compact{min-height:38px;padding:9px 13px;font-size:13px}.account-actions{display:flex;align-items:center;gap:17px}.guest-banner{margin-top:22px;padding:18px 20px;background:#efeffe;border:1px solid #dddafa;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:24px}.guest-banner strong{font-size:15px}.guest-banner p{font-size:13px;line-height:1.5;color:#686881;max-width:640px;margin:5px 0 0}.guest-banner button{flex-shrink:0}.social-notice{font-size:14px;color:#526179;margin:0 0 14px}.social-notice:empty{display:none}.social-notice.error,.form-error{color:#a22c37}.peer-actions{display:flex;align-items:center;gap:15px;margin:5px 0 16px;font-size:14px}.social-panel{display:grid;grid-template-columns:minmax(235px,.8fr) minmax(0,1.8fr);border:1px solid var(--line);background:#fff;border-radius:16px;margin:10px 0 24px;overflow:hidden}.friends-column{padding:22px;border-right:1px solid var(--line);background:#fcfcfe}.panel-heading,.conversation-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.social-panel h2{font-size:19px;letter-spacing:-.3px;margin:0 0 7px}.social-panel label{display:block;font-size:12px;font-weight:600;margin:16px 0 8px}.input-row{display:flex;gap:7px;flex-wrap:wrap}.input-row input{width:100%;font-size:14px}.friend-list{margin-top:20px;max-height:430px;overflow:auto}.small,.friend-detail{font-size:12px;line-height:1.5;color:#777f8e}.friend-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:15px 0;border-top:1px solid #eceef3}.friend-row>div{min-width:0}.friend-name{display:block;max-width:100%;overflow-wrap:anywhere;border:0;background:none;padding:0 0 4px;font-size:14px;font-weight:650;color:#343455;text-align:left}.friend-name:disabled{opacity:1}.friend-buttons{display:flex;gap:7px;flex-wrap:wrap}.friend-buttons button{font-size:12px}.messages-column{padding:24px;min-width:0}.conversation-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7c8291}.conversation-empty p{max-width:320px;line-height:1.6;font-size:14px}.conversation-heading h2{overflow-wrap:anywhere}.message-privacy{font-size:11px;color:#868c98;line-height:1.5;margin:16px 0}.message-list{height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:10px 4px;overscroll-behavior:contain}.chat-message{align-self:flex-start;max-width:85%;background:#f0f1f6;border-radius:13px 13px 13px 3px;padding:11px 14px}.chat-message.mine{align-self:flex-end;background:#eeedff;border-radius:13px 13px 3px 13px}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;margin:0}.chat-message time{display:block;font-size:10px;color:#7e8394;margin-top:6px}.compose{display:flex;gap:9px;align-items:flex-end;border-top:1px solid var(--line);padding-top:15px}.compose textarea{resize:vertical;min-height:54px;max-height:180px;flex:1;width:100%;font-size:14px}.compose button{flex-shrink:0}.conversation-actions{display:flex;gap:18px;margin-top:15px}.conversation-actions button{font-size:12px}.auth-switch{margin-top:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.form-error:empty{display:none}
@media(max-width:800px){.account-actions{gap:10px}.account-actions .header-note{display:none}.social-panel{grid-template-columns:1fr}.friends-column{border-right:0;border-bottom:1px solid var(--line)}.friend-list{max-height:240px}.input-row{flex-wrap:nowrap}.input-row input{flex:1}.guest-banner{align-items:flex-start;gap:12px}.guest-banner button{max-width:140px}.messages-column,.friends-column{padding:18px}}
@media(max-width:500px){.header{height:auto;min-height:80px;flex-wrap:wrap;gap:14px;padding:18px 0}.brand{font-size:24px}.account-actions{margin-left:auto;gap:12px}.account-actions .compact{font-size:12px;padding:8px 10px}.guest-banner{flex-direction:column}.guest-banner button{max-width:none}.compose{flex-wrap:wrap}.compose textarea{flex-basis:100%}.compose button{margin-left:auto}.conversation-heading{align-items:flex-start}.conversation-heading h2{font-size:17px}.chat-message{max-width:95%}.input-row .button{padding:8px;font-size:12px}.input-row input{width:0}.message-list{height:300px}}