/** * Ghosoun Media Advisor — visitor widget styles. * * Hardening notes (v1.1.0), after the widget misbehaved on the live site: * * 1. `[hidden]` MUST be defended explicitly. The UA rule `[hidden]{display:none}` * is an author-stylesheet loser: any author `display:` on the same element * beats it. `.ghai-panel{display:flex}` therefore kept the panel visible even * though JS had set `panel.hidden = true`, which is why the chat rendered * permanently open. Every toggled element now carries an explicit * `[hidden]{display:none!important}` rule. * * 2. Position uses PHYSICAL properties (`right`/`left`), not logical ones. The * setting is literally named "bottom-right", and `inset-inline-end` resolves * to the LEFT edge on an RTL site — which is exactly where the widget wrongly * appeared. Physical properties make the setting mean what it says in both * directions. * * 3. Layout-critical declarations are written on `#ghai-root` (id specificity) * and marked `!important`, so a theme or page builder cannot re-flow the * widget. The root is also mounted as a direct child of by the script, * because an ancestor with `transform`, `filter`, `perspective`, `contain` or * `will-change` turns `position: fixed` into a containing-block-relative box. */ #ghai-root.ghai-root { --ghai-accent: #0f766e; --ghai-bg: #ffffff; --ghai-fg: #1f2937; --ghai-muted: #6b7280; --ghai-border: #e5e7eb; --ghai-surface: #f9fafb; --ghai-radius: 14px; --ghai-shadow: 0 16px 48px rgba( 15, 23, 42, 0.18 ); position: fixed !important; bottom: 20px !important; top: auto !important; inset-inline: auto !important; z-index: 2147483000 !important; margin: 0 !important; padding: 0 !important; max-width: none !important; max-height: none !important; width: auto !important; height: auto !important; float: none !important; clear: none !important; transform: none !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; isolation: isolate; direction: rtl; text-align: start; font-family: inherit; font-size: 15px; line-height: 1.65; color: var( --ghai-fg ); box-sizing: border-box; } #ghai-root.ghai-root[dir="ltr"] { direction: ltr; } #ghai-root.ghai-root * { box-sizing: border-box; } /* Physical positioning: "right" means the right edge in every direction. */ #ghai-root.ghai-root--bottom-right { right: 20px !important; left: auto !important; } #ghai-root.ghai-root--bottom-left { left: 20px !important; right: auto !important; } /* * The hidden guard. Without this the panel stays on screen because an author * `display` value outranks the user-agent `[hidden]` rule. */ #ghai-root [hidden], #ghai-root [hidden="hidden"], #ghai-root [hidden="true"] { display: none !important; } /* Launcher ---------------------------------------------------------- */ .ghai-launcher { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var( --ghai-accent ); color: #fff; cursor: pointer; box-shadow: var( --ghai-shadow ); display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease; } .ghai-launcher:hover { transform: scale( 1.06 ); } .ghai-launcher:focus-visible { outline: 3px solid var( --ghai-accent ); outline-offset: 3px; } .ghai-launcher__icon { font-size: 24px; line-height: 1; } /* * The launcher is hidden via the `hidden` attribute (see the guard above) rather * than a state class, so a missing state class can never leave both the launcher * and the panel on screen at once. */ #ghai-root .ghai-launcher[hidden] { display: none !important; } /* Panel ------------------------------------------------------------- */ #ghai-root .ghai-panel { width: 380px; max-width: calc( 100vw - 32px ); height: 580px; max-height: calc( 100vh - 80px ); background: var( --ghai-bg ); border: 1px solid var( --ghai-border ); border-radius: var( --ghai-radius ); box-shadow: var( --ghai-shadow ); display: flex; flex-direction: column; overflow: hidden; text-align: start; } /* Repeated after the display rule so the guard cannot be lost to source order. */ #ghai-root .ghai-panel[hidden] { display: none !important; } .ghai-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var( --ghai-accent ); color: #fff; flex-shrink: 0; } .ghai-header__title { font-weight: 700; font-size: 15px; } .ghai-header__close { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; } .ghai-header__close:focus-visible { outline: 2px solid #fff; } /* Log --------------------------------------------------------------- */ .ghai-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var( --ghai-surface ); display: flex; flex-direction: column; gap: 12px; } .ghai-msg { max-width: 92%; } .ghai-msg--user { align-self: flex-end; } .ghai-msg--assistant, .ghai-msg--error { align-self: flex-start; } .ghai-msg__body { padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; } .ghai-msg--user .ghai-msg__body { background: var( --ghai-accent ); color: #fff; border-end-end-radius: 4px; } .ghai-msg--assistant .ghai-msg__body { background: var( --ghai-bg ); border: 1px solid var( --ghai-border ); border-end-start-radius: 4px; } .ghai-msg--error .ghai-msg__body { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .ghai-typing { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var( --ghai-muted ); font-size: 13px; background: var( --ghai-bg ); border: 1px solid var( --ghai-border ); border-radius: 14px; border-end-start-radius: 4px; } .ghai-typing__dots { display: inline-flex; gap: 4px; align-items: flex-end; height: 10px; } .ghai-typing__dot { width: 6px; height: 6px; border-radius: 50%; background: var( --ghai-accent ); opacity: .35; animation: ghai-typing 1.2s infinite ease-in-out; } .ghai-typing__dot:nth-child( 2 ) { animation-delay: .15s; } .ghai-typing__dot:nth-child( 3 ) { animation-delay: .3s; } @keyframes ghai-typing { 0%, 60%, 100% { transform: translateY( 0 ); opacity: .35; } 30% { transform: translateY( -4px ); opacity: 1; } } /* Message-budget notices -------------------------------------------- */ .ghai-notice { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.6; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .ghai-notice--final { background: #fee2e2; border-color: #f87171; color: #991b1b; } .ghai-msg--nobody > .ghai-msg__body { display: none; } .ghai-footer__counter.is-urgent { color: #dc2626; font-weight: 700; } .ghai-card__kind { display: inline-block; font-size: 11px; color: var( --ghai-accent ); font-weight: 700; margin-bottom: 2px; } /* Cards ------------------------------------------------------------- */ .ghai-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .ghai-card { background: var( --ghai-bg ); border: 1px solid var( --ghai-border ); border-radius: 10px; padding: 12px; } .ghai-card__title { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .ghai-card__summary { font-size: 13px; color: var( --ghai-muted ); margin-bottom: 6px; } .ghai-card__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; } .ghai-card__price { font-weight: 700; color: var( --ghai-accent ); } .ghai-card__stock { color: #047857; } .ghai-card__stock--out { color: #b45309; } .ghai-card__link { display: inline-block; font-size: 13px; font-weight: 600; color: var( --ghai-accent ); text-decoration: none; } .ghai-card__link:hover { text-decoration: underline; } /* Actions ----------------------------------------------------------- */ .ghai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ghai-action { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var( --ghai-accent ); color: #fff; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; } .ghai-action:hover { filter: brightness( 1.08 ); } .ghai-action:focus-visible { outline: 2px solid var( --ghai-fg ); outline-offset: 2px; } .ghai-action--ghost { background: transparent; color: var( --ghai-muted ); border: 1px solid var( --ghai-border ); } /* Quick questions --------------------------------------------------- */ .ghai-quick { display: flex; flex-wrap: wrap; gap: 8px; } .ghai-quick__btn { padding: 8px 12px; border-radius: 999px; border: 1px solid var( --ghai-border ); background: var( --ghai-bg ); font-size: 13px; cursor: pointer; font-family: inherit; color: inherit; } .ghai-quick__btn:hover { border-color: var( --ghai-accent ); color: var( --ghai-accent ); } /* Feedback ---------------------------------------------------------- */ .ghai-feedback { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var( --ghai-muted ); } .ghai-feedback__btn { border: 1px solid var( --ghai-border ); background: var( --ghai-bg ); border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 12px; font-family: inherit; color: inherit; } /* Lead form --------------------------------------------------------- */ .ghai-lead { background: var( --ghai-bg ); border: 1px solid var( --ghai-border ); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .ghai-lead__title { font-weight: 700; font-size: 14px; } .ghai-lead__field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .ghai-lead__field input { padding: 8px 10px; border: 1px solid var( --ghai-border ); border-radius: 8px; font-family: inherit; font-size: 14px; } .ghai-lead__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var( --ghai-muted ); } .ghai-lead__actions { display: flex; gap: 8px; } .ghai-lead__status { font-size: 12px; color: #b91c1c; } /* Composer ---------------------------------------------------------- */ .ghai-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var( --ghai-border ); background: var( --ghai-bg ); flex-shrink: 0; } .ghai-composer__input { flex: 1; resize: none; border: 1px solid var( --ghai-border ); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.5; max-height: 120px; color: inherit; background: var( --ghai-bg ); } .ghai-composer__input:focus { outline: 2px solid var( --ghai-accent ); outline-offset: -1px; } .ghai-composer__input:disabled { background: var( --ghai-surface ); } .ghai-composer__send { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var( --ghai-accent ); color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0; } .ghai-composer__send:disabled { opacity: 0.5; cursor: not-allowed; } [dir="ltr"] .ghai-composer__send { transform: scaleX( -1 ); } /* Footer ------------------------------------------------------------ */ .ghai-footer { padding: 8px 12px; border-top: 1px solid var( --ghai-border ); background: var( --ghai-surface ); font-size: 11px; color: var( --ghai-muted ); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .ghai-footer__link { color: var( --ghai-accent ); } .ghai-retry { margin-top: 6px; border: 1px solid #fecaca; background: #fff; color: #991b1b; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px; } /* Mobile ------------------------------------------------------------ */ @media ( max-width: 480px ) { /* Full-height sheet. Physical insets so both positions behave identically. */ #ghai-root.ghai-root.is-open { bottom: 0 !important; right: 0 !important; left: 0 !important; } #ghai-root.is-open .ghai-panel { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; } /* Closed on mobile: the launcher keeps its configured corner. */ #ghai-root.ghai-root--bottom-right { right: 18px !important; left: auto !important; } #ghai-root.ghai-root--bottom-left { left: 18px !important; right: auto !important; } #ghai-root.ghai-root { bottom: 18px !important; } } /* Reduced motion & dark scheme -------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .ghai-launcher { transition: none; } .ghai-launcher:hover { transform: none; } .ghai-typing__dot { animation: none; opacity: .7; } } @media ( prefers-color-scheme: dark ) { .ghai-root { --ghai-bg: #111827; --ghai-fg: #f3f4f6; --ghai-muted: #9ca3af; --ghai-border: #374151; --ghai-surface: #0b1220; } .ghai-msg--error .ghai-msg__body { background: #3f1d1d; border-color: #7f1d1d; color: #fecaca; } .ghai-retry { background: #1f2937; color: #fecaca; border-color: #7f1d1d; } .ghai-notice { background: #3f1d1d; border-color: #7f1d1d; color: #fecaca; } .ghai-notice--final { background: #4c1515; border-color: #b91c1c; color: #fee2e2; } .ghai-footer__counter.is-urgent { color: #f87171; } } /* Inline shortcode trigger ------------------------------------------- */ .ghai-inline-open { display: inline-block; padding: 10px 20px; border-radius: 999px; border: 0; background: #0f766e; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .ghai-inline-open:hover { filter: brightness( 1.08 ); } .ghai-inline-open:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } .ghai-inline-open--link { background: none; color: #0f766e; padding: 0; text-decoration: underline; border-radius: 0; } /* Card media & extras ------------------------------------------------ */ .ghai-card { padding: 0; overflow: hidden; } .ghai-card__body { padding: 12px; } .ghai-card__media { margin: 0; line-height: 0; background: var( --ghai-surface ); } .ghai-card__image { display: block; width: 100%; height: 132px; object-fit: cover; max-width: 100%; } .ghai-card__tags { font-size: 12px; color: var( --ghai-muted ); margin-bottom: 6px; } .ghai-card__duration { color: var( --ghai-muted ); } .ghai-card__sale { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 0 6px; font-weight: 600; font-size: 12px; } .ghai-card__pricenote { font-size: 12px; color: var( --ghai-muted ); margin-bottom: 8px; } .ghai-card__links { display: flex; gap: 12px; flex-wrap: wrap; } .ghai-card__link--request { font-weight: 700; } /* --------------------------------------------------------------------------- * Diagnostics overlay. * * Shown only to an administrator who opened the site with the diagnostics * argument. It is deliberately plain and above everything, so a hostile theme * cannot hide the very report that explains why the widget is hidden. * ------------------------------------------------------------------------ */ .ghai-diagnostics { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 2147483001 !important; max-height: 70vh; overflow-y: auto; box-sizing: border-box; padding: 14px 18px; background: #111827; color: #f9fafb; font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; font-size: 13px; line-height: 1.7; text-align: right; direction: rtl; box-shadow: 0 2px 16px rgba( 0, 0, 0, 0.4 ); } .ghai-diagnostics__head { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .ghai-diagnostics__list { margin: 0; padding: 0; list-style: none; } .ghai-diagnostics__list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); } .ghai-diagnostics__mark { flex: 0 0 auto; width: 18px; font-weight: 700; } .ghai-diagnostics__list li.is-ok .ghai-diagnostics__mark { color: #34d399; } .ghai-diagnostics__list li.is-fail .ghai-diagnostics__mark { color: #f87171; } .ghai-diagnostics__detail { color: #d1d5db; word-break: break-word; } .ghai-diagnostics__note { flex: 1 0 100%; color: #fca5a5; } .ghai-diagnostics__actions { display: flex; gap: 8px; margin-top: 10px; } .ghai-diagnostics__button { padding: 6px 14px; border: 1px solid rgba( 255, 255, 255, 0.25 ); border-radius: 6px; background: transparent; color: #f9fafb; font: inherit; cursor: pointer; } .ghai-diagnostics__button:hover { background: rgba( 255, 255, 255, 0.1 ); } .ghai-diagnostics__raw { width: 100%; margin-top: 10px; box-sizing: border-box; font-family: monospace; font-size: 12px; direction: ltr; text-align: left; } @media ( max-width: 600px ) { .ghai-diagnostics { font-size: 12px; padding: 10px 12px; } }