/* ========================================================= Kobra widget — scoped under #kobra-root. Sits as a fixed overlay on top of napapay.ai homepage. ========================================================= */ #kobra-root{ --k-accent: #0094d4; --k-accent-soft: rgba(0,148,212,0.18); --k-bg: #0f1822; --k-bg-2: #14202d; --k-bg-3: #1b2a3a; --k-text: #eef3f7; --k-text-faint: #92a3b3; --k-border: rgba(255,255,255,0.08); --k-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,148,212,0.08); font-family: 'Inter', system-ui, sans-serif; } /* Light variant — site already exposes data-theme="light" on */ :root[data-theme="light"] #kobra-root, :root[data-theme-mode="light"] #kobra-root{ --k-bg: #ffffff; --k-bg-2: #f6fafd; --k-bg-3: #eaf4fa; --k-text: #14202d; --k-text-faint: #5e6e7c; --k-border: rgba(0,32,56,0.10); --k-shadow: 0 30px 80px rgba(0,32,56,0.15), 0 0 0 1px rgba(0,148,212,0.10); } /* ========================================================= Magnifier tile — INHERITS sibling P&S tile colors exactly. No background/border overrides here — the Tailwind classes on the anchor (bg-white, border-gray-200, hover:bg-[--csas]) already match the other tiles. We only add: - the floating-icon canvas zone (top of card) - the lens behavior (desktop hover, touch auto-cycle) - the CTA chip - the expand-into-chat animation on click ========================================================= */ .kobra-magnifier-tile{ cursor:pointer; position:relative; overflow:hidden; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease, box-shadow .35s ease; transform-origin: 50% 50%; } .kobra-magnifier-tile:hover{box-shadow:0 18px 50px rgba(0,32,56,0.10)} /* ----- Canvas zone where icons float ----- */ .kobra-magnifier-tile .kmt-canvas{ position:relative; width:100%; height:160px; margin-bottom:22px; overflow:hidden; border-radius:18px; background:transparent; -webkit-user-select:none;user-select:none; } @media (max-width:640px){ .kobra-magnifier-tile .kmt-canvas{height:130px;margin-bottom:18px} } /* ----- Individual industry icons (10 of them) ----- */ .kobra-magnifier-tile .kmt-ico{ position:absolute; width:34px;height:34px; color:#0094d4; opacity:0.28; will-change: transform, opacity; transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); pointer-events:none; display:block; } .kobra-magnifier-tile .kmt-ico svg{width:100%;height:100%;display:block} .kobra-magnifier-tile .kmt-ico.in-lens{ opacity:1; transform: translate(var(--kx,0px), var(--ky,0px)) scale(2.05); filter: drop-shadow(0 4px 10px rgba(0,148,212,0.30)); } /* ----- Hover lens (desktop only) ----- */ .kobra-magnifier-tile .kmt-lens{ position:absolute; width:140px;height:140px; border-radius:50%; border:2px solid rgba(0,148,212,0.55); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 70%), rgba(0,148,212,0.04); box-shadow: inset 0 0 30px rgba(0,148,212,0.08), 0 6px 20px rgba(0,148,212,0.18); pointer-events:none; opacity:0; transform: translate(-50%,-50%) scale(.85); transition: opacity .18s ease, transform .25s cubic-bezier(.22,.61,.36,1); z-index:2; } .kobra-magnifier-tile .kmt-canvas.show-lens .kmt-lens{ opacity:1; transform: translate(-50%,-50%) scale(1); } @media (hover:none),(pointer:coarse){ .kobra-magnifier-tile .kmt-canvas .kmt-lens{display:none} } /* ----- Industry label that flashes under the lens / cycle ----- */ .kobra-magnifier-tile .kmt-label{ position:absolute; left:50%;bottom:8px; transform: translateX(-50%); font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; color:#0094d4; background:rgba(255,255,255,0.85); backdrop-filter: blur(4px); padding:4px 10px;border-radius:99px; opacity:0; transition: opacity .25s ease; pointer-events:none; z-index:3; white-space:nowrap; } .kobra-magnifier-tile .kmt-canvas.show-label .kmt-label{opacity:1} /* ----- CTA chip ----- */ .kobra-magnifier-tile .kmt-cta{ display:inline-flex;align-items:center;gap:8px; margin-top:20px;color:#0094d4;font-weight:700;font-size:1rem; } .kobra-magnifier-tile .kmt-cta svg{width:18px;height:18px;transition:transform .25s ease} .kobra-magnifier-tile:hover .kmt-cta svg{transform:translateX(4px)} /* ----- Expand-into-chat animation on click ----- */ .kobra-magnifier-tile.expanding{ transform: scale(1.08); opacity:0; box-shadow:0 40px 120px rgba(0,148,212,0.35); } /* ========================================================= Persistent bubble — Kobra logo, no background ========================================================= */ .kobra-bubble{ position:fixed;right:20px;bottom:90px;z-index:9000; width:64px;height:64px;border-radius:50%; background:transparent; border:none;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; filter: drop-shadow(0 6px 18px rgba(0,148,212,0.35)); transition: transform .25s ease, filter .25s ease; } .kobra-bubble img{width:100%;height:100%;display:block;object-fit:contain} .kobra-bubble:hover{transform:scale(1.06);filter: drop-shadow(0 10px 24px rgba(0,148,212,0.55))} @media (max-width:640px){ /* Mobile: bubble parked top-of-toggle so the page's theme switch (fixed bottom-right on coarse pointers) doesn't overlap. */ .kobra-bubble{right:14px;bottom:64px;width:52px;height:52px} } @media (pointer:coarse),(max-width:900px){ /* The site's theme toggle sits at bottom:14px right:14px on touch devices. Stack our bubble 60px above so they're vertically aligned, not overlapping. */ .kobra-bubble{bottom:64px} } body.kobra-fullscreen .kobra-bubble{display:none} body.kobra-side-panel .kobra-bubble{display:none} /* Hide the homepage theme toggle while chat is open — keeps the chat surface clean and avoids a stray button floating above the panel. */ body.kobra-fullscreen #np-theme-toggle, body.kobra-side-panel #np-theme-toggle{display:none} /* When we relocate the page's theme toggle into the mobile header, un-float it so it sits inline next to the Client Portal button. */ .np-theme-toggle.np-theme-toggle--inline{ position:static !important; top:auto !important;bottom:auto !important; left:auto !important;right:auto !important; margin-right:10px; box-shadow:none !important; background:transparent !important; } /* ========================================================= Chat panel. Desktop ≥ 1024px: side panel covering 60% from right. Mobile/tablet: fullscreen overlay. ========================================================= */ .kobra-chat{ position:fixed; top:0;right:0;bottom:0;left:auto; width:60%;min-width:560px; z-index:9500; background:var(--k-bg); color:var(--k-text); display:none; flex-direction:column; overflow:hidden; box-shadow:-20px 0 60px rgba(0,32,56,0.25); transform: translateX(100%); transition: transform .45s cubic-bezier(.22,.61,.36,1); } .kobra-chat.open{display:flex; transform: translateX(0)} @media (max-width:1024px){ .kobra-chat{width:100%;min-width:0;left:0;box-shadow:none} } /* Prevent body scroll behind chat */ body.kobra-fullscreen{overflow:hidden} body.kobra-side-panel{overflow:hidden} @keyframes kobraOpenChat{ from{opacity:0; transform: scale(.96)} to{opacity:1; transform: scale(1)} } /* Dim the rest of the page when side panel is open (desktop only) */ .kobra-backdrop{ position:fixed;inset:0;background:rgba(0,32,56,0.35); z-index:9400;opacity:0;pointer-events:none; transition:opacity .35s ease; } body.kobra-side-panel .kobra-backdrop{opacity:1;pointer-events:auto} @media (max-width:1024px){ body.kobra-side-panel .kobra-backdrop{display:none} } .kobra-chat::before{ content:"";position:absolute;inset:0; background: radial-gradient(ellipse at top right, rgba(0,148,212,0.10) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(0,148,212,0.06) 0%, transparent 55%); pointer-events:none;z-index:0; } .kobra-chat-header{ position:relative;z-index:2; display:flex;align-items:center;justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--k-border); max-width:1100px;margin:0 auto;width:100%; } .kobra-chat-id{display:flex;align-items:center;gap:12px} .kobra-avatar{ width:36px;height:36px;border-radius:50%; background:transparent; display:flex;align-items:center;justify-content:center; overflow:hidden; flex:0 0 36px; } .kobra-avatar img{ width:100%;height:100%;object-fit:contain;display:block; } .kobra-chat-meta{display:flex;flex-direction:column} .kobra-chat-name{font-weight:700;font-size:15px} .kobra-chat-sub{font-size:12px;color:var(--k-text-faint)} .kobra-chat-close{ background:transparent;border:none;color:var(--k-text-faint); cursor:pointer;font-size:24px;padding:4px 12px; } .kobra-chat-close:hover{color:var(--k-text)} .kobra-chat-body{ position:relative;z-index:2; flex:1;display:flex;gap:20px; width:100%;margin:0 auto; padding:20px 24px;overflow:hidden; } .kobra-chat-thread{ flex:1; display:flex;flex-direction:column;gap:14px; overflow-y:auto;padding:8px 4px 16px; } .kobra-canvas-side{ width:300px;flex-shrink:0; display:flex;flex-direction:column;gap:12px; overflow-y:auto;padding:8px 4px 16px; } @media (max-width:900px){ /* v3e: On mobile, fold the canvas (incl. schematic) INTO the chat thread instead of hiding it. JS appends .kobra-arch into the thread on small viewports so the user sees the same outcome. */ .kobra-canvas-side{display:none} } /* Inline (mobile) schematic — appended into the thread by JS */ .kobra-chat-thread .kobra-arch{margin-top:8px;width:100%;max-width:560px;align-self:center} .kobra-chat-thread .kobra-canvas-tile{align-self:stretch;max-width:560px;margin:0 auto;width:100%} .kobra-bubble-msg{ max-width:90%; padding:12px 16px;border-radius:14px; line-height:1.5;font-size:14.5px; animation:kobraIn .35s ease; } .kobra-bubble-msg.kobra{ background:var(--k-bg-2);border:1px solid var(--k-border); border-bottom-left-radius:4px;align-self:flex-start; } .kobra-bubble-msg.user{ background:var(--k-accent);color:#fff; border-bottom-right-radius:4px;align-self:flex-end; } @keyframes kobraIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .kobra-composer{ position:relative;z-index:2; border-top:1px solid var(--k-border); max-width:1100px;margin:0 auto;width:100%; padding:14px 28px 22px; display:flex;gap:10px;align-items:center; } .kobra-composer input{ flex:1;background:var(--k-bg-2); border:1px solid var(--k-border); color:var(--k-text); padding:12px 16px;border-radius:12px;font-size:14.5px;outline:none; } .kobra-composer input:focus{border-color:var(--k-accent)} .kobra-composer button{ background:var(--k-accent);color:#fff;border:none; padding:12px 20px;border-radius:12px;cursor:pointer;font-weight:600; } /* ========================================================= Privacy & disclaimer cards ========================================================= */ .kobra-card{ background:var(--k-bg-2);border:1px solid var(--k-border); border-radius:14px;padding:16px;font-size:13.5px;line-height:1.55; align-self:flex-start;max-width:100%; } .kobra-card h4{margin:0 0 8px;font-size:14px;color:var(--k-text)} .kobra-card ul{margin:6px 0 10px 18px;padding:0;color:var(--k-text-faint)} .kobra-card .kobra-btn{ background:var(--k-accent);color:#fff;border:none; padding:8px 16px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px; } .kobra-waiver{ margin-top:8px;font-size:12px;color:var(--k-text-faint); } .kobra-waiver summary{cursor:pointer;font-weight:600} .kobra-waiver p{margin:8px 0 0;line-height:1.55} /* Attachment scan indicator (rule 18) */ .kobra-scan{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--k-text-faint)} .kobra-scan.ok{color:var(--k-accent);font-weight:600} .kobra-scan-spin{ width:14px;height:14px;border-radius:50%; border:2px solid rgba(0,148,212,0.25); border-top-color:var(--k-accent); animation:kobraSpin .8s linear infinite; display:inline-block; } @keyframes kobraSpin{to{transform:rotate(360deg)}} /* ========================================================= Solution canvas ========================================================= */ .kobra-canvas-tile{ background:var(--k-bg-2);border:1px solid var(--k-border); border-radius:14px;padding:14px; animation:kobraIn .35s ease; } .kobra-canvas-tile[hidden]{display:none} .kobra-ct-label{ font-size:11px;text-transform:uppercase;letter-spacing:.08em; color:var(--k-text-faint);margin-bottom:8px;font-weight:600; } .kobra-ct-value{font-size:14px;font-weight:600} .kobra-chip{ display:inline-block;padding:4px 10px;border-radius:99px; background:var(--k-accent-soft);color:var(--k-accent); font-size:12px;font-weight:600;margin:2px 4px 2px 0; } /* ========================================================= FLOW SCHEMATIC — with branded footer + download button ========================================================= */ .kobra-arch-header{ display:flex;justify-content:space-between;align-items:center; margin-bottom:10px; } .kobra-arch-title{ font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--k-accent); } .kobra-arch-download{ background:transparent;border:1px solid var(--k-accent); color:var(--k-accent);padding:6px 12px;border-radius:8px; font-size:12px;font-weight:600;cursor:pointer; display:inline-flex;align-items:center;gap:6px; transition: background .2s ease, color .2s ease; } .kobra-arch-download:hover{background:var(--k-accent);color:#fff} .kobra-arch-download svg{width:14px;height:14px} .kobra-arch-footer{ display:flex;justify-content:space-between;align-items:center; margin-top:14px;padding-top:12px; border-top:1px solid var(--k-border); font-size:10.5px;color:var(--k-text-faint); } .kobra-arch-logos{display:flex;align-items:center;gap:10px} .kobra-arch-logos img{height:18px;width:auto;opacity:0.85} .kobra-arch-logos .kobra-arch-logo-kobra{height:22px} .kobra-arch-copy{font-size:10px;letter-spacing:.02em} .kobra-arch{ background:var(--k-bg-2); border:1px solid rgba(0,148,212,0.25); border-radius:14px;padding:16px; animation:kobraIn .4s ease; } .kobra-arch[hidden]{display:none} .kobra-arch-svg{width:100%;height:auto;display:block;color:var(--k-accent)} /* Anchor nodes (Business / Client) — always lit */ .kobra-anchor circle{ fill:var(--k-accent); stroke:rgba(255,255,255,0.25);stroke-width:1.5; filter:drop-shadow(0 0 12px rgba(0,148,212,0.40)); } .kobra-anchor text{ fill:var(--k-text);font-size:11px; font-family:'Inter',sans-serif;text-anchor:middle;font-weight:700; } .kobra-anchor use{color:#fff} /* Lane = a horizontal path through middle. v3e: Inactive lanes are HIDDEN entirely (Pavel: "scheme should only show what we are suggesting in that particular case (no faded pos icon)"). Anchors stay lit; only the relevant lanes render. */ .kobra-lane{display:none} .kobra-lane.active{display:inline;opacity:1} .kobra-lane .kobra-node-ring{ fill:var(--k-bg-3); stroke:var(--k-accent);stroke-width:1.4; } .kobra-lane.active .kobra-node-ring{ fill:var(--k-accent-soft); stroke:var(--k-accent);stroke-width:1.8; filter:drop-shadow(0 0 8px rgba(0,148,212,0.35)); } .kobra-lane text{ fill:var(--k-text);font-size:10.5px; font-family:'Inter',sans-serif;text-anchor:middle; } .kobra-lane.active text{font-weight:600} .kobra-lane .kobra-lane-label{ font-size:9.5px;text-transform:uppercase;letter-spacing:.08em; fill:var(--k-text-faint);font-weight:600; } .kobra-lane.active .kobra-lane-label{fill:var(--k-accent)} /* Lane segments (connecting strokes) */ .kobra-segment{ fill:none;stroke:var(--k-accent);stroke-width:1.4; stroke-dasharray:200;stroke-dashoffset:200; opacity:0.18; transition:opacity .4s ease; } .kobra-lane.active .kobra-segment{ opacity:0.8; animation:kobraDraw .9s ease forwards; } @keyframes kobraDraw{to{stroke-dashoffset:0}} /* NapaPay platform ribbon — subtle watermark behind middle */ .kobra-platform-band{ fill:url(#kobra-band-gradient); opacity:0.0; transition:opacity .5s ease; } .kobra-arch.revealed .kobra-platform-band{opacity:0.18} .kobra-platform-text{ fill:var(--k-accent); font-family:'Inter',sans-serif; font-size:9px;letter-spacing:.18em; text-transform:uppercase;font-weight:700; opacity:0;text-anchor:middle; transition:opacity .6s ease .2s; } .kobra-arch.revealed .kobra-platform-text{opacity:0.55} .kobra-arch-caption{ margin:12px 4px 0;font-size:11.5px;line-height:1.5; color:var(--k-text-faint);font-style:italic; } /* Live backend states (v3f) ─────────────────────────────────────────── */ .kobra-suggest-rail{ display:flex;flex-wrap:wrap;gap:8px; padding:10px 4px 4px;margin:8px 0 4px; } .kobra-suggest-chip{ background:transparent; border:1px solid var(--k-border, rgba(0,148,212,0.35)); color:var(--k-accent,#0094d4); padding:7px 14px;border-radius:18px; font-family:'Inter',sans-serif;font-size:13px; cursor:pointer;line-height:1.2; transition:background .15s ease, color .15s ease, border-color .15s ease; } .kobra-suggest-chip:hover{ background:var(--k-accent,#0094d4);color:#fff;border-color:var(--k-accent,#0094d4); } .kobra-typing{ display:inline-flex;gap:4px;align-items:center;padding:2px 0; } .kobra-typing span{ width:6px;height:6px;border-radius:50%; background:var(--k-text-faint,#8a99a8); opacity:0.6;animation:kobra-typing-bounce 1.2s infinite ease-in-out; } .kobra-typing span:nth-child(2){animation-delay:0.15s} .kobra-typing span:nth-child(3){animation-delay:0.3s} @keyframes kobra-typing-bounce{ 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:.95} } /* Thinking-state logo — replaces the dot bounce. 3 named animations; JS picks one per turn so the loop feels alive without being noisy. */ .kobra-thinking-logo{ display:inline-flex;align-items:center;padding:2px 0; } .kobra-thinking-logo img{ width:28px;height:28px;display:block;object-fit:contain; transform-origin:50% 50%; filter:drop-shadow(0 0 4px rgba(0,148,212,0.25)); will-change:transform,filter; } /* Default + variants */ .kobra-thinking-logo.kth-orbit img{ animation: kobra-orbit 1.6s ease-in-out infinite; } .kobra-thinking-logo.kth-pulse img{ animation: kobra-pulse-hue 1.8s ease-in-out infinite; } .kobra-thinking-logo.kth-chase img{ animation: kobra-chase 1.9s cubic-bezier(.4,0,.6,1) infinite; } /* Half-clockwise wobble — gentle back and forth */ @keyframes kobra-orbit{ 0% { transform: rotate(-18deg) scale(0.96); } 50% { transform: rotate( 18deg) scale(1.02); } 100% { transform: rotate(-18deg) scale(0.96); } } /* Soft pulse + hue shift across brand blues (accent -> deeper -> back) */ @keyframes kobra-pulse-hue{ 0% { transform: scale(0.94); filter: drop-shadow(0 0 4px rgba(0,148,212,0.20)) hue-rotate(0deg); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(0,148,212,0.55)) hue-rotate(-18deg); } 100% { transform: scale(0.94); filter: drop-shadow(0 0 4px rgba(0,148,212,0.20)) hue-rotate(0deg); } } /* Chasing-tail — quick sweep clockwise, brief pause, sweep back. Never a full spin. */ @keyframes kobra-chase{ 0% { transform: rotate(0deg); } 35% { transform: rotate(140deg); } 50% { transform: rotate(140deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } /* Respect users who don't want motion */ @media (prefers-reduced-motion: reduce){ .kobra-thinking-logo img{ animation: none !important; } } .kobra-error{color:#c0392b;font-size:13px} /* Discreet inline privacy hint — sits at top of thread, no consent gate (v3g) */ .kobra-privacy-hint{ font-size:12px; color:var(--k-text-faint,#8a99a8); background:transparent; padding:4px 6px 8px; text-align:center; line-height:1.4; } .kobra-privacy-link{ color:var(--k-accent,#0094d4); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; } .kobra-privacy-link:hover{ text-decoration-style:solid; } /* Privacy & disclaimer modal (full overlay, dismissible) */ .kobra-modal{ position:fixed;inset:0;z-index:99999; background:rgba(0,0,0,0.55); display:flex;align-items:center;justify-content:center; padding:20px; animation:kobra-fade-in 0.15s ease; } @keyframes kobra-fade-in{from{opacity:0}to{opacity:1}} .kobra-modal-card{ background:var(--k-surface,#1e2733); color:var(--k-text,#e7ecf2); border-radius:18px; padding:24px 26px 22px; max-width:520px;width:100%;max-height:80vh;overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,0.5); position:relative; font-family:'Inter',sans-serif; font-size:14px;line-height:1.55; } .kobra-modal-card h4{ margin:0 0 8px;color:var(--k-accent,#0094d4);font-size:15px;font-weight:600; } .kobra-modal-card h4 + p{ margin-top:0 } .kobra-modal-card p{ margin:8px 0 12px } .kobra-modal-card ul{ margin:4px 0 14px;padding-left:18px } .kobra-modal-card ul li{ margin:4px 0 } .kobra-modal-card h4:nth-of-type(2){ margin-top:18px } .kobra-modal-close{ position:absolute;top:10px;right:12px; background:transparent;border:0;color:var(--k-text-faint,#8a99a8); font-size:24px;line-height:1;cursor:pointer;padding:4px 8px; } .kobra-modal-close:hover{ color:var(--k-text,#e7ecf2); } /* Light-mode adjustments */ html[data-theme="light"] .kobra-modal-card, html[data-theme-mode="light"] .kobra-modal-card{ background:#ffffff;color:#1d2733; box-shadow:0 24px 60px rgba(0,0,0,0.18); } /* =========================================================== INLINE T&C / PRIVACY CONSENT BUBBLE (v3g, 2026-05-14) Renders in the chat thread right after the bot first asks for contact details. Single humble checkbox row. =========================================================== */ .kobra-consent-inline{ align-self:stretch; margin:6px 0 4px; padding:10px 12px; border-radius:12px; background:rgba(0,148,212,0.08); border:1px solid rgba(0,148,212,0.32); font-size:13.5px;line-height:1.45; color:var(--k-text,#e7ecf2); transition:background .25s ease, border-color .25s ease, transform .25s ease; } .kobra-consent-row{ display:flex;align-items:flex-start;gap:10px;cursor:pointer; } .kobra-consent-check{ flex:0 0 auto;width:16px;height:16px;margin-top:2px; accent-color:#0094d4;cursor:pointer; } .kobra-consent-text{ flex:1 1 auto; } .kobra-consent-link{ color:#0094d4;text-decoration:underline;text-underline-offset:2px; } .kobra-consent-link:hover{ text-decoration:none; } .kobra-consent-inline.kobra-consent-ok{ background:rgba(0,148,212,0.14); border-color:rgba(0,148,212,0.45); } .kobra-consent-inline.kobra-consent-ok .kobra-consent-check{ pointer-events:none } .kobra-consent-inline.kobra-consent-flash{ animation:kobraConsentNudge .55s ease; border-color:#0094d4; background:rgba(0,148,212,0.18); } @keyframes kobraConsentNudge{ 0% { transform:translateX(0) } 20% { transform:translateX(-4px) } 40% { transform:translateX(4px) } 60% { transform:translateX(-3px) } 80% { transform:translateX(2px) } 100% { transform:translateX(0) } } html[data-theme="light"] .kobra-consent-inline, html[data-theme-mode="light"] .kobra-consent-inline{ background:rgba(0,148,212,0.06); color:#1d2733; border-color:rgba(0,148,212,0.28); } /* =========================================================== PRIVACY GATE CARD (v3i, v5.5.8-fix5 2026-05-15) First message in every session. Composer is locked until the visitor clicks Continue. Replaces the old mid-session .kobra-consent-inline path (rule 16, locked first message). =========================================================== */ .kobra-privacy-gate{ align-self:stretch; margin:4px 0 8px; padding:14px 16px; border-radius:14px; background:rgba(0,148,212,0.08); border:1px solid rgba(0,148,212,0.32); color:var(--k-text,#e7ecf2); font-size:13.5px;line-height:1.45; } .kpg-title{ margin:0 0 8px; font-size:15px;font-weight:600; color:var(--k-accent,#0094d4); } .kpg-body{ margin:0 0 10px; } .kpg-body ul{ margin:6px 0 10px; padding-left:18px; } .kpg-body ul li{ margin:3px 0; } .kpg-waiver{ margin:8px 0 12px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); font-size:12.5px;line-height:1.45; } .kpg-waiver > summary{ cursor:pointer; color:var(--k-text-faint,#8a99a8); list-style:revert; user-select:none; } .kpg-waiver[open] > summary{ color:var(--k-text,#e7ecf2); margin-bottom:6px; } .kpg-waiver p{ margin:6px 0 0; color:var(--k-text-faint,#a3afbb); } .kpg-continue{ display:inline-flex;align-items:center;justify-content:center; min-height:38px;padding:8px 18px; border:0;border-radius:10px; background:var(--k-accent,#0094d4); color:#ffffff;font-size:14px;font-weight:600; cursor:pointer; transition:background .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 18px rgba(0,148,212,0.28); } .kpg-continue:hover{ background:#00a6ed; transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,148,212,0.36); } .kpg-continue:active{ transform:translateY(0); } .kpg-foot{ display:block; margin-top:10px; font-size:12px; color:var(--k-text-faint,#8a99a8); } .kobra-privacy-gate.kpg-accepted{ background:rgba(0,148,212,0.05); border-color:rgba(0,148,212,0.22); padding:8px 12px; } .kpg-accepted-line{ display:flex;align-items:center;gap:8px; font-size:12.5px; color:var(--k-text-faint,#a3afbb); } .kpg-accepted-line .kpg-check{ color:var(--k-accent,#0094d4); font-weight:700; } .kpg-accepted-line .kpg-review{ margin-left:auto; color:var(--k-accent,#0094d4); background:transparent;border:0; font-size:12.5px;cursor:pointer; text-decoration:underline;text-underline-offset:2px; } .kpg-accepted-line .kpg-review:hover{ text-decoration:none; } /* Light-mode overrides */ html[data-theme="light"] .kobra-privacy-gate, html[data-theme-mode="light"] .kobra-privacy-gate{ background:rgba(0,148,212,0.06); color:#1d2733; border-color:rgba(0,148,212,0.28); } html[data-theme="light"] .kpg-waiver, html[data-theme-mode="light"] .kpg-waiver{ background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.08); } html[data-theme="light"] .kpg-waiver > summary, html[data-theme-mode="light"] .kpg-waiver > summary{ color:#4a5666; } html[data-theme="light"] .kpg-waiver[open] > summary, html[data-theme-mode="light"] .kpg-waiver[open] > summary{ color:#1d2733; } html[data-theme="light"] .kpg-waiver p, html[data-theme-mode="light"] .kpg-waiver p{ color:#4a5666; } html[data-theme="light"] .kpg-foot, html[data-theme-mode="light"] .kpg-foot{ color:#5a6776; } html[data-theme="light"] .kpg-accepted-line, html[data-theme-mode="light"] .kpg-accepted-line{ color:#4a5666; } /* =========================================================== PRIVACY HINT (v5.5.8-fix5b, 2026-05-15) Tiny non-blocking note at the top of the chat thread. Links to the privacy modal. Replaces the v5.5.8-fix5 hard gate. =========================================================== */ .kobra-privacy-hint{ align-self:stretch; margin:2px 0 6px; padding:8px 12px; border-radius:10px; background:rgba(0,148,212,0.05); border:1px solid rgba(0,148,212,0.18); color:var(--k-text-faint,#a3afbb); font-size:12px;line-height:1.4; } .kph-link{ color:var(--k-accent,#0094d4); text-decoration:underline;text-underline-offset:2px; } .kph-link:hover{ text-decoration:none; } html[data-theme="light"] .kobra-privacy-hint, html[data-theme-mode="light"] .kobra-privacy-hint{ background:rgba(0,148,212,0.04); color:#5a6776; border-color:rgba(0,148,212,0.22); } /* ===== v5.5.9-fix3: idle prompt + ended footer ===== */ .kobra-idle-prompt, .kobra-ended-footer{ border:1px solid rgba(0,148,212,0.35); background:rgba(0,148,212,0.06); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; align-self:flex-start; max-width:88%; } .kobra-idle-line, .kobra-ended-line{ font-size:14px; line-height:1.45; color:inherit; } .kobra-idle-countdown{ font-weight:600; font-variant-numeric:tabular-nums; color:#0094d4; } .kobra-idle-actions{ display:flex; gap:8px; flex-wrap:wrap; } .kobra-idle-resume, .kobra-idle-new{ appearance:none; -webkit-appearance:none; border:0; background:#0094d4; color:#fff; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; transition:filter .15s ease, transform .1s ease; } .kobra-idle-resume:hover, .kobra-idle-new:hover{ filter:brightness(1.08); } .kobra-idle-resume:active, .kobra-idle-new:active{ transform:scale(0.97); }