*{margin:0;padding:0;box-sizing:border-box}:root{--gold: #c5a355;--gold-light: #d4b96a;--dark: #1a1a2e;--darker: #16213e;--darkest: #0f0f23;--text: #e8e8e8;--text-muted: #a0a0a0;--card-bg: #1e1e36;--card-border: #2a2a4a}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--darkest);color:var(--text);min-height:100vh}#root{min-height:100vh}.hero{background:linear-gradient(135deg,var(--darker) 0%,var(--darkest) 100%);padding:4rem 2rem;text-align:center;border-bottom:2px solid var(--gold)}.hero h1{font-size:2.5rem;color:var(--gold);margin-bottom:.25rem;letter-spacing:2px}.hero-subtitle{font-size:1.2rem;color:var(--gold-light);margin-bottom:1rem;font-weight:300}.hero-desc{color:var(--text-muted);max-width:500px;margin:0 auto;font-size:.95rem;line-height:1.6}.container{max-width:900px;margin:0 auto;padding:2rem 1.5rem}.section{margin-bottom:2.5rem}.section h2{color:var(--gold);font-size:1.3rem;margin-bottom:1rem;letter-spacing:1px}.join-section{background:var(--card-bg);border:1px solid var(--gold);border-radius:12px;padding:2rem;text-align:center;margin-bottom:2.5rem}.join-section h2{color:var(--gold);margin-bottom:.5rem}.join-section p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.9rem}.join-form{display:flex;flex-direction:column;gap:.75rem;max-width:400px;margin:0 auto}.live-avatar-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text);font-size:.9rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.live-avatar-toggle input{width:1.1rem;height:1.1rem;accent-color:var(--gold)}.name-input{width:100%;box-sizing:border-box;padding:.75rem 1rem;border:1px solid var(--card-border);border-radius:8px;background:var(--darker);color:var(--text);font-size:1rem;outline:none}.name-input:focus{border-color:var(--gold)}.start-btn{padding:.75rem 1.5rem;background:var(--gold);color:var(--darkest);border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;white-space:nowrap}.start-btn:hover{background:var(--gold-light)}.start-btn:disabled{opacity:.6;cursor:not-allowed}.error-msg{color:#ff6b6b;margin-top:.75rem;font-size:.85rem}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem}.category-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:1rem;text-align:center}.category-icon{font-size:1.75rem;display:block;margin-bottom:.5rem}.category-card h3{font-size:.8rem;margin-bottom:.25rem}.category-card p{color:var(--text-muted);font-size:.75rem}.shops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.shop-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:1rem;display:flex;align-items:center;gap:.75rem}.shop-icon{font-size:1.5rem}.shop-card h3{font-size:.9rem;margin-bottom:.15rem}.shop-meta{color:var(--text-muted);font-size:.75rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.info-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:1rem}.info-card h3{color:var(--gold);font-size:.85rem;margin-bottom:.35rem}.info-card p{color:var(--text-muted);font-size:.8rem;line-height:1.5}.chat-page{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;background:var(--darkest)}.chat-page-inner{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.chat-page-inner>*{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;background:linear-gradient(180deg,#16213efa,#0f0f23f2);border-bottom:1px solid rgba(197,163,85,.25);flex-shrink:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.chat-header h1{font-size:1rem;font-weight:500;color:var(--gold);letter-spacing:2px;text-transform:uppercase}.user-name{font-size:.78rem;font-weight:400;color:#c5a35599;letter-spacing:1px;text-transform:uppercase}.chat-main{flex:1;min-height:0;display:flex;overflow:hidden}.avatar-section{flex:1;min-width:0;display:flex;background:#0d0d14;position:relative}.avatar-section:after{content:"";position:absolute;right:0;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent,rgba(197,163,85,.2),transparent);pointer-events:none}.avatar-section.voice-only-placeholder{align-items:center;justify-content:center;color:#c5a35559;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}.avatar-video-container{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}.avatar-video-container .avatar-video{width:100%;height:100%}.avatar-video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c5a3554d;font-size:.8rem;letter-spacing:1px}.transcription-panel{flex:1;min-width:300px;max-width:480px;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;background:#0f0f2380}.transcription-panel::-webkit-scrollbar{width:4px}.transcription-panel::-webkit-scrollbar-track{background:transparent}.transcription-panel::-webkit-scrollbar-thumb{background:#c5a35533;border-radius:4px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:120px;color:#c5a35566;font-size:.82rem;letter-spacing:1px;text-transform:uppercase}.message{max-width:85%;padding:.7rem .9rem;border-radius:14px;animation:msg-in .25s ease-out}@keyframes msg-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.user-msg{align-self:flex-end;background:#c5a3551f;border:1px solid rgba(197,163,85,.2);border-radius:14px 14px 4px}.ai-msg{align-self:flex-start;background:#1e1e36cc;border:1px solid rgba(197,163,85,.15);border-radius:14px 14px 14px 4px}.ai-msg .message-label{color:var(--gold)}.interim{opacity:.5}.message-label{font-size:.65rem;font-weight:600;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.8px;color:#ffffff59}.message-text{font-size:.88rem;line-height:1.55;color:var(--text)}.system-msg{align-self:center;background:#c5a3550f;border:1px solid rgba(197,163,85,.15);border-radius:20px;max-width:90%;padding:.4rem .85rem;animation:msg-in .3s ease-out}.system-event-inner{display:flex;align-items:center;gap:.4rem;justify-content:center}.system-event-icon{flex-shrink:0;color:var(--gold);opacity:.6}.system-event-text{font-size:.75rem;color:#c5a355a6;text-align:center;line-height:1.4}.voice-controls{flex-shrink:0;padding:.75rem 1.25rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom));background:linear-gradient(180deg,#0f0f23f2,#0a0a19fa);border-top:1px solid rgba(197,163,85,.12);display:flex;align-items:center;justify-content:space-between;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.connection-status{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:#fff6;letter-spacing:.5px;text-transform:uppercase}.status-dot{width:7px;height:7px;border-radius:50%;background:#555}.status-dot.connected{background:#4ade80;box-shadow:0 0 8px #4ade8066}.status-dot.connecting{background:var(--gold);animation:status-pulse 1.2s ease-in-out infinite}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.3}}.status-dot.disconnected{background:#ef4444}.control-buttons{display:flex;gap:.6rem;align-items:center}.ctrl-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(197,163,85,.3);background:#c5a3550f;color:var(--gold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease,opacity .15s ease}.ctrl-btn:hover:not(:disabled){background:#c5a35526;border-color:#c5a35580}.ctrl-btn:disabled{opacity:.25;cursor:not-allowed}.ctrl-btn.mic-btn.active{background:var(--gold);border-color:var(--gold);color:var(--darkest);box-shadow:0 0 16px #c5a3554d}.ctrl-btn.mic-btn.muted{border-color:#ffffff26;color:#ffffff59;background:transparent}.ctrl-btn.end-btn{width:auto;border-radius:22px;padding:0 1rem;gap:.4rem;background:#dc26261f;border-color:#dc262659;color:#ef4444;font-size:.75rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.ctrl-btn.end-btn:hover:not(:disabled){background:#dc262640;border-color:#dc262699}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem}.camera-modal{background:var(--card-bg);border:1px solid rgba(197,163,85,.2);border-radius:16px;padding:1.25rem;max-width:440px;width:100%;max-height:90dvh;display:flex;flex-direction:column;align-items:center;gap:.75rem}.camera-title{color:#c5a355b3;font-size:.85rem;font-weight:400;letter-spacing:.5px;margin:0;text-align:center}.camera-video{width:100%;border-radius:12px;background:#000;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover}.camera-error{color:#ef4444;font-size:.82rem;margin:0}.camera-actions{display:flex;gap:.75rem;width:100%}.camera-cancel,.camera-capture{flex:1;padding:.65rem 1rem;border-radius:10px;font-size:.85rem;font-weight:500;cursor:pointer;letter-spacing:.5px}.camera-cancel{background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.15)}.camera-cancel:hover{border-color:#ffffff4d}.camera-capture{background:var(--gold);color:var(--darkest);border:none}.camera-capture:hover:not(:disabled){background:var(--gold-light)}.camera-capture:disabled{opacity:.5;cursor:not-allowed}.session-ended-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:session-ended-fadeIn .2s ease}@keyframes session-ended-fadeIn{0%{opacity:0}to{opacity:1}}.session-ended-backdrop{position:absolute;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.session-ended-modal{position:relative;width:100%;max-width:400px;background:var(--card-bg);border:1px solid var(--gold);border-radius:16px;padding:2rem;text-align:center;box-shadow:0 24px 48px #00000080;animation:session-ended-scaleIn .25s ease}@keyframes session-ended-scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.session-ended-icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 1.25rem;background:#c5a35526;border-radius:50%;color:var(--gold)}.session-ended-title{font-size:1.35rem;color:var(--gold);margin-bottom:.5rem;letter-spacing:.5px}.session-ended-desc{color:var(--text-muted);font-size:.95rem;line-height:1.5;margin-bottom:1.75rem}.session-ended-actions{display:flex;flex-direction:column;gap:.75rem}.session-ended-btn{padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s ease,opacity .15s ease}.session-ended-btn:disabled{cursor:not-allowed;opacity:.7}.session-ended-btn-primary{background:var(--gold);color:var(--darkest);border:none}.session-ended-btn-primary:hover:not(:disabled){background:var(--gold-light)}.session-ended-btn-secondary{background:transparent;color:var(--text-muted);border:1px solid var(--card-border)}.session-ended-btn-secondary:hover:not(:disabled){color:var(--text);border-color:var(--text-muted)}.connecting-loader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;overflow:hidden}.connecting-loader-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(197,163,85,.08) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 50% 100%,rgba(197,163,85,.05) 0%,transparent 60%),var(--darkest)}.connecting-loader-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.5rem;animation:connecting-fadeInUp 1s ease-out both}.connecting-svg-wrap{position:relative;width:160px;height:160px}.connecting-star{width:100%;height:100%;animation:connecting-breathe 4s ease-in-out infinite}.connecting-star-shape{animation:connecting-rotateStar 30s linear infinite;transform-origin:100px 100px}.connecting-star-inner{animation:connecting-rotateStar 20s linear infinite reverse;transform-origin:100px 100px}.connecting-diamond{animation:connecting-diamondPulse 3s ease-in-out infinite;transform-origin:100px 90px}.connecting-ring{animation:connecting-ringPulse 4s ease-in-out infinite}.connecting-ring-outer{animation-delay:0s}.connecting-ring-mid{animation-delay:1s}.connecting-dot{animation:connecting-dotGlow 3s ease-in-out infinite}.connecting-dot:nth-child(7){animation-delay:0s}.connecting-dot:nth-child(8){animation-delay:.5s}.connecting-dot:nth-child(9){animation-delay:1s}.connecting-dot:nth-child(10){animation-delay:1.5s}.connecting-dot:nth-child(11){animation-delay:2s}.connecting-dot:nth-child(12){animation-delay:2.5s}.connecting-orbit{position:absolute;inset:-10px;animation:connecting-orbit 6s linear infinite}.connecting-particle{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#f5e6b8,#c5a355);box-shadow:0 0 12px 3px #c5a35580;position:absolute;top:0;left:50%;transform:translate(-50%)}.connecting-text-stack{display:flex;flex-direction:column;align-items:center;gap:.6rem}.connecting-title-en{font-size:1.75rem;font-weight:300;letter-spacing:6px;text-transform:uppercase;color:transparent;background:linear-gradient(90deg,#a07c3a,#f5e6b8 40%,#c5a355,#f5e6b8,#a07c3a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:connecting-fadeInUp 1s ease-out .3s both,connecting-shimmer 4s linear infinite;font-family:Inter,system-ui,-apple-system,sans-serif;transition:opacity .8s ease,transform .8s ease,filter .8s ease}.connecting-title-ar{font-size:1.6rem;font-weight:300;letter-spacing:2px;color:transparent;background:linear-gradient(90deg,#a07c3a,#f5e6b8 40%,#c5a355,#f5e6b8,#a07c3a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:connecting-fadeInUp 1s ease-out .7s both,connecting-shimmer 4s linear .5s infinite;direction:rtl;font-family:system-ui,-apple-system,sans-serif;transition:opacity .8s ease,transform .8s ease,filter .8s ease}.connecting-dimmed{opacity:.35!important;transform:translateY(-6px) scale(.95);filter:blur(1px)}.connecting-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,#c5a355,transparent);animation:connecting-fadeInUp 1s ease-out 1s both}.connecting-status-area{position:relative;min-height:1.4rem;display:flex;align-items:center;justify-content:center}.connecting-subtitle{font-size:.85rem;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:#ffffff73;animation:connecting-fadeInUp 1s ease-out 1.2s both;transition:opacity .6s ease,transform .6s ease}.connecting-subtitle.connecting-phase-out{opacity:0;transform:translateY(-10px);position:absolute;pointer-events:none}.connecting-status-msg{font-size:.9rem;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#c5a355b3;opacity:0;transform:translateY(10px);transition:opacity .6s ease .15s,transform .6s ease .15s;position:absolute;white-space:nowrap}.connecting-status-msg.connecting-phase-in{opacity:1;transform:translateY(0);position:relative}.connecting-dots-row{display:flex;gap:6px;animation:connecting-fadeInUp 1s ease-out 1.4s both}.connecting-loading-dot{width:5px;height:5px;border-radius:50%;background:#c5a355;animation:connecting-dotBounce 1.4s ease-in-out infinite}.connecting-loading-dot:nth-child(2){animation-delay:.15s}.connecting-loading-dot:nth-child(3){animation-delay:.3s}.connecting-exit{animation:connecting-exitFade .8s ease-out forwards;pointer-events:none}@keyframes connecting-fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes connecting-breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.85}}@keyframes connecting-rotateStar{to{transform:rotate(360deg)}}@keyframes connecting-diamondPulse{0%,to{opacity:.4}50%{opacity:.8}}@keyframes connecting-ringPulse{0%,to{opacity:1;stroke-width:.5}50%{opacity:.4;stroke-width:1}}@keyframes connecting-dotGlow{0%,to{opacity:.6;r:2}50%{opacity:1;r:3}}@keyframes connecting-orbit{to{transform:rotate(360deg)}}@keyframes connecting-shimmer{to{background-position:-200% 0}}@keyframes connecting-dotBounce{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}@keyframes connecting-exitFade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}@media(max-width:600px){.hero{padding:2.5rem 1.5rem}.hero h1{font-size:1.8rem}.join-form{flex-direction:column}.category-grid{grid-template-columns:repeat(3,1fr)}.shops-grid{grid-template-columns:1fr}.message{max-width:92%}.connecting-svg-wrap{width:120px;height:120px}.connecting-title-en{font-size:1.25rem;letter-spacing:4px}.connecting-title-ar{font-size:1.2rem}.connecting-subtitle,.connecting-status-msg{font-size:.75rem;letter-spacing:2px}.chat-main{flex-direction:column}.avatar-section{flex:none;height:35dvh;min-height:180px;max-height:280px}.avatar-section:after{inset:auto 10% 0;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(197,163,85,.2),transparent)}.transcription-panel{min-width:0;max-width:none;flex:1;padding:1rem}.chat-header h1{font-size:.85rem;letter-spacing:1.5px}.voice-controls{padding:.6rem 1rem;padding-bottom:max(.6rem,env(safe-area-inset-bottom))}.ctrl-btn{width:40px;height:40px}.ctrl-btn.end-btn{padding:0 .75rem;font-size:.7rem}.control-buttons{gap:.5rem}.connection-status{font-size:.65rem}}