/* ========================================================================== MGIT AI Help Desk Everything is scoped under #mgit-hd so it cannot leak into the theme, and every size is in px so a theme root font-size reset cannot break it. ========================================================================== */ #mgit-hd { --hd-navy: #10243f; --hd-navy-deep: #0a1730; --hd-gold: #c8a032; --hd-gold-soft: #e7cf8c; --hd-paper: #f7f2e7; --hd-paper-hi: #fffdf7; --hd-ink: #1b2333; --hd-skin: #d09a68; --hd-skin-shade: #b07f4f; --hd-hair: #2a2019; --hd-rule: rgba(16, 36, 63, 0.14); --hd-shadow: 0 18px 44px rgba(10, 23, 48, 0.28); --hd-serif: "Fraunces", "Georgia", serif; --hd-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; --hd-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } #mgit-hd, #mgit-hd * { box-sizing: border-box; } #mgit-hd button { font-family: inherit; margin: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } #mgit-hd :focus-visible { outline: 2px solid var(--hd-gold); outline-offset: 2px; } /* --- Launcher ----------------------------------------------------------- */ #mgit-hd .hd-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 99998; display: grid; place-items: center; width: 66px; height: 66px; padding: 0; border-radius: 50%; background: var(--hd-navy); box-shadow: var(--hd-shadow); animation: hd-bob 4.5s ease-in-out infinite; transition: transform 180ms ease, box-shadow 180ms ease; } #mgit-hd .hd-launcher:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(10, 23, 48, 0.34); } #mgit-hd .hd-launcher .hd-ava { width: 52px; height: 52px; } #mgit-hd .hd-dot { position: absolute; top: 4px; right: 4px; width: 13px; height: 13px; border: 2px solid var(--hd-navy); border-radius: 50%; background: var(--hd-gold); } #mgit-hd.is-open .hd-launcher { animation: none; transform: scale(0.9); opacity: 0.55; } #mgit-hd.is-open .hd-dot { display: none; } /* --- Plays nicely with the theme's popup ------------------------------- */ /* front-page.php opens a Bootstrap modal on load. Bootstrap puts .modal-open on while it is showing, so the launcher steps out of the way. */ body.modal-open #mgit-hd { display: none; } /* --- Panel shell -------------------------------------------------------- */ #mgit-hd .hd-panel { position: fixed; right: 24px; bottom: 104px; z-index: 99999; display: flex; flex-direction: column; overflow: hidden; width: 372px; height: 580px; max-height: calc(100vh - 140px); border: 1px solid var(--hd-rule); border-radius: 18px; background: var(--hd-paper); box-shadow: var(--hd-shadow); opacity: 0; transform: translateY(14px) scale(0.96); transform-origin: 100% 100%; pointer-events: none; transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1); } #mgit-hd.is-open .hd-panel { opacity: 1; transform: none; pointer-events: auto; } /* --- Header ------------------------------------------------------------- */ #mgit-hd .hd-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--hd-navy); border-bottom: 2px solid var(--hd-gold); } #mgit-hd .hd-head .hd-ava { flex: 0 0 auto; width: 42px; height: 42px; } #mgit-hd .hd-id { min-width: 0; flex: 1 1 auto; } #mgit-hd .hd-title { margin: 0; font-family: var(--hd-serif); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; color: var(--hd-paper); } #mgit-hd .hd-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--hd-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hd-gold-soft); } #mgit-hd .hd-status i { width: 6px; height: 6px; border-radius: 50%; background: #6fcf8c; animation: hd-pulse 2.4s ease-in-out infinite; } #mgit-hd .hd-close { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--hd-paper); opacity: 0.75; transition: opacity 150ms ease, background 150ms ease; } #mgit-hd .hd-close:hover { opacity: 1; background: rgba(247, 242, 231, 0.12); } /* --- Message log -------------------------------------------------------- */ #mgit-hd .hd-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; scroll-behavior: smooth; } #mgit-hd .hd-log::-webkit-scrollbar { width: 8px; } #mgit-hd .hd-log::-webkit-scrollbar-thumb { border: 2px solid var(--hd-paper); border-radius: 8px; background: rgba(16, 36, 63, 0.22); } #mgit-hd .hd-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--hd-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(16, 36, 63, 0.55); } #mgit-hd .hd-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hd-rule); } #mgit-hd .hd-msg { max-width: 86%; margin-bottom: 10px; padding: 10px 13px; font-family: var(--hd-sans); font-size: 14px; line-height: 1.55; word-wrap: break-word; } #mgit-hd .hd-msg-bot { border: 1px solid var(--hd-rule); border-left: 2px solid var(--hd-gold); border-radius: 4px 14px 14px 4px; background: var(--hd-paper-hi); color: var(--hd-ink); } #mgit-hd .hd-msg-user { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--hd-navy); color: var(--hd-paper); } #mgit-hd .hd-msg-bot a { color: var(--hd-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hd-gold); text-underline-offset: 2px; } #mgit-hd .hd-msg p { margin: 0 0 8px; } #mgit-hd .hd-msg p:last-child { margin-bottom: 0; } /* Typing indicator */ #mgit-hd .hd-typing { display: inline-flex; gap: 4px; align-items: center; height: 12px; } #mgit-hd .hd-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(16, 36, 63, 0.4); animation: hd-blip 1.2s ease-in-out infinite; } #mgit-hd .hd-typing span:nth-child(2) { animation-delay: 0.15s; } #mgit-hd .hd-typing span:nth-child(3) { animation-delay: 0.3s; } /* --- Quick replies ------------------------------------------------------ */ #mgit-hd .hd-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } #mgit-hd .hd-chip { padding: 6px 11px; border: 1px solid rgba(16, 36, 63, 0.28); border-radius: 999px; font-family: var(--hd-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--hd-navy); transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } #mgit-hd .hd-chip:hover { border-color: var(--hd-navy); background: var(--hd-navy); color: var(--hd-paper); } /* --- Composer ----------------------------------------------------------- */ #mgit-hd .hd-composer { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--hd-rule); background: var(--hd-paper-hi); } #mgit-hd .hd-input { flex: 1 1 auto; min-height: 42px; max-height: 96px; padding: 11px 13px; border: 1px solid var(--hd-rule); border-radius: 10px; background: #fff; font-family: var(--hd-sans); font-size: 14px; line-height: 1.4; color: var(--hd-ink); resize: none; } #mgit-hd .hd-input::placeholder { color: rgba(27, 35, 51, 0.42); } #mgit-hd .hd-input:focus { border-color: var(--hd-gold); outline: none; } #mgit-hd .hd-send { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--hd-navy); transition: background 150ms ease, transform 150ms ease; } #mgit-hd .hd-send:hover { background: var(--hd-navy-deep); transform: translateY(-1px); } #mgit-hd .hd-send svg { width: 18px; height: 18px; } #mgit-hd .hd-send svg path { stroke: var(--hd-gold) !important; fill: none !important; } #mgit-hd .hd-foot { flex: 0 0 auto; padding: 0 14px 12px; font-family: var(--hd-mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; color: rgba(16, 36, 63, 0.45); background: var(--hd-paper-hi); } /* --- Avatar ------------------------------------------------------------- */ /* !important is required: theme-level link/SVG colour rules override these. */ #mgit-hd .hd-ava .hd-ring, #mgit-hd .hd-ava .hd-spoke { stroke: var(--hd-gold) !important; fill: none !important; } #mgit-hd .hd-ava .hd-disc-d { fill: var(--hd-navy) !important; stroke: none !important; } #mgit-hd .hd-ava .hd-eye { fill: var(--hd-paper) !important; stroke: none !important; } #mgit-hd .hd-ava .hd-smile { stroke: var(--hd-paper) !important; fill: none !important; } #mgit-hd .hd-ava .hd-gleam { stroke: var(--hd-gold-soft) !important; stroke-opacity: 0.55; fill: none !important; } #mgit-hd .hd-ava .hd-disc { fill: var(--hd-paper-hi) !important; stroke: none !important; } #mgit-hd .hd-ava .hd-skin { fill: var(--hd-skin) !important; } #mgit-hd .hd-ava .hd-skin-d { fill: var(--hd-skin-shade) !important; } #mgit-hd .hd-ava .hd-hair { fill: var(--hd-hair) !important; } #mgit-hd .hd-ava .hd-shirt { fill: var(--hd-navy) !important; } #mgit-hd .hd-ava .hd-pupil { fill: var(--hd-ink) !important; } #mgit-hd .hd-ava .hd-acc { fill: var(--hd-gold) !important; } #mgit-hd .hd-ava .hd-collar { stroke: var(--hd-gold-soft) !important; fill: none !important; } #mgit-hd .hd-ava .hd-brow { stroke: var(--hd-hair) !important; fill: none !important; } #mgit-hd .hd-ava .hd-nose, #mgit-hd .hd-ava .hd-mouth { stroke: var(--hd-skin-shade) !important; fill: none !important; } #mgit-hd .hd-ava .hd-wheel { transform-box: view-box; transform-origin: 32px 32px; animation: hd-turn 34s linear infinite; } #mgit-hd.is-thinking .hd-ava .hd-wheel { animation-duration: 2.4s; } #mgit-hd .hd-ava .hd-eyes { transform-box: view-box; transform-origin: 32px 26.6px; animation: hd-blink 7s ease-in-out infinite; } /* --- Avatar picker ------------------------------------------------------ */ #mgit-hd .hd-face { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; opacity: 0.7; transition: opacity 150ms ease, background 150ms ease; } #mgit-hd .hd-face:hover, #mgit-hd .hd-face[aria-expanded="true"] { opacity: 1; background: rgba(247, 242, 231, 0.12); } #mgit-hd .hd-face svg { width: 19px; height: 19px; } #mgit-hd .hd-face svg circle, #mgit-hd .hd-face svg path { stroke: var(--hd-gold-soft) !important; fill: none !important; } #mgit-hd .hd-face svg circle[r="1.2"] { fill: var(--hd-gold-soft) !important; stroke: none !important; } #mgit-hd .hd-picker { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 12px 14px; border-bottom: 1px solid var(--hd-rule); background: var(--hd-paper-hi); scrollbar-width: none; } #mgit-hd .hd-picker::-webkit-scrollbar { display: none; } #mgit-hd .hd-picker[hidden] { display: none; } #mgit-hd .hd-opt { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; width: 64px; padding: 8px 4px 7px; border: 1px solid transparent; border-radius: 10px; transition: background 150ms ease, border-color 150ms ease; } #mgit-hd .hd-opt:hover { background: var(--hd-paper); } #mgit-hd .hd-opt[aria-pressed="true"] { border-color: var(--hd-gold); background: var(--hd-paper); } #mgit-hd .hd-opt svg { width: 38px; height: 38px; flex: 0 0 auto; } #mgit-hd .hd-opt span { font-family: var(--hd-mono); font-size: 8px; letter-spacing: 0.7px; text-transform: uppercase; line-height: 1.2; text-align: center; color: rgba(16, 36, 63, 0.6); } #mgit-hd .hd-opt[aria-pressed="true"] span { color: var(--hd-navy); } #mgit-hd .hd-ava-mount { flex: 0 0 auto; display: grid; place-items: center; } #mgit-hd .hd-launcher .hd-ava-mount .hd-ava { width: 52px; height: 52px; } #mgit-hd .hd-head .hd-ava-mount .hd-ava { width: 42px; height: 42px; } @media (max-width: 520px) { #mgit-hd .hd-launcher .hd-ava-mount .hd-ava { width: 46px; height: 46px; } } /* --- Keyframes ---------------------------------------------------------- */ @keyframes hd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes hd-turn { to { transform: rotate(360deg); } } @keyframes hd-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } } @keyframes hd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes hd-blip { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } } /* --- Mobile ------------------------------------------------------------- */ @media (max-width: 520px) { #mgit-hd .hd-panel { right: 10px; left: 10px; bottom: 92px; width: auto; height: auto; max-height: calc(100vh - 128px); min-height: 460px; } #mgit-hd .hd-launcher { right: 16px; bottom: 16px; width: 58px; height: 58px; } #mgit-hd .hd-launcher .hd-ava { width: 46px; height: 46px; } } /* --- Motion preferences ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #mgit-hd *, #mgit-hd *::before, #mgit-hd *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }