[v-cloak],.error-toast[v-cloak],.info-toast[v-cloak]{display:none!important}:root{--energy: #EB6626;--aqua: #005797;--ink: #07112A;--text: #505558;--g600: #949494;--g300: #DEDFE3;--g200: #EEEFF1;--g100: #F7F8F8;--white: #FFF;--grad-energy: linear-gradient(135deg, #FCCF8A 0%, #F7AF40 25%, #EB6626 60%, #E13B31 100%);--brand-solid: #E13B31;--edge-gap: clamp(18px, 2.6vw, 26px);--badge-gap: clamp(18px, 2.6vw, 26px);--btn-scale: 1.2;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--welcome-pad-y: clamp(12px, 2.2vh, 18px);--welcome-pad-x: clamp(12px, 3vw, 20px);--welcome-maxw: 520px;--lang-row-h: 56px;--lang-font: 18px;--btn-h: 54px;--list-gap: 10px;--actions-gap: 14px;--controls-pad-y: clamp(16px, 3.2vw, 22px);--appvh: 100svh}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{font-family:Fira Sans,Vazirmatn,Noto Naskh Arabic,Tahoma,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--g100);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;top:0;right:0;bottom:0;left:0;height:var(--appvh);touch-action:manipulation}.welcome-screen{min-height:var(--appvh);padding:calc(var(--safe-top) + var(--welcome-pad-y)) var(--welcome-pad-x) calc(var(--safe-bottom) + var(--welcome-pad-y));background:linear-gradient(135deg,var(--white) 0%,var(--g200) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}.welcome-wrap{width:100%;max-width:min(var(--welcome-maxw),96vw);height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--actions-gap)}.language-selection{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--list-gap);overflow:hidden;justify-content:center}.language-option{height:var(--lang-row-h);min-height:var(--lang-row-h);padding:0 16px;background:var(--white);border:2px solid var(--g300);border-radius:12px;cursor:pointer;transition:.18s ease;display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;font-size:var(--lang-font);line-height:1.15;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.language-option:hover{border-color:var(--energy);transform:translateY(-1px)}.language-option.selected{background:var(--brand-solid);color:var(--white);border-color:transparent;box-shadow:0 10px 24px #e13b3140}.welcome-actions{flex:0 0 auto;display:flex;justify-content:center;align-items:center}.btn{height:var(--btn-h);min-height:var(--btn-h);padding:0 28px;width:100%;border-radius:999px;border:2px solid transparent;font-weight:700;cursor:pointer;transition:.2s;font-size:clamp(14px,calc(var(--btn-h) * .35),20px);max-width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.btn-primary{background:var(--grad-energy);color:var(--white)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px #eb662659}.is-hidden{visibility:hidden}.tutorial-screen{min-height:var(--appvh);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 24px);overflow:auto;overflow-x:hidden;background:var(--white);gap:18px;text-align:center}.tutorial-screen h1{color:#000460;font-size:clamp(2rem,4.8vw,3rem);line-height:1.15;font-weight:700;margin-bottom:10px}.tutorial-screen p{max-width:min(90vw,900px);margin:0 auto 8px;font-size:clamp(1rem,2.1vw,1.25rem);line-height:1.45}.tutorial-nav{width:min(96vw,1000px);display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(16px,2.6vh,24px);padding:0 clamp(6px,2vw,10px)}.tut-btn{width:clamp(64px,9vh,84px);height:clamp(64px,9vh,84px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.tut-btn svg{width:clamp(26px,4vh,34px);height:clamp(26px,4vh,34px)}.tut-btn--ghost{background:#0000000a;color:var(--aqua);border:2px solid var(--aqua)}.tut-btn--primary{background:var(--grad-energy);color:#fff;box-shadow:0 10px 24px #eb662647}.tut-btn--ghost:hover{transform:translateY(-1px)}.tut-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px #eb662659}.main-screen{height:var(--appvh);display:flex;flex-direction:column}.conversation-half{flex:1;display:flex;flex-direction:column;position:relative;min-height:0;overflow:hidden}.agent-half{background:var(--grad-energy);border-bottom:3px solid var(--g300)}.customer-half{background:var(--white)}.conversation-content{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:0;flex:1;padding:clamp(12px,2.5vw,22px)}.agent-half .conversation-content{transform:rotate(180deg);transform-origin:center}.lang-badge{position:absolute;left:clamp(18px,2.8vw,26px);padding:8px 14px;border-radius:10px;border:1px solid;font-weight:700;font-size:clamp(14px,2.4vw,18px);line-height:1;opacity:.95;pointer-events:none;z-index:5}.agent-half .lang-badge{top:var(--badge-gap);left:var(--edge-gap);color:#fff;background:#ffffff29;border-color:#ffffff59}.customer-half .lang-badge{top:var(--badge-gap);left:var(--edge-gap);color:var(--ink);background:#0000000a;border-color:#0000001f}.transcript-area{grid-row:2;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:clamp(64px,9vw,80px) clamp(16px,2.2vw,22px) clamp(16px,2vw,22px);scrollbar-width:thin;scrollbar-color:var(--energy) transparent}.transcript-area::-webkit-scrollbar{width:10px}.transcript-area::-webkit-scrollbar-track{background:transparent}.transcript-area::-webkit-scrollbar-thumb{border-radius:8px}.customer-half .transcript-area{scrollbar-color:var(--energy) rgba(0,0,0,.06)}.customer-half .transcript-area::-webkit-scrollbar-thumb{background:var(--energy)}.agent-half .transcript-area{scrollbar-color:rgba(255,255,255,.85) rgba(255,255,255,.25)}.agent-half .transcript-area::-webkit-scrollbar-thumb{background:#ffffffbf}.transcript-message{margin-bottom:clamp(10px,2vw,16px);padding:clamp(14px,2.6vw,18px) clamp(18px,3vw,22px);border-radius:12px;max-width:min(85%,740px);font-size:clamp(18px,2.8vw,24px);line-height:1.35;white-space:pre-wrap;word-break:break-word;align-self:flex-end;margin-left:auto;margin-right:0}.agent-half .transcript-message{background:var(--g200);color:var(--ink);border:1px solid var(--g300)}.customer-half .transcript-message{background:var(--g200);color:var(--ink)}.customer-half .transcript-message.translated{background:#fff;border:1px solid var(--g300)}.transcript-message[dir=rtl],.lang-badge[dir=rtl],.info-toast[dir=rtl],.error-toast[dir=rtl]{font-family:Vazirmatn,Noto Naskh Arabic,Fira Sans,Tahoma,system-ui,-apple-system,sans-serif;unicode-bidi:plaintext;direction:rtl;text-align:right}.controls-area{grid-row:3;padding:var(--controls-pad-y);display:flex;justify-content:center;align-items:center;gap:20px;flex-shrink:0;background:transparent}.record-button{width:calc(var(--btn-scale) * clamp(66px,10vw,86px));height:calc(var(--btn-scale) * clamp(66px,10vw,86px));border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.agent-half .record-button{background:#fff;color:var(--energy)}.customer-half .record-button{background:var(--brand-solid);color:#fff}.record-button:hover{transform:scale(1.06)}.mic-icon{width:calc(var(--btn-scale) * clamp(32px,5vw,40px));height:calc(var(--btn-scale) * clamp(32px,5vw,40px))}.corner-control{position:absolute;z-index:10;width:calc(var(--btn-scale) * clamp(40px,6vw,50px));height:calc(var(--btn-scale) * clamp(40px,6vw,50px));border-radius:50%;border:2px solid currentColor;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.corner-control svg{width:calc(var(--btn-scale) * clamp(20px,3vw,24px));height:calc(var(--btn-scale) * clamp(20px,3vw,24px))}.control-top-left{top:var(--edge-gap);left:var(--edge-gap)}.control-top-right{top:var(--edge-gap);right:var(--edge-gap)}.customer-control-left{left:var(--edge-gap)}.customer-control-right{right:var(--edge-gap)}.agent-half .corner-control{color:#fff;background:#ffffff38;border-color:#ffffffd9}.customer-half .corner-control{color:var(--text);background:var(--g200);border-color:var(--g300)}.tts-audio-element{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.volume-meter{position:absolute;bottom:calc(var(--btn-scale) * clamp(84px,12vw,104px));left:50%;transform:translate(-50%);width:clamp(160px,30vw,220px);height:6px;background:#0000001f;border-radius:3px;overflow:hidden}.agent-half .volume-meter{background:#ffffff40}.volume-level{height:100%;background:linear-gradient(90deg,var(--aqua),#F7AF40,var(--energy));width:0%}.loading-spinner{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999;background:#ffffff59;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.loading-spinner .ring{width:clamp(54px,8vw,64px);height:clamp(54px,8vw,64px);border:4px solid #f3f3f3;border-top:4px solid var(--energy);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-toast{position:fixed;top:20px;right:20px;background:#cd0045;color:#fff;padding:12px 18px;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:10000}.info-toast{position:fixed;left:20px;bottom:calc(20px + var(--safe-bottom));background:#136f37;color:#fff;border-radius:8px;padding:10px 14px;box-shadow:0 4px 12px #00000026;z-index:10000;font-weight:600}input,select,textarea{font-size:16px!important}@media(min-width:768px)and (max-width:834px){:root{--welcome-maxw: 90%;--lang-row-h: 70px;--lang-font: 22px;--btn-h: 64px;--list-gap: 12px;--actions-gap: 18px;--welcome-pad-y: clamp(18px, 3.5vh, 28px);--welcome-pad-x: clamp(30px, 4vw, 40px)}.transcript-message{font-size:clamp(21px,3.2vw,26px);padding:clamp(16px,3vw,20px) clamp(20px,3.5vw,24px)}.tutorial-screen h1{font-size:clamp(2.4rem,5.2vw,3.2rem)}.tutorial-screen p{font-size:clamp(1.2rem,2.5vw,1.4rem)}}@media(min-width:835px)and (max-width:1024px){:root{--welcome-maxw: 88%;--lang-row-h: 76px;--lang-font: 24px;--btn-h: 68px;--list-gap: 14px;--actions-gap: 20px;--welcome-pad-y: clamp(20px, 3.8vh, 32px);--welcome-pad-x: clamp(40px, 4.5vw, 50px)}.transcript-message{font-size:clamp(22px,3.4vw,28px);padding:clamp(18px,3.2vw,22px) clamp(22px,3.8vw,26px)}.tutorial-screen h1{font-size:clamp(2.6rem,5.5vw,3.5rem)}.tutorial-screen p{font-size:clamp(1.25rem,2.7vw,1.5rem)}.lang-badge{font-size:clamp(16px,2.8vw,20px);padding:10px 16px}}@media(min-width:1025px){:root{--welcome-maxw: 85%;--lang-row-h: 80px;--lang-font: 26px;--btn-h: 72px;--list-gap: 16px;--actions-gap: 22px;--welcome-pad-y: clamp(24px, 4vh, 36px);--welcome-pad-x: clamp(50px, 5vw, 60px)}.transcript-message{font-size:clamp(24px,3.6vw,30px)}}@media(max-height:740px){:root{--welcome-pad-y: clamp(8px, 1.6vh, 12px);--welcome-pad-x: clamp(10px, 2.4vw, 16px);--list-gap: 8px;--actions-gap: 12px}.language-option{border-radius:10px}.btn{font-size:clamp(13px,1.9vh,17px)}}