/* GSM Mortgage Calculator — floating AI assistant widget. Self-contained styles; brand palette matches the calculator. Dark mode keys off the same [data-theme="dark"] attribute the calculator sets on . */ :root { --gsmc-brand: #0a3d91; --gsmc-brand-lt: #3a8dde; --gsmc-bg: #ffffff; --gsmc-panel: #ffffff; --gsmc-text: #1a1f36; --gsmc-muted: #6b7280; --gsmc-border: #e8eef9; --gsmc-bot-bubble: #f4f7fc; --gsmc-user-bubble: #0a3d91; --gsmc-user-text: #ffffff; --gsmc-shadow: 0 12px 40px rgba(10, 32, 64, 0.22); } [data-theme="dark"] { --gsmc-bg: #131a2b; --gsmc-panel: #1a2236; --gsmc-text: #e7ecf6; --gsmc-muted: #9aa6bd; --gsmc-border: #2a3550; --gsmc-bot-bubble: #222c44; --gsmc-user-bubble: #3a8dde; --gsmc-user-text: #0b1220; --gsmc-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } /* Launcher button */ .gsmc-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; display: flex; align-items: center; gap: 9px; border: none; border-radius: 999px; padding: 13px 20px 13px 17px; background: var(--gsmc-brand); color: #fff; font: 600 15px/1 Arial, Helvetica, sans-serif; cursor: pointer; box-shadow: var(--gsmc-shadow); transition: transform 0.15s ease, background 0.15s ease; } .gsmc-launcher:hover { transform: translateY(-2px); background: #0c4aad; } .gsmc-launcher svg { width: 22px; height: 22px; flex: none; } .gsmc-launcher.gsmc-hidden { display: none; } /* Panel */ .gsmc-panel { position: fixed; right: 22px; bottom: 22px; z-index: 2147483001; width: 374px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 40px); display: none; flex-direction: column; background: var(--gsmc-panel); color: var(--gsmc-text); border: 1px solid var(--gsmc-border); border-radius: 16px; box-shadow: var(--gsmc-shadow); overflow: hidden; font-family: Arial, Helvetica, sans-serif; } .gsmc-panel.gsmc-open { display: flex; animation: gsmc-pop 0.18s ease; } @keyframes gsmc-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Header */ .gsmc-header { display: flex; align-items: center; gap: 11px; padding: 15px 16px; background: var(--gsmc-brand); color: #fff; } .gsmc-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--gsmc-brand); overflow: hidden; } .gsmc-logo { width: 100%; height: 100%; object-fit: contain; display: block; } .gsmc-htext { flex: 1; min-width: 0; } .gsmc-htitle { font-size: 15px; font-weight: 700; } .gsmc-hsub { font-size: 12px; opacity: 0.85; margin-top: 1px; } .gsmc-clear { background: none; border: none; color: #fff; cursor: pointer; opacity: 0.8; padding: 4px; display: flex; align-items: center; } .gsmc-clear svg { width: 18px; height: 18px; } .gsmc-clear:hover { opacity: 1; } .gsmc-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; opacity: 0.85; padding: 4px; } .gsmc-close:hover { opacity: 1; } /* Messages */ .gsmc-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--gsmc-bg); } .gsmc-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .gsmc-msg.bot { align-self: flex-start; background: var(--gsmc-bot-bubble); color: var(--gsmc-text); border-bottom-left-radius: 4px; } .gsmc-msg.user { align-self: flex-end; background: var(--gsmc-user-bubble); color: var(--gsmc-user-text); border-bottom-right-radius: 4px; } .gsmc-msg a { color: inherit; } .gsmc-lead-note { align-self: center; font-size: 12.5px; color: var(--gsmc-muted); background: var(--gsmc-bot-bubble); border: 1px solid var(--gsmc-border); border-radius: 10px; padding: 7px 12px; text-align: center; } .gsmc-lead-note strong { color: #1c8a5a; } /* Typing dots */ .gsmc-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--gsmc-bot-bubble); border-radius: 14px; border-bottom-left-radius: 4px; } .gsmc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gsmc-muted); opacity: 0.5; animation: gsmc-blink 1.2s infinite; } .gsmc-typing span:nth-child(2) { animation-delay: 0.2s; } .gsmc-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes gsmc-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 0.9; } } /* Suggestion chips */ .gsmc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 6px; background: var(--gsmc-bg); } .gsmc-chip { border: 1px solid var(--gsmc-border); background: var(--gsmc-panel); color: var(--gsmc-brand); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; } [data-theme="dark"] .gsmc-chip { color: var(--gsmc-brand-lt); } .gsmc-chip:hover { border-color: var(--gsmc-brand-lt); } .gsmc-chip-primary { background: var(--gsmc-brand); color: #fff; border-color: var(--gsmc-brand); font-weight: 700; } [data-theme="dark"] .gsmc-chip-primary { color: #fff; } .gsmc-chip-primary:hover { background: #0c4aad; border-color: #0c4aad; } .gsmc-chip-toggle { background: var(--gsmc-bot-bubble); font-weight: 600; } .gsmc-chip-toggle:hover { border-color: var(--gsmc-brand-lt); } /* Scripted-mode contact form */ .gsmc-cf { align-self: stretch; background: var(--gsmc-bot-bubble); border: 1px solid var(--gsmc-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .gsmc-cf-title { font-size: 14px; font-weight: 700; color: var(--gsmc-text); } .gsmc-cf-intro { font-size: 12.5px; color: var(--gsmc-muted); line-height: 1.4; margin-bottom: 2px; } .gsmc-cf-input { border: 1px solid var(--gsmc-border); border-radius: 9px; padding: 9px 11px; font: 14px/1.3 Arial, Helvetica, sans-serif; background: var(--gsmc-bg); color: var(--gsmc-text); } .gsmc-cf-input:focus { outline: none; border-color: var(--gsmc-brand-lt); } .gsmc-cf-send { margin-top: 2px; border: none; border-radius: 9px; cursor: pointer; background: var(--gsmc-brand); color: #fff; font: 700 14px/1 Arial, Helvetica, sans-serif; padding: 11px; } .gsmc-cf-send:hover { background: #0c4aad; } .gsmc-cf-send:disabled { opacity: 0.6; cursor: default; } .gsmc-cf-msg { font-size: 12.5px; color: var(--gsmc-muted); min-height: 1px; } .gsmc-cf-msg.err { color: #d6453c; } /* Composer */ .gsmc-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--gsmc-border); background: var(--gsmc-panel); } .gsmc-input { flex: 1; resize: none; border: 1px solid var(--gsmc-border); border-radius: 10px; padding: 10px 12px; font: 14px/1.4 Arial, Helvetica, sans-serif; background: var(--gsmc-bg); color: var(--gsmc-text); max-height: 96px; } .gsmc-input:focus { outline: none; border-color: var(--gsmc-brand-lt); } .gsmc-send { flex: none; width: 42px; border: none; border-radius: 10px; cursor: pointer; background: var(--gsmc-brand); color: #fff; display: flex; align-items: center; justify-content: center; } .gsmc-send:hover { background: #0c4aad; } .gsmc-send:disabled { opacity: 0.5; cursor: default; } .gsmc-send svg { width: 19px; height: 19px; } .gsmc-disclaimer { font-size: 10.5px; color: var(--gsmc-muted); text-align: center; padding: 0 12px 10px; background: var(--gsmc-panel); line-height: 1.4; } @media (max-width: 480px) { .gsmc-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 24px); } .gsmc-launcher { right: 14px; bottom: 14px; } .gsmc-launcher .gsmc-launcher-label { display: none; } .gsmc-launcher { padding: 14px; } }