/* ReploChat components. Every value comes from tokens.css. */
.rc-root, .rc-root * { box-sizing: border-box; }
.rc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-body); }
.rc-col { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-body); }

/* Button */
.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s; }
.rc-btn:focus-visible, .rc-icon-btn:focus-visible, .rc-switch:focus-visible, .rc-tab:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.rc-btn-sm { height: var(--control-sm); padding: 0 10px; font-size: 12.5px; gap: 6px; }
.rc-btn-lg { height: var(--control-lg); padding: 0 18px; font-size: 14px; }
.rc-btn-primary { background: var(--brand-700); color: #ffffff; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 2px rgba(16,32,28,0.18); }
.rc-btn-primary:hover { background: var(--brand-800); }
.rc-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-input); font-weight: 500; box-shadow: var(--shadow-xs); }
.rc-btn-secondary:hover { background: var(--surface-sunken); }
.rc-btn-ghost { background: transparent; color: var(--brand-700); }
.rc-btn-ghost:hover { background: var(--brand-100); }
.rc-btn-danger { background: var(--danger); color: #ffffff; }
.rc-btn-facebook { background: var(--facebook); color: #ffffff; }
.rc-btn-facebook:hover { background: var(--facebook-hover); }
/* WhatsApp green with dark ink: white on #25D366 fails contrast. */
.rc-btn-whatsapp { background: var(--whatsapp); color: var(--whatsapp-ink); }
.rc-btn-whatsapp:hover { background: var(--whatsapp-hover); }
.rc-btn-meta { background: var(--meta); color: #ffffff; }
.rc-btn-meta:hover { background: #0057e0; }
.rc-btn-ai { background: var(--ai-bg); color: var(--ai-ink); }
.rc-btn[disabled], .rc-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rc-btn-full { width: 100%; }
.rc-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rc-spin .8s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* Icon button */
.rc-icon-btn { position: relative; display: inline-grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.rc-icon-btn:hover { background: var(--surface-sunken); }
.rc-icon-btn-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--attention-strong); border: 2px solid var(--surface); }

/* Input */
.rc-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); min-width: 0; }
.rc-field-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rc-field-req { color: var(--attention-ink); }
.rc-input { height: var(--control-lg); padding: 0 12px; border: 1px solid var(--line-input); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 13.5px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.rc-input::placeholder { color: var(--ink-subtle); }
.rc-input:hover { border-color: var(--ink-subtle); }
.rc-input:focus { border-color: var(--brand-700); outline: none; box-shadow: 0 0 0 3px var(--brand-100); }
/* A click into a text field always counts as :focus-visible, so the keyboard ring on .rc-ui and friends would show on every click. Fields show focus with their border instead; this outranks those rules in any load order. */
:is(textarea, select, [contenteditable], input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"], [type="button"], [type="submit"])):focus-visible { outline: none; }
.rc-input-error { border-color: var(--danger); }
.rc-field-hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rc-field-error { font-size: 12px; line-height: 16px; color: var(--danger); font-weight: 500; }
textarea.rc-input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* Badge */
.rc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 11.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.rc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rc-badge-success { background: var(--brand-100); color: var(--brand-ink); }
.rc-badge-success .rc-badge-dot { background: var(--success); }
.rc-badge-neutral { background: var(--surface-muted); color: var(--ink-muted); }
.rc-badge-attention { background: var(--attention-bg); color: var(--attention-ink); }
.rc-badge-warning { background: var(--warning-bg); color: var(--warning-ink); }
.rc-badge-danger { background: var(--danger-bg); color: var(--danger-ink); }
.rc-badge-ai { background: var(--ai-bg); color: var(--ai-ink); }
.rc-badge-whatsapp { background: var(--whatsapp-bg); color: var(--brand-ink); }
.rc-badge-meta { background: var(--meta-bg); color: #0a3d99; }
.rc-badge-facebook { background: #e7f0fe; color: #0b4cb3; }
/* Small brand marks for Meta / WhatsApp / Facebook sections: <span class="rc-brand-mark rc-brand-whatsapp">…svg…</span> */
.rc-brand-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: #ffffff; }
.rc-brand-whatsapp { background: var(--whatsapp); color: #ffffff; }
.rc-brand-facebook { background: var(--facebook); }
.rc-brand-meta { background: var(--meta); }
.rc-brand-messenger { background: linear-gradient(45deg, #0866ff, #a033ff 70%, #ff5280); }
.rc-brand-instagram { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); }
.rc-badge-count { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; background: var(--brand-700); color: #ffffff; font-weight: 700; }

/* Avatar */
.rc-avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #ffffff; font-family: var(--font-body); font-weight: 600; }
.rc-avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.rc-avatar-md { width: 42px; height: 42px; font-size: 15px; }
.rc-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.rc-avatar-channel { position: absolute; bottom: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); }
.rc-avatar-flag { position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--attention-strong); border: 2px solid var(--surface); }

/* Switch */
.rc-switch-wrap { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.rc-switch { position: relative; width: 40px; height: 24px; flex: none; border: 0; padding: 0; border-radius: var(--radius-pill); background: #8e9b96; cursor: pointer; }
.rc-switch[aria-checked="true"] { background: var(--brand-700); }
.rc-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-xs); transition: left .15s; }
.rc-switch[aria-checked="true"] .rc-switch-knob { left: 19px; }
.rc-switch:disabled { opacity: .45; cursor: not-allowed; }

/* Banner */
.rc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 10px 16px; border-radius: var(--radius-lg); border: 1px solid transparent; font-family: var(--font-body); font-size: 13px; line-height: 19px; }
.rc-banner-text { flex: 1 1 240px; }
.rc-banner-text strong { font-weight: 600; }
.rc-banner-close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.rc-banner-error { background: var(--danger-bg); color: var(--danger-ink); border-color: #f5c9c9; }
.rc-banner-warning { background: var(--warning-bg); color: var(--warning-ink); border-color: #f1d98a; }
.rc-banner-info { background: var(--info-bg); color: var(--info-ink); border-color: #c8d9f8; }
.rc-banner-news { background: var(--brand-100); color: var(--brand-ink); border-color: var(--brand-200); }
.rc-banner-admin { background: var(--impersonation-bg); color: #ffffff; }
.rc-banner-window { background: var(--window-bg); color: var(--window-ink); border-color: #f7d7b5; }
.rc-banner-flat { border-radius: 0; border-width: 0 0 1px 0; padding: 9px 28px; }

/* Empty state */
.rc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--space-8) var(--space-6); font-family: var(--font-body); }
.rc-empty-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; }
.rc-empty-title { margin: 4px 0 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.rc-empty-body { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.rc-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: 6px; }

/* Chat bubble */
.rc-chat { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); background: var(--chat-wall); border-radius: var(--radius-lg); font-family: var(--font-body); }
.rc-bubble { max-width: 75%; padding: 7px 11px; border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.rc-bubble-in { align-self: flex-start; background: var(--chat-in); border-top-left-radius: 4px; box-shadow: 0 1px 1px rgba(16,32,28,0.06); }
.rc-bubble-out { align-self: flex-end; background: var(--chat-out); border-top-right-radius: 4px; }
.rc-bubble-failed { align-self: flex-end; background: #f3f5f4; border: 1px solid #e0b9b9; border-top-right-radius: 4px; color: var(--ink-muted); }
.rc-bubble-note { align-self: stretch; max-width: none; background: var(--note-bg); color: var(--note-ink); border-radius: var(--radius-md); font-size: 13px; }
.rc-bubble-ai { align-self: flex-start; background: var(--ai-bg); color: var(--ai-ink); border: 1px solid #e4d9f7; font-size: 13px; }
.rc-bubble-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--ink-subtle); }
.rc-bubble-failed .rc-bubble-meta { color: var(--attention-ink); font-weight: 600; }
.rc-bubble-tag { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; }
.rc-bubble-fix { align-self: flex-end; display: flex; gap: 10px; font-size: 13px; color: var(--danger-ink); }
.rc-link-btn { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--brand-700); text-decoration: underline; cursor: pointer; }

/* Tabs */
.rc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); font-family: var(--font-body); }
.rc-tab { height: 36px; padding: 0 10px; border: 0; background: transparent; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-muted); cursor: pointer; }
.rc-tab[aria-selected="true"] { font-weight: 600; color: var(--brand-700); box-shadow: inset 0 -2px 0 var(--brand-700); }
.rc-tab-count { margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--brand-100); font-size: 12px; }

/* Numbers line up in tables, KPI tiles and counters. */
.rc-ui table, .rc-badge-count, .rc-tab-count { font-variant-numeric: tabular-nums; }

/* Store platform logo tiles (partials/store-logo) in each platform's brand colour. */
.rc-store-logo { display: inline-grid; place-items: center; flex: none; border-radius: 10px; background: var(--ink); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.rc-store-logo[data-platform="shopify"] { background: #95bf47; }
.rc-store-logo[data-platform="woocommerce"] { background: #7f54b3; }
.rc-store-logo[data-platform="custom"] { background: var(--brand-900); color: var(--accent); }

/* Pagination (resources/views/vendor/livewire/*tailwind.blade.php) */
.rc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-body); }
.rc-pager-info { margin: 0; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rc-pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rc-pager-btn { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--line-input); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.rc-pager-btn:hover { background: var(--surface-sunken); }
.rc-pager-btn:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.rc-pager-btn.is-current { background: var(--brand-700); border-color: var(--brand-700); color: #ffffff; font-weight: 600; cursor: default; }
.rc-pager-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; background: var(--surface); }
.rc-pager-gap { min-width: 24px; text-align: center; color: var(--ink-subtle); }
.rc-pager-wide { padding: 0 12px; }
@media (max-width: 480px) { .rc-pager-item:not(:has(.is-current)) { display: none; } }

/* Lottie animations (partials/rc-anim.blade.php, played by public/js/rc-anim.js) */
.rc-anim { display: inline-block; line-height: 0; vertical-align: middle; max-width: 100%; }
.rc-anim > svg { display: block; }
.rc-empty-anim { margin-bottom: -4px; }
.rc-flash-anim { flex: none; margin: -10px 0; }