/* Sinora Concierge — static-preview integration (premium AI concierge, dark/gold) * Assistant V2 visual parity pass. The canonical widget.js still owns behavior: * - overlay is portaled to as .sinora-concierge__overlay--portaled * - sticky header/footer, scrollable body, [hidden] -> display:none, body lock unchanged * - visible V2 shell uses current data-sc-* hooks directly */ /* ============================================================= TOKENS ===== */ .sinora-concierge-hero { /* refined, less-neon Sinora gold */ --sc-gold: #d8ad55; --sc-gold-soft: #ecc874; --sc-gold-bright: #f6d99e; --sc-gold-deep: #a87b30; --sc-bg: #050910; --sc-bg-2: #0a121f; --sc-ivory: #f3f0ea; --sc-muted: rgba(231, 238, 250, 0.74); --sc-surface: rgba(10, 16, 28, 0.7); --sc-surface-2: rgba(15, 23, 38, 0.86); --sc-surface-elevated: linear-gradient(180deg, rgba(15, 23, 39, 0.94), rgba(8, 14, 25, 0.93)); --sc-card: linear-gradient(165deg, rgba(17, 26, 44, 0.94) 0%, rgba(10, 16, 29, 0.95) 60%, rgba(8, 13, 24, 0.96) 100%); --sc-glass: rgba(255, 255, 255, 0.05); --sc-text: #f6f4ed; --sc-text-muted: rgba(186, 197, 217, 0.84); --sc-border: rgba(255, 255, 255, 0.10); --sc-hairline: linear-gradient(140deg, rgba(236, 200, 116, 0.55) 0%, rgba(255, 255, 255, 0.07) 44%, rgba(236, 200, 116, 0.16) 100%); /* fills: refined champagne gold (calm, not bright) */ --sc-accent: linear-gradient(135deg, #f2d595 0%, #e3bd6e 40%, #c89a47 100%); --sc-accent-bright: linear-gradient(135deg, #ffe7b0 0%, #ecc879 100%); --sc-accent-solid: #d8ad55; --sc-bot-bubble: linear-gradient(180deg, rgba(23, 33, 52, 0.78), rgba(14, 22, 38, 0.8)); /* user bubble: muted champagne — premium, not too bright */ --sc-user-bubble: linear-gradient(135deg, #ecd093 0%, #d9b264 55%, #c39a4c 100%); --sc-user-text: #2a1d05; --sc-focus: #ecc874; --sc-ring: 0 0 0 3px rgba(236, 200, 116, 0.28); --sc-radius-2xl: 28px; --sc-radius-xl: 24px; --sc-radius-lg: 20px; --sc-radius-md: 14px; --sc-radius-sm: 10px; --sc-radius-pill: 999px; --sc-font-display: "Geist", "Inter", system-ui, sans-serif; --sc-font-body: "Inter", system-ui, sans-serif; --sc-font-fa-display: "w_Ray Extra Black", "Ray", IranSans, sans-serif; --sc-shadow: 0 40px 100px -34px rgba(0, 0, 0, 0.82), 0 12px 34px -18px rgba(0, 0, 0, 0.55); --sc-shadow-gold: 0 14px 36px -16px rgba(216, 170, 75, 0.5); --sc-glow: 0 0 60px -10px rgba(236, 200, 116, 0.22); --sc-avatar: 30px; --sc-avatar-gap: 10px; position: relative; z-index: 11; width: 100%; max-width: 100%; overflow-x: clip; isolation: isolate; margin-top: clamp(8px, 1.5vw, 20px); padding: clamp(40px, 4.2vw, 68px) clamp(16px, 2vw, 40px) clamp(40px, 4vw, 64px); background: radial-gradient(135% 125% at 116% 132%, transparent 49.2%, rgba(236, 200, 116, 0.09) 50%, transparent 50.9%), radial-gradient(125% 120% at -16% -22%, transparent 49.3%, rgba(236, 200, 116, 0.055) 50%, transparent 50.8%), radial-gradient(70% 120% at 88% -10%, rgba(236, 200, 116, 0.13), transparent 52%), radial-gradient(60% 110% at 2% 4%, rgba(76, 108, 184, 0.08), transparent 48%), linear-gradient(180deg, #060b14 0%, #070d17 46%, #05080f 100%); color: var(--sc-ivory); scroll-margin-bottom: 120px; } .sinora-concierge-hero *, .sinora-concierge-hero *::before, .sinora-concierge-hero *::after { box-sizing: border-box; } /* restrained gold light-line: premium motion, disabled under reduced motion */ .sinora-concierge-hero::before { content: ""; position: absolute; inset: -25% -12%; pointer-events: none; z-index: 0; background: linear-gradient(115deg, transparent 40%, rgba(246, 217, 158, 0.07) 47%, rgba(236, 200, 116, 0.16) 50%, rgba(246, 217, 158, 0.07) 53%, transparent 60%); background-size: 280% 280%; background-position: 14% 0%; filter: blur(2px); opacity: 0.6; animation: scHeroStreak 17s ease-in-out infinite; } /* intentional hero -> concierge separator: a refined centred gold hairline */ .sinora-concierge-hero::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(280px, 60%); height: 1px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent, rgba(236, 200, 116, 0.55), transparent); } .sinora-concierge-hero__shell { position: relative; z-index: 1; width: min(100%, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .sinora-concierge-hero__copy { min-width: 0; } .sinora-concierge-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--sc-gold-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; } .sinora-concierge-hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-gold-soft); box-shadow: 0 0 0 4px rgba(236, 200, 116, 0.12), 0 0 12px rgba(236, 200, 116, 0.85); } .sinora-concierge-hero__title { margin: 14px 0 0; font-family: var(--sc-font-display); font-size: clamp(1.85rem, 3.3vw, 2.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: #fff; } .sinora-concierge-hero__title span { background: linear-gradient(135deg, #f6d99e 0%, #e3bd6e 55%, #cf9f4c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--sc-gold); } [dir="rtl"] .sinora-concierge-hero__title, html[lang^="fa"] .sinora-concierge-hero__title { font-family: var(--sc-font-fa-display) !important; font-weight: 900; line-height: 1.42 !important; letter-spacing: 0; } html[dir="rtl"] .sinora-concierge-hero h2.sinora-concierge-hero__title, html[lang^="fa"] .sinora-concierge-hero h2.sinora-concierge-hero__title { font-family: var(--sc-font-fa-display) !important; font-weight: 900; line-height: 1.42 !important; letter-spacing: 0; } [dir="rtl"] .sinora-concierge-hero__eyebrow, html[lang^="fa"] .sinora-concierge-hero__eyebrow { font-family: var(--sc-font-fa-display) !important; font-weight: 900; line-height: 1.42 !important; letter-spacing: 0; } .sinora-concierge-hero__text { margin: 14px 0 0; max-width: 34rem; color: var(--sc-muted); font-size: 15px; line-height: 1.85; } [dir="rtl"] .sinora-concierge-hero__text, html[lang^="fa"] .sinora-concierge-hero__text { margin-left: auto; } /* ============================================== WIDGET ROOT / RESTING ===== */ .sinora-concierge-hero .sinora-concierge { position: relative; font-family: var(--sc-font-body); color: var(--sc-text); width: 100%; max-width: none; margin: 0; min-width: 0; } /* soft ambient light behind the resting card — premium "command surface" glow */ .sinora-concierge-hero .sinora-concierge::before { content: ""; position: absolute; inset: -14% -8%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(236, 200, 116, 0.13), transparent 76%); filter: blur(22px); } .sinora-concierge-hero .sinora-concierge__resting { position: relative; z-index: 1; padding: clamp(1.25rem, 2.6vw, 1.7rem); border: 1px solid transparent; border-radius: var(--sc-radius-2xl); background: var(--sc-card) padding-box, var(--sc-hairline) border-box; box-shadow: var(--sc-shadow), var(--sc-glow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* premium top sheen + faint inner top light on the resting card */ .sinora-concierge-hero .sinora-concierge__resting::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 46%; border-radius: var(--sc-radius-2xl) var(--sc-radius-2xl) 0 0; background: radial-gradient(120% 100% at 50% 0%, rgba(236, 200, 116, 0.06), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent); pointer-events: none; } /* scroll-linked reveal on supported browsers; static + fully visible otherwise */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .sinora-concierge-hero .sinora-concierge__resting { animation: scReveal linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; } } } @keyframes scReveal { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: none; } } .sinora-concierge-hero .sinora-concierge__composer-row { position: relative; z-index: 1; display: flex; gap: 0.6rem; align-items: stretch; } /* ===================================================== INPUTS / FIELDS ===== */ /* composer inputs carry a subtle AI sparkle on the left (background-image so it * survives focus colour changes and both row/column layouts) */ .sinora-concierge-hero .sinora-concierge__input, .sinora-concierge__overlay--portaled .sinora-concierge__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3bd6e'%3E%3Cpath d='M12 3l1.7 6.6L20 11l-6.3 1.4L12 21l-1.7-6.6L4 11l6.3-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 15px center; background-size: 17px 17px; } .sinora-concierge-hero .sinora-concierge__input { flex: 1; min-width: 0; min-height: 56px; padding: 0.9rem 1.05rem 0.9rem 2.85rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background-color: var(--sc-surface); color: var(--sc-text); font: inherit; font-size: 0.9375rem; line-height: 1.45; transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .sinora-concierge-hero .sinora-concierge__input::placeholder { color: var(--sc-text-muted); } .sinora-concierge-hero .sinora-concierge__input:hover { border-color: rgba(236, 200, 116, 0.4); } .sinora-concierge-hero .sinora-concierge__input:focus { outline: none; border-color: var(--sc-gold-soft); background-color: var(--sc-surface-2); box-shadow: var(--sc-ring), 0 0 30px -8px rgba(236, 200, 116, 0.35); } /* shared visible focus ring for keyboard users */ .sinora-concierge-hero .sinora-concierge__input:focus-visible, .sinora-concierge-hero .sinora-concierge__chip:focus-visible, .sinora-concierge-hero .sinora-concierge__btn:focus-visible, .sinora-concierge-hero .sinora-concierge__close:focus-visible, .sinora-concierge-hero .sinora-concierge__checkbox:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; } /* ============================================================ BUTTONS ===== */ .sinora-concierge-hero .sinora-concierge__btn { position: relative; flex-shrink: 0; min-height: 56px; padding: 0.8rem 1.6rem; border: none; border-radius: var(--sc-radius-md); background: var(--sc-accent); color: var(--sc-user-text); font: inherit; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; overflow: hidden; box-shadow: var(--sc-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease; } .sinora-concierge-hero .sinora-concierge__btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 20px 44px -16px rgba(216, 170, 75, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .sinora-concierge-hero .sinora-concierge__btn:active:not(:disabled) { transform: translateY(0); } .sinora-concierge-hero .sinora-concierge__btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* restrained sheen sweep on hover (not on the WhatsApp btn — it uses ::before) */ .sinora-concierge-hero .sinora-concierge__btn:not(.sinora-concierge__btn--whatsapp)::before, .sinora-concierge__overlay--portaled .sinora-concierge__btn:not(.sinora-concierge__btn--whatsapp)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%); transform: translateX(-130%); } @media (prefers-reduced-motion: no-preference) { .sinora-concierge-hero .sinora-concierge__btn:not(.sinora-concierge__btn--whatsapp):hover:not(:disabled)::before, .sinora-concierge__overlay--portaled .sinora-concierge__btn:not(.sinora-concierge__btn--whatsapp):hover:not(:disabled)::before { animation: scSheen 0.8s ease; } } @keyframes scSheen { to { transform: translateX(130%); } } /* send buttons get a quiet directional cue */ .sinora-concierge-hero [data-sc-resting-send]::after, .sinora-concierge-hero [data-sc-overlay-send]::after, .sinora-concierge__overlay--portaled [data-sc-overlay-send]::after { content: "\2192"; margin-inline-start: 0.45rem; font-weight: 600; } .sinora-concierge-hero .sinora-concierge__btn--secondary { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-border); box-shadow: none; } /* ============================================================== CHIPS ===== */ .sinora-concierge-hero .sinora-concierge__chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; } .sinora-concierge-hero .sinora-concierge__chip { position: relative; appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(236, 200, 116, 0.28); background: linear-gradient(180deg, rgba(236, 200, 116, 0.08), rgba(255, 255, 255, 0.018)); color: var(--sc-text); border-radius: var(--sc-radius-pill); padding: 0.62rem 1.1rem; min-height: 42px; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.35; cursor: pointer; text-align: start; max-width: 100%; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease, color 0.2s ease; } /* "smart suggestion" affordance: an arrow that reveals on hover/focus */ .sinora-concierge-hero .sinora-concierge__chip::after { content: "\2192"; font-weight: 600; color: var(--sc-gold-soft); opacity: 0; max-width: 0; margin-inline-start: 0; overflow: hidden; transition: opacity 0.2s ease, max-width 0.2s ease, margin-left 0.2s ease; } .sinora-concierge-hero .sinora-concierge__chip:hover:not(:disabled), .sinora-concierge-hero .sinora-concierge__chip:focus-visible { border-color: rgba(236, 200, 116, 0.6); background: linear-gradient(180deg, rgba(236, 200, 116, 0.18), rgba(236, 200, 116, 0.05)); transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(216, 170, 75, 0.65); } .sinora-concierge-hero .sinora-concierge__chip:hover:not(:disabled)::after, .sinora-concierge-hero .sinora-concierge__chip:focus-visible::after { opacity: 1; max-width: 1.2em; margin-inline-start: 0.1rem; } .sinora-concierge-hero .sinora-concierge__chip:active:not(:disabled) { transform: translateY(0); } .sinora-concierge-hero .sinora-concierge__chip:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================= HERO V2 (ASSISTANT SHELL) === */ /* Large premium two-column assistant hero. Reuses the concierge --sc-* tokens * declared on .sinora-concierge-hero above and the canonical composer hooks * (data-sc-resting-input / data-sc-resting-send) so widget.js stays the single * behavioral owner. Turkish (LTR) and Persian (RTL) share one anatomy; RTL is * driven by [dir="rtl"] + html[lang^="fa"]. No legacy bridge dependency. */ /* copy column carries the editorial block + suggestion chips, so it gets the * slightly wider track; both columns top-align (their heights differ). */ .sinora-concierge-hero__shell { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .sinora-concierge-hero__copy { align-self: center; } /* ---- badge (state-forward eyebrow) ---- */ .sinora-concierge-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid rgba(236, 200, 116, 0.18); border-radius: var(--sc-radius-pill); background: rgba(255, 255, 255, 0.02); color: var(--sc-gold-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .sinora-concierge-hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-gold-soft); box-shadow: 0 0 10px rgba(236, 200, 116, 0.8); animation: scHeroPulse 3.6s ease-in-out infinite; } /* ---- suggested quick-start prompts (static, in the copy column) ---- */ .sinora-concierge-hero__suggest { margin-top: clamp(20px, 3vw, 30px); } .sinora-concierge-hero__suggest-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--sc-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .sinora-concierge-hero__suggest-label::before { content: "\2726"; color: var(--sc-gold-soft); font-size: 11px; line-height: 1; } .sinora-concierge-hero .sinora-concierge-hero__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .sinora-concierge-hero .sinora-concierge-hero__chip { position: relative; appearance: none; display: flex; align-items: flex-start; gap: 9px; min-height: 44px; border: 1px solid var(--sc-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); color: #dfe6f1; border-radius: var(--sc-radius-md); padding: 12px 13px; font: inherit; font-size: 12.5px; line-height: 1.45; text-align: start; cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.2s ease; } .sinora-concierge-hero .sinora-concierge-hero__chip::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--sc-gold-soft); box-shadow: 0 0 8px rgba(236, 200, 116, 0.55); } .sinora-concierge-hero .sinora-concierge-hero__chip::after { content: none; } .sinora-concierge-hero .sinora-concierge-hero__chip:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(236, 200, 116, 0.4); background: rgba(236, 200, 116, 0.07); color: #fff; } .sinora-concierge-hero .sinora-concierge-hero__chip:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; border-color: rgba(236, 200, 116, 0.4); color: #fff; } .sinora-concierge-hero .sinora-concierge-hero__chip.is-selected { border-color: rgba(236, 200, 116, 0.55); background: rgba(236, 200, 116, 0.11); color: #fff; } /* ---- panel: the assistant card that hosts the composer + portaled chat ---- * The panel sits inside the single [data-sinora-concierge] section root, so the * base ambient glow (.sinora-concierge-hero .sinora-concierge::before) already * sits behind it; here we only add the card surface itself. */ .sinora-concierge-hero__panel { padding: clamp(18px, 2.1vw, 26px); border-radius: var(--sc-radius-xl); border: 1px solid rgba(236, 200, 116, 0.18); background: linear-gradient(180deg, #16202f, #0f1825); box-shadow: 0 36px 90px -40px rgba(0, 0, 0, 0.8), 0 10px 30px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .sinora-concierge-hero__panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(236, 200, 116, 0.10), transparent 30%); } .sinora-concierge-hero__panel-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .sinora-concierge-hero__brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .sinora-concierge-hero__brand-name { display: block; color: #fff; font-family: var(--sc-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .sinora-concierge-hero__brand-sub { display: block; margin-top: 3px; color: var(--sc-text-muted); font-size: 12.5px; } /* ---- ready-state pill ---- */ .sinora-concierge-hero__ready { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: var(--sc-radius-pill); border: 1px solid rgba(236, 200, 116, 0.18); background: rgba(236, 200, 116, 0.05); color: var(--sc-gold-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; } .sinora-concierge-hero__wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; } .sinora-concierge-hero__wave i { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--sc-gold); animation: scHeroWave 1.6s ease-in-out infinite; } .sinora-concierge-hero__wave i:nth-child(2) { animation-delay: 0.18s; } .sinora-concierge-hero__wave i:nth-child(3) { animation-delay: 0.36s; } .sinora-concierge-hero__wave i:nth-child(4) { animation-delay: 0.54s; } /* ---- signature emblem ---- */ .sinora-concierge-hero__emblem { position: relative; flex: 0 0 64px; width: 64px; height: 64px; } .sinora-concierge-hero__emblem-glow { position: absolute; inset: -10px; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(236, 200, 116, 0.28), transparent 66%); filter: blur(8px); opacity: 0.7; animation: scHeroBreath 4.2s ease-in-out infinite; } .sinora-concierge-hero__emblem-ring { position: absolute; inset: 0; z-index: 1; border-radius: 50%; border: 1px solid rgba(236, 200, 116, 0.18); } .sinora-concierge-hero__emblem-ring--1 { animation: scHeroSpin 12s linear infinite; } .sinora-concierge-hero__emblem-ring--1::after { content: ""; position: absolute; top: 50%; left: -3px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--sc-gold-soft); box-shadow: 0 0 8px rgba(236, 200, 116, 0.75); } .sinora-concierge-hero__emblem-ring--2 { inset: 8px; border-color: rgba(236, 200, 116, 0.1); animation: scHeroSpinRev 14s linear infinite; } .sinora-concierge-hero__emblem-core { position: absolute; inset: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(180deg, #1d2737, #121a27); border: 1px solid rgba(236, 200, 116, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(0, 0, 0, 0.5), 0 0 22px rgba(236, 200, 116, 0.08); animation: scHeroBreath 4.2s ease-in-out infinite; } .sinora-concierge-hero__emblem-mark { width: 24px; height: 24px; overflow: visible; animation: scHeroMarkGlow 4.5s ease-in-out infinite; } .sinora-concierge-hero__emblem-path { fill: none; stroke: url(#scHeroSGrad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .sinora-concierge-hero__emblem-state { position: absolute; z-index: 3; right: 6px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-gold-soft); border: 2px solid #16202f; box-shadow: 0 0 8px rgba(236, 200, 116, 0.75); animation: scHeroPulse 3.6s ease-in-out infinite; } /* ---- composer (uses canonical data-sc-resting-* hooks) ---- */ .sinora-concierge-hero__composer { position: relative; z-index: 1; } .sinora-concierge-hero__label { display: block; margin-bottom: 11px; color: #fff; font-size: 14px; font-weight: 600; } .sinora-concierge-hero .sinora-concierge-hero__textarea { width: 100%; min-height: 122px; max-height: 260px; resize: vertical; display: block; border-radius: 18px; border: 1px solid rgba(150, 170, 205, 0.16); background: linear-gradient(180deg, #0d1521, #0a111b); background-image: none; color: var(--sc-ivory); padding: 16px 18px; font: inherit; font-size: 15px; line-height: 1.75; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .sinora-concierge-hero .sinora-concierge-hero__textarea::placeholder { color: rgba(231, 238, 250, 0.4); } .sinora-concierge-hero .sinora-concierge-hero__textarea:focus { border-color: rgba(236, 200, 116, 0.5); box-shadow: 0 0 0 3px rgba(236, 200, 116, 0.16); } .sinora-concierge-hero .sinora-concierge-hero__textarea:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; } .sinora-concierge-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; } /* the submit reuses the concierge gold button; raise specificity to tune it */ .sinora-concierge-hero .sinora-concierge__btn.sinora-concierge-hero__submit { min-height: 52px; min-width: 150px; flex: 0 0 auto; } .sinora-concierge-hero__hint { color: var(--sc-text-muted); font-size: 12.5px; line-height: 1.5; } /* ---- hero-only responsive ---- */ @media (max-width: 980px) { .sinora-concierge-hero__shell { grid-template-columns: 1fr; } .sinora-concierge-hero__copy { align-self: start; } } @media (max-width: 760px) { .sinora-concierge-hero .sinora-concierge-hero__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sinora-concierge-hero .sinora-concierge-hero__chips { grid-template-columns: 1fr; } .sinora-concierge-hero__panel-head { flex-wrap: wrap; } .sinora-concierge-hero__actions { flex-direction: column; align-items: stretch; } .sinora-concierge-hero .sinora-concierge__btn.sinora-concierge-hero__submit { width: 100%; } .sinora-concierge-hero__hint { text-align: center; } } /* ---- RTL / Persian hero ---- */ [dir="rtl"] .sinora-concierge-hero__copy, html[lang^="fa"] .sinora-concierge-hero__copy { text-align: right; } [dir="rtl"] .sinora-concierge-hero__emblem-state, html[lang^="fa"] .sinora-concierge-hero__emblem-state { right: auto; left: 6px; } [dir="rtl"] .sinora-concierge-hero__suggest-label, html[lang^="fa"] .sinora-concierge-hero__suggest-label { letter-spacing: 0; text-transform: none; } [dir="rtl"] .sinora-concierge-hero__badge, html[lang^="fa"] .sinora-concierge-hero__badge { letter-spacing: 0.06em; } /* Persian fonts (beat the page's fa-rtl.css defaults) */ [dir="rtl"] .sinora-concierge-hero__badge, [dir="rtl"] .sinora-concierge-hero__brand-name, html[lang^="fa"] .sinora-concierge-hero__badge, html[lang^="fa"] .sinora-concierge-hero__brand-name { font-family: var(--sc-font-fa-display) !important; letter-spacing: 0 !important; } [dir="rtl"] .sinora-concierge-hero__brand-sub, [dir="rtl"] .sinora-concierge-hero__ready, [dir="rtl"] .sinora-concierge-hero__label, [dir="rtl"] .sinora-concierge-hero__hint, [dir="rtl"] .sinora-concierge-hero .sinora-concierge-hero__chip, [dir="rtl"] .sinora-concierge-hero .sinora-concierge-hero__textarea, html[lang^="fa"] .sinora-concierge-hero__brand-sub, html[lang^="fa"] .sinora-concierge-hero__ready, html[lang^="fa"] .sinora-concierge-hero__label, html[lang^="fa"] .sinora-concierge-hero__hint, html[lang^="fa"] .sinora-concierge-hero .sinora-concierge-hero__chip, html[lang^="fa"] .sinora-concierge-hero .sinora-concierge-hero__textarea { font-family: "Parastoo", IranSans, sans-serif !important; } .sinora-concierge-hero .sinora-concierge__btn.sinora-concierge-hero__submit { letter-spacing: 0.03em; } [dir="rtl"] .sinora-concierge-hero .sinora-concierge__btn.sinora-concierge-hero__submit, html[lang^="fa"] .sinora-concierge-hero .sinora-concierge__btn.sinora-concierge-hero__submit { font-family: var(--sc-font-fa-display) !important; letter-spacing: 0 !important; } /* ---- hero keyframes ---- */ @keyframes scHeroPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 7px rgba(236, 200, 116, 0.5); } 50% { opacity: 0.7; box-shadow: 0 0 16px rgba(236, 200, 116, 0.9); } } @keyframes scHeroBreath { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } } @keyframes scHeroSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scHeroSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes scHeroWave { 0%, 100% { height: 4px; opacity: 0.6; } 50% { height: 11px; opacity: 1; } } @keyframes scHeroMarkGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(236, 200, 116, 0.28)); } 50% { filter: drop-shadow(0 0 10px rgba(236, 200, 116, 0.6)); } } @keyframes scHeroStreak { 0% { background-position: 14% 0%; opacity: 0; } 18% { opacity: 0.6; } 50% { background-position: 86% 100%; opacity: 0.42; } 82% { opacity: 0.55; } 100% { background-position: 14% 0%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sinora-concierge-hero::before, .sinora-concierge-hero__badge-dot, .sinora-concierge-hero__emblem-state, .sinora-concierge-hero__emblem-glow, .sinora-concierge-hero__emblem-core, .sinora-concierge-hero__emblem-ring--1, .sinora-concierge-hero__emblem-ring--2, .sinora-concierge-hero__emblem-mark, .sinora-concierge-hero__wave i { animation: none !important; } .sinora-concierge-hero__wave i { height: 7px; } } /* ================================================= GLOBAL AI LAUNCHER === */ .sinora-concierge--global { display: contents; } .sinora-concierge-launcher { --sc-launcher-gold: #d8ad55; --sc-launcher-gold-soft: #f1d79a; position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))); z-index: 10040; display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 1px solid rgba(241, 215, 154, 0.68); border-radius: 50%; background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.38), transparent 26%), linear-gradient(145deg, #f1d79a 0%, #d8ad55 45%, #a9782c 100%); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.86), 0 14px 32px -18px rgba(216, 173, 85, 0.82); color: #241804; cursor: pointer; isolation: isolate; transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s ease, visibility 0.2s ease; } .sinora-concierge-launcher:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -24px rgba(0, 0, 0, 0.9), 0 18px 38px -18px rgba(241, 215, 154, 0.88); } .sinora-concierge-launcher:active { transform: translateY(0) scale(0.97); } .sinora-concierge-launcher:focus-visible { outline: 3px solid rgba(241, 215, 154, 0.92); outline-offset: 4px; } .sinora-concierge-launcher__mark { position: relative; z-index: 1; font-family: "Geist", "Inter", system-ui, sans-serif; font-size: 1.28rem; font-weight: 900; line-height: 1; } .sinora-concierge-launcher__spark { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 0.85rem; line-height: 1; color: #fff7da; text-shadow: 0 0 12px rgba(255, 247, 218, 0.85); } body.sc-concierge-panel-open .sinora-concierge-launcher, body.sc-concierge-overlay-open .sinora-concierge-launcher { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(0.96); } /* ========================================= LAUNCHER HINT SPEECH BUBBLE ===== */ .sinora-concierge-launcher-hint { position: fixed; left: calc(max(16px, env(safe-area-inset-left, 0px)) + 62px + 12px); bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))); z-index: 10045; max-width: 320px; margin: 0; padding: 0.75rem 1rem; border: 1px solid rgba(236, 200, 116, 0.42); border-radius: 16px; background: linear-gradient(165deg, rgba(17, 26, 44, 0.96) 0%, rgba(8, 13, 24, 0.98) 100%); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.86), 0 0 0 1px rgba(236, 200, 116, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04); color: #f6f4ed; font-family: Inter, Geist, "Segoe UI", system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.45; text-align: left; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-6px) scale(0.98); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease; } .sinora-concierge-launcher-hint::before { content: ""; position: absolute; left: -6px; bottom: 18px; width: 12px; height: 12px; background: rgba(12, 18, 30, 0.98); border-left: 1px solid rgba(236, 200, 116, 0.42); border-bottom: 1px solid rgba(236, 200, 116, 0.42); transform: rotate(45deg); } .sinora-concierge-launcher-hint.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .sinora-concierge-launcher-hint[hidden] { display: none !important; } .sinora-concierge-launcher-hint:hover { border-color: rgba(236, 200, 116, 0.58); box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.9), 0 0 24px -8px rgba(236, 200, 116, 0.22); } .sinora-concierge-launcher-hint:focus-visible { outline: 2px solid rgba(236, 200, 116, 0.72); outline-offset: 3px; } .sinora-concierge-launcher-hint--fa { font-family: IranSans, Vazirmatn, system-ui, sans-serif; direction: rtl; text-align: right; } body.sc-concierge-panel-open .sinora-concierge-launcher-hint, body.sc-concierge-overlay-open .sinora-concierge-launcher-hint { opacity: 0; visibility: hidden; pointer-events: none; } /* ===================================================== OVERLAY (PORTALED) === */ /* Active overlay is portaled to ; tokens must be redeclared here. */ .sinora-concierge__overlay--portaled { --sc-gold: #d8ad55; --sc-gold-soft: #ecc874; --sc-gold-bright: #f6d99e; --sc-ivory: #f3f0ea; --sc-surface: rgba(10, 16, 28, 0.74); --sc-surface-2: rgba(15, 23, 38, 0.88); --sc-surface-elevated: linear-gradient(180deg, rgba(14, 21, 35, 0.96), rgba(8, 13, 24, 0.96)); --sc-card: linear-gradient(165deg, rgba(17, 26, 44, 0.95) 0%, rgba(10, 16, 29, 0.96) 100%); --sc-hairline: linear-gradient(140deg, rgba(236, 200, 116, 0.5) 0%, rgba(255, 255, 255, 0.07) 44%, rgba(236, 200, 116, 0.15) 100%); --sc-text: #f6f4ed; --sc-text-muted: rgba(186, 197, 217, 0.84); --sc-border: rgba(255, 255, 255, 0.10); --sc-accent: linear-gradient(135deg, #f2d595 0%, #e3bd6e 40%, #c89a47 100%); --sc-bot-bubble: linear-gradient(180deg, rgba(23, 33, 52, 0.82), rgba(14, 22, 38, 0.84)); --sc-user-bubble: linear-gradient(135deg, #ecd093 0%, #d9b264 55%, #c39a4c 100%); --sc-user-text: #2a1d05; --sc-focus: #ecc874; --sc-ring: 0 0 0 3px rgba(236, 200, 116, 0.28); --sc-radius-xl: 24px; --sc-radius-lg: 20px; --sc-radius-md: 14px; --sc-radius-sm: 10px; --sc-radius-pill: 999px; --sc-font-display: "Geist", "Inter", system-ui, sans-serif; --sc-font-body: "Inter", system-ui, sans-serif; --sc-font-fa-display: "w_Ray Extra Black", "Ray", IranSans, sans-serif; --sc-shadow-gold: 0 14px 36px -16px rgba(216, 170, 75, 0.5); --sc-avatar: 30px; --sc-avatar-gap: 10px; position: fixed; right: clamp(16px, 4vw, 42px); bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))); z-index: 10050; display: flex; flex-direction: column; width: min(520px, calc(100vw - 32px)); height: min(660px, calc(100dvh - 48px)); max-height: 72dvh; overflow: hidden; border: 1px solid rgba(236, 200, 116, 0.26); border-radius: var(--sc-radius-xl); background: radial-gradient(130% 64% at 50% -10%, rgba(216, 170, 75, 0.14) 0%, transparent 56%), radial-gradient(80% 50% at 100% 2%, rgba(76, 108, 184, 0.08) 0%, transparent 50%), radial-gradient(140% 100% at 50% 130%, rgba(0, 0, 0, 0.5), transparent 60%), linear-gradient(180deg, #070d18 0%, #050910 100%); box-shadow: 0 34px 90px -32px rgba(0, 0, 0, 0.9), 0 18px 46px -28px rgba(216, 170, 75, 0.5); color: var(--sc-text); font-family: var(--sc-font-body); opacity: 0; visibility: hidden; pointer-events: none; } .sinora-concierge__overlay--portaled.sinora-concierge__overlay--launcher { right: auto; left: clamp(16px, 4vw, 42px); } .sinora-concierge__overlay--portaled.is-expanded { inset: 0; width: auto; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } .sinora-concierge__overlay--portaled.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* hide the pre-portal in-band overlay markup to avoid any flash */ .sinora-concierge__overlay:not(.sinora-concierge__overlay--portaled) { display: none; } @media (prefers-reduced-motion: no-preference) { .sinora-concierge__overlay--portaled { transition: opacity 0.3s ease, visibility 0.3s ease; } } /* body scroll lock + hide floating widgets while overlay open (unchanged) */ body.sc-concierge-overlay-open { overflow: hidden; } body.sc-concierge-overlay-open #floating-wa, body.sc-concierge-overlay-open .sinora-cookie-consent { visibility: hidden; pointer-events: none; } body.sc-concierge-panel-open .sinora-cookie-consent { pointer-events: none; } /* ----------------------------------------------------- overlay header ----- */ .sinora-concierge__overlay--portaled .sinora-concierge__overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.05rem; padding-top: max(0.9rem, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--sc-border); background: linear-gradient(180deg, rgba(11, 18, 31, 0.86), rgba(11, 18, 31, 0.62)); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 1px 0 rgba(236, 200, 116, 0.16), 0 20px 44px -30px rgba(0, 0, 0, 0.85); flex-shrink: 0; position: sticky; top: 0; z-index: 3; } .sinora-concierge__overlay--portaled .sinora-concierge__title { display: inline-flex; align-items: center; gap: 0.65rem; margin: 0; font-family: var(--sc-font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--sc-ivory); } [dir="rtl"] .sinora-concierge__overlay--portaled .sinora-concierge__title, html[lang^="fa"] .sinora-concierge__overlay--portaled .sinora-concierge__title, .sinora-concierge__overlay--fa .sinora-concierge__title, [dir="rtl"] .sinora-concierge__input--fa-prompt, html[lang^="fa"] .sinora-concierge__input--fa-prompt, .sinora-concierge__overlay--fa .sinora-concierge__input--fa-prompt { font-family: var(--sc-font-fa-display) !important; font-weight: 900; line-height: 1.42 !important; letter-spacing: 0; } /* brand "app icon" avatar before the title, with a soft breathing glow */ .sinora-concierge__overlay--portaled .sinora-concierge__title::before { content: "S"; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; font-family: var(--sc-font-display); font-size: 1rem; font-weight: 800; color: var(--sc-user-text); background: var(--sc-accent); box-shadow: var(--sc-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.55); } /* gentle "online/alive" status dot after the title */ .sinora-concierge__overlay--portaled .sinora-concierge__title::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #58cc9a; box-shadow: 0 0 0 3px rgba(88, 204, 154, 0.14), 0 0 9px rgba(88, 204, 154, 0.7); } @media (prefers-reduced-motion: no-preference) { .sinora-concierge__overlay--portaled .sinora-concierge__title::after { animation: scStatus 2.6s ease-in-out infinite; } } @keyframes scStatus { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .sinora-concierge__overlay--portaled .sinora-concierge__expand, .sinora-concierge__overlay--portaled .sinora-concierge__close { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 44px; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(236, 200, 116, 0.5); border-radius: var(--sc-radius-md); background: linear-gradient(180deg, rgba(236, 200, 116, 0.16), rgba(236, 200, 116, 0.08)); color: var(--sc-gold-soft); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; flex-shrink: 0; position: relative; z-index: 4; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__expand { margin-left: auto; } .sinora-concierge__overlay--portaled .sinora-concierge__expand:hover, .sinora-concierge__overlay--portaled .sinora-concierge__close:hover { background: linear-gradient(180deg, rgba(236, 200, 116, 0.26), rgba(236, 200, 116, 0.12)); border-color: rgba(236, 200, 116, 0.72); box-shadow: 0 0 0 1px rgba(236, 200, 116, 0.18), 0 10px 24px -16px rgba(216, 170, 75, 0.7); } .sinora-concierge__overlay--portaled .sinora-concierge__expand:active, .sinora-concierge__overlay--portaled .sinora-concierge__close:active { transform: scale(0.97); } .sinora-concierge__overlay--portaled .sinora-concierge__close-icon { font-size: 1.35rem; line-height: 1; } .sinora-concierge__overlay--portaled .sinora-concierge__expand:focus-visible, .sinora-concierge__overlay--portaled .sinora-concierge__close:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; } /* ----------------------------------------------------- scrollable body ---- */ .sinora-concierge__overlay--portaled .sinora-concierge__overlay-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(236, 200, 116, 0.32) transparent; } .sinora-concierge__overlay--portaled .sinora-concierge__overlay-body::-webkit-scrollbar { width: 8px; } .sinora-concierge__overlay--portaled .sinora-concierge__overlay-body::-webkit-scrollbar-thumb { background: rgba(236, 200, 116, 0.26); border-radius: 99px; } .sinora-concierge__overlay--portaled .sinora-concierge__thread { overflow: visible; flex: none; padding: 1.3rem 1.15rem 0.7rem; display: flex; flex-direction: column; gap: 0.9rem; } /* ----------------------------------------------------------- messages ----- */ .sinora-concierge__overlay--portaled .sinora-concierge__message { position: relative; max-width: min(85%, 540px); padding: 0.92rem 1.15rem; border-radius: var(--sc-radius-lg); line-height: 1.66; font-size: 0.9375rem; word-wrap: break-word; overflow-wrap: anywhere; } .sinora-concierge__overlay--portaled .sinora-concierge__message--bot { align-self: flex-start; margin-inline-start: calc(var(--sc-avatar) + var(--sc-avatar-gap)); border-radius: var(--sc-radius-lg) var(--sc-radius-lg) var(--sc-radius-lg) 7px; background: var(--sc-bot-bubble); color: var(--sc-text); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } /* assistant avatar */ .sinora-concierge__overlay--portaled .sinora-concierge__message--bot::before { content: "S"; position: absolute; inset-inline-start: calc(-1 * (var(--sc-avatar) + var(--sc-avatar-gap))); top: 0; display: flex; align-items: center; justify-content: center; width: var(--sc-avatar); height: var(--sc-avatar); border-radius: 9px; font-family: var(--sc-font-display); font-size: 0.8rem; font-weight: 800; color: var(--sc-user-text); background: var(--sc-accent); box-shadow: var(--sc-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .sinora-concierge__overlay--portaled .sinora-concierge__message--user { align-self: flex-end; border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 7px var(--sc-radius-lg); background: var(--sc-user-bubble); color: var(--sc-user-text); font-weight: 600; box-shadow: 0 16px 34px -22px rgba(216, 170, 75, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45); } @media (prefers-reduced-motion: no-preference) { .sinora-concierge__overlay--portaled .sinora-concierge__message { animation: scMsgIn 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both; } } @keyframes scMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------ typing ------ */ .sinora-concierge__overlay--portaled .sinora-concierge__typing { position: relative; align-self: flex-start; margin-inline-start: calc(var(--sc-avatar) + var(--sc-avatar-gap)); min-height: var(--sc-avatar); display: inline-flex; align-items: center; padding: 0.7rem 1rem; border-radius: var(--sc-radius-lg) var(--sc-radius-lg) var(--sc-radius-lg) 7px; background: var(--sc-bot-bubble); border: 1px solid rgba(255, 255, 255, 0.09); color: transparent; font-size: 0; line-height: 0; } .sinora-concierge__overlay--portaled .sinora-concierge__typing::before { content: "S"; position: absolute; inset-inline-start: calc(-1 * (var(--sc-avatar) + var(--sc-avatar-gap))); top: 0; display: flex; align-items: center; justify-content: center; width: var(--sc-avatar); height: var(--sc-avatar); border-radius: 9px; font-family: var(--sc-font-display); font-size: 0.8rem; font-weight: 800; color: var(--sc-user-text); background: var(--sc-accent); box-shadow: var(--sc-shadow-gold); } .sinora-concierge__overlay--portaled .sinora-concierge__typing::after { content: ""; display: inline-block; width: 30px; height: 6px; background-image: radial-gradient(circle, var(--sc-gold-soft) 99%, transparent), radial-gradient(circle, var(--sc-gold-soft) 99%, transparent), radial-gradient(circle, var(--sc-gold-soft) 99%, transparent); background-size: 6px 6px; background-position: 0 50%, 12px 50%, 24px 50%; background-repeat: no-repeat; opacity: 0.85; } @media (prefers-reduced-motion: no-preference) { .sinora-concierge__overlay--portaled .sinora-concierge__typing::after { animation: scTyping 1.1s ease-in-out infinite; } } @keyframes scTyping { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* hidden-state contract (load-bearing): keep display:none !important */ .sinora-concierge__overlay--portaled .sinora-concierge__typing[hidden], .sinora-concierge__overlay--portaled .sinora-concierge__error[hidden], .sinora-concierge__overlay--portaled .sinora-concierge__capture[hidden], .sinora-concierge__overlay--portaled .sinora-concierge__handoff[hidden], .sinora-concierge__overlay--portaled .sinora-concierge__handoff-note[hidden] { display: none !important; } /* ------------------------------------------------------------- error ------ */ .sinora-concierge__overlay--portaled .sinora-concierge__error { margin: 0 1.15rem; padding: 0.8rem 1rem; border-radius: var(--sc-radius-md); background: rgba(122, 39, 26, 0.24); border: 1px solid rgba(255, 120, 100, 0.28); color: #ffc1b6; font-size: 0.875rem; line-height: 1.5; } /* -------------------------------------------- cold-start (waking) notice -- */ .sinora-concierge__overlay--portaled .sinora-concierge__cold-start { align-self: flex-start; margin-inline-start: calc(var(--sc-avatar) + var(--sc-avatar-gap)); padding: 0.7rem 1rem; border-radius: var(--sc-radius-md); background: var(--sc-bot-bubble); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--sc-text-muted); font-size: 0.85rem; line-height: 1.55; } .sinora-concierge__overlay--portaled .sinora-concierge__cold-start[hidden] { display: none !important; } /* ----------------------------------------------- capture / handoff cards -- */ .sinora-concierge__overlay--portaled .sinora-concierge__capture, .sinora-concierge__overlay--portaled .sinora-concierge__handoff { margin: 0.3rem 1.15rem 0.9rem; padding: 1.25rem; border: 1px solid transparent; border-radius: var(--sc-radius-lg); background: var(--sc-card) padding-box, var(--sc-hairline) border-box; box-shadow: 0 24px 52px -30px rgba(0, 0, 0, 0.82); } .sinora-concierge__overlay--portaled .sinora-concierge__capture-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.95rem; font-family: var(--sc-font-display); font-size: 1rem; font-weight: 700; color: var(--sc-ivory); } .sinora-concierge__overlay--portaled .sinora-concierge__capture-title::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 10px rgba(236, 200, 116, 0.8); } .sinora-concierge__overlay--portaled .sinora-concierge__field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; } .sinora-concierge__overlay--portaled .sinora-concierge__field label { font-size: 0.8125rem; font-weight: 500; color: var(--sc-text-muted); } .sinora-concierge__overlay--portaled .sinora-concierge__field input[type='text'], .sinora-concierge__overlay--portaled .sinora-concierge__field input[type='email'], .sinora-concierge__overlay--portaled .sinora-concierge__field input[type='tel'] { min-height: 48px; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); font: inherit; background-color: var(--sc-surface); color: var(--sc-text); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__field input:focus { outline: none; border-color: var(--sc-gold-soft); background-color: var(--sc-surface-2); box-shadow: var(--sc-ring); } /* trust-forward KVKK consent row with a small shield mark */ .sinora-concierge__overlay--portaled .sinora-concierge__consent { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 1.05rem; padding: 0.85rem 0.95rem; border-radius: var(--sc-radius-md); background: linear-gradient(180deg, rgba(236, 200, 116, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(236, 200, 116, 0.18); font-size: 0.8125rem; line-height: 1.55; color: var(--sc-text-muted); } .sinora-concierge__overlay--portaled .sinora-concierge__checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sc-gold); cursor: pointer; } .sinora-concierge__overlay--portaled .sinora-concierge__consent a { color: var(--sc-gold-soft); text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------- overlay buttons / CTA -- */ .sinora-concierge__overlay--portaled .sinora-concierge__btn { position: relative; min-height: 48px; width: 100%; padding: 0.85rem 1.4rem; border: none; border-radius: var(--sc-radius-md); background: var(--sc-accent); color: var(--sc-user-text); font: inherit; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; overflow: hidden; box-shadow: var(--sc-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 20px 44px -16px rgba(216, 170, 75, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .sinora-concierge__overlay--portaled .sinora-concierge__btn:active:not(:disabled) { transform: translateY(0); } .sinora-concierge__overlay--portaled .sinora-concierge__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .sinora-concierge__overlay--portaled .sinora-concierge__btn--whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; text-decoration: none; width: 100%; min-height: 54px; font-size: 1rem; margin-top: 0; } .sinora-concierge__overlay--portaled .sinora-concierge__btn--whatsapp::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.97L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.1c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.13c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.18-8.24 8.18Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.42.06-.64.31-.22.25-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.57.18 1.1.16 1.51.1.46-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.97L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.1c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.13c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.18-8.24 8.18Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.42.06-.64.31-.22.25-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.57.18 1.1.16 1.51.1.46-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E") center / contain no-repeat; } .sinora-concierge__overlay--portaled .sinora-concierge__btn--whatsapp-local { box-shadow: 0 0 0 1px rgba(236, 200, 116, 0.4) inset, var(--sc-shadow-gold); } .sinora-concierge__overlay--portaled .sinora-concierge__handoff-note { margin: 0.75rem 0 0; padding: 0.55rem 0.75rem; border-radius: var(--sc-radius-sm); background: rgba(236, 200, 116, 0.08); border: 1px solid rgba(236, 200, 116, 0.14); font-size: 0.75rem; line-height: 1.45; color: rgba(236, 200, 116, 0.92); } /* ----------------------------------------------------- overlay footer ----- */ .sinora-concierge__overlay--portaled .sinora-concierge__overlay-footer { padding: 0.95rem 1.05rem calc(0.95rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sc-border); background: linear-gradient(180deg, rgba(11, 18, 31, 0.66), rgba(8, 13, 24, 0.96)); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 -1px 0 rgba(236, 200, 116, 0.14), 0 -20px 44px -32px rgba(0, 0, 0, 0.9); flex-shrink: 0; } .sinora-concierge__overlay--portaled .sinora-concierge__overlay-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; } .sinora-concierge__overlay--portaled .sinora-concierge__chip { position: relative; appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(236, 200, 116, 0.28); background: linear-gradient(180deg, rgba(236, 200, 116, 0.08), rgba(255, 255, 255, 0.018)); color: var(--sc-text); border-radius: var(--sc-radius-pill); padding: 0.58rem 1.05rem; min-height: 42px; font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; max-width: 100%; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__chip::after { content: "\2192"; font-weight: 600; color: var(--sc-gold-soft); opacity: 0; max-width: 0; margin-inline-start: 0; overflow: hidden; transition: opacity 0.2s ease, max-width 0.2s ease, margin-left 0.2s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__chip:hover:not(:disabled), .sinora-concierge__overlay--portaled .sinora-concierge__chip:focus-visible { border-color: rgba(236, 200, 116, 0.6); background: linear-gradient(180deg, rgba(236, 200, 116, 0.18), rgba(236, 200, 116, 0.05)); transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(216, 170, 75, 0.65); } .sinora-concierge__overlay--portaled .sinora-concierge__chip:hover:not(:disabled)::after, .sinora-concierge__overlay--portaled .sinora-concierge__chip:focus-visible::after { opacity: 1; max-width: 1.2em; margin-inline-start: 0.1rem; } .sinora-concierge__overlay--portaled .sinora-concierge__chip:active:not(:disabled) { transform: translateY(0); } .sinora-concierge__overlay--portaled .sinora-concierge__chip:disabled { opacity: 0.5; cursor: not-allowed; } .sinora-concierge__overlay--portaled .sinora-concierge__composer-row { display: flex; gap: 0.6rem; align-items: stretch; } .sinora-concierge__overlay--portaled .sinora-concierge__input { flex: 1; min-width: 0; min-height: 50px; padding: 0.82rem 1.05rem 0.82rem 2.85rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background-color: var(--sc-surface); color: var(--sc-text); font: inherit; font-size: 0.9375rem; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .sinora-concierge__overlay--portaled .sinora-concierge__input::placeholder { color: var(--sc-text-muted); } .sinora-concierge__overlay--portaled .sinora-concierge__input:focus { outline: none; border-color: var(--sc-gold-soft); background-color: var(--sc-surface-2); box-shadow: var(--sc-ring), 0 0 30px -8px rgba(236, 200, 116, 0.35); } .sinora-concierge__overlay--portaled .sinora-concierge__composer-row .sinora-concierge__btn { width: auto; flex-shrink: 0; } .sinora-concierge__overlay--portaled .sinora-concierge__input:focus-visible, .sinora-concierge__overlay--portaled .sinora-concierge__chip:focus-visible, .sinora-concierge__overlay--portaled .sinora-concierge__btn:focus-visible, .sinora-concierge__overlay--portaled .sinora-concierge__checkbox:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; } /* Persian overlay: same premium panel, mirrored conversation rhythm. */ .sinora-concierge__overlay--fa { --sc-font-body: IranSans, Vazirmatn, system-ui, sans-serif; direction: rtl; text-align: right; } .sinora-concierge__overlay--fa .sinora-concierge__overlay-header, .sinora-concierge__overlay--fa .sinora-concierge__composer-row, .sinora-concierge__overlay--fa .sinora-concierge__capture, .sinora-concierge__overlay--fa .sinora-concierge__handoff, .sinora-concierge__overlay--fa .sinora-concierge__field, .sinora-concierge__overlay--fa .sinora-concierge__consent { direction: rtl; text-align: right; } .sinora-concierge__overlay--fa .sinora-concierge__title { flex-direction: row-reverse; } .sinora-concierge__overlay--fa .sinora-concierge__expand { margin-left: 0; margin-right: auto; } .sinora-concierge__overlay--fa .sinora-concierge__overlay-chips { justify-content: flex-end; } .sinora-concierge__overlay--fa .sinora-concierge__message { font-family: var(--sc-font-body); text-align: right; } .sinora-concierge__overlay--fa .sinora-concierge__message--bot { align-self: flex-end; margin-inline-start: 0; margin-inline-end: calc(var(--sc-avatar) + var(--sc-avatar-gap)); border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 7px var(--sc-radius-lg); } .sinora-concierge__overlay--fa .sinora-concierge__message--bot::before { inset-inline-start: auto; inset-inline-end: calc(-1 * (var(--sc-avatar) + var(--sc-avatar-gap))); } .sinora-concierge__overlay--fa .sinora-concierge__message--user { align-self: flex-start; border-radius: var(--sc-radius-lg) var(--sc-radius-lg) var(--sc-radius-lg) 7px; } .sinora-concierge__overlay--fa .sinora-concierge__typing { align-self: flex-end; margin-inline-start: 0; margin-inline-end: calc(var(--sc-avatar) + var(--sc-avatar-gap)); border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 7px var(--sc-radius-lg); } .sinora-concierge__overlay--fa .sinora-concierge__typing::before { inset-inline-start: auto; inset-inline-end: calc(-1 * (var(--sc-avatar) + var(--sc-avatar-gap))); } .sinora-concierge__overlay--fa .sinora-concierge__input, .sinora-concierge__overlay--fa .sinora-concierge__field input[type='text'], .sinora-concierge__overlay--fa .sinora-concierge__field input[type='email'], .sinora-concierge__overlay--fa .sinora-concierge__field input[type='tel'] { font-family: IranSans, Vazirmatn, system-ui, sans-serif !important; text-align: right; } .sinora-concierge__overlay--fa .sinora-concierge__input--fa-prompt { font-family: var(--sc-font-fa-display) !important; } /* session-limited state (unchanged behavior) */ .sinora-concierge-hero.is-session-limited .sinora-concierge__input, .sinora-concierge-hero.is-session-limited .sinora-concierge-hero__textarea, .sinora-concierge-hero.is-session-limited [data-sc-resting-send], .sinora-concierge-hero.is-session-limited [data-sc-quick-prompt] { opacity: 0.5; pointer-events: none; } /* ============================================================ RESPONSIVE === */ @media (max-width: 980px) { .sinora-concierge-hero__shell { grid-template-columns: 1fr; gap: 26px; } .sinora-concierge-hero__copy { text-align: start; } } @media (max-width: 560px) { .sinora-concierge-hero { padding: 44px 16px 52px; } .sinora-concierge__overlay--portaled { right: 4vw; bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px))); width: min(92vw, 520px); height: min(72dvh, 620px); max-height: 72dvh; } .sinora-concierge__overlay--portaled.sinora-concierge__overlay--launcher { right: auto; left: 4vw; } .sinora-concierge__overlay--portaled.is-expanded { inset: 0; width: auto; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } .sinora-concierge-hero .sinora-concierge__composer-row { flex-direction: column; } .sinora-concierge-hero .sinora-concierge__btn { width: 100%; justify-content: center; } .sinora-concierge-hero .sinora-concierge__chip { width: 100%; } /* overlay composer stacks; send button full-width */ .sinora-concierge__overlay--portaled .sinora-concierge__composer-row { flex-direction: column; } .sinora-concierge__overlay--portaled .sinora-concierge__composer-row .sinora-concierge__btn { width: 100%; justify-content: center; } /* keep bot bubble (with avatar) from overflowing 390px */ .sinora-concierge__overlay--portaled .sinora-concierge__message--user { max-width: 100%; } .sinora-concierge__overlay--portaled .sinora-concierge__message--bot { max-width: calc(100% - (var(--sc-avatar) + var(--sc-avatar-gap))); } .sinora-concierge__overlay--portaled .sinora-concierge__close-label { display: inline; } .sinora-concierge-launcher { left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px))); width: 56px; height: 56px; } .sinora-concierge-launcher-hint { left: calc(max(14px, env(safe-area-inset-left, 0px)) + 56px + 10px); bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px))); max-width: min(250px, calc(100vw - 96px)); padding: 0.65rem 0.85rem; font-size: 0.8125rem; line-height: 1.4; } .sinora-concierge-launcher-hint::before { bottom: 16px; } } /* ============================================ RTL (Persian / fa) ========== */ /* Avatars + bubble alignment already flip via logical properties + flex start/end. * These overrides flip only the physical-only bits: the input icon side and the * directional arrow glyph. Activated by on /fa/. */ .sinora-concierge-hero[dir="rtl"] .sinora-concierge__input, [dir="rtl"] .sinora-concierge-hero .sinora-concierge__input, html[lang^="fa"] .sinora-concierge-hero .sinora-concierge__input, [dir="rtl"] .sinora-concierge__overlay--portaled .sinora-concierge__input, .sinora-concierge__overlay--fa .sinora-concierge__input { padding-left: 1.05rem; padding-right: 2.85rem; background-position: right 15px center; } .sinora-concierge-hero[dir="rtl"] [data-sc-resting-send]::after, [dir="rtl"] .sinora-concierge-hero [data-sc-resting-send]::after, html[lang^="fa"] .sinora-concierge-hero [data-sc-resting-send]::after, .sinora-concierge-hero[dir="rtl"] [data-sc-overlay-send]::after, [dir="rtl"] .sinora-concierge-hero [data-sc-overlay-send]::after, [dir="rtl"] .sinora-concierge__overlay--portaled [data-sc-overlay-send]::after, .sinora-concierge-hero[dir="rtl"] .sinora-concierge__chip::after, [dir="rtl"] .sinora-concierge-hero .sinora-concierge__chip::after, [dir="rtl"] .sinora-concierge__overlay--portaled .sinora-concierge__chip::after, .sinora-concierge__overlay--fa [data-sc-overlay-send]::after, .sinora-concierge__overlay--fa .sinora-concierge__chip::after { content: "←"; } .sinora-concierge-hero[dir="rtl"] .sinora-concierge-hero__chip::after, [dir="rtl"] .sinora-concierge-hero .sinora-concierge-hero__chip::after, html[lang^="fa"] .sinora-concierge-hero .sinora-concierge-hero__chip::after { content: none; } /* ========================================================= SINORA CONCIERGE — FA RTL + REY FONT ========================================================= */ html[lang="fa"] .sinora-concierge-hero, html[lang="fa"] .sinora-concierge-hero *, html[lang="fa"] .sinora-concierge__overlay, html[lang="fa"] .sinora-concierge__overlay *, html[lang="fa"] .sinora-concierge__overlay--portaled, html[lang="fa"] .sinora-concierge__overlay--portaled * { direction: rtl; text-align: right; } html[lang="fa"] .sinora-concierge-hero, html[lang="fa"] .sinora-concierge__overlay, html[lang="fa"] .sinora-concierge__overlay--portaled, html[lang="fa"] .sinora-concierge__message, html[lang="fa"] .sinora-concierge__bubble-title, html[lang="fa"] .sinora-concierge__bubble-body, html[lang="fa"] .sinora-concierge__bubble-text, html[lang="fa"] .sinora-concierge__bubble-checklist, html[lang="fa"] .sinora-concierge__chip, html[lang="fa"] .sinora-concierge__input, html[lang="fa"] [data-sc-resting-input], html[lang="fa"] [data-sc-overlay-input], html[lang="fa"] [data-sa-input] { font-family: "Rey", "Ray", "IRANSans", "IranSans", sans-serif !important; } html[lang="fa"] .sinora-concierge__message--bot, html[lang="fa"] .sinora-concierge__message--user, html[lang="fa"] .sinora-concierge__bubble-title, html[lang="fa"] .sinora-concierge__bubble-body, html[lang="fa"] .sinora-concierge__bubble-text { direction: rtl !important; text-align: right !important; } html[lang="fa"] .sinora-concierge__bubble-checklist { direction: rtl !important; text-align: right !important; padding-right: 0 !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; } html[lang="fa"] .sinora-concierge__bubble-checklist li { direction: rtl !important; text-align: right !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 0.45rem; } html[lang="fa"] .sinora-concierge__bubble-bullet { flex: 0 0 auto; margin: 0; } html[lang="fa"] [data-sc-resting-input], html[lang="fa"] [data-sc-overlay-input], html[lang="fa"] [data-sa-input] { direction: rtl !important; text-align: right !important; } html[lang="fa"] [data-sc-resting-input]::placeholder, html[lang="fa"] [data-sc-overlay-input]::placeholder, html[lang="fa"] [data-sa-input]::placeholder { direction: rtl; text-align: right; font-family: "Rey", "Ray", "IRANSans", "IranSans", sans-serif !important; } html[lang="fa"] .sinora-concierge__thread { direction: rtl; } /* ========================================================= FA CHAT BUBBLE ALIGNMENT User: right Assistant: left Content: RTL ========================================================= */ html[lang="fa"] .sinora-concierge__thread, html[lang="fa"] [data-sc-thread] { direction: ltr !important; display: flex; flex-direction: column; align-items: stretch; } /* User message — right side */ html[lang="fa"] .sinora-concierge__message--user { align-self: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; } /* Assistant message — left side */ html[lang="fa"] .sinora-concierge__message--bot { align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; } /* Keep Persian content RTL inside both bubbles */ html[lang="fa"] .sinora-concierge__message--user *, html[lang="fa"] .sinora-concierge__message--bot * { direction: rtl; text-align: right; }