.card{border:2px solid #ccc;border-radius:10px;padding:1rem;background-color:#fff;box-shadow:0 4px 10px #0000001a;cursor:pointer;width:250px;transition:all .3s ease}.instructions-section{margin:20px}#instructionsBox{margin-top:10px;width:100%;max-width:800px;padding:10px;font-size:14px;background-color:#f9f9f9;border:1px solid #ccc;resize:vertical}button{padding:.5rem 1rem;width:120px;border-radius:4px;font-family:monospace;border:none;background-color:#000;color:#fff;cursor:pointer;transition:background-color .2s ease}.id-set{width:55px;border-radius:4px;font-family:monospace;border:none;background-color:#000;color:#fff;cursor:pointer;transition:background-color .2s ease}button:hover:not(:disabled){color:#000;background-color:#60d85c}button:disabled{background-color:#999;cursor:not-allowed}.local-video,.remote-video{width:500px;height:300px;background-color:#000;border-radius:5px}.call-card-container{position:fixed;bottom:1rem;right:1rem;font-family:monospace}.card-footer{display:flex;justify-content:space-around;padding-top:1rem}.card-body{flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}.hidden{display:none}.card.idle{border-color:#ccc}.card.calling{border-color:orange}.card.in-call{border-color:green}.card.ended{border-color:red}.switch{transform:scale(.75);font-size:17px;position:relative;display:inline-block;width:62px;height:35px}.switch input{opacity:1;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#fff;transition:.4s;border-radius:30px;border:1px solid #ccc}.slider:before{position:absolute;content:"";height:1.9em;width:1.9em;border-radius:16px;left:1.2px;top:0;bottom:0;background-color:#fff;box-shadow:0 2px 5px #999;transition:.4s}input:checked+.slider{background-color:#5fdd54;border:1px solid transparent}input:checked+.slider:before{transform:translate(1.5em)}.header-bar.header-online{background-color:#e6ffe6}.header-bar.header-offline{background-color:#ffe6e6}.header-bar{display:flex;justify-content:center;align-items:center;padding:6px 10px;background-color:#f8f8f8;border-bottom:1px solid #ccc;font-family:monospace;transition:background-color .3s ease}.visitor-card{display:flex;align-items:center;font-size:14px;margin-right:20px}.visitor-label,.visitor-number,.eye{font-family:monospace;font-size:14px;margin-right:4px}.online-card{display:flex;align-items:center;font-size:14px}.online-label{font-family:monospace;font-size:14px;margin-left:6px}.agent-details{margin-bottom:20px;font-family:monospace}.agent-card{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ccc;border-radius:6px;background-color:#f5f5f5}.agent-label{font-weight:700;color:#555}.agent-name{color:#333}.status-card{display:inline-block;padding:8px 16px;border-radius:8px;font-family:monospace;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:16px;transition:background-color .3s ease}.status-card.ready{background-color:#2ecc71}.status-card.incoming{background-color:#f39c12}.status-card.on-call{background-color:#2ecc71}.status-card.ended{background-color:#e74c3c}.main-content{display:flex;flex-direction:column;align-items:center;height:100vh;font-family:monospace}