*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg-warm: #FAEFE3;--bg-lavender: #E8DFF1;--bg-peach: #F4E0D9;--surface: #FFFCF7;--surface-soft: #FBF6EE;--primary: #6B5BB5;--primary-deep: #5A4BA0;--text: #2A2854;--muted: #6D5DA8;--blue: #C8D9E8;--sage: #C7DCC4;--pink: #F6C6CE;--gold: #E8B547;--danger: #E97A86;--shadow: rgba(122, 106, 156, .18)}body{font-family:"Baloo 2",Fredoka,Bubblegum Sans,cursive,sans-serif;overflow:hidden;background:linear-gradient(180deg,var(--bg-lavender) 0%,var(--bg-peach) 48%,var(--bg-warm) 100%);touch-action:pan-y;-webkit-user-select:none;user-select:none}header{display:none}.statusToast{position:absolute;top:14px;right:14px;z-index:100;display:flex;align-items:center;gap:10px;background:#fffcf7eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid rgba(217,205,232,.65);border-radius:40px;padding:8px 16px 8px 8px;box-shadow:0 8px 24px var(--shadow);transform:translate(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;opacity:1}.statusToast--hidden{transform:translate(calc(100% + 20px));opacity:0;pointer-events:none}.statusToast--dismissing{transform:translate(calc(100% + 20px));opacity:0}.statusToast__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(107,91,181,.35);flex-shrink:0}.statusToast__text{display:flex;align-items:baseline;gap:2px;font-family:"Baloo 2",cursive;font-size:.95rem;font-weight:700;color:var(--text);white-space:nowrap}.statusToast__dots span{display:inline-block;color:var(--primary);animation:dotBounce 1.2s ease-in-out infinite}.statusToast__dots span:nth-child(2){animation-delay:.2s}.statusToast__dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}#container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg-lavender) 0%,var(--bg-peach) 48%,var(--bg-warm) 100%)}#hidden{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;background:linear-gradient(180deg,var(--bg-lavender) 0%,var(--bg-warm) 100%)}#hidden h2{font-size:1.8rem;color:var(--primary);margin-bottom:1rem;font-weight:800}#hidden h3{font-size:1.3rem;color:var(--muted);margin-bottom:2rem;font-weight:600}#video-wrapper{position:relative;flex:1;background:linear-gradient(135deg,var(--surface) 0%,var(--bg-lavender) 100%);overflow:hidden;border-radius:24px;margin:.5rem 1rem 1rem;box-shadow:0 10px 30px var(--shadow);border:2px solid rgba(217,205,232,.75)}#streamVideoElement,#idleVideoElement{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:20px}#buttons{display:none}.inputsDiv{padding:0 1rem 1rem}.langRow{display:flex;justify-content:center;margin-bottom:.5rem}.languageToggle{display:flex;gap:0;background:#fffcf7bf;border:1.5px solid rgba(217,205,232,.72);border-radius:20px;padding:3px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.langOption{font-family:inherit;font-size:.8rem;font-weight:700;padding:.3rem .9rem;border-radius:16px;color:var(--muted);transition:all .2s ease;-webkit-user-select:none;user-select:none}.langOption.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6b5bb559}.mainInput{display:flex;gap:.75rem;align-items:flex-end;background:#fffcf7d1;padding:.85rem;border-radius:24px;box-shadow:0 6px 20px var(--shadow);border:1.5px solid rgba(217,205,232,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#textArea{flex:1;border:none;outline:none;font-size:1.05rem;font-family:inherit;resize:none;padding:.6rem;max-height:100px;background:transparent;color:var(--text);font-weight:600}#textArea::placeholder{color:var(--muted);opacity:.5;font-weight:500}.roundButton{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,252,247,.86);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;position:relative}#speechButton{background:linear-gradient(135deg,var(--sage) 0%,#A9CDA6 100%);box-shadow:0 4px 14px #a7caa473;color:var(--text)}#speechButton:active{transform:scale(.88);box-shadow:0 2px 8px #a7caa459}#actionButton{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);box-shadow:0 4px 14px #6b5bb55c;color:#fff}#actionButton:active{transform:scale(.88);box-shadow:0 2px 8px #6b5bb547}#interruptButton{background:linear-gradient(135deg,#e05c5c,#b83c3c);box-shadow:0 4px 12px #e05c5c66}#interruptButton:active{transform:scale(.9);box-shadow:0 2px 8px #e05c5c4d}.roundButton[disabled]{opacity:.4;cursor:not-allowed;transform:none!important}#answers{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 1rem;max-height:200px;overflow-y:auto}.userMessage{align-self:flex-end;width:fit-content;max-width:78%;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff;padding:.6rem .9rem;border-radius:18px 18px 4px;font-size:.95rem;line-height:1.45;box-shadow:0 3px 10px #6b5bb53d;animation:slideInRight .3s ease-out;word-break:break-word;border:1px solid rgba(255,252,247,.38)}.agentMessage{align-self:flex-start;width:fit-content;max-width:78%;background:#fffcf7e0;color:var(--text);padding:.6rem .9rem;border-radius:18px 18px 18px 4px;font-size:.95rem;line-height:1.45;font-weight:500;box-shadow:0 3px 10px var(--shadow);animation:slideInLeft .3s ease-out;word-break:break-word;border:1px solid rgba(217,205,232,.72);position:relative;margin-top:14px}.agentMessage:before{content:"";position:absolute;top:-14px;left:6px;width:26px;height:26px;background-image:url(/fares_head.png);background-size:contain;background-repeat:no-repeat;background-position:center}@keyframes slideInRight{0%{opacity:0;transform:translate(20px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}.button{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff;border:none;padding:.9rem 2rem;border-radius:20px;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #6b5bb552;transition:all .25s ease}.button:active{transform:scale(.95);box-shadow:0 2px 8px #6b5bb53d}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#d9cde847;border-radius:10px}::-webkit-scrollbar-thumb{background:#6b5bb559;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#6b5bb585}@media (max-height: 600px){#video-wrapper{margin:.3rem .5rem .5rem}#answers{max-height:120px;margin:0 .5rem .5rem}}@media (min-height: 800px){#answers{max-height:300px}}.screen{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(180deg,var(--bg-lavender) 0%,var(--bg-warm) 100%)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.thankYouContent{text-align:center;animation:fadeInScale .5s cubic-bezier(.34,1.56,.64,1)}.thankYouIcon{font-size:7rem;margin-bottom:1rem}.thankYouTitle{font-size:2.2rem;font-weight:900;color:var(--primary);margin-bottom:1rem;text-shadow:0 2px 20px rgba(107,91,181,.24)}.thankYouMessage{font-size:1.3rem;color:var(--muted);font-weight:600;margin-bottom:2rem}.primaryButton{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff;border:none;padding:1rem 3rem;border-radius:24px;font-size:1.2rem;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px #6b5bb557;transition:all .25s ease}.primaryButton:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 32px #6b5bb56b}.primaryButton:active{transform:translateY(-1px) scale(1)}#speechButton.recording{background:linear-gradient(135deg,#e05c5c,#b83c3c)!important;animation:recordingPulse 1s ease-in-out infinite}@keyframes recordingPulse{0%,to{transform:scale(1);box-shadow:0 6px 20px #e05c5c99}50%{transform:scale(1.06);box-shadow:0 10px 30px #e05c5ccc}}.recordingTimer{font-size:1.4rem;font-weight:800;color:#e05c5c;margin-top:1rem;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.recordingStatus{font-size:1.1rem;font-weight:700;color:var(--muted);margin-bottom:1rem}
