/* Kresco custom Chatwoot styles * * Loading order: Chatwoot CSS → kresco.css (we're last, we win the cascade). * Chatwoot uses :root for light mode tokens and .dark (on ) for dark mode. * We use the same selectors with equal specificity — cascade order decides. * ─────────────────────────────────────────────────────────────────────── */ /* ── Kresco component tokens ─────────────────────────────────────────────────── */ :root { --kresco-color-client: #5a8a14; --kresco-color-agent: #7A5CFF; --kresco-color-bot: #6645e0; --kresco-btn-hover-bg: rgba(0, 0, 0, 0.05); --kresco-tooltip-bg: #1C1C18; --kresco-tooltip-color: #FAFAFA; --kresco-indicator-bg: rgba(122, 92, 255, 0.06); } .dark { --kresco-color-client: #C4F257; --kresco-color-agent: #9B85FF; --kresco-color-bot: #7A5CFF; --kresco-btn-hover-bg: rgba(255, 255, 255, 0.08); --kresco-tooltip-bg: #1C1C18; --kresco-tooltip-color: #FAFAFA; --kresco-indicator-bg: rgba(196, 242, 87, 0.07); } /* ── Chatwoot n-brand override → brand violet #7A5CFF ───────────────────────── */ /* Chatwoot hardcodes #2781f6 in every n-brand class at build time. */ /* We redeclare with equal specificity — our stylesheet loads last, we win. */ /* Background */ .bg-n-brand { background-color: #7A5CFF; } .bg-n-brand\/5 { background-color: #7A5CFF0d; } .bg-n-brand\/10 { background-color: #7A5CFF1a; } .bg-n-brand\/20, .focus-visible\:bg-n-brand\/20:focus-visible, .hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: #7A5CFF33; } .bg-n-brand\/80, .hover\:bg-n-brand\/80:hover { background-color: #7A5CFFCC; } .hover\:bg-n-brand\/10:hover { background-color: #7A5CFF1a; } /* Before/after pseudo */ .before\:bg-n-brand:before, .after\:bg-n-brand:after { background-color: #7A5CFF; } /* Checked/indeterminate states (toggles, checkboxes) */ .checked\:bg-n-brand:checked, .indeterminate\:bg-n-brand:indeterminate { background-color: #7A5CFF; } /* Group hover */ .group-hover\:bg-n-brand, .group:hover .group-hover\:bg-n-brand { background-color: #7A5CFF; } /* Text */ .text-n-brand, .hover\:text-n-brand:hover, .group-hover\:text-n-brand, .group-focus-within\:text-n-brand { color: #7A5CFF; } /* Border */ .border-n-brand, .border-t-n-brand, .focus\:border-n-brand:focus, .checked\:border-n-brand:checked, .indeterminate\:border-n-brand:indeterminate { border-color: #7A5CFF; } /* Ring (focus indicator) */ .ring-n-brand, .focus\:ring-n-brand:focus, .focus-within\:ring-n-brand:focus-within, .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(122 92 255 / var(--tw-ring-opacity, 1)); } /* Outline */ .outline-n-brand, .focus\:outline-n-brand:focus, .focus-within\:outline-n-brand:focus-within { outline-color: #7A5CFF; } .outline-n-brand\/30 { outline-color: #7A5CFF4d; } /* Warm cream background in light mode */ :root { --background-color: 242 241 238; --surface-1: 252 251 249; } /* ── Private note — amber → brand violet ─────────────────────────────────────── */ /* Amber means "caution" — violet better suits operator annotations. */ :root { --solid-amber: 216 209 255; /* violet tint — light mode */ --amber-9: 122 92 255; /* brand violet */ --amber-10: 106 73 240; --amber-11: 90 58 218; --amber-12: 45 28 110; /* dark violet text */ } .dark { --solid-amber: 42 35 90; /* dark violet tint — dark mode */ --amber-9: 155 133 255; --amber-10: 140 118 245; --amber-11: 185 168 255; --amber-12: 225 218 255; } /* Hardcoded fallback override */ .bg-n-solid-amber { background-color: rgb(122 92 255 / 0.12); } .dark .bg-n-solid-amber { background-color: rgb(155 133 255 / 0.12); } /* Button explicitly violet on private note bubbles */ .bg-n-solid-amber .kresco-note-btn { color: var(--kresco-color-agent); } /* ── Note button — inline in meta row (timestamp area) ───────────────────────── */ .kresco-note-btn { opacity: 0; pointer-events: none; transition: opacity 0.15s ease, color 0.1s ease, background 0.1s ease; background: transparent; border: none; padding: 0 4px; cursor: pointer; display: inline-flex; align-items: center; border-radius: 4px; flex-shrink: 0; position: relative; } .message-bubble-container:hover .kresco-note-btn { opacity: 1; pointer-events: auto; } .kresco-note-btn:hover { background: var(--kresco-btn-hover-bg); } .left-bubble .kresco-note-btn { margin-left: auto; color: var(--kresco-color-client); } .right-bubble .kresco-note-btn { margin-right: auto; color: var(--kresco-color-agent); } /* ── CSS tooltip ─────────────────────────────────────────────────────────────── */ .kresco-note-btn::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--kresco-tooltip-bg); color: var(--kresco-tooltip-color); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 9999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .message-bubble-container:hover .kresco-note-btn:hover::after { opacity: 1; } /* ── Private note quote labels ───────────────────────────────────────────────── */ .kresco-quote-label { display: flex; align-items: center; gap: 4px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; opacity: 0.8; } .kresco-quote-label--client { color: var(--kresco-color-client); } .kresco-quote-label--agent { color: var(--kresco-color-agent); } .kresco-quote-label--bot { color: var(--kresco-color-bot); } /* ── Feedback reference block click highlight ────────────────────────────────── */ @keyframes kresco-highlight-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kresco-color-agent) 50%, transparent); } 40% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--kresco-color-agent) 20%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } .kresco-highlight { border-radius: 8px; animation: kresco-highlight-pulse 1.2s ease-out forwards; } /* ── "Nota sobre:" compose indicator ─────────────────────────────────────────── */ #kresco-note-context { background: var(--kresco-indicator-bg); border-left: 2px solid var(--kresco-color-agent); } /* ── Handoff floating toggle ─────────────────────────────────────────────────── */ /* Host = Chatwoot-style backdrop-blurred pill (Tailwind utilities on the host */ /* div). The inner round button is the actual control. Tooltip is a CSS */ /* ::after pseudo — positioned BELOW the button (the host sits near the top of */ /* the conversation panel, so the tooltip belongs underneath). */ /* */ /* Positioning lives HERE (not in Tailwind utilities on the element) because */ /* Chatwoot's Tailwind only compiles classes it sees in its own source — an */ /* arbitrary `top-52 xl:top-40` we'd write would never make it into the bundle. */ /* We anchor just below Chatwoot's own `top-36 xl:top-24` floating action stack. */ .kresco-handoff-host { position: absolute; top: 13rem; /* below Chatwoot's top-36 (9rem + ~3.5rem element height) */ right: 0.5rem; z-index: 20; } @media (min-width: 1280px) { .kresco-handoff-host { top: 10rem; /* below Chatwoot's xl:top-24 (6rem + ~3.5rem element height) */ } } [dir='rtl'] .kresco-handoff-host { right: auto; left: 0.5rem; } #kresco-handoff-btn { position: relative; /* so ::after positions against the button */ cursor: pointer; } #kresco-handoff-btn[data-active='true'] { background-color: var(--kresco-color-agent) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(122, 92, 255, 0.35); } #kresco-handoff-btn[data-busy='true'] { opacity: 0.6; cursor: progress; } .dark #kresco-handoff-btn[data-active='true'] { background-color: var(--kresco-color-agent) !important; color: #1c1c18 !important; } /* Tooltip — appears below the button (host is anchored near top of the panel). */ #kresco-handoff-btn::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); right: 0; max-width: 260px; white-space: normal; text-align: right; background: var(--kresco-tooltip-bg); color: var(--kresco-tooltip-color); padding: 6px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 9999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } #kresco-handoff-btn:hover::after { opacity: 1; } /* ── Handoff-active dressing on the reply-box ────────────────────────────────── */ /* When `body[data-kresco-handoff='true']`, signal the active state on every UI */ /* surface the operator touches: subtle violet accent on the reply-box border, */ /* explicit banner inside the reply-box (injected by JS), violet outline on the */ /* send button to make "I'm sending as a human" unmistakable. */ body[data-kresco-handoff='true'] .reply-box { box-shadow: inset 3px 0 0 var(--kresco-color-agent); } #kresco-handoff-banner { color: var(--amber-12); font-weight: 600; } #kresco-handoff-banner .i-ph-user-bold { color: var(--kresco-color-agent); } /* Send button (Chatwoot tags it data-testid=reply-send-button) — when handoff */ /* is on, give it a violet outline + a tiny corner dot so the operator can't */ /* miss that the bot is silenced. */ body[data-kresco-handoff='true'] [data-testid='reply-send-button'] { box-shadow: 0 0 0 2px var(--kresco-color-agent), 0 0 0 4px rgba(122, 92, 255, 0.2); position: relative; } body[data-kresco-handoff='true'] [data-testid='reply-send-button']::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--kresco-color-agent); box-shadow: 0 0 0 2px var(--surface-1, #fcfbf9); } /* ── Toast ───────────────────────────────────────────────────────────────────── */ .kresco-toast { position: fixed; bottom: 24px; right: 24px; background: var(--kresco-tooltip-bg); color: var(--kresco-tooltip-color); padding: 10px 18px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; z-index: 9999; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); animation: kresco-toast-in 0.2s ease forwards; } @keyframes kresco-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }