/* ============================================================ TIVEZ PRO — STAGE 2 FINAL WIZARD CSS SINGLE VIEWPORT / SINGLE SCROLL / PERFORMANCE ============================================================ */ html.tivez-stage2-final{ scroll-behavior:auto!important; } /* ========================================================= PAGE LOCK ========================================================= */ body.tivez-checkout-active{ overflow:hidden!important; touch-action:none; } /* ========================================================= ONE CHECKOUT SURFACE ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open{ position:fixed!important; inset:0!important; z-index:5000!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; margin:0!important; display:flex!important; flex-direction:column!important; border:0!important; border-radius:0!important; transform:none!important; overflow:hidden!important; background:#080b0e!important; box-shadow:none!important; overscroll-behavior:none!important; isolation:isolate; } /* Remove expensive fullscreen effects */ html.tivez-stage2-final #assistant.checkout-mode.open::before, html.tivez-stage2-final #assistant.checkout-mode.open::after{ display:none!important; } /* ========================================================= HEADER ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .assistant-head{ position:relative!important; top:auto!important; flex:0 0 auto!important; min-height:82px!important; padding: calc(12px + env(safe-area-inset-top)) 22px 12px!important; background:#080b0e!important; border-bottom: 1px solid rgba(255,255,255,.07)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } /* ========================================================= WIZARD BODY CHAT = current message only ACTIONS = current controls only Neither is independently scrollable. ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .chat, html.tivez-stage2-final #assistant.checkout-mode.open #chat{ flex:0 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding: 18px clamp(22px,5vw,38px) 8px!important; margin:0!important; scroll-behavior:auto!important; transform:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions, html.tivez-stage2-final #assistant.checkout-mode.open #chatActions{ flex:1 1 auto!important; min-height:0!important; width:100%!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; scroll-behavior:auto!important; padding: 8px clamp(22px,5vw,38px) calc(24px + env(safe-area-inset-bottom)) !important; margin:0!important; border:0!important; background:#080b0e!important; transform:none!important; } /* stacked MUST NOT become another nested scroll owner */ html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions.stacked, html.tivez-stage2-final #assistant.checkout-mode.open #chatActions.stacked{ height:auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; position:relative!important; inset:auto!important; transform:none!important; } /* ========================================================= ONLY CURRENT MESSAGE ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open #chat > .bubble{ display:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open #chat > .bubble:last-child, html.tivez-stage2-final #assistant.checkout-mode.open #chat > .tivez-current-stage-message{ display:block!important; } /* No huge transcript margins */ html.tivez-stage2-final #assistant.checkout-mode.open .bubble{ margin: 0 0 10px!important; box-shadow:none!important; } /* ========================================================= CURRENT TIVEZ MESSAGE ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .bubble.bot{ width:100%!important; max-width:100%!important; padding:15px 17px!important; border: 1px solid rgba(255,255,255,.08)!important; border-radius:20px!important; background:#10151a!important; color:#f2f4f5!important; box-shadow:none!important; } /* Customer response */ html.tivez-stage2-final #assistant.checkout-mode.open .bubble.user{ width:max-content!important; max-width:min(84%,520px)!important; margin-right:auto!important; margin-left:0!important; padding:12px 16px!important; border:0!important; border-radius:18px!important; background:#f0f1f3!important; color:#111418!important; box-shadow:none!important; } /* ========================================================= CHECKOUT STEP CARD ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .checkout-step{ min-height:0!important; padding:4px 14px 4px 4px!important; margin:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-step>b{ margin:8px 0 4px!important; font-size:clamp(19px,5vw,26px)!important; line-height:1.55!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-step>small{ font-size:12px!important; line-height:1.9!important; color:#939ba4!important; } /* ========================================================= INPUT STAGE ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row{ width:100%!important; display:grid!important; grid-template-columns: minmax(0,1fr) minmax(92px,120px)!important; gap:12px!important; align-items:stretch!important; margin:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row input, html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions>input{ min-height:58px!important; font-size:16px!important; border-radius:17px!important; margin:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row button, html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions>button{ min-height:58px!important; margin:0!important; border-radius:17px!important; } /* ========================================================= PURCHASE METHOD ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:12px!important; width:100%!important; margin:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button{ min-height:150px!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:7px!important; padding:18px!important; border: 1px solid rgba(255,255,255,.095)!important; border-radius:22px!important; background:#151a20!important; box-shadow:none!important; transform:none!important; transition: border-color .12s ease, background-color .12s ease!important; touch-action:manipulation; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button:active{ transform:none!important; background:#1a2027!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid b{ font-size:18px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid small{ font-size:11px!important; line-height:1.8!important; color:#9299a2!important; } /* ========================================================= INSTALLMENT — COMPACT / FAST ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; display:grid!important; grid-template-columns:1fr!important; gap:12px!important; overflow:visible!important; padding:18px!important; margin:0!important; border: 1px solid rgba(255,255,255,.085)!important; border-radius:22px!important; background:#10151a!important; box-shadow:none!important; transform:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-title{ padding:0 0 12px!important; margin:0!important; border-bottom: 1px solid rgba(255,255,255,.07)!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-title b{ font-size:25px!important; line-height:1.5!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-title small{ font-size:11px!important; line-height:1.8!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label{ display:grid!important; gap:10px!important; min-height:112px!important; padding:16px!important; margin:0!important; border: 1px solid rgba(255,255,255,.075)!important; border-radius:19px!important; background:#151a20!important; box-shadow:none!important; contain:layout paint; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label>span{ font-size:13px!important; line-height:1.7!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label>span b{ font-size:15px!important; } /* Critical slider performance */ html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat input[type="range"]{ display:block!important; width:100%!important; height:38px!important; margin:0!important; padding:0!important; transform:none!important; filter:none!important; box-shadow:none!important; touch-action:pan-x!important; will-change:auto!important; contain:layout!important; accent-color:#f0f1f3; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat input[type="range"].tivez-range-active{ touch-action:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-summary{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:10px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-summary>div{ min-height:92px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; padding:14px!important; border: 1px solid rgba(255,255,255,.075)!important; border-radius:18px!important; background:#151a20!important; box-shadow:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-summary strong{ font-size:18px!important; line-height:1.65!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-disclaimer{ font-size:10px!important; line-height:1.9!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-confirm{ width:100%!important; min-height:60px!important; margin:2px 0 0!important; border-radius:17px!important; box-shadow:none!important; touch-action:manipulation; } /* ========================================================= GUARANTEE ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; gap:10px!important; width:100%!important; margin:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button{ min-height:132px!important; padding:16px!important; margin:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; gap:7px!important; border: 1px solid rgba(255,255,255,.085)!important; border-radius:20px!important; background:#151a20!important; box-shadow:none!important; transform:none!important; touch-action:manipulation; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid b{ font-size:17px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid small{ font-size:10px!important; line-height:1.8!important; color:#929aa3!important; } /* ========================================================= KYC ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .kyc-request{ width:100%!important; padding:18px!important; margin:0!important; border: 1px solid rgba(255,255,255,.085)!important; border-radius:21px!important; background:#10151a!important; box-shadow:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-request>b{ display:block!important; margin-top:8px!important; font-size:23px!important; line-height:1.6!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-request>small{ font-size:11px!important; line-height:2!important; } html.tivez-stage2-final #assistant.checkout-mode.open .privacy-note{ margin-top:12px!important; padding:13px!important; font-size:10px!important; line-height:1.9!important; border-radius:15px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; width:100%!important; margin:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions .camera-action, html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions .upload-btn{ min-height:62px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:12px!important; margin:0!important; border-radius:17px!important; box-shadow:none!important; touch-action:manipulation; } /* ========================================================= PAYMENT ========================================================= */ html.tivez-stage2-final #assistant.checkout-mode.open .premium-bank-card, html.tivez-stage2-final #assistant.checkout-mode.open .tivez-live-payment-panel, html.tivez-stage2-final #assistant.checkout-mode.open .tivez-payment-card{ box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* ========================================================= GUIDE / EXTRA FLOATING SURFACES Hide only while secure checkout is active. Checkout mascot embedded inside assistant is untouched. ========================================================= */ body.tivez-checkout-active #tivezGuideRoot, body.tivez-checkout-active .tg-journey-coach{ visibility:hidden!important; pointer-events:none!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ html.tivez-stage2-final #assistant.checkout-mode.open .assistant-head{ min-height:78px!important; padding: calc(10px + env(safe-area-inset-top)) 16px 10px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .chat{ padding: 14px 20px 6px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions{ padding: 6px 20px calc(20px + env(safe-area-inset-bottom)) !important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button{ min-height:132px!important; padding:15px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button{ min-height:116px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button:last-child{ grid-column:1 / -1!important; min-height:94px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat{ padding:14px!important; gap:10px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-title b{ font-size:22px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label{ min-height:104px!important; padding:14px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-summary>div{ min-height:84px!important; padding:12px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-summary strong{ font-size:16px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions{ grid-template-columns:1fr!important; } } /* ========================================================= SHORT PHONE SCREENS Make every step denser instead of creating nested scrolls. ========================================================= */ @media(max-height:760px) and (max-width:700px){ html.tivez-stage2-final #assistant.checkout-mode.open .assistant-head{ min-height:68px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .chat{ padding-top:9px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .bubble.bot{ padding:12px 14px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button{ min-height:112px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat{ gap:8px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label{ min-height:92px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button{ min-height:98px!important; } } /* ============================================================ TIVEZ_STAGE2_SURGICAL_UI_FINAL_BEGIN Fixes ONLY: - stretched input/action controls - giant tracking/payment action button - duplicate step cards - guarantee readability - action panel vertical stretching - mobile rhythm Camera is deliberately NOT styled here. app.css is the sole camera/frame owner. ============================================================ */ /* ------------------------------------------------------------ ACTION AREA MUST NEVER STRETCH ITS CHILDREN ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions, html.tivez-stage2-final #assistant.checkout-mode.open #chatActions, html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions.stacked, html.tivez-stage2-final #assistant.checkout-mode.open #chatActions.stacked{ display:block!important; flex:1 1 auto!important; min-height:0!important; height:auto!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; align-items:initial!important; align-content:initial!important; grid-template-columns:none!important; grid-template-rows:none!important; place-items:initial!important; padding: 8px clamp(20px,5vw,36px) calc(22px + env(safe-area-inset-bottom)) !important; background:#080b0e!important; border:0!important; box-sizing:border-box!important; } /* ------------------------------------------------------------ NAME / PHONE INPUT ROW ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row{ display:grid!important; grid-template-columns: minmax(0,1fr) 96px!important; grid-template-rows:auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; align-items:stretch!important; align-self:start!important; gap:10px!important; margin:0!important; padding:0!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row input{ width:100%!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin:0!important; padding:0 18px!important; box-sizing:border-box!important; border-radius:17px!important; align-self:start!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row button{ width:96px!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin:0!important; padding:0 12px!important; box-sizing:border-box!important; border-radius:17px!important; align-self:start!important; } /* ------------------------------------------------------------ DIRECT ACTION BUTTON Fixes the enormous vertical "پیگیری سفارش" button. ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open #chatActions > button, html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions > button{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin:0!important; padding:0 18px!important; align-self:start!important; border-radius:17px!important; box-sizing:border-box!important; } /* ------------------------------------------------------------ REMOVE DUPLICATE INTERNAL STEP CARD The cyan contextual TIVEZ guide already identifies the stage. Do not show a second huge black "مرحله ۱ / روش خرید" card. ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open #chat .bubble.bot:has(.checkout-step){ display:none!important; } /* ------------------------------------------------------------ METHOD SELECTION ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-auto-rows:auto!important; gap:10px!important; width:100%!important; height:auto!important; align-items:stretch!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button{ width:100%!important; height:132px!important; min-height:132px!important; max-height:132px!important; margin:0!important; padding:16px!important; box-sizing:border-box!important; color:#f2f4f5!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button *{ color:inherit; } /* ------------------------------------------------------------ INSTALLMENT ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat{ align-self:start!important; height:auto!important; min-height:0!important; max-height:none!important; box-sizing:border-box!important; } html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat label{ height:auto!important; min-height:98px!important; max-height:none!important; box-sizing:border-box!important; } /* Keep slider native and responsive. No transition/filter/transform while dragging. */ html.tivez-stage2-final #assistant.checkout-mode.open .installment-chat input[type="range"]{ touch-action:pan-x!important; transition:none!important; animation:none!important; filter:none!important; transform:none!important; box-shadow:none!important; will-change:auto!important; } /* ------------------------------------------------------------ GUARANTEE ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-auto-rows:auto!important; gap:10px!important; width:100%!important; height:auto!important; align-items:stretch!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button{ width:100%!important; height:112px!important; min-height:112px!important; max-height:112px!important; margin:0!important; padding:15px!important; box-sizing:border-box!important; color:#f2f4f5!important; background:#151a20!important; border: 1px solid rgba(255,255,255,.085)!important; box-shadow:none!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button:last-child{ grid-column:1 / -1!important; height:92px!important; min-height:92px!important; max-height:92px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button b{ display:block!important; color:#f2f4f5!important; opacity:1!important; font-size:16px!important; line-height:1.6!important; } html.tivez-stage2-final #assistant.checkout-mode.open .guarantee-grid>button small{ display:block!important; color:#9aa2ab!important; opacity:1!important; margin-top:5px!important; font-size:10px!important; line-height:1.8!important; } /* ------------------------------------------------------------ KYC ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .kyc-request{ height:auto!important; min-height:0!important; max-height:none!important; align-self:start!important; box-sizing:border-box!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions{ display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:auto!important; gap:10px!important; width:100%!important; height:auto!important; align-self:start!important; } html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions .camera-action, html.tivez-stage2-final #assistant.checkout-mode.open .kyc-actions .upload-btn{ width:100%!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin:0!important; box-sizing:border-box!important; } /* ------------------------------------------------------------ PAYMENT / TRACKING Never allow payment wrapper or a single terminal action to consume remaining viewport height. ------------------------------------------------------------ */ html.tivez-stage2-final #assistant.checkout-mode.open .tivez-live-payment-panel, html.tivez-stage2-final #assistant.checkout-mode.open .tivez-payment-card, html.tivez-stage2-final #assistant.checkout-mode.open .tivez-payment-panel-bubble{ height:auto!important; min-height:0!important; max-height:none!important; align-self:start!important; } /* ------------------------------------------------------------ SHORT MOBILE SCREENS ------------------------------------------------------------ */ @media(max-width:700px){ html.tivez-stage2-final #assistant.checkout-mode.open .chat-actions, html.tivez-stage2-final #assistant.checkout-mode.open #chatActions{ padding: 6px 20px calc(18px + env(safe-area-inset-bottom)) !important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row{ grid-template-columns: minmax(0,1fr) 88px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-input-row button{ width:88px!important; } html.tivez-stage2-final #assistant.checkout-mode.open .checkout-type-grid>button{ height:124px!important; min-height:124px!important; max-height:124px!important; } } /* ============================================================ TIVEZ_STAGE2_SURGICAL_UI_FINAL_END ============================================================ */ /* ============================================================ TIVEZ_CAMERA_CONTROLS_FINAL_BEGIN ============================================================ */ /* ---------- REMOVE EMPTY BUY METHOD ICON BOXES ---------- */ #assistant.checkout-mode.open .checkout-type-icon{ display:none !important; } #assistant.checkout-mode.open .checkout-type-grid>button{ position:relative !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; text-align:right !important; min-height:132px !important; padding:20px 18px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius:22px !important; background: linear-gradient( 145deg, #151a20, #101419 ) !important; box-shadow:none !important; } #assistant.checkout-mode.open .checkout-type-grid>button::before{ content:"" !important; position:absolute !important; top:18px !important; right:18px !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#9be5e8 !important; box-shadow: 0 0 0 5px rgba(122,218,224,.07) !important; } #assistant.checkout-mode.open .checkout-type-grid>button b{ margin-top:14px !important; color:#f3f5f6 !important; font-size:17px !important; font-weight:900 !important; line-height:1.7 !important; } #assistant.checkout-mode.open .checkout-type-grid>button small{ margin-top:6px !important; color:#8f98a1 !important; font-size:10px !important; line-height:1.9 !important; } /* ---------- CAMERA SURFACE ---------- */ #docCamera.doc-camera{ position:fixed !important; inset:0 !important; z-index:2147483000 !important; width:100vw !important; height:100dvh !important; margin:0 !important; padding:0 !important; display:none !important; grid-template-rows: auto minmax(0,1fr) auto !important; background:#05070a !important; overflow:hidden !important; pointer-events:auto !important; transform:none !important; } #docCamera.doc-camera.open{ display:grid !important; } #docCamera, #docCamera *{ box-sizing:border-box !important; } #docCamera .camera-top{ position:relative !important; z-index:40 !important; width:100% !important; min-height:106px !important; padding: calc(15px + env(safe-area-inset-top)) 20px 14px !important; display:grid !important; grid-template-columns: minmax(0,1fr) 58px !important; gap:15px !important; align-items:center !important; direction:rtl !important; background:#080b0f !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; pointer-events:auto !important; } #docCamera .camera-top>div{ grid-column:1 !important; grid-row:1 !important; min-width:0 !important; text-align:right !important; pointer-events:none !important; } #docCamera .camera-top>button{ grid-column:2 !important; grid-row:1 !important; position:relative !important; inset:auto !important; width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; margin:0 !important; padding:0 !important; display:grid !important; place-items:center !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius:18px !important; background:#171b20 !important; color:#fff !important; font-size:34px !important; line-height:1 !important; cursor:pointer !important; pointer-events:auto !important; touch-action:manipulation !important; z-index:100 !important; transform:none !important; } #docCamera .camera-top b{ display:block !important; color:#f4f5f6 !important; font-size:17px !important; font-weight:900 !important; line-height:1.65 !important; } #docCamera .camera-top small{ display:block !important; margin-top:4px !important; color:#929aa3 !important; font-size:10px !important; line-height:1.8 !important; } /* actual live preview owner */ #docCamera .camera-stage{ position:relative !important; z-index:10 !important; width:100% !important; height:100% !important; min-height:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; background:#000 !important; pointer-events:none !important; } #docCamera #cameraVideo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; background:#000 !important; transform:none !important; pointer-events:none !important; } /* document frame always above video */ #docCamera .document-frame{ position:relative !important; z-index:20 !important; margin:0 auto !important; border: 2px solid rgba(255,255,255,.92) !important; background:transparent !important; pointer-events:none !important; transform:none !important; } #docCamera.doc-kind-id-card .document-frame{ width:min( calc(100vw - 52px), 620px ) !important; aspect-ratio: 1.586 / 1 !important; border-radius:20px !important; } #docCamera.doc-kind-cheque .document-frame{ width:min( calc(100vw - 36px), 720px ) !important; aspect-ratio: 2.05 / 1 !important; border-radius:13px !important; } #docCamera.doc-kind-promissory .document-frame{ width:min( calc(100vw - 44px), 680px ) !important; aspect-ratio: 1.45 / 1 !important; border-radius:14px !important; } #docCamera .document-frame>b{ position:absolute !important; top:calc(100% + 14px) !important; right:0 !important; left:0 !important; width:100% !important; color:#fff !important; text-align:center !important; font-size:11px !important; line-height:1.8 !important; white-space:nowrap !important; } /* ---------- CAMERA BOTTOM / REAL SHUTTER ---------- */ #docCamera .camera-bottom{ position:relative !important; z-index:50 !important; width:100% !important; min-height:154px !important; padding: 17px 20px calc(18px + env(safe-area-inset-bottom)) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; background:#080b0f !important; border-top: 1px solid rgba(255,255,255,.08) !important; pointer-events:auto !important; } #docCamera #cameraCapture{ position:relative !important; inset:auto !important; flex:0 0 auto !important; width:76px !important; height:76px !important; min-width:76px !important; min-height:76px !important; margin:0 !important; padding:0 !important; display:grid !important; place-items:center !important; border: 3px solid #f4f5f6 !important; border-radius:50% !important; background:transparent !important; box-shadow:none !important; pointer-events:auto !important; touch-action:manipulation !important; cursor:pointer !important; z-index:100 !important; transform:none !important; } #docCamera #cameraCapture>i{ display:block !important; width:58px !important; height:58px !important; border:0 !important; border-radius:50% !important; background:#fff !important; pointer-events:none !important; } #docCamera .camera-bottom small{ max-width:92vw !important; margin:0 !important; color:#8f979f !important; text-align:center !important; font-size:9px !important; line-height:1.8 !important; pointer-events:none !important; } /* While camera is open nothing underneath it may receive touch/click. */ body:has(#docCamera.open) #assistant{ pointer-events:none !important; } body:has(#docCamera.open) #docCamera{ pointer-events:auto !important; } body:has(#docCamera.open) #docCamera .camera-top>button, body:has(#docCamera.open) #docCamera #cameraCapture{ pointer-events:auto !important; } /* Mobile tuning */ @media(max-width:700px){ #docCamera .camera-top{ min-height:112px !important; padding-left:16px !important; padding-right:16px !important; } #docCamera .camera-top>button{ width:54px !important; height:54px !important; min-width:54px !important; min-height:54px !important; } #docCamera .camera-bottom{ min-height:148px !important; } #assistant.checkout-mode.open .checkout-type-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #assistant.checkout-mode.open .checkout-type-grid>button{ min-height:132px !important; padding: 18px 15px !important; } } /* ============================================================ TIVEZ_CAMERA_CONTROLS_FINAL_END ============================================================ */ /* ============================================================ TIVEZ_KYC_FRAME_REUPLOAD_FINAL_BEGIN ============================================================ */ /* IMPORTANT: frame size comes from the REAL .camera-stage dimensions, calculated by JS. */ #docCamera.open .document-frame{ position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; width: var( --tivez-frame-width, min(82vw,560px) ) !important; height: var( --tivez-frame-height, 320px ) !important; max-width: calc(100% - 40px) !important; max-height: calc(100% - 86px) !important; aspect-ratio:auto !important; margin:0 !important; transform: translate(-50%,-50%) !important; z-index:30 !important; box-sizing:border-box !important; pointer-events:none !important; } /* Remove width rules left by older camera patches. */ #docCamera.open.doc-kind-id-card .document-frame, #docCamera.open.doc-kind-cheque .document-frame, #docCamera.open.doc-kind-promissory .document-frame{ width: var(--tivez-frame-width) !important; height: var(--tivez-frame-height) !important; max-width: calc(100% - 40px) !important; max-height: calc(100% - 86px) !important; margin:0 !important; } /* CARD */ #docCamera.open.doc-kind-id-card .document-frame{ border-radius:20px !important; } /* SAYAD CHEQUE */ #docCamera.open.doc-kind-cheque .document-frame{ border-radius:12px !important; } /* PROMISSORY */ #docCamera.open.doc-kind-promissory .document-frame{ border-radius:13px !important; } /* Center guide label directly under frame. */ #docCamera.open .document-frame>b{ position:absolute !important; top:calc(100% + 12px) !important; right:50% !important; left:auto !important; width:max-content !important; max-width:90vw !important; transform: translateX(50%) !important; margin:0 !important; text-align:center !important; white-space:nowrap !important; color:#f4f5f6 !important; font-size:11px !important; font-weight:800 !important; line-height:1.8 !important; } /* Ensure no corner/guide fragments escape the frame. */ #docCamera.open .document-frame::before, #docCamera.open .document-frame::after, #docCamera.open .document-frame span::before, #docCamera.open .document-frame span::after{ box-sizing:border-box !important; } /* ------------------------------------------------------------ REGISTERED DOCUMENT / CORRECTION PANEL ------------------------------------------------------------ */ #assistant.checkout-mode.open .tivez-kyc-correction-panel{ width:100% !important; display:grid !important; gap:10px !important; margin: 14px 0 0 !important; padding:14px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius:18px !important; background:#101419 !important; box-shadow:none !important; } #assistant.checkout-mode.open .tivez-kyc-correction-head{ display:grid !important; gap:3px !important; text-align:right !important; } #assistant.checkout-mode.open .tivez-kyc-correction-head>b{ color:#f2f4f5 !important; font-size:12px !important; font-weight:900 !important; } #assistant.checkout-mode.open .tivez-kyc-correction-head>small{ color:#8e969f !important; font-size:9px !important; line-height:1.8 !important; } #assistant.checkout-mode.open .tivez-kyc-correction-list{ display:grid !important; gap:8px !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button{ width:100% !important; min-height:66px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; padding: 12px 14px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius:15px !important; background:#171c22 !important; color:#f2f4f5 !important; box-shadow:none !important; text-align:right !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button>span{ display:grid !important; gap:2px !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button b{ color:#f2f4f5 !important; font-size:11px !important; font-weight:850 !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button small{ color:#838c95 !important; font-size:8px !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button strong{ flex:0 0 auto !important; padding: 7px 10px !important; border: 1px solid rgba(139,103,255,.22) !important; border-radius:10px !important; background: rgba(125,83,255,.08) !important; color:#d3c6ff !important; font-size:9px !important; white-space:nowrap !important; } /* MOBILE */ @media(max-width:700px){ #docCamera.open .document-frame{ max-width: calc(100vw - 34px) !important; max-height: calc(100% - 92px) !important; } #assistant.checkout-mode.open .tivez-kyc-correction-panel{ padding:12px !important; border-radius:17px !important; } #assistant.checkout-mode.open .tivez-kyc-correct-button{ min-height:64px !important; } } /* ============================================================ TIVEZ_KYC_FRAME_REUPLOAD_FINAL_END ============================================================ */ /* TIVEZ_KYC_FIT_FINAL_BEGIN */ @media (max-width:700px){ /* ========================================================= KYC ONLY ========================================================= */ /* Keep checkout structure intact but reduce wasted vertical space only while a document request is on screen. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat{ padding-top:6px !important; padding-bottom:2px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat > .bubble{ margin-top:4px !important; margin-bottom:4px !important; } /* ========================================================= CURRENT DOCUMENT CARD ========================================================= */ html.tivez-stage2-clean #assistant.checkout-mode.open .bubble.bot:has(.kyc-request){ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; min-height:0 !important; height:auto !important; margin:5px 12px !important; padding:0 !important; border-radius:16px !important; box-shadow:none !important; overflow:visible !important; } /* Convert the huge document presentation card into a compact checkout card. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ width:100% !important; display:grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "title step" "hint hint" "privacy privacy" !important; align-items:center !important; gap:4px 8px !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:0 !important; padding:12px 14px !important; background:#101419 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius:16px !important; box-shadow:none !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .kyc-step{ grid-area:step !important; width:max-content !important; margin:0 !important; padding:4px 7px !important; font-size:7px !important; line-height:1.2 !important; border-radius:999px !important; white-space:nowrap !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ grid-area:title !important; margin:0 !important; padding:0 !important; font-size:18px !important; line-height:1.45 !important; font-weight:900 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ grid-area:hint !important; display:block !important; margin:0 !important; padding:0 !important; font-size:8px !important; line-height:1.55 !important; color:#929aa3 !important; } /* Privacy note stays visible, but must not become another big card. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .privacy-note{ grid-area:privacy !important; min-height:0 !important; height:auto !important; margin:4px 0 0 !important; padding:6px 8px !important; font-size:7px !important; line-height:1.45 !important; border-radius:9px !important; } /* ========================================================= CAMERA / GALLERY ACTIONS EXACT SAME SIZE ========================================================= */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat-actions{ padding:5px 12px !important; margin:0 !important; min-height:0 !important; height:auto !important; background:transparent !important; border:0 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin:0 !important; padding:0 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > button, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > label, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions .camera-action, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions .upload-btn{ box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:none !important; height:46px !important; min-height:46px !important; max-height:46px !important; margin:0 !important; padding:5px 8px !important; border-radius:13px !important; font-size:8px !important; line-height:1.35 !important; text-align:center !important; overflow:hidden !important; } /* ========================================================= SAVED DOCUMENTS AREA ========================================================= */ /* Find the registered-document card that appears beneath KYC. Reduce inherited card padding and vertical space. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat-actions + *, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) [class*="registered-doc"], html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) [class*="saved-doc"], html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) [class*="kyc-docs"], html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) [class*="document-list"]{ min-height:0 !important; } /* The card visible in current production: heading = مدارک ثبت‌شده and rows with replaceKycDocument buttons. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(> * button[onclick*="replaceKycDocument"]){ min-height:0 !important; height:auto !important; padding-top:8px !important; padding-bottom:8px !important; gap:6px !important; } /* EACH SAVED DOCUMENT ROW */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(> button[onclick*="replaceKycDocument"]){ box-sizing:border-box !important; display:grid !important; grid-template-columns: minmax(0,1fr) 92px !important; align-items:center !important; width:100% !important; min-height:54px !important; height:54px !important; max-height:54px !important; margin:0 !important; padding:7px 10px !important; gap:8px !important; border-radius:12px !important; overflow:hidden !important; } /* BOTH correction buttons: same dimensions, same alignment. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) button[onclick*="replaceKycDocument"]{ box-sizing:border-box !important; width:92px !important; min-width:92px !important; max-width:92px !important; height:36px !important; min-height:36px !important; max-height:36px !important; margin:0 !important; padding:4px 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:8px !important; line-height:1 !important; white-space:nowrap !important; } /* Reduce oversized spacing inside the saved-documents section. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(button[onclick*="replaceKycDocument"]) h1, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(button[onclick*="replaceKycDocument"]) h2, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(button[onclick*="replaceKycDocument"]) h3, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(button[onclick*="replaceKycDocument"]) p{ margin-top:2px !important; margin-bottom:2px !important; } /* ========================================================= VERY SHORT MOBILE VIEWPORTS ========================================================= */ @media (max-height:760px){ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ padding:9px 11px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ font-size:16px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ font-size:7.4px !important; line-height:1.4 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .privacy-note{ padding:4px 7px !important; font-size:6.4px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > button, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > label{ height:42px !important; min-height:42px !important; max-height:42px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) div:has(> button[onclick*="replaceKycDocument"]){ height:50px !important; min-height:50px !important; max-height:50px !important; } } } /* TIVEZ_KYC_FIT_FINAL_END */ /* TIVEZ_KYC_INLINE_CORRECTION_BEGIN */ /* --------------------------------------------------------- KEEP THE ORIGINAL DOCUMENT CARD SIZE / TYPOGRAPHY --------------------------------------------------------- */ #assistant.checkout-mode.open .kyc-request{ position:relative !important; } /* --------------------------------------------------------- CORRECTION CONTROLS LIVE ON THE DOCUMENT CARD ITSELF They consume ZERO layout height. --------------------------------------------------------- */ #assistant.checkout-mode.open .tivez-inline-kyc-corrections{ position:absolute !important; left:14px !important; bottom:14px !important; z-index:8 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:7px !important; width:auto !important; max-width:132px !important; margin:0 !important; padding:0 !important; pointer-events:auto !important; } #assistant.checkout-mode.open .tivez-inline-kyc-correction{ box-sizing:border-box !important; width:116px !important; min-width:116px !important; max-width:116px !important; height:36px !important; min-height:36px !important; max-height:36px !important; margin:0 !important; padding:0 10px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; border: 1px solid rgba(142,85,255,.32) !important; border-radius:11px !important; background: rgba(75,49,118,.23) !important; color:#ece5ff !important; box-shadow: 0 5px 16px rgba(0,0,0,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; font-family: inherit !important; cursor:pointer !important; white-space:nowrap !important; } #assistant.checkout-mode.open .tivez-inline-kyc-correction span{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size:8px !important; color:#aaa2b9 !important; } #assistant.checkout-mode.open .tivez-inline-kyc-correction b{ flex:0 0 auto !important; font-size:9px !important; font-weight:900 !important; color:#d8c5ff !important; } #assistant.checkout-mode.open .tivez-inline-kyc-correction:active{ transform:scale(.97) !important; } /* --------------------------------------------------------- OLD SEPARATE SAVED-DOCUMENT PANEL Hidden only after JS confirms inline controls exist. --------------------------------------------------------- */ #assistant.checkout-mode.open .tivez-registered-docs-inline-hidden{ display:none !important; } /* --------------------------------------------------------- DO NOT SHRINK ORIGINAL KYC TEXT Explicitly restore canonical visual hierarchy. --------------------------------------------------------- */ #assistant.checkout-mode.open .kyc-request > b{ font-size:inherit; } #assistant.checkout-mode.open .kyc-request > small{ font-size:inherit; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ #assistant.checkout-mode.open .tivez-inline-kyc-corrections{ left:12px !important; bottom:12px !important; gap:6px !important; } #assistant.checkout-mode.open .tivez-inline-kyc-correction{ width:108px !important; min-width:108px !important; max-width:108px !important; height:34px !important; min-height:34px !important; max-height:34px !important; padding: 0 9px !important; } } /* TIVEZ_KYC_INLINE_CORRECTION_END */ /* TIVEZ_KYC_INLINE_REPAIR_FINAL_BEGIN */ /* Registered documents now live INSIDE the same KYC card. We do not shrink the main KYC title, description or privacy text. */ #assistant.checkout-mode.open .kyc-request{ position:relative !important; } #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs{ position:relative !important; inset:auto !important; width:100% !important; max-width:none !important; margin:16px 0 0 !important; padding:14px !important; border: 1px solid rgba(255,255,255,.085) !important; border-radius:17px !important; background:#12161b !important; box-shadow:none !important; display:grid !important; gap:9px !important; overflow:visible !important; } /* Keep registered-doc title readable but compact. */ #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h1, #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h2, #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h3, #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h4{ margin:0 !important; font-size:14px !important; line-height:1.7 !important; } /* Existing document rows stay functional. Make every row horizontal and aligned: document information on one side, repair button on the other. */ #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > div, #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs article{ min-height:64px !important; margin:0 !important; padding:10px 12px !important; border-radius:14px !important; align-items:center !important; } /* Every "اصلاح مدرک" button is mounted visually on its document row. */ #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs button{ min-width:92px !important; min-height:40px !important; margin:0 !important; padding:8px 12px !important; border-radius:11px !important; white-space:nowrap !important; font-size:11px !important; line-height:1.4 !important; } /* No second detached registered-doc card spacing. */ #assistant.checkout-mode.open .tivez-kyc-inline-host{ margin-bottom:10px !important; } /* When document controls are already mounted in the KYC card, do not reserve an empty action footer. */ #assistant.checkout-mode.open .chat-actions.tivez-kyc-actions-empty{ display:none !important; padding:0 !important; min-height:0 !important; } /* Mobile: preserve normal typography and merely reduce dead spacing. */ @media(max-width:700px){ #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs{ margin-top:12px !important; padding:11px !important; gap:7px !important; } #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > div, #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs article{ min-height:58px !important; padding:8px 10px !important; } #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs button{ min-width:88px !important; min-height:38px !important; padding:7px 10px !important; } } /* TIVEZ_KYC_INLINE_REPAIR_FINAL_END */ /* TIVEZ_KYC_COMPACT_CURRENT_STEP_BEGIN */ /* Scope: ONLY the visible KYC/document step inside Secure Checkout. No camera geometry. No document logic. No upload/replace behavior. */ @media (max-width:700px){ html.tivez-stage2-clean #assistant.checkout-mode.open .bubble.bot:has(.kyc-request){ margin-top:7px !important; margin-bottom:7px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ padding:12px 14px !important; border-radius:18px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-step{ margin-bottom:5px !important; padding:3px 8px !important; font-size:8px !important; line-height:1.5 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ margin:2px 0 5px !important; font-size:20px !important; line-height:1.55 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ margin:0 !important; font-size:10px !important; line-height:1.75 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .privacy-note{ margin-top:9px !important; padding:9px 11px !important; border-radius:13px !important; font-size:9px !important; line-height:1.75 !important; } /* Registered documents are already embedded in this same KYC card. Reduce only their vertical footprint. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="registered"], html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="document-list"], html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="docs-list"], html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .doc-review-state{ margin-top:10px !important; padding:10px !important; gap:7px !important; border-radius:14px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="registered"] > *, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="document-list"] > *, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request [class*="docs-list"] > *{ margin-top:5px !important; margin-bottom:5px !important; } /* Upload actions remain full-size and usable; only remove unnecessary surrounding vertical air. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-actions{ margin-top:8px !important; gap:8px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-actions .camera-action, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-actions .upload-btn{ min-height:50px !important; } } /* TIVEZ_KYC_COMPACT_CURRENT_STEP_END */ /* TIVEZ_KYC_TRUE_FINAL_BEGIN */ /* FINAL KYC MOBILE FIT - Only Secure Checkout KYC - Keep typography premium/readable - Saved documents remain INSIDE current KYC card - Repair buttons remain attached to document rows - Reduce vertical footprint without tiny typography - No JS/server/camera logic changes */ @media (max-width:700px){ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat{ padding-top:3px !important; padding-bottom:3px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .bubble.bot:has(.kyc-request){ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; min-height:0 !important; height:auto !important; margin:4px 12px !important; padding:0 !important; overflow:visible !important; } /* MAIN DOCUMENT CARD Smaller than current production, but NOT visually cheap/tiny. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ box-sizing:border-box !important; width:100% !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:0 !important; padding:10px 12px !important; gap:3px 7px !important; border-radius:16px !important; overflow:visible !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .kyc-step{ margin:0 !important; padding:3px 7px !important; font-size:7.5px !important; line-height:1.25 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ margin:0 !important; padding:0 !important; font-size:17px !important; line-height:1.35 !important; font-weight:900 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ margin:0 !important; padding:0 !important; font-size:8.5px !important; line-height:1.5 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .privacy-note{ min-height:0 !important; height:auto !important; margin:4px 0 0 !important; padding:6px 8px !important; border-radius:10px !important; font-size:7.5px !important; line-height:1.5 !important; } /* REGISTERED DOCUMENTS: same card, compact, no detached giant panel. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs{ box-sizing:border-box !important; position:relative !important; inset:auto !important; width:100% !important; max-width:none !important; margin:7px 0 0 !important; padding:7px !important; display:grid !important; gap:5px !important; border-radius:12px !important; min-height:0 !important; height:auto !important; max-height:none !important; overflow:visible !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h1, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h2, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h3, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs h4{ margin:0 !important; padding:0 !important; font-size:11px !important; line-height:1.35 !important; } /* Document rows. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > div, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs article{ box-sizing:border-box !important; min-height:48px !important; height:auto !important; max-height:none !important; margin:0 !important; padding:6px 8px !important; align-items:center !important; gap:6px !important; border-radius:11px !important; } /* Repair buttons: identical geometry for every document. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs button[onclick*="replaceKycDocument"]{ box-sizing:border-box !important; width:82px !important; min-width:82px !important; max-width:82px !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 !important; padding:4px 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:8.5px !important; line-height:1 !important; white-space:nowrap !important; } /* Any legacy review state accidentally left inside card. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .doc-review-state{ min-height:0 !important; height:auto !important; margin-top:6px !important; padding:7px !important; gap:5px !important; border-radius:11px !important; } /* Camera/gallery controls only while they actually exist. */ html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .chat-actions{ margin:0 !important; padding:4px 12px !important; min-height:0 !important; height:auto !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions{ width:100% !important; margin:0 !important; padding:0 !important; gap:6px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > button, html.tivez-stage2-clean #assistant.checkout-mode.open:has(.kyc-request) .kyc-actions > label{ box-sizing:border-box !important; height:40px !important; min-height:40px !important; max-height:40px !important; margin:0 !important; padding:5px 7px !important; font-size:8px !important; line-height:1.25 !important; border-radius:11px !important; } /* Once inline repair UI exists, no empty detached footer. */ #assistant.checkout-mode.open .chat-actions.tivez-kyc-actions-empty{ display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; } } /* TIVEZ_KYC_TRUE_FINAL_END */ /* TIVEZ_KYC_ZERO_SCROLL_REAL_FINAL_BEGIN */ @media (max-width:700px){ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ box-sizing:border-box !important; padding:10px 12px !important; gap:4px 7px !important; overflow:hidden !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ font-size:17px !important; line-height:1.38 !important; margin:0 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ font-size:8.5px !important; line-height:1.55 !important; margin:0 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .privacy-note{ margin:5px 0 0 !important; padding:7px 9px !important; font-size:7.5px !important; line-height:1.55 !important; border-radius:10px !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs{ box-sizing:border-box !important; position:relative !important; inset:auto !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; max-width:none !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:7px 0 0 !important; padding:0 !important; gap:6px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h1, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h2, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h3, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h4, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > p, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > small{ display:none !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > div:has(button[onclick*="replaceKycDocument"]), html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > article:has(button[onclick*="replaceKycDocument"]){ box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; width:100% !important; min-height:48px !important; height:48px !important; max-height:48px !important; margin:0 !important; padding:5px 7px !important; gap:6px !important; border:1px solid rgba(255,255,255,.085) !important; border-radius:12px !important; background:#12171c !important; overflow:hidden !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs b{ margin:0 !important; font-size:9px !important; line-height:1.35 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs small{ margin:1px 0 0 !important; font-size:6.5px !important; line-height:1.3 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs button[onclick*="replaceKycDocument"]{ box-sizing:border-box !important; width:72px !important; min-width:72px !important; max-width:72px !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 !important; padding:0 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:8px !important; line-height:1 !important; white-space:nowrap !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .chat-actions.tivez-kyc-actions-empty{ display:none !important; min-height:0 !important; height:0 !important; margin:0 !important; padding:0 !important; } } /* TIVEZ_KYC_ZERO_SCROLL_REAL_FINAL_END */ /* TIVEZ_KYC_REAL_DOM_VISUAL_BEGIN */ @media (max-width:700px){ /* Registered documents stay INSIDE current KYC card, but only useful controls consume vertical space. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-compact{ box-sizing:border-box !important; display:grid !important; grid-template-columns:1fr !important; width:100% !important; min-width:0 !important; max-width:none !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:7px 0 0 !important; padding:6px !important; gap:5px !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius:13px !important; background:#11161b !important; box-shadow:none !important; overflow:hidden !important; } /* Remove ONLY redundant registered-doc heading/help. Main document title/privacy remain untouched. */ html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-compact .tivez-kyc-real-heading, html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-compact .tivez-kyc-real-help{ display:none !important; margin:0 !important; padding:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; overflow:hidden !important; } /* REAL registered document row. */ html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-compact .tivez-kyc-real-row{ box-sizing:border-box !important; display:grid !important; grid-template-columns: minmax(0,1fr) 86px !important; align-items:center !important; width:100% !important; min-height:48px !important; height:48px !important; max-height:48px !important; margin:0 !important; padding:6px 8px !important; gap:7px !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius:11px !important; background:#151a20 !important; overflow:hidden !important; } /* Remove inherited giant spacing from descendants of a row. */ html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-row > *{ min-height:0 !important; margin-top:0 !important; margin-bottom:0 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-row b, html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-row strong{ margin:0 !important; font-size:10px !important; line-height:1.35 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-row small{ margin:1px 0 0 !important; font-size:7px !important; line-height:1.3 !important; } /* All correction buttons are identical. */ html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-repair-button{ box-sizing:border-box !important; width:86px !important; min-width:86px !important; max-width:86px !important; height:34px !important; min-height:34px !important; max-height:34px !important; margin:0 !important; padding:0 8px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:8px !important; line-height:1 !important; white-space:nowrap !important; } /* Kill inherited empty vertical wrappers inside registered docs. Do NOT hide anything containing an actual repair button. */ html.tivez-stage2-clean #assistant.checkout-mode.open .tivez-kyc-real-compact div:empty{ display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; } /* Final KYC card must derive height from content, never from historical min-height declarations. */ html.tivez-stage2-clean #assistant.checkout-mode.open .bubble.bot:has(.kyc-request), html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ min-height:0 !important; height:auto !important; max-height:none !important; } } /* TIVEZ_KYC_REAL_DOM_VISUAL_END */ /* TIVEZ_KYC_ABSOLUTE_FINAL_BEGIN */ @media (max-width:700px){ /* FINAL CASCADE OWNER Only current Secure Checkout KYC presentation. */ html.tivez-stage2-clean #assistant.checkout-mode.open .bubble.bot:has(.kyc-request){ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:3px 12px !important; padding:0 !important; overflow:visible !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request{ box-sizing:border-box !important; width:100% !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:0 !important; padding:9px 12px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "title step" "hint hint" "privacy privacy" "saved saved" !important; gap:3px 8px !important; align-items:center !important; border-radius:17px !important; overflow:visible !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .kyc-step{ grid-area:step !important; margin:0 !important; padding:3px 7px !important; width:max-content !important; font-size:7.5px !important; line-height:1.25 !important; white-space:nowrap !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > b{ grid-area:title !important; margin:0 !important; padding:0 !important; font-size:17px !important; line-height:1.35 !important; font-weight:900 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > small{ grid-area:hint !important; display:block !important; margin:0 !important; padding:0 !important; font-size:8.5px !important; line-height:1.45 !important; } html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request > .privacy-note{ grid-area:privacy !important; min-height:0 !important; height:auto !important; margin:3px 0 0 !important; padding:5px 8px !important; font-size:7.5px !important; line-height:1.45 !important; border-radius:10px !important; } /* Saved documents already physically live inside .kyc-request. Collapse ONLY their wasted vertical space. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-compact{ grid-area:saved !important; box-sizing:border-box !important; position:relative !important; inset:auto !important; width:100% !important; max-width:none !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:4px 0 0 !important; padding:5px !important; display:grid !important; grid-template-columns:1fr !important; gap:4px !important; border-radius:11px !important; overflow:visible !important; } /* Hide ONLY redundant heading/help text of saved-document container. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h1, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h2, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h3, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > h4, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > p, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > small, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-heading, html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-help{ display:none !important; } /* REAL registered-document rows. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > div:has(button[onclick*="replaceKycDocument"]), html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-inline-repairs > article:has(button[onclick*="replaceKycDocument"]), html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-row{ box-sizing:border-box !important; width:100% !important; min-height:42px !important; height:42px !important; max-height:42px !important; margin:0 !important; padding:4px 7px !important; display:grid !important; grid-template-columns: minmax(0,1fr) 82px !important; align-items:center !important; gap:7px !important; border-radius:10px !important; overflow:hidden !important; } /* Correction buttons: fixed equal geometry. */ html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request button[onclick*="replaceKycDocument"], html.tivez-stage2-clean #assistant.checkout-mode.open .kyc-request .tivez-kyc-real-repair-button{ box-sizing:border-box !important; width:82px !important; min-width:82px !important; max-width:82px !important; height:31px !important; min-height:31px !important; max-height:31px !important; margin:0 !important; padding:0 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; font-size:8px !important; line-height:1 !important; white-space:nowrap !important; } /* Remove empty footer after document is already uploaded. */ html.tivez-stage2-clean #assistant.checkout-mode.open .chat-actions.tivez-kyc-actions-empty{ display:none !important; width:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; } } /* TIVEZ_KYC_ABSOLUTE_FINAL_END */