body{background-color:#2c2c2c;box-sizing:border-box;font-family:Arial,sans-serif;margin:0;padding:0}body,html{height:100%}.App,body,html{overflow:hidden}.App{display:flex;height:100vh;height:calc(var(--vh, 1vh)*100)}.main-content{flex:1 1;overflow:auto}.liva-link{background-color:#00000080;border-radius:5px;color:#fff;font-size:24px;font-weight:700;left:10px;padding:5px 10px;position:fixed;text-decoration:none;top:10px;transition:background-color .3s ease;z-index:1000}.liva-link:hover{background-color:#000000b3}.login-btn,.profile-icon-container{position:fixed;right:10px;top:10px;z-index:1001}.agent-selection-container{background-color:#191a1b;box-sizing:border-box;height:100%;padding:20px}.agent-selection-container,.agent-selection-content{align-items:center;display:flex;flex-direction:column;justify-content:center}.agent-selection-content{flex-grow:1;margin:0;max-width:1200px;text-align:center;width:100%}.agent-selection-content h1{color:#fff;font-size:2.5em;font-weight:700;margin-bottom:30px}.agents-grid{align-items:center;display:flex;flex-wrap:wrap;gap:30px;justify-content:center;width:100%}.agent-box{aspect-ratio:1/1;background-color:#fff;border-radius:20px;box-shadow:0 4px 15px #0003;box-sizing:border-box;cursor:pointer;max-width:380px;overflow:hidden;position:relative;transition:transform .3s,box-shadow .3s;width:calc(33.33333% - 20px)}.agent-box:hover{box-shadow:0 8px 20px #0000004d;transform:translateY(-10px)}.agent-image{border-radius:20px;display:block;height:100%;object-fit:cover;width:100%}.agent-overlay{background:#0009;bottom:0;box-sizing:border-box;color:#fff;padding:20px;position:absolute;text-align:center;width:100%}.agent-overlay h3{font-size:28px;margin:0}@media (max-width:768px){.agent-selection-container{background-color:#191a1b;justify-content:flex-start;padding:30px 10px 10px}.agent-selection-content h1{font-size:2em;margin-bottom:20px}.agent-selection-content{align-items:center;margin-left:0}.agents-grid{align-items:center;flex-direction:column}.agent-box{aspect-ratio:1/1;max-width:none;width:90%}.agent-image{height:100%}.agent-overlay h3{font-size:24px}}*,:after,:before{box-sizing:border-box}.content{display:flex;flex:1 1;height:100vh;height:calc(var(--vh, 1vh)*100);overflow:hidden;transition:none}.share-button{background-color:gray;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;padding:4px 6px;position:absolute;right:160px;top:10px;z-index:10}.video-canvas-panel{align-items:center;background-color:#000;display:flex;flex:1 1;flex-direction:row;gap:10px;justify-content:center;min-width:600px;position:relative;transition:none}.video-canvas-panel.full-screen{flex:1 1 100%;min-width:0}.placeholder-canvas,.video-canvas-wrapper{flex:1 1 50%;min-width:0}.placeholder-canvas,.video-canvas-container,.video-canvas-wrapper{align-items:center;display:flex;height:100%;justify-content:center;position:relative}.video-canvas-container{aspect-ratio:1/1;margin:0 auto;width:100%}.video-canvas{background-color:#000;height:100%;object-fit:contain;width:100%}.placeholder-canvas .placeholder-image{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.placeholder-canvas .placeholder-image img{border-radius:5px;height:100%;object-fit:contain;width:100%}.image-nav-buttons-container{bottom:10px;display:flex;gap:5px;position:absolute;right:10px;z-index:10}.image-nav-button{align-items:center;background-color:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;height:30px;justify-content:center;transition:background-color .2s;width:30px}.image-nav-button:hover{background-color:#000000b3}.image-nav-button:disabled{background-color:#0003;cursor:not-allowed}.toggle-chat-button,.toggle-layout-button{background-color:gray;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:4px 6px;position:absolute;top:10px;transition:background-color .3s,color .3s;z-index:10}.toggle-layout-button{right:105px}.toggle-chat-button{right:60px}.toggle-layout-button.layout-on{background-color:#fcfcfc}.toggle-layout-button.layout-off{background-color:#b1b1b1}.toggle-chat-button.chat-on{background-color:#fcfcfc}.toggle-chat-button.chat-off{background-color:#b1b1b1}.subtitles{bottom:70px;color:#fff;font-size:1.2rem;left:50%;max-width:90%;padding:5px 10px;position:absolute;text-align:center;text-shadow:2px 2px 4px #000000b3;transform:translateX(-50%);width:80%;z-index:9}.chat-panel{background-color:#f0f0f0;display:flex;flex:0 0 30%;flex-direction:column;flex-shrink:0;min-width:300px;opacity:1;transform:translateX(0);transition:transform .3s ease-in-out,opacity .3s ease-in-out}.chat-panel.hidden{opacity:0;pointer-events:none;transform:translateX(100%)}.chat-panel.hidden~.video-canvas-panel{flex:1 1 100%;min-width:0}.chat-box{background-color:#ebebeb;display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:10px}.message{border-radius:10px;margin:5px 0;max-width:60%;padding:10px;text-align:left}.message.sent{align-self:flex-end;background-color:#87a1f5}.message.received,.message.sent{box-shadow:2px 4px 8px #0000000d;color:#000}.message.received{align-self:flex-start;background-color:#fff}.chat-input{align-items:center;background-color:#fff;border-top:1px solid #ccc;display:flex;gap:10px;padding:10px}.chat-input button,.chat-input input{font-size:12px;height:30px}.chat-input input{border:1px solid #ccc;border-radius:5px;flex:1 1;padding:0 10px}.chat-input .mic-button{align-items:center;background-color:#f0f0f0;border:none;border-radius:5px;cursor:pointer;display:flex;font-size:12px;height:30px;justify-content:center;min-width:30px;padding:0;transition:background-color .2s,color .2s,transform .2s ease-in-out;width:30px}.chat-input .mic-button:active{transform:scale(1.5)}.chat-input .mic-button.recording{background-color:red;color:#fff}.chat-input .mic-button:hover{background-color:#ddd}.chat-input .mic-button.recording:hover{background-color:darkred}.chat-input button:not(.mic-button){align-items:center;background-color:#87a1f5;border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:0 10px;transition:background-color .2s}.center-input-panel{align-items:center;background-color:#f8000000;border-radius:30px;bottom:10px;display:flex;left:50%;max-width:90%;overflow:hidden;padding:8px 12px;position:absolute;transform:translateX(-50%);z-index:11}.center-mic-button{align-items:center;background-color:#87a1f5;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:40px;justify-content:center;margin-right:10px;transition:transform .2s ease-in-out,background-color .2s;width:40px}.center-mic-button:active{transform:scale(1.5)}.center-mic-button.recording{background-color:red}.center-chat-input-wrapper{flex:1 1;width:100%}.center-chat-input{border-radius:20px;font-size:16px;outline:none;padding:10px 40px 10px 15px;width:100%}.center-send-button{align-items:center;background-color:initial;border:none;cursor:pointer;display:flex;height:100%;justify-content:center;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:35px}@media (max-width:768px){.content{height:100vh;height:calc(var(--vh, 1vh)*100)}.content,.video-canvas-panel{flex-direction:column;transition:none}.video-canvas-panel{flex:0 0 60vh;gap:0;height:60vh;min-width:0;overflow:hidden}.placeholder-canvas,.video-canvas-wrapper{height:100%;overflow:hidden;width:100%}.placeholder-canvas .placeholder-image img,.video-canvas{max-height:100%;max-width:100%;object-fit:contain}.chat-panel{background-color:#f0f0f0;display:flex;flex-direction:column;height:100%;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transform:translateY(100%);transition:transform .3s ease-in-out,opacity .3s ease-in-out;width:100%;z-index:100}.chat-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.chat-box{flex:1 1;overflow-y:auto;padding:10px}.mobile-back-button{background:#0000;border:none;cursor:pointer;position:absolute;right:10px;top:10px;z-index:101}.mobile-back-button-text{background-color:#0009;border-radius:8px;box-shadow:0 2px 6px #0006;color:#fff;display:inline-block;font-size:18px;font-weight:700;padding:5px 10px;text-align:center}.center-input-panel.mobile{background-color:#fff;border-radius:0;margin-top:10px;padding:18px 12px;position:static;transform:none;width:100%}}.share-popup-overlay{align-items:center;background-color:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.share-popup{background:#fff;border-radius:8px;max-width:400px;padding:20px;position:relative;width:90%}.close-button{background:#0000;font-size:18px;right:10px;top:10px}.first-time-help-tooltip{background-color:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 6px #0003;padding:10px;position:absolute;right:50px;top:50px;width:250px;z-index:11}.tooltip-close-button{background:#0000;border:none;color:#000;cursor:pointer;font-size:30px;position:absolute;right:4px;top:1px}.tooltip-image{height:auto;margin-bottom:8px;width:100%}.tooltip-text{color:#000;font-size:20px}.user-profile{display:inline-block;position:relative}.profile-icon{background-color:#007bff;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:18px;font-weight:700;height:40px;width:40px}.profile-dropdown{background-color:#fff;border-radius:4px;box-shadow:0 2px 8px #00000026;min-width:150px;position:absolute;right:0;top:calc(100% + 5px);z-index:1000}.profile-dropdown ul{list-style:none;margin:0;padding:0}.profile-dropdown li{border-bottom:1px solid #eee}.profile-dropdown li:last-child{border-bottom:none}.profile-dropdown button{background:none;border:none;cursor:pointer;padding:10px 15px;text-align:left;width:100%}.profile-dropdown button:hover{background-color:#f0f0f0}.loading-bar-container{height:10px;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:1000}.loading-bar{background-color:#ccc;height:100%;overflow:hidden;position:relative;width:100%}.loading-bar-progress{background-color:#0f0;height:100%;transition:width .3s ease-in-out;width:0}.login-popup-overlay{align-items:center;background-color:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1002}.login-popup{background-color:#fff;border-radius:8px;box-shadow:0 4px 10px #0000004d;max-width:400px;padding:30px;position:relative;width:90%}.close-button{background:none;border:none;cursor:pointer;font-size:24px;position:absolute;right:12px;top:8px}h2{margin-top:0}.error,h2{text-align:center}.error{color:red}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px}.form-group input{box-sizing:border-box;padding:8px;width:100%}.guest-button,.submit-button,.toggle-button{border:none;border-radius:4px;cursor:pointer;margin-top:10px;padding:10px;width:100%}.submit-button{background-color:#007bff;color:#fff}.toggle-button{background-color:#6c757d;color:#fff}.guest-button{background-color:#28a745;color:#fff}.submit-button:hover{background-color:#0056b3}.toggle-button:hover{background-color:#5a6268}.guest-button:hover{background-color:#218838}.login-btn{background-color:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:8px 12px}.login-btn:hover{background-color:#0056b3}.settings-container{background-color:#fff;display:flex;flex-direction:column;min-height:100vh}.settings-header{align-items:center;background-color:#f7f7f7;border-bottom:1px solid #ddd;display:flex;justify-content:center;padding:1rem 2rem}.settings-header h1{font-size:1.5rem;margin:0}.settings-body{display:flex;flex:1 1;overflow:hidden}.settings-sidebar{border-right:1px solid #ddd;padding:1rem;width:200px}.settings-sidebar ul{list-style:none;margin:0;padding:0}.settings-sidebar li{margin-bottom:1rem}.sidebar-item{background:none;border:none;cursor:pointer;font-size:1rem}.sidebar-item.active{font-weight:700}.settings-content{flex:1 1;overflow-y:auto;padding:2rem;position:relative}@media (max-width:768px){.settings-content,.settings-sidebar{padding:1rem;width:100%}.mobile-header{align-items:center;display:flex;margin-bottom:1rem}.mobile-header h2{flex:1 1;margin:0;text-align:center}.back-button{background:none;border:none;cursor:pointer;font-size:1rem}.settings-sidebar.mobile{border-right:none}}.general-settings{margin:0;max-width:600px;padding-bottom:80px;text-align:left}.settings-form{margin-bottom:2rem}.checkbox-item{margin-bottom:1rem}.api-keys-form{margin:0 auto;max-width:600px;padding-bottom:80px}.api-key-item{display:flex;flex-direction:column;margin-bottom:1.5rem}.api-key-item label{font-weight:500;margin-bottom:.5rem}.api-key-item input{border:1px solid #ccc;border-radius:4px;font-size:1rem;padding:.5rem}.save-button{background-color:#007bff;border:none;border-radius:4px;bottom:20px;color:#fff;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;position:fixed;right:20px}.task-manager,.video-manager{margin:0 auto;max-width:600px}