/* 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); } /* ── 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); } }