@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*{font-family:Montserrat,sans-serif;box-sizing:border-box}:root{--main-color: #ab9af1;--secondary-color: #d46a53;--dark-purple: #3e375b;--light-text: #fff;--spacing: 20px}body{margin:0;position:relative;overflow:hidden;display:flex}#viewport{width:60%;height:100vh;transition:width .3s ease}#progress{display:none;position:fixed;right:50%;top:40%;background:#7259fb;padding:20px;color:#fff;font-size:32px;border-radius:12px}.header-container{position:relative;width:40%;height:100vh;padding:20px;background-color:#f5f5f5;overflow-y:auto;transition:transform .3s ease}.message-column{background-color:transparent;color:var(--light-text);padding:16px;border-radius:12px;margin-bottom:20px;display:flex;overflow:hidden;overflow-y:auto;flex-direction:column;gap:16px}.message-box{max-width:80%;background-color:var(--main-color);color:var(--light-text);font-size:16px;line-height:1.4;padding:16px;border-radius:12px;margin-bottom:16px;align-self:flex-end;box-shadow:0 2px 4px #0000001a}.message-default{max-width:80%;background-color:#62607c;color:#ddd;font-size:14px;line-height:1.6;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--main-color) rgba(0,0,0,.1);max-height:400px;padding:12px 16px;border-radius:12px;align-self:flex-start;box-shadow:0 2px 4px #0000001a}::-webkit-scrollbar{width:8px;margin-left:10px}::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--main-color);border-radius:4px;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:var(--dark-purple)}.action-panel{position:fixed;bottom:20px;right:20px;padding:16px;display:flex;flex-direction:row;gap:16px;z-index:30}.btn-event{width:60px;height:60px;background-color:var(--dark-purple);border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.btn-event.disabled{cursor:not-allowed}.btn-event img{width:24px;height:24px;transition:opacity .2s ease}.btn-event img[src*="speaking.svg"]{filter:invert(1)}#backdrop{position:fixed;background-color:#00000080;width:100%;height:100%;top:0;left:0;z-index:100;display:none;backdrop-filter:blur(4px)}#settings-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;padding:32px;border-radius:12px;box-shadow:0 4px 20px #0003;width:400px;z-index:101}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h1{font-size:24px;font-weight:600}.field{margin-bottom:24px}.field label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#333}select,input[type=range]{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px}#mic.active img{filter:drop-shadow(0 0 5px #0f0);animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.prim-btn{font-size:14px;padding:8px 16px}#setting{position:fixed;top:20px;right:20px;width:250px;background:#fffc;backdrop-filter:blur(6px);border:1px solid #ccc;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:12px;font-family:Arial,sans-serif;z-index:999}.setting-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#333;margin-bottom:8px}#setting-toggle{width:18px;height:18px;cursor:pointer}.hidden{display:none}#setting-content label{display:block;font-size:13px;color:#444;margin-bottom:4px}#setting-content input[type=text]{width:100%;padding:6px;border:1px solid #ccc;border-radius:6px;margin-bottom:8px;box-sizing:border-box;font-size:13px}#save-llm-url{width:100%;padding:6px 0;background-color:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px}#save-llm-url:hover{background-color:#3730a3}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease;font-family:Inter,system-ui,sans-serif}.modal.active{opacity:1;pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background-color:#00000073;backdrop-filter:blur(3px)}.modal-content{position:relative;z-index:10;background-color:#fff;border-radius:12px;width:420px;max-width:90%;box-shadow:0 8px 30px #0000004d;overflow:hidden;transform:scale(.95);transition:transform .25s ease}.modal.active .modal-content{transform:scale(1)}.modal-header{padding:16px 20px;background:#f5f6fa;border-bottom:1px solid #e1e5ee}.modal-header h2{margin:0;font-size:1.1rem;font-weight:600;color:#222}.icon-btn{position:absolute;top:10px;right:12px;background:transparent;border:none;font-size:1.2rem;color:#444;cursor:pointer}.icon-btn:hover{color:#000}.modal-body{padding:20px;display:flex;flex-direction:column;gap:12px}.field-label{font-size:.9rem;font-weight:500;margin-bottom:4px}.select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:.9rem;transition:border-color .2s}.select:focus{border-color:#0078d4;outline:none}.help-text{font-size:.75rem;color:#666}.modal-footer{padding:16px 20px;background:#fafafa;border-top:1px solid #e1e5ee;display:flex;justify-content:flex-end}.btn{cursor:pointer;padding:8px 14px;font-size:.9rem;border-radius:6px;border:none;transition:background .2s}#toggle-header{background-color:var(--dark-purple);transition:transform .3s ease}#toggle-header svg{width:24px;height:24px;stroke:#fff}.btn-primary{background:#0078d4;color:#fff}.btn-primary:hover{background:#005fa3}#confirm-language-btn{transition:transform .14s ease,background-color .2s ease,box-shadow .2s ease;will-change:transform}#confirm-language-btn.green{transform:scale(.98);background:#2ecc71!important;color:#fff!important;box-shadow:0 8px 20px #2ecc712e}#llm-select{margin-right:8px;color:#000}@keyframes neon-pulse{0%{filter:drop-shadow(0 0 3px #00eaff) drop-shadow(0 0 6px #00bfff) drop-shadow(0 0 9px #009dff) drop-shadow(0 0 12px #00e1ff) invert(1)}50%{filter:drop-shadow(0 0 4px #7df9ff) drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 12px #00ccff) drop-shadow(0 0 18px #00ffff) invert(1)}to{filter:drop-shadow(0 0 3px #00eaff) drop-shadow(0 0 6px #00bfff) drop-shadow(0 0 9px #009dff) drop-shadow(0 0 12px #00e1ff) invert(1)}}@keyframes zoom-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.speaking-animation{animation:neon-pulse 2s infinite ease-in-out,zoom-pulse 2s infinite ease-in-out}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}