/* ===================================================== AI Chat Helper – Widget CSS v1.4 Targeted reset — no SVG breakage, theme font works ===================================================== */ /* ── 1. Container: inherit font from theme body ──── */ #aich-widget-container { position: fixed !important; bottom: 24px !important; z-index: 2147483647 !important; direction: rtl !important; /* font-family intentionally NOT set → inherits from = theme font */ font-size: 14px !important; line-height: 1.5 !important; -webkit-font-smoothing: antialiased !important; text-rendering: auto !important; color: #2d3436 !important; } #aich-widget-container.aich-widget--right { right: 24px !important; left: auto !important; } #aich-widget-container.aich-widget--left { left: 24px !important; right: auto !important; } /* ── 2. Box model reset — safe, does NOT touch SVG ─ */ #aich-widget-container *, #aich-widget-container *::before, #aich-widget-container *::after { box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; } /* ── 3. SVG explicit fix (some themes hide svg) ──── */ #aich-widget-container svg { display: inline-block !important; vertical-align: middle !important; overflow: visible !important; flex-shrink: 0 !important; } #aich-widget-container svg path, #aich-widget-container svg circle, #aich-widget-container svg line, #aich-widget-container svg polygon, #aich-widget-container svg polyline, #aich-widget-container svg rect, #aich-widget-container svg ellipse { vector-effect: non-scaling-stroke !important; } /* ── 4. Targeted unset on ONLY problematic elements ─ (buttons & links that themes override heavily) */ #aich-toggle-btn, #aich-send-btn, #aich-expert-btn, #aich-widget-container .aich-header-btn, #aich-widget-container .aich-faq-close { /* Hard reset inherited theme button styles */ -webkit-appearance: none !important; appearance: none !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; letter-spacing: normal !important; text-transform: none !important; text-indent: 0 !important; word-spacing: normal !important; white-space: nowrap !important; vertical-align: middle !important; } /* ── 5. Toggle Button ───────────────────────────── */ #aich-toggle-btn { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; max-width: 58px !important; max-height: 58px !important; border-radius: 50% !important; background: var(--aich-primary, #6c5ce7) !important; background-color: var(--aich-primary, #6c5ce7) !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(108,92,231,.5) !important; transition: transform .2s ease, box-shadow .2s ease !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; color: white !important; line-height: 1 !important; font-size: 0 !important; /* prevent text node gaps */ } #aich-toggle-btn:hover { transform: scale(1.1) !important; box-shadow: 0 6px 26px rgba(108,92,231,.65) !important; } #aich-toggle-btn:active { transform: scale(.94) !important; } #aich-toggle-btn:focus { box-shadow: 0 4px 20px rgba(108,92,231,.5) !important; } #aich-toggle-btn::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; background: var(--aich-primary, #6c5ce7) !important; animation: aich-pulse 2.5s ease-out infinite !important; z-index: -1 !important; pointer-events: none !important; } @keyframes aich-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } } /* Toggle icons */ #aich-widget-container .aich-toggle-icon { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity .22s, transform .25s !important; pointer-events: none !important; } #aich-widget-container .aich-toggle-icon svg { display: block !important; width: 26px !important; height: 26px !important; } #aich-widget-container .aich-toggle-icon--open { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; } #aich-widget-container .aich-toggle-icon--close { opacity: 0 !important; transform: rotate(-90deg) scale(.7) !important; } #aich-toggle-btn.is-open .aich-toggle-icon--open { opacity: 0 !important; transform: rotate(90deg) scale(.7) !important; } #aich-toggle-btn.is-open .aich-toggle-icon--close { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; } /* Badge */ #aich-badge { position: absolute !important; top: -3px !important; left: -3px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; background: #e84393 !important; background-color: #e84393 !important; color: white !important; border-radius: 50% !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; display: none; align-items: center !important; justify-content: center !important; border: 2px solid white !important; z-index: 2 !important; padding: 0 !important; pointer-events: none !important; } /* ── 6. Chat Window ─────────────────────────────── */ #aich-chat-window { position: absolute !important; bottom: 70px !important; width: 355px !important; max-height: 540px !important; background: #ffffff !important; border-radius: 18px !important; box-shadow: 0 12px 50px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(14px) scale(.95) !important; transition: opacity .25s, transform .28s cubic-bezier(.34,1.56,.64,1) !important; visibility: hidden !important; border: none !important; margin: 0 !important; padding: 0 !important; } .aich-widget--right #aich-chat-window { right: 0 !important; left: auto !important; } .aich-widget--left #aich-chat-window { left: 0 !important; right: auto !important; } #aich-chat-window.is-open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; visibility: visible !important; } /* ── 7. Header ──────────────────────────────────── */ #aich-widget-container .aich-chat-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px !important; background: var(--aich-primary, #6c5ce7) !important; flex-shrink: 0 !important; border: none !important; margin: 0 !important; min-height: 0 !important; } #aich-widget-container .aich-chat-header__left { display: flex !important; align-items: center !important; gap: 9px !important; flex: 1 !important; min-width: 0 !important; } #aich-widget-container .aich-chat-header__avatar { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; background: rgba(255,255,255,.22) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; } #aich-widget-container .aich-chat-header__avatar svg { display: block !important; width: 20px !important; height: 20px !important; } #aich-widget-container .aich-chat-header__info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } #aich-widget-container .aich-chat-header__name { display: block !important; color: white !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; } #aich-widget-container .aich-chat-header__status { display: flex !important; align-items: center !important; gap: 4px !important; color: rgba(255,255,255,.82) !important; font-size: 11px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } #aich-widget-container .aich-status-dot { display: inline-block !important; width: 7px !important; height: 7px !important; min-width: 7px !important; border-radius: 50% !important; background: #00e676 !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } #aich-widget-container .aich-chat-header__actions { display: flex !important; gap: 4px !important; align-items: center !important; flex-shrink: 0 !important; } /* Header icon buttons */ #aich-widget-container .aich-header-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; background: rgba(255,255,255,.16) !important; border-radius: 7px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; transition: background .15s !important; color: white !important; line-height: 1 !important; font-size: 0 !important; } #aich-widget-container .aich-header-btn:hover { background: rgba(255,255,255,.3) !important; } #aich-widget-container .aich-header-btn svg { display: block !important; width: 15px !important; height: 15px !important; pointer-events: none !important; } /* ── 8. FAQ Panel ───────────────────────────────── */ #aich-faq-panel { display: none; flex-direction: column !important; background: #fff !important; border-bottom: 1px solid #eef0f5 !important; flex-shrink: 0 !important; max-height: 240px !important; overflow-y: auto !important; padding: 0 !important; margin: 0 !important; } #aich-faq-panel::-webkit-scrollbar { width: 4px; } #aich-faq-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } #aich-widget-container .aich-faq-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 14px !important; background: #f8fafc !important; border-bottom: 1px solid #eef0f5 !important; font-weight: 700 !important; font-size: 13px !important; color: #2d3436 !important; position: sticky !important; top: 0 !important; z-index: 1 !important; margin: 0 !important; flex-shrink: 0 !important; } #aich-widget-container .aich-faq-close { background: transparent !important; cursor: pointer !important; font-size: 14px !important; color: #999 !important; padding: 2px 6px !important; line-height: 1 !important; border-radius: 4px !important; } #aich-widget-container .aich-faq-close:hover { color: #e74c3c !important; } #aich-widget-container .aich-faq-item { border-bottom: 1px solid #f1f3f6 !important; margin: 0 !important; padding: 0 !important; } #aich-widget-container .aich-faq-item:last-child { border-bottom: none !important; } #aich-widget-container .aich-faq-q { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; color: #2d3436 !important; background: transparent !important; transition: background .15s !important; gap: 8px !important; line-height: 1.4 !important; margin: 0 !important; border: none !important; text-align: right !important; width: 100% !important; } #aich-widget-container .aich-faq-q:hover { background: #f8fafc !important; } #aich-widget-container .aich-faq-q > span:first-child { flex: 1 !important; } #aich-widget-container .aich-faq-arrow { display: inline-block !important; color: var(--aich-primary, #6c5ce7) !important; font-size: 13px !important; flex-shrink: 0 !important; transition: transform .2s !important; line-height: 1 !important; } #aich-widget-container .aich-faq-a { display: none !important; /* hidden by default */ padding: 8px 14px 12px !important; font-size: 12.5px !important; color: #636e72 !important; line-height: 1.7 !important; white-space: pre-wrap !important; border-top: 1px dashed #eef0f5 !important; margin: 0 !important; text-align: right !important; } /* JS adds this class to open an answer */ #aich-widget-container .aich-faq-a.aich-faq-a--open { display: block !important; /* visible when open */ } /* ── 9. Messages ────────────────────────────────── */ #aich-messages { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; background: #f7f8fc !important; min-height: 0 !important; margin: 0 !important; border: none !important; list-style: none !important; } #aich-messages::-webkit-scrollbar { width: 4px; } #aich-messages::-webkit-scrollbar-thumb { background: #d0d4db; border-radius: 4px; } #aich-widget-container .aich-message { display: flex !important; align-items: flex-end !important; gap: 7px !important; animation: aich-in .22s ease !important; margin: 0 !important; padding: 0 !important; width: 100% !important; list-style: none !important; background: none !important; border: none !important; } @keyframes aich-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #aich-widget-container .aich-message--bot { flex-direction: row !important; } #aich-widget-container .aich-message--user { flex-direction: row-reverse !important; } #aich-widget-container .aich-msg-avatar { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50% !important; background: var(--aich-primary, #6c5ce7) !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; } #aich-widget-container .aich-msg-avatar svg { display: block !important; width: 13px !important; height: 13px !important; } #aich-widget-container .aich-bubble { display: block !important; max-width: 78% !important; padding: 9px 13px !important; border-radius: 14px !important; font-size: 13px !important; line-height: 1.65 !important; word-break: break-word !important; white-space: pre-wrap !important; margin: 0 !important; text-align: right !important; } #aich-widget-container .aich-message--bot .aich-bubble { background: #fff !important; color: #2d3436 !important; border-radius: 0 14px 14px 14px !important; box-shadow: 0 1px 6px rgba(0,0,0,.08) !important; border: none !important; } #aich-widget-container .aich-message--user .aich-bubble { background: var(--aich-primary, #6c5ce7) !important; color: white !important; border-radius: 14px 0 14px 14px !important; border: none !important; } #aich-widget-container .aich-bubble--error { background: #fff0f0 !important; color: #c0392b !important; border: 1px solid #ffd0d0 !important; } /* ── 10. Typing ─────────────────────────────────── */ #aich-typing { display: none; align-items: center !important; gap: 8px !important; padding: 6px 14px 4px !important; background: #f7f8fc !important; flex-shrink: 0 !important; margin: 0 !important; border: none !important; } #aich-widget-container .aich-typing-avatar { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50% !important; background: var(--aich-primary, #6c5ce7) !important; flex-shrink: 0 !important; padding: 0 !important; } #aich-widget-container .aich-typing-avatar svg { display: block !important; width: 12px !important; height: 12px !important; } #aich-widget-container .aich-typing-dots { display: flex !important; align-items: center !important; gap: 4px !important; background: white !important; padding: 9px 12px !important; border-radius: 0 14px 14px 14px !important; box-shadow: 0 1px 6px rgba(0,0,0,.08) !important; border: none !important; margin: 0 !important; } #aich-widget-container .aich-typing-dots span { display: block !important; width: 6px !important; height: 6px !important; min-width: 6px !important; min-height: 6px !important; max-width: 6px !important; max-height: 6px !important; border-radius: 50% !important; background: #b2bec3 !important; margin: 0 !important; padding: 0 !important; animation: aich-dot 1.2s infinite !important; flex-shrink: 0 !important; } #aich-widget-container .aich-typing-dots span:nth-child(2) { animation-delay: .2s !important; } #aich-widget-container .aich-typing-dots span:nth-child(3) { animation-delay: .4s !important; } @keyframes aich-dot { 0%,80%,100% { transform: scale(1); opacity: .5; } 40% { transform: scale(1.4); opacity: 1; } } /* ── 11. Expert Button ──────────────────────────── */ #aich-expert-wrap { display: none; padding: 8px 12px 0 !important; margin: 0 !important; background: white !important; border: none !important; flex-shrink: 0 !important; } #aich-expert-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; padding: 9px 14px !important; background: linear-gradient(135deg, #00b894, #00cec9) !important; color: white !important; text-decoration: none !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; cursor: pointer !important; transition: filter .15s, transform .15s !important; border: none !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; overflow: hidden !important; } #aich-expert-btn:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; color: white !important; text-decoration: none !important; } #aich-expert-btn:visited { color: white !important; } #aich-expert-btn:focus { color: white !important; } #aich-expert-btn svg { display: block !important; width: 15px !important; height: 15px !important; min-width: 15px !important; pointer-events: none !important; } #aich-expert-label { font-size: 13px !important; font-weight: 700 !important; color: white !important; line-height: 1 !important; pointer-events: none !important; } /* ── 12. Input area ─────────────────────────────── */ #aich-widget-container .aich-chat-input-area { padding: 10px 12px 8px !important; background: white !important; border-top: 1px solid #eef0f5 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; flex-shrink: 0 !important; margin: 0 !important; } #aich-widget-container .aich-chat-input-wrap { display: flex !important; align-items: flex-end !important; gap: 8px !important; background: #f7f8fc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 11px !important; padding: 6px 6px 6px 10px !important; transition: border-color .2s, box-shadow .2s !important; margin-top: 8px !important; margin-bottom: 0 !important; } #aich-widget-container .aich-chat-input-wrap:focus-within { border-color: var(--aich-primary, #6c5ce7) !important; box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important; } /* ── TEXTAREA fix (WoodMart & similar themes) ───── */ #aich-input { /* Reset theme overrides */ -webkit-appearance: none !important; appearance: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; /* Sizing — NO fixed height, JS sets it via scrollHeight */ display: block !important; flex: 1 !important; width: 100% !important; height: auto !important; min-height: 24px !important; max-height: 100px !important; padding: 3px 0 !important; margin: 0 !important; /* Typography */ font-size: 13px !important; color: #2d3436 !important; line-height: 1.5 !important; /* Layout */ resize: none !important; overflow-y: hidden !important; direction: rtl !important; text-align: right !important; word-break: break-word !important; white-space: pre-wrap !important; vertical-align: top !important; } #aich-input::placeholder { color: #b2bec3 !important; opacity: 1 !important; } #aich-input:focus { outline: none !important; box-shadow: none !important; border: none !important; } /* ── SEND BUTTON fix ────────────────────────────── */ #aich-send-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; border-radius: 9px !important; background: var(--aich-primary, #6c5ce7) !important; background-color: var(--aich-primary, #6c5ce7) !important; background-image: none !important; cursor: pointer !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; transition: filter .15s, transform .15s !important; color: white !important; line-height: 1 !important; font-size: 0 !important; align-self: flex-end !important; } #aich-send-btn:hover:not(:disabled) { filter: brightness(1.12) !important; transform: scale(1.06) !important; } #aich-send-btn:focus { box-shadow: none !important; } #aich-send-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } #aich-send-btn svg { display: block !important; width: 17px !important; height: 17px !important; pointer-events: none !important; } /* Powered by */ #aich-widget-container .aich-powered-by { display: block !important; text-align: center !important; font-size: 10px !important; color: #b2bec3 !important; margin: 6px 0 0 !important; padding: 0 !important; line-height: 1.4 !important; background: none !important; border: none !important; } #aich-widget-container .aich-powered-by strong { font-weight: 700 !important; color: #b2bec3 !important; } /* ── 13. Mobile ─────────────────────────────────── */ @media (max-width: 480px) { #aich-widget-container.aich-widget--right { right: 14px !important; } #aich-widget-container.aich-widget--left { left: 14px !important; } #aich-toggle-btn { width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important; max-width:52px !important; max-height:52px !important; } #aich-chat-window { width: calc(100vw - 28px) !important; max-height: 75vh !important; bottom: 66px !important; } .aich-widget--right #aich-chat-window { right: -6px !important; left: auto !important; } .aich-widget--left #aich-chat-window { left: -6px !important; right: auto !important; } } /* ══════════════════════════════════════════════ Pre-chat Form ══════════════════════════════════════════════ */ #aich-prechat-form { flex: 1 !important; overflow-y: auto !important; background: #f7f8fc !important; min-height: 0 !important; } #aich-widget-container .aich-prechat-body { padding: 24px 20px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0 !important; } #aich-widget-container .aich-prechat-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: var(--aich-primary, #6c5ce7) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 14px !important; box-shadow: 0 4px 16px rgba(108,92,231,.35) !important; flex-shrink: 0 !important; } #aich-widget-container .aich-prechat-title { font-size: 15px !important; font-weight: 700 !important; color: #2d3436 !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.4 !important; text-align: center !important; border: none !important; } #aich-widget-container .aich-prechat-subtitle { font-size: 12px !important; color: #636e72 !important; margin: 0 0 18px !important; padding: 0 !important; line-height: 1.5 !important; text-align: center !important; } #aich-widget-container .aich-prechat-fields { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } #aich-widget-container .aich-prechat-field-wrap { display: flex !important; flex-direction: column !important; gap: 4px !important; text-align: right !important; } #aich-widget-container .aich-prechat-label { font-size: 12px !important; font-weight: 600 !important; color: #2d3436 !important; display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; } #aich-widget-container .aich-required { color: #e74c3c !important; font-size: 12px !important; } #aich-widget-container .aich-optional { color: #b2bec3 !important; font-size: 11px !important; font-weight: 400 !important; } #aich-widget-container .aich-prechat-input { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 9px !important; padding: 0 11px !important; font-size: 13px !important; color: #2d3436 !important; background: white !important; background-color: white !important; outline: none !important; box-shadow: none !important; transition: border-color .2s !important; text-align: right !important; margin: 0 !important; line-height: 38px !important; } #aich-widget-container .aich-prechat-input:focus { border-color: var(--aich-primary, #6c5ce7) !important; box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important; } #aich-widget-container .aich-prechat-input::placeholder { color: #b2bec3 !important; opacity: 1 !important; } #aich-widget-container .aich-prechat-error { display: none; background: #fff0f0 !important; border: 1px solid #fecaca !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 12px !important; color: #c0392b !important; text-align: right !important; line-height: 1.5 !important; } #aich-widget-container .aich-prechat-submit { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 42px !important; min-height: 42px !important; border: none !important; border-radius: 10px !important; background: var(--aich-primary, #6c5ce7) !important; background-color: var(--aich-primary, #6c5ce7) !important; color: white !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; margin-top: 4px !important; padding: 0 !important; outline: none !important; box-shadow: 0 3px 12px rgba(108,92,231,.35) !important; transition: filter .15s, transform .15s !important; line-height: 1 !important; } #aich-widget-container .aich-prechat-submit:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; } #aich-widget-container .aich-prechat-submit:disabled { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; } #aich-widget-container .aich-prechat-submit svg { display: block !important; flex-shrink: 0 !important; pointer-events: none !important; } /* ══════════════════════════════════════════════ Pre-chat Inline Form (inside messages area) ══════════════════════════════════════════════ */ #aich-widget-container .aich-prechat-inline { width: 100% !important; background: white !important; border-radius: 0 14px 14px 14px !important; box-shadow: 0 2px 12px rgba(0,0,0,.1) !important; padding: 16px !important; margin: 0 !important; animation: aich-in .25s ease !important; border: none !important; display: block !important; } #aich-widget-container .aich-pci-title { font-size: 13.5px !important; font-weight: 700 !important; color: #2d3436 !important; margin: 0 0 4px !important; padding: 0 !important; line-height: 1.4 !important; text-align: right !important; border: none !important; } #aich-widget-container .aich-pci-sub { font-size: 11.5px !important; color: #636e72 !important; margin: 0 0 12px !important; padding: 0 !important; line-height: 1.5 !important; text-align: right !important; } #aich-widget-container .aich-pci-field { display: flex !important; flex-direction: column !important; gap: 3px !important; margin-bottom: 8px !important; } #aich-widget-container .aich-pci-lbl { font-size: 11px !important; font-weight: 600 !important; color: #636e72 !important; display: block !important; text-align: right !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; } #aich-widget-container .aich-pci-req { color: #e74c3c !important; font-size: 11px !important; } #aich-widget-container .aich-pci-opt { color: #b2bec3 !important; font-size: 10px !important; font-weight: 400 !important; } #aich-widget-container .aich-pci-input { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important; padding: 0 10px !important; font-size: 12.5px !important; color: #2d3436 !important; background: #f8fafc !important; background-color: #f8fafc !important; outline: none !important; box-shadow: none !important; margin: 0 !important; line-height: 34px !important; transition: border-color .2s !important; text-align: right !important; } #aich-widget-container .aich-pci-input:focus { border-color: var(--aich-primary,#6c5ce7) !important; box-shadow: 0 0 0 3px rgba(108,92,231,.1) !important; background: white !important; background-color: white !important; } #aich-widget-container .aich-pci-input::placeholder { color:#b2bec3 !important; opacity:1 !important; } #aich-widget-container .aich-pci-err { display: none; font-size: 11.5px !important; color: #c0392b !important; background: #fff0f0 !important; border: 1px solid #fecaca !important; border-radius: 7px !important; padding: 6px 10px !important; margin-bottom: 6px !important; text-align: right !important; line-height: 1.5 !important; } #aich-widget-container .aich-pci-btn { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row-reverse !important; gap: 6px !important; width: 100% !important; height: 38px !important; min-height: 38px !important; border: none !important; border-radius: 9px !important; background: var(--aich-primary,#6c5ce7) !important; background-color: var(--aich-primary,#6c5ce7) !important; color: white !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; padding: 0 !important; margin-top: 4px !important; outline: none !important; box-shadow: 0 2px 10px rgba(108,92,231,.3) !important; transition: filter .15s, transform .15s !important; line-height: 1 !important; } #aich-widget-container .aich-pci-btn:hover { filter:brightness(1.1) !important; transform:translateY(-1px) !important; } #aich-widget-container .aich-pci-btn:disabled { opacity:.6 !important; cursor:not-allowed !important; transform:none !important; } #aich-widget-container .aich-pci-btn svg { display:block !important; flex-shrink:0 !important; pointer-events:none !important; }