:root{ /* === THEME TOKENS (match Bargheto) === */ --bgt-primary: #0B5FFF; /* main blue */ --bgt-link: #155BFF; /* links */ --bgt-cta: #3b82f6; /* CTA buttons (updated) */ /* CTA buttons */ --bgt-secondary: #111827; /* ink */ --bgt-accent: #22C55E; /* accent */ --bgt-bg: #F5F7FB; /* soft bg */ --bgt-line: #E5E7EB; /* borders */ --bgt-card: #FFFFFF; /* surfaces */ /* Chat column width used for chat box and composer */ --chat-col-width: 53vw; } /* ====== Local font: IRANYekanX FaNum ====== */ @font-face { font-family: 'IRANYekanXFaNum'; src: url('fonts/IRANYekanXFaNum-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANYekanXFaNum'; src: url('fonts/IRANYekanXFaNum-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANYekanXFaNum'; src: url('fonts/IRANYekanXFaNum-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANYekanXFaNum'; src: url('fonts/IRANYekanXFaNum-DemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANYekanXFaNum'; src: url('fonts/IRANYekanXFaNum-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Force this font across the app */ html, body, button, input, textarea, select { font-family: 'IRANYekanXFaNum', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } /* minimal, conflict-free helpers */ .theme-primary{color:var(--bgt-primary)} .theme-link{color:var(--bgt-link)} .bg-soft{background:var(--bgt-bg)} .text-ink{color:var(--bgt-secondary)} .border-line{border-color:var(--bgt-line)} .bg-card{background:var(--bgt-card)} .rounded-2xl{border-radius:1.25rem} .shadow-soft{box-shadow:0 8px 24px rgba(16,24,40,.06)} .chip{border:1px solid var(--bgt-line); background:color-mix(in srgb, var(--bgt-primary) 6%, transparent)} .bg-primary-10{background:color-mix(in srgb, var(--bgt-primary) 10%, transparent)} a{color:var(--bgt-link)} a:hover{color:color-mix(in srgb, var(--bgt-link) 86%, black)} .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.375rem; padding:.75rem 1.25rem; font-weight:600} .btn-primary{background:#2196F3; color:#fff; border:1.5px solid #2196F3} .btn-primary:hover{background:color-mix(in srgb, #2196F3 88%, black); border-color:#2196F3} .btn-outline{background:#fff; border:1px solid var(--bgt-primary); color:var(--bgt-primary)} .btn-outline:hover{background:color-mix(in srgb, var(--bgt-primary) 6%, #fff)} .text-Blue-600{color:var(--bgt-link)!important} .border-Blue-600{border-color:var(--bgt-link)!important} .text-Gray-700{color:#374151!important} .text-Gray-950{color:#0b1220!important} .text-Neutral-550{color:#6b7280!important} .border-Neutral-100{border-color:#e5e7eb!important} .bg-Neutral-50{background:#f8fafc!important} .bg-Neutral-400{background:#9ca3af!important} /* Custom components */ .faq-toggle, .faq-toggle .question-text, .faq-toggle .question-icon{transition:none!important} .faq-toggle:focus{outline:2px solid color-mix(in srgb, var(--bgt-link) 25%, transparent); outline-offset:2px} .faq-item{border-radius:12px} .chat-box { width: var(--chat-col-width); margin: 0 auto; max-width: none; box-sizing: border-box; } @media (max-width: 768px) { .chat-box { width: 100%; } } .chat-screen { background: transparent; border: 0; border-radius: 0; padding: 0; } @media (min-width: 768px) { .chat-screen { padding: 0; } } /* Page no-scroll layout */ html, body { height: 100%; } html, body { overflow-x: hidden; } /* Ensure the whole viewport keeps the soft background */ html { background: var(--bgt-bg) !important; } html { scroll-behavior: smooth; } /* Ensure Tailwind 'bg-white' on is overridden */ body { display: flex; flex-direction: column; overflow-y: auto; background: var(--bgt-bg) !important; } .page-main { flex: 1 1 auto; min-height: calc(100vh - 64px); } .chat-outer { display: flex; align-items: stretch; justify-content: center; padding-inline: 0 !important; } #demo { display: flex; flex-direction: column; width: var(--chat-col-width); max-width: none; margin-inline: auto; } @media (max-width: 768px) { #demo { width: 100%; } } .chat-screen { overflow: visible; padding-top: 32px; display:flex; flex-direction: column; } /* Removed background overlay above composer for a clean end of messages */ @media (max-width: 640px) { .typing-bar { bottom: calc(120px + 8px); } } /* Chat bubbles: better typography and multiline */ .chat-screen > div { white-space: pre-wrap; /* keep line breaks from streaming */ line-height: 1.9; /* easier reading */ word-break: break-word; /* avoid overflow on long tokens */ overflow-wrap: anywhere; /* aggressive wrap for mixed LTR/RTL */ direction: rtl; /* Persian-first inside bubbles */ unicode-bidi: plaintext; /* fix mixed numbers/English */ } /* Optional hooks when JS assigns roles */ .msg { white-space: inherit; display: flex; flex-direction: column; } /* Align bubbles by margins, not align-self, to avoid RTL/LTR quirks */ .msg-user { margin-left: auto; margin-right: 0; text-align: right; } .msg-assistant { margin-right: auto; margin-left: 0; text-align: right; } /* Composer fixed at page bottom */ .composer { position: fixed; left: 0; right: 0; width: var(--chat-col-width); /* match chat column */ margin-inline: auto; bottom: 0; background: var(--bgt-bg); z-index: 999; padding-bottom: calc(env(safe-area-inset-bottom) + 8px); /* Align inner content with chat box padding */ padding-inline: 1.5rem; box-sizing: border-box; border-top: 0 !important; /* we draw the separator ourselves edge-to-edge */ } @media (max-width: 768px) { .composer { width: 100%; padding-inline: 1rem; } } @media (min-width: 768px) { .composer { padding-inline: 1.75rem; } } /* Reserve space so messages don't hide behind composer */ .chat-screen { padding-bottom: 160px; } @media (max-width: 640px) { .chat-screen { padding-bottom: 120px; } } /* Typing placeholder style */ .is-typing { color: #9aa3af; min-width: 6ch; } /* Dedicated typing indicator pinned above the composer */ .typing-bar { position: fixed; left: 0; right: 0; width: var(--chat-col-width); margin-inline: auto; bottom: calc(160px + 8px); /* just above reserved space */ text-align: center; color: #6b7280; font-size: 12px; line-height: 1; display: none; pointer-events: none; z-index: 998; /* under composer (999) */ } @media (max-width: 768px) { .typing-bar { width: 100%; } } .typing-bar.active { display: block; } /* Edge‑to‑edge separator above the composer */ .composer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--bgt-line); } .composer input { flex: 1 1 auto; max-width: calc(100% - 160px); /* leave breathing room next to button */ border-radius: .375rem; } .composer input:focus { border-color: #2196F3 !important; /* match send button */ border-width: 1px !important; /* thinner than ring-2 look */ box-shadow: none !important; /* remove Tailwind focus ring */ } .composer button { flex: 0 0 auto; } /* Mobile: let the input expand as much as possible alongside the button */ @media (max-width: 768px) { .composer input { max-width: 100%; } } /* Tighter bubbles for a slimmer conversation column */ .msg-user, .msg-assistant { width: fit-content; max-width: min(62%, 28rem); } @media (max-width: 640px) { .msg-user, .msg-assistant { max-width: 92%; } } /* Header brand */ .brand-logo { height: 28px; width: auto; display: block; } .brand-name { font-weight: 800; } /* Login button (outlined) */ .login-btn { border: 1.5px solid #2196F3; color: #2196F3; background: #ffffff; border-radius: 10px; padding: 8px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 40px; line-height: 1; flex-direction: row-reverse; box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .login-btn:hover { background: color-mix(in srgb, #2196F3 8%, #fff); } .login-arrow { display: inline-flex; line-height: 1; opacity: .85; transform: none; } /* ===== Desktop primary menu ===== */ #primary-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; align-items: center; } #primary-menu > li { position: relative; } #primary-menu a { color: #374151; text-decoration: none; padding: 8px 10px; display: inline-block; font-weight: 400; white-space: nowrap; word-break: keep-all; } #primary-menu a:hover { color: var(--bgt-link); text-decoration: none; } #primary-menu .current-menu-item > a { color: var(--bgt-link); text-decoration: none; } #primary-menu .sub-menu { display: block; position: absolute; right: 0; top: 60%; min-width: 200px; background: #fff; box-shadow: none; border: 1px solid var(--bgt-line); border-radius: 16px; padding: 18px 0; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .4s; z-index: 99; text-align: right; visibility: hidden; } li#menu-item-2147 { margin-bottom: -40px; padding-bottom: 40px; } #primary-menu li:hover > .sub-menu, #primary-menu li:focus-within > .sub-menu { display: block; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } #primary-menu .sub-menu li { width: 100%; padding: 0; } #primary-menu .sub-menu li a { display: block; width: 100%; padding: 14px 18px 14px 0; border-radius: 8px; transition: background 0.15s; line-height: 1.9; text-align: right; margin: 0; } #primary-menu .sub-menu li a:hover, #primary-menu .sub-menu li a:focus { background: #f4f6fa; } /* CTA buttons within menu */ #primary-menu #menu-item-2794 > a, #primary-menu #menu-item-3895 > a { border: 1px solid #ff7b00; border-radius: 10px; padding: 8px 18px; transition: all 0.2s ease; background: transparent; display: inline-block; text-align: center; white-space: nowrap; } #primary-menu #menu-item-2794 > a:hover, #primary-menu #menu-item-3895 > a:hover { background: #fff7f0; color: #ff7b00; } /* ===== Mobile menu ===== */ @media (max-width: 992px) { .menu-main-container { background: #fff; border-radius: 12px; width: 100%; max-width: 320px; overflow: hidden; direction: rtl; } ul.sub-menu { list-style: none !important; margin-right: 0 !important; } div#menu { background: #3e3e3ebf; } #mobile-menu { list-style: none; padding: 0; margin: 0; gap: 12px; } #mobile-menu li { width: 100%; position: relative; } #mobile-menu > li > a { display: flex; justify-content: space-between; align-items: center; color: #333; text-decoration: none; padding: 14px 20px; transition: all 0.3s ease; border-bottom: 1px solid #eee; } #mobile-menu > li > a:hover { background-color: #f9f9f9; color: #0072ff; } .menu-item-has-children > a::after { content: "▾"; font-size: 14px; transition: transform 0.3s ease; margin-right: 8px; } .menu-item-has-children.active > a::after { transform: rotate(-180deg); } .sub-menu { max-height: 0; overflow: hidden; background: #fafafa; transition: max-height 0.4s ease, opacity 0.4s ease; opacity: 0; } .menu-item-has-children.active .sub-menu { max-height: 500px; opacity: 1; } .sub-menu li a { display: block; padding: 12px 30px; color: #555; text-decoration: none; border-bottom: 1px solid #eee; transition: all 0.3s ease; } .sub-menu li a:hover { background: #f0f0f0; color: #0072ff; } }