*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#e8e8e8;background:#1b1b1b;-webkit-font-smoothing:antialiased}input,button{font:inherit;color:inherit;background:transparent;border:none}button{cursor:pointer}#app{height:100%;width:100%;display:flex;flex-direction:column}.lobby{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:1.5rem;gap:1rem;max-width:28rem;margin:0 auto;width:100%}.lobby h1{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;text-align:center}.lobby label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#a8a8a8}.lobby input{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:.5rem;padding:.75rem .875rem;font-size:1rem;color:#e8e8e8}.lobby input:focus{outline:2px solid #4a90e2;outline-offset:-1px}.lobby button[type=submit]{margin-top:.5rem;padding:.875rem 1rem;font-size:1rem;font-weight:600;background:#4a90e2;color:#fff;border-radius:.5rem}.lobby button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.lobby .error{color:#ff6b6b;font-size:.85rem;text-align:center;min-height:1.2em}.channel{flex:1;display:flex;flex-direction:column;height:100%;width:100%}.channel-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;border-bottom:1px solid #2a2a2a}.channel-header .channel-name{font-size:1rem;font-weight:600}.channel-header .conn-state{font-size:.75rem;color:#a8a8a8}.channel-header .disconnect{font-size:.85rem;color:#a8a8a8;padding:.25rem .5rem}.channel-header .disconnect:hover{color:#ff6b6b}.talker-list{flex:0 0 auto;padding:1rem;min-height:4rem;display:flex;flex-direction:column;gap:.5rem}.talker-list .empty{color:#6a6a6a;font-size:.85rem;font-style:italic}.talker-list .talker{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#232323;border-radius:.5rem;font-size:.95rem}.talker-list .talker .dot{width:.625rem;height:.625rem;border-radius:50%;background:#5cb85c;box-shadow:0 0 #5cb85cb3;animation:pulse 1.5s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 #5cb85c80}to{box-shadow:0 0 0 8px #5cb85c00}}.ptt-area{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem}.ptt-button{width:100%;max-width:22rem;aspect-ratio:1;border-radius:50%;background:#3a3a3a;color:#e8e8e8;font-size:1.25rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background-color 80ms ease-out,transform 80ms ease-out;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.ptt-button[data-state=pressing]{background:#5a5a5a;transform:scale(.97)}.ptt-button[data-state=granted]{background:#2e8b57;transform:scale(.97)}.ptt-button[data-state=denied]{background:#b03a2e}.ptt-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem}.ptt-label{pointer-events:none}.ptt-meter{width:60%;height:.375rem;background:#00000059;border-radius:999px;overflow:hidden;pointer-events:none}.ptt-meter-fill{display:block;height:100%;width:0%;background:#d8d8d8;transition:width 60ms linear}.ptt-button[data-state=granted] .ptt-meter-fill{background:#b8eccd}