/* OCM Chat Widget — Gemini Baseline (glass + lime/gold) */ /* ---------------------------------------------------- */ /* Theme tokens (inherit from site; safe fallbacks here) */ :root{ --ocm-bg:#050505; --ocm-panel:rgba(255,255,255,.06); --ocm-panel-strong:rgba(255,255,255,.08); --ocm-text:#e9edf3; --ocm-muted:#9aa3b2; --ocm-line:rgba(247,216,0,.14); --ocm-gold:#f7d800; --ocm-lime:#00ff7f; --ocm-grad:linear-gradient(90deg,var(--ocm-gold),var(--ocm-lime)); --ocm-radius:16px; --ocm-shadow:0 10px 28px rgba(0,0,0,.45); --ocm-font: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --ocm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* --------------------------------------------- */ /* Single-entry UX: default = bubble hidden */ /* Use to show */ /* --------------------------------------------- */ #ocm-chat-bubble{ display:none; /* One AI Support button only (site-level) */ } body.ocm-bubble-enabled #ocm-chat-bubble{ display:flex; position:fixed; bottom:20px; right:20px; width:60px;height:60px;border-radius:50%; align-items:center;justify-content:center; cursor:pointer;z-index:9999;font-size:26px; color:#001;background:var(--ocm-grad); box-shadow:var(--ocm-shadow); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; will-change:transform; } body.ocm-bubble-enabled #ocm-chat-bubble:hover{ transform:translateY(-2px); } body.ocm-bubble-enabled #ocm-chat-bubble:active{ transform:translateY(0); } /* --------------------------------------------- */ /* Chat container */ /* Opens when body has .ocm-chat-open */ /* (Your pages toggle this class on the ) */ /* --------------------------------------------- */ #ocm-chat-box{ position:fixed; right:20px; bottom:90px; width:clamp(300px, 32vw, 380px); max-height:min(70vh, 560px); background:var(--ocm-panel); color:var(--ocm-text); border:1px solid var(--ocm-line); border-radius:var(--ocm-radius); display:none; /* default closed */ flex-direction:column; box-shadow:var(--ocm-shadow); z-index:9999; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden; } /* Open state via body class */ body.ocm-chat-open #ocm-chat-box{ display:flex; } /* Small screens */ @media (max-width:480px){ #ocm-chat-box{ right:12px; bottom:86px; width:calc(100vw - 24px); max-height:min(78vh, 620px); } } /* --------------------------------------------- */ /* Header */ /* --------------------------------------------- */ #ocm-chat-header{ display:flex;align-items:center;justify-content:space-between; gap:10px; padding:10px 12px; font:700 0.95rem var(--ocm-font); color:var(--ocm-text); background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); border-bottom:1px solid var(--ocm-line); } #ocm-chat-header .ocm-title{ display:flex;align-items:center;gap:10px; } #ocm-chat-header .ocm-badge{ display:inline-flex;align-items:center;gap:8px; padding:4px 10px;border-radius:999px; background:var(--ocm-panel-strong); border:1px solid var(--ocm-line); font:600 0.78rem var(--ocm-font); color:#cfe9ff; } #ocm-chat-header button, #ocm-chat-header .ocm-close{ appearance:none;border:0;background:transparent;color:#cfd6e4; padding:6px;border-radius:10px;cursor:pointer; } #ocm-chat-header button:focus-visible, #ocm-chat-header .ocm-close:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(0,255,127,.45); border-radius:10px; } /* --------------------------------------------- */ /* Messages */ /* --------------------------------------------- */ #ocm-chat-messages{ flex:1;overflow-y:auto;padding:12px 12px 14px 12px; font:400 0.94rem var(--ocm-font); scrollbar-width:thin; scrollbar-color:rgba(0,255,127,.4) transparent; } #ocm-chat-messages::-webkit-scrollbar{width:10px} #ocm-chat-messages::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(0,255,127,.35), rgba(247,216,0,.35)); border-radius:8px; } #ocm-chat-messages a{color:#cfe9ff;text-decoration:underline} #ocm-chat-messages code{font-family:var(--ocm-mono);background:rgba(255,255,255,.06);padding:.1rem .35rem;border-radius:6px} #ocm-chat-messages pre{font-family:var(--ocm-mono);background:rgba(255,255,255,.06);padding:.8rem;border-radius:10px;overflow:auto} /* Message bubbles (class-based if JS sets .user/.bot; fallback for odd/even) */ #ocm-chat-messages .msg, #ocm-chat-messages > div{ display:block;max-width:92%;margin:8px 0;padding:10px 12px;border-radius:12px; border:1px solid var(--ocm-line);background:rgba(255,255,255,.04); } #ocm-chat-messages .msg.user, #ocm-chat-messages > div.user{ margin-left:auto;background:linear-gradient(180deg, rgba(0,255,127,.15), rgba(0,0,0,.12)); } #ocm-chat-messages .msg.bot, #ocm-chat-messages > div.bot{ margin-right:auto;background:linear-gradient(180deg, rgba(247,216,0,.12), rgba(0,0,0,.12)); } /* Fallback styling when classes are unknown: alternate sides */ #ocm-chat-messages > div:nth-child(odd){ margin-right:auto } #ocm-chat-messages > div:nth-child(even){ margin-left:auto } /* System / typing indicator (optional) */ #ocm-chat-messages .typing{ display:inline-block;width:36px;height:10px;border-radius:999px; background:linear-gradient(90deg, rgba(0,255,127,.6), rgba(247,216,0,.6)); background-size:200% 100%; animation:ocm-shimmer 1.2s linear infinite; } @keyframes ocm-shimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} } /* --------------------------------------------- */ /* Input */ /* --------------------------------------------- */ #ocm-chat-input{ display:flex;border-top:1px solid var(--ocm-line);background:rgba(0,0,0,.35); } #ocm-chat-input input{ flex:1;padding:12px;border:0;outline:0; background:rgba(255,255,255,.04);color:#fff; border-radius:0 0 0 var(--ocm-radius); font:500 0.95rem var(--ocm-font); } #ocm-chat-input input::placeholder{color:var(--ocm-muted)} #ocm-chat-input input:focus-visible{ outline:2px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,255,127,.45); } #ocm-chat-input button{ padding:12px 16px;border:0;cursor:pointer;font:800 .95rem var(--ocm-font); color:#001;background:var(--ocm-grad);border-radius:0 0 var(--ocm-radius) 0; transition:filter .18s ease, transform .18s ease; } #ocm-chat-input button:hover{ filter:brightness(1.08) } #ocm-chat-input button:active{ transform:translateY(1px) } #ocm-chat-input button:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(0,255,127,.45); } /* --------------------------------------------- */ /* Accessibility & Motion */ /* --------------------------------------------- */ :focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(0,255,127,.45) } @media (prefers-reduced-motion: reduce){ #ocm-chat-bubble, #ocm-chat-input button{ transition:none } }