@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { font-family: 'Inter', system-ui, sans-serif; }

/* ===== DARK THEME (Jira-style true dark) ===== */
.dark { background-color: #161a1d !important; color: #dee4ea; }
.dark nav { background: #1d2125 !important; border-color: #2c333a !important; }

/* Surfaces — 3-level hierarchy like Jira */
.dark .bg-white { background: #22272b !important; }       /* cards, modals */
.dark .bg-slate-50 { background: #161a1d !important; }    /* page bg */
.dark .bg-slate-100 { background: #2c333a !important; }   /* elevated elements */

/* Borders */
.dark .border-slate-100, .dark .border-slate-200 { border-color: #38414a !important; }
.dark .border-l-blue-400 { border-left-color: #60a5fa !important; }

/* Text — HIGH CONTRAST */
.dark .text-slate-800 { color: #f1f5f9 !important; }     /* headings — near white */
.dark .text-slate-700 { color: #e2e8f0 !important; }
.dark .text-slate-600 { color: #d1d5db !important; }     /* labels */
.dark .text-slate-500 { color: #9fadbc !important; }     /* secondary — Jira secondary */
.dark .text-slate-400 { color: #8696a7 !important; }     /* muted — still readable */
.dark .text-slate-300 { color: #3d4a5c !important; }     /* disabled — very dim */
.dark .font-mono { color: #9fadbc !important; }           /* phone numbers */

/* Shadows */
.dark .shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; }
.dark .hover\:shadow-md:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; }

/* Hover states */
.dark .hover\:bg-slate-200:hover { background: #38414a !important; }
.dark .hover\:bg-slate-100:hover { background: #2c333a !important; }
.dark .hover\:bg-purple-50:hover { background: #2e1065 !important; }
.dark .hover\:bg-blue-50:hover { background: #172554 !important; }

/* Inputs — dark with good contrast */
.logo-pink { filter: brightness(0) saturate(100%) invert(38%) sepia(82%) saturate(2300%) hue-rotate(310deg) brightness(95%) contrast(101%); }
.sel-logo-off { filter: grayscale(1); opacity: 0.45; }
.sel-logo-on { filter: brightness(0) invert(1); }
.dark .sel-logo-off { filter: grayscale(1) brightness(2) invert(0.8); opacity: 0.7; }
/* Radio junto al checkbox: sin esto el radio nativo sale con el accent azul del
 * sistema (y en dark, con el circulo blanco solido del navegador). Afecta a
 * Automatizaciones y tambien al modal de exportar, que ya usaba radios. */
input[type="checkbox"], input[type="radio"] { accent-color: #ec4899; }
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 28px;
}
.dark input[type="checkbox"] { background: #2c333a; border-color: #4a5568; accent-color: #ec4899; }

/* Radio en dark: se dibuja a mano porque el radio nativo ignora background-color
 * y queda como un circulo blanco solido sobre el fondo oscuro. En claro el
 * nativo se ve bien, asi que esto va solo bajo .dark.
 * Sin width/height explicitos, appearance:none lo colapsaria a 0. */
.dark input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #4a5568;
  border-radius: 50%;
  background: #2c333a;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dark input[type="radio"]:hover { border-color: #64748b; }
.dark input[type="radio"]:checked { border-color: #ec4899; }
.dark input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  /* Proporcional, no en px: el tamaño real lo puede fijar Tailwind (w-4 = 16px)
   * y el punto tiene que escalar con el circulo. */
  inset: 22%;
  border-radius: 50%;
  background: #ec4899;
}
.dark input[type="radio"]:focus-visible { outline: 2px solid rgba(236, 72, 153, 0.5); outline-offset: 1px; }
.dark .kanban-check { background: #1e2530 !important; border-color: #334155 !important; }
.dark textarea, .dark input[type="text"], .dark input[type="password"], .dark input[type="tel"], .dark input[type="email"], .dark input[type="date"], .dark input[type="number"], .dark input[type="time"], .dark input[type="datetime-local"], .dark select {
  background: #1d2125 !important; border-color: #38414a !important; color: #f1f5f9 !important;
}
.dark textarea::placeholder { color: #6b7a8d; }
.dark textarea:focus { box-shadow: 0 0 0 2px #a78bfa !important; }

/* Alert/context blocks — visible but not blinding */
.dark .bg-amber-50 { background: #3d2200 !important; }
.dark .bg-purple-50 { background: #2d1854 !important; }
.dark .bg-violet-50 { background: #2d1854 !important; }
.dark .border-violet-200 { border-color: #6d28d9 !important; }
.dark .text-violet-700 { color: #c4b5fd !important; }
.dark .text-violet-500 { color: #a78bfa !important; }
.dark .text-violet-400 { color: #8b5cf6 !important; }
.dark .bg-green-50 { background: #0a3622 !important; }
.dark .bg-blue-50 { background: #0c1e36 !important; }
.dark .bg-red-50 { background: #2d0f0f !important; }
.dark .border-blue-100 { border-color: #152a45 !important; }
.dark .bg-blue-50\/50 { background: #0c2340 !important; }
.dark .border-amber-200 { border-color: #b45309 !important; }
.dark .border-orange-200 { border-color: #c2410c !important; }
.dark .border-emerald-200 { border-color: #059669 !important; }
.dark .border-red-200 { border-color: #dc2626 !important; }
.dark .border-blue-200 { border-color: #2563eb !important; }
.dark .border-purple-200 { border-color: #7c3aed !important; }
.dark .border-green-300 { border-color: #16a34a !important; }
.dark .text-amber-700 { color: #fbbf24 !important; }
.dark .text-amber-600 { color: #f59e0b !important; }
.dark .text-purple-700 { color: #c4b5fd !important; }
.dark .text-green-700 { color: #6ee7b7 !important; }

/* Stage title colors — brighter for dark bg */
.dark .text-orange-600 { color: #fb923c !important; }
.dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-blue-600 { color: #60a5fa !important; }

/* Action bar */
.dark #actionBar { background: #1d2125 !important; border-color: #2c333a !important; }

/* Score rings */
.dark .score-ring { border-color: #38414a !important; }

/* Workspace combo — matches toggle siblings (bg-slate-100, no border) */
.ws-combo {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
}
.ws-combo:hover {
  background: #e2e8f0 !important;
}
.dark .ws-combo {
  background: #2c333a !important;
  color: #9fadbc !important;
  border: 1px solid transparent !important;
}
.dark .ws-combo:hover {
  background: #38414a !important;
}

/* Neutral buttons (Buscar, Copiar) — ghost: blend with background + subtle border */
.btn-neutral {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}
.btn-neutral:hover {
  background: #f1f5f9 !important;
}
.dark .btn-neutral {
  background: #2A2F3A !important;
  color: #E5E7EB !important;
  border: 1px solid #3A4150 !important;
}
.dark .btn-neutral:hover {
  background: #343A46 !important;
}
.btn-neutral.text-brand-500 {
  color: var(--brand-500, #ec4899) !important;
}
.dark .btn-neutral.text-brand-500 {
  color: var(--brand-500, #ec4899) !important;
}
.prompt-active {
  background: #fdf2f8 !important;
  color: #ec4899 !important;
  border: 1px solid #fbcfe8 !important;
}
.dark .prompt-active {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(236, 72, 153, 0.35) !important;
}

/* Step badges — keep color but ensure readability */
.dark .bg-emerald-100 { background: #064e3b !important; }
.dark .text-emerald-700 { color: #6ee7b7 !important; }
.dark .bg-amber-100 { background: #451a03 !important; }
.dark .bg-orange-100 { background: #431407 !important; }
.dark .text-orange-700 { color: #fdba74 !important; }
.dark .bg-red-100 { background: #450a0a !important; }
.dark .text-red-700 { color: #fca5a5 !important; }
.dark .bg-blue-100 { background: #172554 !important; }
.dark .text-blue-700 { color: #93c5fd !important; }
.dark .bg-green-100 { color: #86efac !important; background: #052e16 !important; }
.dark .bg-red-100.text-red-700 { background: #3b0d0d !important; color: #fca5a5 !important; }
.dark .bg-slate-200 { background: #2c333a !important; }

/* Timing pills */
.dark .bg-green-100.text-green-700 { background: #052e16 !important; color: #86efac !important; }
.dark .bg-slate-100.text-slate-400 { background: #2c333a !important; color: #8696a7 !important; }

/* ===== ARCHIVE MODAL CHIPS ===== */
.archive-chip {
  cursor: pointer;
}
.archive-chip:hover {
  background: #f8fafc;
}
.archive-chip-selected {
  cursor: pointer;
}
.dark .archive-chip {
  border-color: #38414a !important;
  color: #d1d5db !important;
}
.dark .archive-chip:hover {
  background: #2c333a !important;
}
.dark .archive-chip-selected {
  border-color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.15) !important;
  color: #f9a8d4 !important;
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.4) !important;
}
.dark .hover\:bg-slate-50:hover { background: #2c333a !important; }

/* ===== WORKSPACE RESIZE HANDLES ===== */
.resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 10;
}
.resize-handle::after {
  content: '';
  position: absolute;
  inset: 0 -2px;
}
.resize-handle:hover,
.resize-handle.dragging {
  background: #ec4899;
}

/* ===== WORKSPACE ===== */
.workspace-chat-bg {
  background: #f1f5f9;
}
.dark .workspace-chat-bg {
  background: #1a1f24 !important;
}
/* Neural network pattern — fixed layer that doesn't scroll */
.workspace-chat-doodle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.20;
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27600%27 viewBox=%270 0 600 600%27><g fill=%27none%27 stroke=%27%238696a7%27 stroke-linecap=%27round%27><path d=%27M-20 180 Q80 120 180 190 T380 160 T600 200%27 stroke-width=%270.8%27/><path d=%27M-10 420 Q120 380 220 430 T440 390 T620 440%27 stroke-width=%270.6%27/><path d=%27M50 -10 Q90 100 140 200 Q200 320 160 450 Q130 540 180 610%27 stroke-width=%270.7%27/><path d=%27M350 -20 Q380 80 420 180 Q470 300 430 420 Q400 520 440 620%27 stroke-width=%270.5%27/><path d=%27M-20 60 Q100 30 200 80 Q320 140 400 90 T620 100%27 stroke-width=%270.4%27 stroke-dasharray=%278 12%27/><path d=%27M-10 540 Q80 510 180 550 Q280 590 380 540 T610 560%27 stroke-width=%270.4%27 stroke-dasharray=%276 10%27/><path d=%27M520 -10 Q480 120 540 250 Q590 360 530 480 Q490 570 540 620%27 stroke-width=%270.6%27/><path d=%27M-20 320 Q60 290 150 330 Q260 380 340 310 Q420 250 520 290 T620 270%27 stroke-width=%270.5%27/><path d=%27M80 280 Q130 240 180 280%27 stroke-width=%270.4%27/><path d=%27M320 450 Q370 410 420 450%27 stroke-width=%270.4%27/><path d=%27M450 100 Q490 70 530 100%27 stroke-width=%270.4%27/><path d=%27M200 50 Q230 25 260 50%27 stroke-width=%270.3%27/><circle cx=%27180%27 cy=%27190%27 r=%273%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27380%27 cy=%27160%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27220%27 cy=%27430%27 r=%272.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27440%27 cy=%27390%27 r=%271.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27140%27 cy=%27200%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27420%27 cy=%27180%27 r=%271.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27160%27 cy=%27450%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27430%27 cy=%27420%27 r=%271.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27540%27 cy=%27250%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27340%27 cy=%27310%27 r=%271.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%2760%27 cy=%2790%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27290%27 cy=%27130%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27500%27 cy=%27200%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27100%27 cy=%27350%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27310%27 cy=%27510%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27480%27 cy=%27480%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27570%27 cy=%27340%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%2740%27 cy=%27500%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27250%27 cy=%27260%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27460%27 cy=%27560%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><g stroke-width=%270.6%27><path d=%27M95 150 l0-5 0 10 M90 150 l10 0%27/><path d=%27M310 80 l0-4 0 8 M306 80 l8 0%27/><path d=%27M500 320 l0-5 0 10 M495 320 l10 0%27/><path d=%27M170 520 l0-4 0 8 M166 520 l8 0%27/><path d=%27M400 570 l0-3 0 6 M397 570 l6 0%27/><path d=%27M50 260 l0-3 0 6 M47 260 l6 0%27/><path d=%27M560 130 l0-4 0 8 M556 130 l8 0%27/><path d=%27M270 370 l0-3 0 6 M267 370 l6 0%27/></g><line x1=%27180%27 y1=%27190%27 x2=%27140%27 y2=%27200%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27380%27 y1=%27160%27 x2=%27420%27 y2=%27180%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27220%27 y1=%27430%27 x2=%27160%27 y2=%27450%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27440%27 y1=%27390%27 x2=%27430%27 y2=%27420%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27340%27 y1=%27310%27 x2=%27290%27 y2=%27130%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><line x1=%27540%27 y1=%27250%27 x2=%27500%27 y2=%27320%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><circle cx=%27300%27 cy=%27300%27 r=%2740%27 stroke-width=%270.25%27/><circle cx=%27300%27 cy=%27300%27 r=%2760%27 stroke-width=%270.2%27/><circle cx=%27120%27 cy=%27100%27 r=%2725%27 stroke-width=%270.2%27/><circle cx=%27480%27 cy=%27500%27 r=%2730%27 stroke-width=%270.2%27/></g><defs><symbol id=%27l%27 viewBox=%270 0 4930 3810%27><g transform=%27translate(0,3810) scale(1,-1)%27><path d=%27M2575 3661 c-99 -45 -138 -156 -89 -252 14 -28 79 -89 94 -89 5 0 8 -515 7 -1303 l-2 -1303 34 -68 c42 -81 107 -143 200 -189 63 -31 71 -32 186 -32 114 0 123 2 185 31 36 17 85 46 110 64 35 26 55 34 97 36 59 2 149 39 205 84 27 22 48 30 76 30 45 0 131 24 185 52 121 61 218 216 218 348 1 55 2 57 47 94 63 51 120 120 148 181 108 233 46 471 -162 628 l-61 46 -5 68 c-9 111 -49 194 -138 284 -73 73 -122 104 -210 131 -33 11 -45 21 -63 57 -29 58 -105 141 -165 179 -103 66 -281 94 -367 58 l-35 -15 0 52 0 52 93 93 c66 66 99 92 117 92 47 0 123 45 154 89 24 35 29 52 29 100 0 71 -26 120 -86 159 -84 56 -215 23 -265 -66 -29 -52 -30 -134 -2 -180 l21 -33 -101 -98 -100 -98 0 -444 0 -444 99 -97 c106 -105 139 -119 174 -80 35 39 22 72 -58 152 l-75 74 0 248 c0 285 -3 275 99 305 96 27 195 -3 277 -84 46 -46 53 -61 32 -68 -138 -48 -209 -100 -248 -180 -27 -55 -23 -92 12 -118 37 -27 60 -16 106 52 26 38 54 64 92 85 50 28 63 31 140 31 75 0 91 -4 140 -30 100 -55 170 -149 184 -247 l7 -48 -73 0 c-173 0 -324 -58 -435 -166 -67 -66 -81 -105 -47 -138 29 -29 63 -19 127 39 183 164 433 179 590 35 112 -102 144 -257 81 -391 -27 -57 -122 -169 -143 -169 -4 0 -14 13 -23 28 -18 30 -104 114 -152 149 l-30 21 29 33 c15 19 34 48 42 66 18 44 17 123 -3 151 -33 47 -94 13 -94 -53 0 -33 -30 -88 -63 -116 -65 -56 -221 -63 -314 -15 -77 39 -123 32 -123 -18 1 -84 197 -162 341 -136 59 11 61 10 118 -24 72 -44 146 -122 171 -182 52 -121 -10 -264 -140 -323 -65 -30 -77 -27 -85 17 -14 86 -80 153 -122 126 -13 -8 -17 -28 -17 -91 -1 -75 -3 -84 -31 -119 -63 -77 -161 -97 -254 -50 -88 45 -137 119 -150 223 -6 51 -13 71 -31 85 -29 23 -51 23 -78 -2 -71 -67 -19 -257 102 -366 33 -30 57 -56 55 -58 -2 -1 -26 -11 -53 -20 -144 -48 -304 14 -367 141 l-24 48 -3 1273 c-2 896 1 1272 8 1272 6 0 33 22 60 49 39 39 50 57 55 94 22 146 -127 259 -260 198z m114 -96 c50 -25 57 -91 15 -124 -52 -41 -118 -17 -130 46 -5 27 -1 37 24 63 34 34 50 37 91 15z m645 -256 c34 -40 33 -64 -3 -100 -36 -36 -73 -37 -106 -4 -49 49 -15 135 54 135 20 0 37 -9 55 -31z%27/><path d=%27M4605 3476 c-49 -24 -166 -80 -260 -125 -312 -150 -425 -206 -425 -211 0 -3 51 -22 113 -44 61 -21 116 -42 121 -46 4 -5 -16 -39 -46 -77 -30 -37 -111 -143 -181 -235 l-126 -166 72 -43 c40 -24 103 -75 143 -116 39 -40 74 -73 78 -73 4 0 83 116 177 258 94 141 174 258 178 260 5 1 48 -43 97 -99 84 -97 89 -100 95 -75 9 33 23 146 90 729 5 48 7 92 4 97 -11 17 -38 10 -130 -34z%27/><path d=%27M2005 3288 c-96 -53 -131 -162 -82 -258 24 -50 76 -85 140 -95 30 -6 52 -22 107 -78 l70 -72 0 -107 0 -108 -749 0 -750 0 -83 -26 c-195 -62 -340 -188 -423 -369 -58 -125 -60 -144 -60 -560 l0 -380 29 -85 c35 -103 70 -168 131 -239 120 -141 265 -217 468 -246 l47 -7 0 -218 c0 -185 2 -221 16 -234 8 -9 21 -16 28 -16 12 0 159 96 546 358 l164 112 403 0 403 0 -1 23 c0 12 -6 45 -13 72 l-11 50 -431 3 c-412 2 -432 1 -455 -17 -14 -11 -127 -94 -252 -185 l-227 -165 0 189 0 190 -75 0 c-103 0 -217 24 -295 63 -89 44 -195 150 -238 239 -55 112 -62 168 -62 498 0 340 10 424 62 523 71 135 231 254 373 277 35 6 377 10 828 10 l767 0 0 185 c0 219 -3 228 -91 321 -60 62 -62 65 -44 84 20 22 30 93 21 144 -9 45 -47 91 -97 116 -42 22 -131 26 -164 8z m129 -113 c36 -33 36 -86 0 -114 -80 -63 -172 45 -98 114 15 14 37 25 49 25 12 0 34 -11 49 -25z%27/><path d=%27M804 1761 c-18 -11 -45 -36 -60 -57 -58 -75 -29 -197 58 -248 50 -30 136 -26 188 8 101 67 105 216 7 287 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M1319 1757 c-54 -36 -79 -82 -79 -144 0 -118 88 -193 207 -176 53 7 117 59 133 109 28 82 -9 182 -80 219 -46 24 -140 20 -181 -8z%27/><path d=%27M1844 1761 c-120 -73 -118 -228 3 -308 31 -20 130 -20 168 -1 62 33 95 86 95 153 0 62 -25 111 -73 146 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M2916 1634 c-56 -56 46 -290 180 -413 68 -62 159 -114 240 -137 53 -14 65 -15 90 -3 36 17 52 59 36 93 -8 19 -29 30 -91 50 -96 30 -149 64 -221 143 -51 55 -120 179 -120 214 0 9 -9 28 -21 43 -24 30 -69 35 -93 10z%27/></g></symbol></defs><g fill=%27%238696a7%27 stroke=%27none%27 opacity=%271%27><use href=%27%23l%27 x=%2770%27 y=%27300%27 width=%2755%27 height=%2742.5%27 transform=%27rotate(-12 97.5 321.2)%27/><use href=%27%23l%27 x=%27280%27 y=%2770%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(8 289.0 77.0)%27/><use href=%27%23l%27 x=%27460%27 y=%27240%27 width=%2730%27 height=%2723.2%27 transform=%27rotate(-5 475.0 251.6)%27/><use href=%27%23l%27 x=%27380%27 y=%27520%27 width=%2720%27 height=%2715.5%27 transform=%27rotate(-8 390.0 527.8)%27/><use href=%27%23l%27 x=%27530%27 y=%27420%27 width=%2745%27 height=%2734.8%27 transform=%27rotate(20 552.5 437.4)%27/><use href=%27%23l%27 x=%2720%27 y=%27140%27 width=%2722%27 height=%2717.0%27 transform=%27rotate(-20 31.0 148.5)%27/><use href=%27%23l%27 x=%27500%27 y=%2760%27 width=%2736%27 height=%2727.8%27 transform=%27rotate(-15 518.0 73.9)%27/><use href=%27%23l%27 x=%27200%27 y=%27200%27 width=%2716%27 height=%2712.4%27 transform=%27rotate(5 208.0 206.2)%27/><use href=%27%23l%27 x=%27560%27 y=%27550%27 width=%2726%27 height=%2720.1%27 transform=%27rotate(-10 573.0 560.0)%27/><use href=%27%23l%27 x=%2740%27 y=%27460%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(18 49.0 466.9)%27/></g></svg>");
  background-size: 600px 600px;
}
.dark .workspace-chat-doodle {
  opacity: 0.24;
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27600%27 viewBox=%270 0 600 600%27><g fill=%27none%27 stroke=%27%23ffffff%27 stroke-linecap=%27round%27><path d=%27M-20 180 Q80 120 180 190 T380 160 T600 200%27 stroke-width=%270.8%27/><path d=%27M-10 420 Q120 380 220 430 T440 390 T620 440%27 stroke-width=%270.6%27/><path d=%27M50 -10 Q90 100 140 200 Q200 320 160 450 Q130 540 180 610%27 stroke-width=%270.7%27/><path d=%27M350 -20 Q380 80 420 180 Q470 300 430 420 Q400 520 440 620%27 stroke-width=%270.5%27/><path d=%27M-20 60 Q100 30 200 80 Q320 140 400 90 T620 100%27 stroke-width=%270.4%27 stroke-dasharray=%278 12%27/><path d=%27M-10 540 Q80 510 180 550 Q280 590 380 540 T610 560%27 stroke-width=%270.4%27 stroke-dasharray=%276 10%27/><path d=%27M520 -10 Q480 120 540 250 Q590 360 530 480 Q490 570 540 620%27 stroke-width=%270.6%27/><path d=%27M-20 320 Q60 290 150 330 Q260 380 340 310 Q420 250 520 290 T620 270%27 stroke-width=%270.5%27/><path d=%27M80 280 Q130 240 180 280%27 stroke-width=%270.4%27/><path d=%27M320 450 Q370 410 420 450%27 stroke-width=%270.4%27/><path d=%27M450 100 Q490 70 530 100%27 stroke-width=%270.4%27/><path d=%27M200 50 Q230 25 260 50%27 stroke-width=%270.3%27/><circle cx=%27180%27 cy=%27190%27 r=%273%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27380%27 cy=%27160%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27220%27 cy=%27430%27 r=%272.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27440%27 cy=%27390%27 r=%271.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27140%27 cy=%27200%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27420%27 cy=%27180%27 r=%271.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27160%27 cy=%27450%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27430%27 cy=%27420%27 r=%271.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27540%27 cy=%27250%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27340%27 cy=%27310%27 r=%271.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%2760%27 cy=%2790%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27290%27 cy=%27130%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27500%27 cy=%27200%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27100%27 cy=%27350%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27310%27 cy=%27510%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27480%27 cy=%27480%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27570%27 cy=%27340%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%2740%27 cy=%27500%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27250%27 cy=%27260%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27460%27 cy=%27560%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><g stroke-width=%270.6%27><path d=%27M95 150 l0-5 0 10 M90 150 l10 0%27/><path d=%27M310 80 l0-4 0 8 M306 80 l8 0%27/><path d=%27M500 320 l0-5 0 10 M495 320 l10 0%27/><path d=%27M170 520 l0-4 0 8 M166 520 l8 0%27/><path d=%27M400 570 l0-3 0 6 M397 570 l6 0%27/><path d=%27M50 260 l0-3 0 6 M47 260 l6 0%27/><path d=%27M560 130 l0-4 0 8 M556 130 l8 0%27/><path d=%27M270 370 l0-3 0 6 M267 370 l6 0%27/></g><line x1=%27180%27 y1=%27190%27 x2=%27140%27 y2=%27200%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27380%27 y1=%27160%27 x2=%27420%27 y2=%27180%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27220%27 y1=%27430%27 x2=%27160%27 y2=%27450%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27440%27 y1=%27390%27 x2=%27430%27 y2=%27420%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27340%27 y1=%27310%27 x2=%27290%27 y2=%27130%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><line x1=%27540%27 y1=%27250%27 x2=%27500%27 y2=%27320%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><circle cx=%27300%27 cy=%27300%27 r=%2740%27 stroke-width=%270.25%27/><circle cx=%27300%27 cy=%27300%27 r=%2760%27 stroke-width=%270.2%27/><circle cx=%27120%27 cy=%27100%27 r=%2725%27 stroke-width=%270.2%27/><circle cx=%27480%27 cy=%27500%27 r=%2730%27 stroke-width=%270.2%27/></g><defs><symbol id=%27l%27 viewBox=%270 0 4930 3810%27><g transform=%27translate(0,3810) scale(1,-1)%27><path d=%27M2575 3661 c-99 -45 -138 -156 -89 -252 14 -28 79 -89 94 -89 5 0 8 -515 7 -1303 l-2 -1303 34 -68 c42 -81 107 -143 200 -189 63 -31 71 -32 186 -32 114 0 123 2 185 31 36 17 85 46 110 64 35 26 55 34 97 36 59 2 149 39 205 84 27 22 48 30 76 30 45 0 131 24 185 52 121 61 218 216 218 348 1 55 2 57 47 94 63 51 120 120 148 181 108 233 46 471 -162 628 l-61 46 -5 68 c-9 111 -49 194 -138 284 -73 73 -122 104 -210 131 -33 11 -45 21 -63 57 -29 58 -105 141 -165 179 -103 66 -281 94 -367 58 l-35 -15 0 52 0 52 93 93 c66 66 99 92 117 92 47 0 123 45 154 89 24 35 29 52 29 100 0 71 -26 120 -86 159 -84 56 -215 23 -265 -66 -29 -52 -30 -134 -2 -180 l21 -33 -101 -98 -100 -98 0 -444 0 -444 99 -97 c106 -105 139 -119 174 -80 35 39 22 72 -58 152 l-75 74 0 248 c0 285 -3 275 99 305 96 27 195 -3 277 -84 46 -46 53 -61 32 -68 -138 -48 -209 -100 -248 -180 -27 -55 -23 -92 12 -118 37 -27 60 -16 106 52 26 38 54 64 92 85 50 28 63 31 140 31 75 0 91 -4 140 -30 100 -55 170 -149 184 -247 l7 -48 -73 0 c-173 0 -324 -58 -435 -166 -67 -66 -81 -105 -47 -138 29 -29 63 -19 127 39 183 164 433 179 590 35 112 -102 144 -257 81 -391 -27 -57 -122 -169 -143 -169 -4 0 -14 13 -23 28 -18 30 -104 114 -152 149 l-30 21 29 33 c15 19 34 48 42 66 18 44 17 123 -3 151 -33 47 -94 13 -94 -53 0 -33 -30 -88 -63 -116 -65 -56 -221 -63 -314 -15 -77 39 -123 32 -123 -18 1 -84 197 -162 341 -136 59 11 61 10 118 -24 72 -44 146 -122 171 -182 52 -121 -10 -264 -140 -323 -65 -30 -77 -27 -85 17 -14 86 -80 153 -122 126 -13 -8 -17 -28 -17 -91 -1 -75 -3 -84 -31 -119 -63 -77 -161 -97 -254 -50 -88 45 -137 119 -150 223 -6 51 -13 71 -31 85 -29 23 -51 23 -78 -2 -71 -67 -19 -257 102 -366 33 -30 57 -56 55 -58 -2 -1 -26 -11 -53 -20 -144 -48 -304 14 -367 141 l-24 48 -3 1273 c-2 896 1 1272 8 1272 6 0 33 22 60 49 39 39 50 57 55 94 22 146 -127 259 -260 198z m114 -96 c50 -25 57 -91 15 -124 -52 -41 -118 -17 -130 46 -5 27 -1 37 24 63 34 34 50 37 91 15z m645 -256 c34 -40 33 -64 -3 -100 -36 -36 -73 -37 -106 -4 -49 49 -15 135 54 135 20 0 37 -9 55 -31z%27/><path d=%27M4605 3476 c-49 -24 -166 -80 -260 -125 -312 -150 -425 -206 -425 -211 0 -3 51 -22 113 -44 61 -21 116 -42 121 -46 4 -5 -16 -39 -46 -77 -30 -37 -111 -143 -181 -235 l-126 -166 72 -43 c40 -24 103 -75 143 -116 39 -40 74 -73 78 -73 4 0 83 116 177 258 94 141 174 258 178 260 5 1 48 -43 97 -99 84 -97 89 -100 95 -75 9 33 23 146 90 729 5 48 7 92 4 97 -11 17 -38 10 -130 -34z%27/><path d=%27M2005 3288 c-96 -53 -131 -162 -82 -258 24 -50 76 -85 140 -95 30 -6 52 -22 107 -78 l70 -72 0 -107 0 -108 -749 0 -750 0 -83 -26 c-195 -62 -340 -188 -423 -369 -58 -125 -60 -144 -60 -560 l0 -380 29 -85 c35 -103 70 -168 131 -239 120 -141 265 -217 468 -246 l47 -7 0 -218 c0 -185 2 -221 16 -234 8 -9 21 -16 28 -16 12 0 159 96 546 358 l164 112 403 0 403 0 -1 23 c0 12 -6 45 -13 72 l-11 50 -431 3 c-412 2 -432 1 -455 -17 -14 -11 -127 -94 -252 -185 l-227 -165 0 189 0 190 -75 0 c-103 0 -217 24 -295 63 -89 44 -195 150 -238 239 -55 112 -62 168 -62 498 0 340 10 424 62 523 71 135 231 254 373 277 35 6 377 10 828 10 l767 0 0 185 c0 219 -3 228 -91 321 -60 62 -62 65 -44 84 20 22 30 93 21 144 -9 45 -47 91 -97 116 -42 22 -131 26 -164 8z m129 -113 c36 -33 36 -86 0 -114 -80 -63 -172 45 -98 114 15 14 37 25 49 25 12 0 34 -11 49 -25z%27/><path d=%27M804 1761 c-18 -11 -45 -36 -60 -57 -58 -75 -29 -197 58 -248 50 -30 136 -26 188 8 101 67 105 216 7 287 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M1319 1757 c-54 -36 -79 -82 -79 -144 0 -118 88 -193 207 -176 53 7 117 59 133 109 28 82 -9 182 -80 219 -46 24 -140 20 -181 -8z%27/><path d=%27M1844 1761 c-120 -73 -118 -228 3 -308 31 -20 130 -20 168 -1 62 33 95 86 95 153 0 62 -25 111 -73 146 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M2916 1634 c-56 -56 46 -290 180 -413 68 -62 159 -114 240 -137 53 -14 65 -15 90 -3 36 17 52 59 36 93 -8 19 -29 30 -91 50 -96 30 -149 64 -221 143 -51 55 -120 179 -120 214 0 9 -9 28 -21 43 -24 30 -69 35 -93 10z%27/></g></symbol></defs><g fill=%27%23ffffff%27 stroke=%27none%27 opacity=%271%27><use href=%27%23l%27 x=%2770%27 y=%27300%27 width=%2755%27 height=%2742.5%27 transform=%27rotate(-12 97.5 321.2)%27/><use href=%27%23l%27 x=%27280%27 y=%2770%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(8 289.0 77.0)%27/><use href=%27%23l%27 x=%27460%27 y=%27240%27 width=%2730%27 height=%2723.2%27 transform=%27rotate(-5 475.0 251.6)%27/><use href=%27%23l%27 x=%27380%27 y=%27520%27 width=%2720%27 height=%2715.5%27 transform=%27rotate(-8 390.0 527.8)%27/><use href=%27%23l%27 x=%27530%27 y=%27420%27 width=%2745%27 height=%2734.8%27 transform=%27rotate(20 552.5 437.4)%27/><use href=%27%23l%27 x=%2720%27 y=%27140%27 width=%2722%27 height=%2717.0%27 transform=%27rotate(-20 31.0 148.5)%27/><use href=%27%23l%27 x=%27500%27 y=%2760%27 width=%2736%27 height=%2727.8%27 transform=%27rotate(-15 518.0 73.9)%27/><use href=%27%23l%27 x=%27200%27 y=%27200%27 width=%2716%27 height=%2712.4%27 transform=%27rotate(5 208.0 206.2)%27/><use href=%27%23l%27 x=%27560%27 y=%27550%27 width=%2726%27 height=%2720.1%27 transform=%27rotate(-10 573.0 560.0)%27/><use href=%27%23l%27 x=%2740%27 y=%27460%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(18 49.0 466.9)%27/></g></svg>");
}

/* Brand accent: pink logos for empty state */
.workspace-chat-doodle.brand-accent {
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27600%27 viewBox=%270 0 600 600%27><g fill=%27none%27 stroke=%27%238696a7%27 stroke-linecap=%27round%27><path d=%27M-20 180 Q80 120 180 190 T380 160 T600 200%27 stroke-width=%270.8%27/><path d=%27M-10 420 Q120 380 220 430 T440 390 T620 440%27 stroke-width=%270.6%27/><path d=%27M50 -10 Q90 100 140 200 Q200 320 160 450 Q130 540 180 610%27 stroke-width=%270.7%27/><path d=%27M350 -20 Q380 80 420 180 Q470 300 430 420 Q400 520 440 620%27 stroke-width=%270.5%27/><path d=%27M-20 60 Q100 30 200 80 Q320 140 400 90 T620 100%27 stroke-width=%270.4%27 stroke-dasharray=%278 12%27/><path d=%27M-10 540 Q80 510 180 550 Q280 590 380 540 T610 560%27 stroke-width=%270.4%27 stroke-dasharray=%276 10%27/><path d=%27M520 -10 Q480 120 540 250 Q590 360 530 480 Q490 570 540 620%27 stroke-width=%270.6%27/><path d=%27M-20 320 Q60 290 150 330 Q260 380 340 310 Q420 250 520 290 T620 270%27 stroke-width=%270.5%27/><path d=%27M80 280 Q130 240 180 280%27 stroke-width=%270.4%27/><path d=%27M320 450 Q370 410 420 450%27 stroke-width=%270.4%27/><path d=%27M450 100 Q490 70 530 100%27 stroke-width=%270.4%27/><path d=%27M200 50 Q230 25 260 50%27 stroke-width=%270.3%27/><circle cx=%27180%27 cy=%27190%27 r=%273%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27380%27 cy=%27160%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27220%27 cy=%27430%27 r=%272.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27440%27 cy=%27390%27 r=%271.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27140%27 cy=%27200%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27420%27 cy=%27180%27 r=%271.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27160%27 cy=%27450%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27430%27 cy=%27420%27 r=%271.5%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27540%27 cy=%27250%27 r=%272%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27340%27 cy=%27310%27 r=%271.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%2760%27 cy=%2790%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27290%27 cy=%27130%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27500%27 cy=%27200%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27100%27 cy=%27350%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27310%27 cy=%27510%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27480%27 cy=%27480%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27570%27 cy=%27340%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%2740%27 cy=%27500%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27250%27 cy=%27260%27 r=%270.8%27 fill=%27%238696a7%27 stroke=%27none%27/><circle cx=%27460%27 cy=%27560%27 r=%271%27 fill=%27%238696a7%27 stroke=%27none%27/><g stroke-width=%270.6%27><path d=%27M95 150 l0-5 0 10 M90 150 l10 0%27/><path d=%27M310 80 l0-4 0 8 M306 80 l8 0%27/><path d=%27M500 320 l0-5 0 10 M495 320 l10 0%27/><path d=%27M170 520 l0-4 0 8 M166 520 l8 0%27/><path d=%27M400 570 l0-3 0 6 M397 570 l6 0%27/><path d=%27M50 260 l0-3 0 6 M47 260 l6 0%27/><path d=%27M560 130 l0-4 0 8 M556 130 l8 0%27/><path d=%27M270 370 l0-3 0 6 M267 370 l6 0%27/></g><line x1=%27180%27 y1=%27190%27 x2=%27140%27 y2=%27200%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27380%27 y1=%27160%27 x2=%27420%27 y2=%27180%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27220%27 y1=%27430%27 x2=%27160%27 y2=%27450%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27440%27 y1=%27390%27 x2=%27430%27 y2=%27420%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27340%27 y1=%27310%27 x2=%27290%27 y2=%27130%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><line x1=%27540%27 y1=%27250%27 x2=%27500%27 y2=%27320%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><circle cx=%27300%27 cy=%27300%27 r=%2740%27 stroke-width=%270.25%27/><circle cx=%27300%27 cy=%27300%27 r=%2760%27 stroke-width=%270.2%27/><circle cx=%27120%27 cy=%27100%27 r=%2725%27 stroke-width=%270.2%27/><circle cx=%27480%27 cy=%27500%27 r=%2730%27 stroke-width=%270.2%27/></g><defs><symbol id=%27l%27 viewBox=%270 0 4930 3810%27><g transform=%27translate(0,3810) scale(1,-1)%27><path d=%27M2575 3661 c-99 -45 -138 -156 -89 -252 14 -28 79 -89 94 -89 5 0 8 -515 7 -1303 l-2 -1303 34 -68 c42 -81 107 -143 200 -189 63 -31 71 -32 186 -32 114 0 123 2 185 31 36 17 85 46 110 64 35 26 55 34 97 36 59 2 149 39 205 84 27 22 48 30 76 30 45 0 131 24 185 52 121 61 218 216 218 348 1 55 2 57 47 94 63 51 120 120 148 181 108 233 46 471 -162 628 l-61 46 -5 68 c-9 111 -49 194 -138 284 -73 73 -122 104 -210 131 -33 11 -45 21 -63 57 -29 58 -105 141 -165 179 -103 66 -281 94 -367 58 l-35 -15 0 52 0 52 93 93 c66 66 99 92 117 92 47 0 123 45 154 89 24 35 29 52 29 100 0 71 -26 120 -86 159 -84 56 -215 23 -265 -66 -29 -52 -30 -134 -2 -180 l21 -33 -101 -98 -100 -98 0 -444 0 -444 99 -97 c106 -105 139 -119 174 -80 35 39 22 72 -58 152 l-75 74 0 248 c0 285 -3 275 99 305 96 27 195 -3 277 -84 46 -46 53 -61 32 -68 -138 -48 -209 -100 -248 -180 -27 -55 -23 -92 12 -118 37 -27 60 -16 106 52 26 38 54 64 92 85 50 28 63 31 140 31 75 0 91 -4 140 -30 100 -55 170 -149 184 -247 l7 -48 -73 0 c-173 0 -324 -58 -435 -166 -67 -66 -81 -105 -47 -138 29 -29 63 -19 127 39 183 164 433 179 590 35 112 -102 144 -257 81 -391 -27 -57 -122 -169 -143 -169 -4 0 -14 13 -23 28 -18 30 -104 114 -152 149 l-30 21 29 33 c15 19 34 48 42 66 18 44 17 123 -3 151 -33 47 -94 13 -94 -53 0 -33 -30 -88 -63 -116 -65 -56 -221 -63 -314 -15 -77 39 -123 32 -123 -18 1 -84 197 -162 341 -136 59 11 61 10 118 -24 72 -44 146 -122 171 -182 52 -121 -10 -264 -140 -323 -65 -30 -77 -27 -85 17 -14 86 -80 153 -122 126 -13 -8 -17 -28 -17 -91 -1 -75 -3 -84 -31 -119 -63 -77 -161 -97 -254 -50 -88 45 -137 119 -150 223 -6 51 -13 71 -31 85 -29 23 -51 23 -78 -2 -71 -67 -19 -257 102 -366 33 -30 57 -56 55 -58 -2 -1 -26 -11 -53 -20 -144 -48 -304 14 -367 141 l-24 48 -3 1273 c-2 896 1 1272 8 1272 6 0 33 22 60 49 39 39 50 57 55 94 22 146 -127 259 -260 198z m114 -96 c50 -25 57 -91 15 -124 -52 -41 -118 -17 -130 46 -5 27 -1 37 24 63 34 34 50 37 91 15z m645 -256 c34 -40 33 -64 -3 -100 -36 -36 -73 -37 -106 -4 -49 49 -15 135 54 135 20 0 37 -9 55 -31z%27/><path d=%27M4605 3476 c-49 -24 -166 -80 -260 -125 -312 -150 -425 -206 -425 -211 0 -3 51 -22 113 -44 61 -21 116 -42 121 -46 4 -5 -16 -39 -46 -77 -30 -37 -111 -143 -181 -235 l-126 -166 72 -43 c40 -24 103 -75 143 -116 39 -40 74 -73 78 -73 4 0 83 116 177 258 94 141 174 258 178 260 5 1 48 -43 97 -99 84 -97 89 -100 95 -75 9 33 23 146 90 729 5 48 7 92 4 97 -11 17 -38 10 -130 -34z%27/><path d=%27M2005 3288 c-96 -53 -131 -162 -82 -258 24 -50 76 -85 140 -95 30 -6 52 -22 107 -78 l70 -72 0 -107 0 -108 -749 0 -750 0 -83 -26 c-195 -62 -340 -188 -423 -369 -58 -125 -60 -144 -60 -560 l0 -380 29 -85 c35 -103 70 -168 131 -239 120 -141 265 -217 468 -246 l47 -7 0 -218 c0 -185 2 -221 16 -234 8 -9 21 -16 28 -16 12 0 159 96 546 358 l164 112 403 0 403 0 -1 23 c0 12 -6 45 -13 72 l-11 50 -431 3 c-412 2 -432 1 -455 -17 -14 -11 -127 -94 -252 -185 l-227 -165 0 189 0 190 -75 0 c-103 0 -217 24 -295 63 -89 44 -195 150 -238 239 -55 112 -62 168 -62 498 0 340 10 424 62 523 71 135 231 254 373 277 35 6 377 10 828 10 l767 0 0 185 c0 219 -3 228 -91 321 -60 62 -62 65 -44 84 20 22 30 93 21 144 -9 45 -47 91 -97 116 -42 22 -131 26 -164 8z m129 -113 c36 -33 36 -86 0 -114 -80 -63 -172 45 -98 114 15 14 37 25 49 25 12 0 34 -11 49 -25z%27/><path d=%27M804 1761 c-18 -11 -45 -36 -60 -57 -58 -75 -29 -197 58 -248 50 -30 136 -26 188 8 101 67 105 216 7 287 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M1319 1757 c-54 -36 -79 -82 -79 -144 0 -118 88 -193 207 -176 53 7 117 59 133 109 28 82 -9 182 -80 219 -46 24 -140 20 -181 -8z%27/><path d=%27M1844 1761 c-120 -73 -118 -228 3 -308 31 -20 130 -20 168 -1 62 33 95 86 95 153 0 62 -25 111 -73 146 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M2916 1634 c-56 -56 46 -290 180 -413 68 -62 159 -114 240 -137 53 -14 65 -15 90 -3 36 17 52 59 36 93 -8 19 -29 30 -91 50 -96 30 -149 64 -221 143 -51 55 -120 179 -120 214 0 9 -9 28 -21 43 -24 30 -69 35 -93 10z%27/></g></symbol></defs><g fill=%27%23ec4899%27 stroke=%27none%27 opacity=%271%27><use href=%27%23l%27 x=%2770%27 y=%27300%27 width=%2755%27 height=%2742.5%27 transform=%27rotate(-12 97.5 321.2)%27/><use href=%27%23l%27 x=%27280%27 y=%2770%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(8 289.0 77.0)%27/><use href=%27%23l%27 x=%27460%27 y=%27240%27 width=%2730%27 height=%2723.2%27 transform=%27rotate(-5 475.0 251.6)%27/><use href=%27%23l%27 x=%27380%27 y=%27520%27 width=%2720%27 height=%2715.5%27 transform=%27rotate(-8 390.0 527.8)%27/><use href=%27%23l%27 x=%27530%27 y=%27420%27 width=%2745%27 height=%2734.8%27 transform=%27rotate(20 552.5 437.4)%27/><use href=%27%23l%27 x=%2720%27 y=%27140%27 width=%2722%27 height=%2717.0%27 transform=%27rotate(-20 31.0 148.5)%27/><use href=%27%23l%27 x=%27500%27 y=%2760%27 width=%2736%27 height=%2727.8%27 transform=%27rotate(-15 518.0 73.9)%27/><use href=%27%23l%27 x=%27200%27 y=%27200%27 width=%2716%27 height=%2712.4%27 transform=%27rotate(5 208.0 206.2)%27/><use href=%27%23l%27 x=%27560%27 y=%27550%27 width=%2726%27 height=%2720.1%27 transform=%27rotate(-10 573.0 560.0)%27/><use href=%27%23l%27 x=%2740%27 y=%27460%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(18 49.0 466.9)%27/></g></svg>");
}
.dark .workspace-chat-doodle.brand-accent {
  background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27600%27 viewBox=%270 0 600 600%27><g fill=%27none%27 stroke=%27%23ffffff%27 stroke-linecap=%27round%27><path d=%27M-20 180 Q80 120 180 190 T380 160 T600 200%27 stroke-width=%270.8%27/><path d=%27M-10 420 Q120 380 220 430 T440 390 T620 440%27 stroke-width=%270.6%27/><path d=%27M50 -10 Q90 100 140 200 Q200 320 160 450 Q130 540 180 610%27 stroke-width=%270.7%27/><path d=%27M350 -20 Q380 80 420 180 Q470 300 430 420 Q400 520 440 620%27 stroke-width=%270.5%27/><path d=%27M-20 60 Q100 30 200 80 Q320 140 400 90 T620 100%27 stroke-width=%270.4%27 stroke-dasharray=%278 12%27/><path d=%27M-10 540 Q80 510 180 550 Q280 590 380 540 T610 560%27 stroke-width=%270.4%27 stroke-dasharray=%276 10%27/><path d=%27M520 -10 Q480 120 540 250 Q590 360 530 480 Q490 570 540 620%27 stroke-width=%270.6%27/><path d=%27M-20 320 Q60 290 150 330 Q260 380 340 310 Q420 250 520 290 T620 270%27 stroke-width=%270.5%27/><path d=%27M80 280 Q130 240 180 280%27 stroke-width=%270.4%27/><path d=%27M320 450 Q370 410 420 450%27 stroke-width=%270.4%27/><path d=%27M450 100 Q490 70 530 100%27 stroke-width=%270.4%27/><path d=%27M200 50 Q230 25 260 50%27 stroke-width=%270.3%27/><circle cx=%27180%27 cy=%27190%27 r=%273%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27380%27 cy=%27160%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27220%27 cy=%27430%27 r=%272.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27440%27 cy=%27390%27 r=%271.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27140%27 cy=%27200%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27420%27 cy=%27180%27 r=%271.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27160%27 cy=%27450%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27430%27 cy=%27420%27 r=%271.5%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27540%27 cy=%27250%27 r=%272%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27340%27 cy=%27310%27 r=%271.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%2760%27 cy=%2790%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27290%27 cy=%27130%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27500%27 cy=%27200%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27100%27 cy=%27350%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27310%27 cy=%27510%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27480%27 cy=%27480%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27570%27 cy=%27340%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%2740%27 cy=%27500%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27250%27 cy=%27260%27 r=%270.8%27 fill=%27%23ffffff%27 stroke=%27none%27/><circle cx=%27460%27 cy=%27560%27 r=%271%27 fill=%27%23ffffff%27 stroke=%27none%27/><g stroke-width=%270.6%27><path d=%27M95 150 l0-5 0 10 M90 150 l10 0%27/><path d=%27M310 80 l0-4 0 8 M306 80 l8 0%27/><path d=%27M500 320 l0-5 0 10 M495 320 l10 0%27/><path d=%27M170 520 l0-4 0 8 M166 520 l8 0%27/><path d=%27M400 570 l0-3 0 6 M397 570 l6 0%27/><path d=%27M50 260 l0-3 0 6 M47 260 l6 0%27/><path d=%27M560 130 l0-4 0 8 M556 130 l8 0%27/><path d=%27M270 370 l0-3 0 6 M267 370 l6 0%27/></g><line x1=%27180%27 y1=%27190%27 x2=%27140%27 y2=%27200%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27380%27 y1=%27160%27 x2=%27420%27 y2=%27180%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27220%27 y1=%27430%27 x2=%27160%27 y2=%27450%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27440%27 y1=%27390%27 x2=%27430%27 y2=%27420%27 stroke-width=%270.3%27 stroke-dasharray=%272 4%27/><line x1=%27340%27 y1=%27310%27 x2=%27290%27 y2=%27130%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><line x1=%27540%27 y1=%27250%27 x2=%27500%27 y2=%27320%27 stroke-width=%270.2%27 stroke-dasharray=%273 8%27/><circle cx=%27300%27 cy=%27300%27 r=%2740%27 stroke-width=%270.25%27/><circle cx=%27300%27 cy=%27300%27 r=%2760%27 stroke-width=%270.2%27/><circle cx=%27120%27 cy=%27100%27 r=%2725%27 stroke-width=%270.2%27/><circle cx=%27480%27 cy=%27500%27 r=%2730%27 stroke-width=%270.2%27/></g><defs><symbol id=%27l%27 viewBox=%270 0 4930 3810%27><g transform=%27translate(0,3810) scale(1,-1)%27><path d=%27M2575 3661 c-99 -45 -138 -156 -89 -252 14 -28 79 -89 94 -89 5 0 8 -515 7 -1303 l-2 -1303 34 -68 c42 -81 107 -143 200 -189 63 -31 71 -32 186 -32 114 0 123 2 185 31 36 17 85 46 110 64 35 26 55 34 97 36 59 2 149 39 205 84 27 22 48 30 76 30 45 0 131 24 185 52 121 61 218 216 218 348 1 55 2 57 47 94 63 51 120 120 148 181 108 233 46 471 -162 628 l-61 46 -5 68 c-9 111 -49 194 -138 284 -73 73 -122 104 -210 131 -33 11 -45 21 -63 57 -29 58 -105 141 -165 179 -103 66 -281 94 -367 58 l-35 -15 0 52 0 52 93 93 c66 66 99 92 117 92 47 0 123 45 154 89 24 35 29 52 29 100 0 71 -26 120 -86 159 -84 56 -215 23 -265 -66 -29 -52 -30 -134 -2 -180 l21 -33 -101 -98 -100 -98 0 -444 0 -444 99 -97 c106 -105 139 -119 174 -80 35 39 22 72 -58 152 l-75 74 0 248 c0 285 -3 275 99 305 96 27 195 -3 277 -84 46 -46 53 -61 32 -68 -138 -48 -209 -100 -248 -180 -27 -55 -23 -92 12 -118 37 -27 60 -16 106 52 26 38 54 64 92 85 50 28 63 31 140 31 75 0 91 -4 140 -30 100 -55 170 -149 184 -247 l7 -48 -73 0 c-173 0 -324 -58 -435 -166 -67 -66 -81 -105 -47 -138 29 -29 63 -19 127 39 183 164 433 179 590 35 112 -102 144 -257 81 -391 -27 -57 -122 -169 -143 -169 -4 0 -14 13 -23 28 -18 30 -104 114 -152 149 l-30 21 29 33 c15 19 34 48 42 66 18 44 17 123 -3 151 -33 47 -94 13 -94 -53 0 -33 -30 -88 -63 -116 -65 -56 -221 -63 -314 -15 -77 39 -123 32 -123 -18 1 -84 197 -162 341 -136 59 11 61 10 118 -24 72 -44 146 -122 171 -182 52 -121 -10 -264 -140 -323 -65 -30 -77 -27 -85 17 -14 86 -80 153 -122 126 -13 -8 -17 -28 -17 -91 -1 -75 -3 -84 -31 -119 -63 -77 -161 -97 -254 -50 -88 45 -137 119 -150 223 -6 51 -13 71 -31 85 -29 23 -51 23 -78 -2 -71 -67 -19 -257 102 -366 33 -30 57 -56 55 -58 -2 -1 -26 -11 -53 -20 -144 -48 -304 14 -367 141 l-24 48 -3 1273 c-2 896 1 1272 8 1272 6 0 33 22 60 49 39 39 50 57 55 94 22 146 -127 259 -260 198z m114 -96 c50 -25 57 -91 15 -124 -52 -41 -118 -17 -130 46 -5 27 -1 37 24 63 34 34 50 37 91 15z m645 -256 c34 -40 33 -64 -3 -100 -36 -36 -73 -37 -106 -4 -49 49 -15 135 54 135 20 0 37 -9 55 -31z%27/><path d=%27M4605 3476 c-49 -24 -166 -80 -260 -125 -312 -150 -425 -206 -425 -211 0 -3 51 -22 113 -44 61 -21 116 -42 121 -46 4 -5 -16 -39 -46 -77 -30 -37 -111 -143 -181 -235 l-126 -166 72 -43 c40 -24 103 -75 143 -116 39 -40 74 -73 78 -73 4 0 83 116 177 258 94 141 174 258 178 260 5 1 48 -43 97 -99 84 -97 89 -100 95 -75 9 33 23 146 90 729 5 48 7 92 4 97 -11 17 -38 10 -130 -34z%27/><path d=%27M2005 3288 c-96 -53 -131 -162 -82 -258 24 -50 76 -85 140 -95 30 -6 52 -22 107 -78 l70 -72 0 -107 0 -108 -749 0 -750 0 -83 -26 c-195 -62 -340 -188 -423 -369 -58 -125 -60 -144 -60 -560 l0 -380 29 -85 c35 -103 70 -168 131 -239 120 -141 265 -217 468 -246 l47 -7 0 -218 c0 -185 2 -221 16 -234 8 -9 21 -16 28 -16 12 0 159 96 546 358 l164 112 403 0 403 0 -1 23 c0 12 -6 45 -13 72 l-11 50 -431 3 c-412 2 -432 1 -455 -17 -14 -11 -127 -94 -252 -185 l-227 -165 0 189 0 190 -75 0 c-103 0 -217 24 -295 63 -89 44 -195 150 -238 239 -55 112 -62 168 -62 498 0 340 10 424 62 523 71 135 231 254 373 277 35 6 377 10 828 10 l767 0 0 185 c0 219 -3 228 -91 321 -60 62 -62 65 -44 84 20 22 30 93 21 144 -9 45 -47 91 -97 116 -42 22 -131 26 -164 8z m129 -113 c36 -33 36 -86 0 -114 -80 -63 -172 45 -98 114 15 14 37 25 49 25 12 0 34 -11 49 -25z%27/><path d=%27M804 1761 c-18 -11 -45 -36 -60 -57 -58 -75 -29 -197 58 -248 50 -30 136 -26 188 8 101 67 105 216 7 287 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M1319 1757 c-54 -36 -79 -82 -79 -144 0 -118 88 -193 207 -176 53 7 117 59 133 109 28 82 -9 182 -80 219 -46 24 -140 20 -181 -8z%27/><path d=%27M1844 1761 c-120 -73 -118 -228 3 -308 31 -20 130 -20 168 -1 62 33 95 86 95 153 0 62 -25 111 -73 146 -34 24 -50 29 -101 29 -42 0 -71 -6 -92 -19z%27/><path d=%27M2916 1634 c-56 -56 46 -290 180 -413 68 -62 159 -114 240 -137 53 -14 65 -15 90 -3 36 17 52 59 36 93 -8 19 -29 30 -91 50 -96 30 -149 64 -221 143 -51 55 -120 179 -120 214 0 9 -9 28 -21 43 -24 30 -69 35 -93 10z%27/></g></symbol></defs><g fill=%27%23ec4899%27 stroke=%27none%27 opacity=%271%27><use href=%27%23l%27 x=%2770%27 y=%27300%27 width=%2755%27 height=%2742.5%27 transform=%27rotate(-12 97.5 321.2)%27/><use href=%27%23l%27 x=%27280%27 y=%2770%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(8 289.0 77.0)%27/><use href=%27%23l%27 x=%27460%27 y=%27240%27 width=%2730%27 height=%2723.2%27 transform=%27rotate(-5 475.0 251.6)%27/><use href=%27%23l%27 x=%27380%27 y=%27520%27 width=%2720%27 height=%2715.5%27 transform=%27rotate(-8 390.0 527.8)%27/><use href=%27%23l%27 x=%27530%27 y=%27420%27 width=%2745%27 height=%2734.8%27 transform=%27rotate(20 552.5 437.4)%27/><use href=%27%23l%27 x=%2720%27 y=%27140%27 width=%2722%27 height=%2717.0%27 transform=%27rotate(-20 31.0 148.5)%27/><use href=%27%23l%27 x=%27500%27 y=%2760%27 width=%2736%27 height=%2727.8%27 transform=%27rotate(-15 518.0 73.9)%27/><use href=%27%23l%27 x=%27200%27 y=%27200%27 width=%2716%27 height=%2712.4%27 transform=%27rotate(5 208.0 206.2)%27/><use href=%27%23l%27 x=%27560%27 y=%27550%27 width=%2726%27 height=%2720.1%27 transform=%27rotate(-10 573.0 560.0)%27/><use href=%27%23l%27 x=%2740%27 y=%27460%27 width=%2718%27 height=%2713.9%27 transform=%27rotate(18 49.0 466.9)%27/></g></svg>");
}
/* Chat bubbles */
.bubble-ai {
  background: #f1f5f9;
  border-radius: 18px 18px 18px 4px;
  max-width: 85%;
}
.dark .bubble-ai { background: #2d333b !important; color: #e2e8f0 !important; }

/* Train chat preview cards — two-tone inside bubble */
.tc-card-head { background: #e2e8f0; }  /* header: darker */
.tc-card-body { background: #eef2f6; }  /* detail: lighter */
.dark .tc-card-head { background: rgba(51, 65, 85, 0.5) !important; }
.dark .tc-card-body { background: rgba(30, 41, 59, 0.5) !important; }

.bubble-user {
  background: #ec4899;
  color: white;
  border-radius: 18px 18px 4px 18px;
  max-width: 85%;
  margin-left: auto;
}
.typing-dots span {
  animation: blink 1.4s infinite both;
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  margin: 0 2px;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

.dark .bg-green-100.text-green-900 { background: #14532d !important; color: #bbf7d0 !important; }
.dark .bg-slate-100.text-slate-800 { background: #2c333a !important; color: #e2e8f0 !important; }

/* Attachment chips — neutral so they work on any stage color */
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.75);
  color: #475569;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px 2px 6px;
  line-height: 1.4;
}
.dark .attachment-chip {
  background: rgba(255,255,255,0.14);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.22);
}
/* Flat variant — for chips on plain white/dark cards (Scripts tab) */
.attachment-chip-flat {
  background: #ffffff;
  color: #7c3aed;
  border-color: #c4b5fd;
}
.dark .attachment-chip-flat {
  background: rgba(236,72,153,0.14);
  color: #f9a8d4;
  border-color: rgba(236,72,153,0.4);
}

/* Stage cards for Seguimiento tab */
.stage-emerald { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.stage-amber { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.stage-red { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.stage-blue { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.stage-orange { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.dark .stage-emerald { background: #064e3b; color: #a7f3d0; border-color: #10b981; }
.dark .stage-amber { background: #78350f; color: #fde68a; border-color: #f59e0b; }
.dark .stage-red { background: #7f1d1d; color: #fecaca; border-color: #ef4444; }
.dark .stage-blue { background: #1e3a5f; color: #bfdbfe; border-color: #3b82f6; }
.dark .stage-orange { background: #7c2d12; color: #fed7aa; border-color: #f97316; }

/* Loading shimmer */
.dark .ai-loading {
  background: linear-gradient(90deg,#22272b 25%,#38414a 50%,#22272b 75%) !important;
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}

/* Settings modal in dark */
.dark .bg-slate-50.border-slate-200 { background: #2c333a !important; border-color: #38414a !important; }

/* Tab bar */
.dark .bg-slate-100.border-slate-200 { background: #1d2125 !important; border-color: #2c333a !important; }
.dark #brandTabBar { background: #2c333a !important; }
/* Count pills in unselected tabs (light) */
#brandTabBar .tab-btn:not([class*="bg-brand"]) [id^="count_"] { background: rgba(0,0,0,0.08); }
/* Count pills in dark mode: combo + unselected tabs */
.dark #brandTabBar [id^="count_"]:not(.hidden) { background: rgba(255,255,255,0.15) !important; }
#brandTabSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.dark #brandTabSelect { color: #e2e8f0 !important; }
.dark #brandTabSelect option { background: #2c333a; color: #e2e8f0; }

/* Scrollbar */
.dark ::-webkit-scrollbar-track { background: #1d2125; }
.dark ::-webkit-scrollbar-thumb { background: #4a5568; }

/* Brand logo — colorize black PNG to brand pink #ec4899 rgb(236,72,153) */
.logo-brand { filter: invert(39%) sepia(82%) saturate(2066%) hue-rotate(313deg) brightness(96%) contrast(93%); }

/* ===== ANALYTICS (H4) ===== */
#analyticsView svg text.analytics-strong { fill: #1e293b; }
#analyticsView svg text.analytics-muted  { fill: #94a3b8; }
.dark #analyticsView svg text.analytics-strong { fill: #f1f5f9; }
.dark #analyticsView svg text.analytics-muted  { fill: #8696a7; }
.dark #analyticsView .bg-slate-100 { background: #2c333a !important; }

/* ===== ANALYTICS v2 ===== */
/* Background gradient mesh — sutil, no compite con los datos pero da
   profundidad (inspirado en la landing). */
#analyticsView {
  position: relative;
}

#analyticsView .analytics-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.15s;
  animation: analyticsCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  position: relative;
  overflow: hidden;
}
#analyticsView .analytics-card::before { display: none; }
#analyticsView .analytics-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.dark #analyticsView .analytics-card { background: #22272b !important; border-color: #2c333a !important; }
.dark #analyticsView .analytics-card:hover { border-color: #475569 !important; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4); }

@keyframes analyticsCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flow layout — CSS columns for true masonry (no row-height gaps) */
#analyticsView .analytics-flow {
  columns: 1;
  column-gap: 12px;
}
#analyticsView .analytics-flow > .analytics-card {
  break-inside: avoid;
  margin-bottom: 12px;
}
@media (min-width: 640px)  { #analyticsView .analytics-flow { columns: 2; } }
@media (min-width: 1024px) { #analyticsView .analytics-flow { columns: 3; } }
@media (min-width: 1440px) { #analyticsView .analytics-flow { columns: 4; } }

/* KPI grid — equal height cards (stretch), NOT part of the masonry flow */
#analyticsView .analytics-kpi-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 640px)  { #analyticsView .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #analyticsView .analytics-kpi-grid { grid-template-columns: repeat(4, 1fr); } }

/* Compact card spec */
#analyticsView .analytics-card-compact { padding: 14px 16px; }

/* Card titles: solid brand dot */
#analyticsView .analytics-card > h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}
#analyticsView .analytics-card > h3::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ec4899;
  flex-shrink: 0;
}

/* KPI grid: gradient accent on the left edge + subtle hover lift. */
#analyticsView .analytics-kpi-grid .analytics-card {
  position: relative;
  overflow: hidden;
  animation-delay: 0s;
}
/* KPI cards: solid left accent bar */
#analyticsView .analytics-kpi-grid .analytics-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: #ec4899;
  border-radius: 3px 0 0 3px;
}
#analyticsView .analytics-kpi-grid .analytics-card:nth-child(2)::before { background: #3b82f6; }
#analyticsView .analytics-kpi-grid .analytics-card:nth-child(3)::before { background: #10b981; }
#analyticsView .analytics-kpi-grid .analytics-card:nth-child(4)::before { background: #3b82f6; }

#analyticsView .analytics-kpi-value { font-variant-numeric: tabular-nums; }
#analyticsView .analytics-kpi-pink   { color: #db2777; }
#analyticsView .analytics-kpi-indigo { color: #2563eb; }
#analyticsView .analytics-kpi-green  { color: #059669; }
.dark #analyticsView .analytics-kpi-pink   { color: #f472b6; }
.dark #analyticsView .analytics-kpi-indigo { color: #60a5fa; }
.dark #analyticsView .analytics-kpi-green  { color: #34d399; }

/* Sparkline / mini-gauge holder — same size for visual alignment. */
#analyticsView .analytics-kpi-spark { width: 140px; opacity: 0.95; align-self: stretch; display: flex; align-items: flex-end; }
#analyticsView .analytics-kpi-spark svg.analytics-spark { width: 100%; height: 100%; min-height: 56px; }
#analyticsView .analytics-spark { display: block; width: 100%; height: 100%; overflow: visible; }

/* ===== Bar chart system (compact, animated) ===== */
#analyticsView .analytics-bar-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.dark #analyticsView .analytics-bar-track { background: #1e293b; }
#analyticsView .analytics-bar-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  animation: barGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
}
#analyticsView .analytics-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
}
@keyframes barGrow {
  from { width: 0%; }
  to   { width: var(--bar-w, 0%); }
}
/* Hover row interaction — small highlight, no layout shift. */
#analyticsView .analytics-bar-row { transition: opacity 0.15s; }
#analyticsView .analytics-bar-row:hover { opacity: 0.92; }

/* Gauge arc animation */
#analyticsView .analytics-gauge-fill {
  animation: gaugeDraw 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
@keyframes gaugeDraw {
  to { stroke-dashoffset: 0; }
}
.dark #analyticsView .analytics-gauge-fill { stroke: #f472b6; }

/* Vertical bars (channel chart) */
#analyticsView .analytics-vbar {
  animation: vbarGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom;
}
@keyframes vbarGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Funnel step row — same bar look but the drop chip floats next to label. */
#analyticsView .analytics-funnel-step { cursor: pointer; }
#analyticsView .analytics-funnel-drop {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  letter-spacing: 0.02em;
}
#analyticsView .analytics-funnel-drop.is-warn { background: #e0e7ff; color: #4338ca; }
#analyticsView .analytics-funnel-drop.is-bad  { background: #fce7f3; color: #be185d; }
.dark #analyticsView .analytics-funnel-drop { background: #1e293b; color: #94a3b8; }
.dark #analyticsView .analytics-funnel-drop.is-warn { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.dark #analyticsView .analytics-funnel-drop.is-bad  { background: rgba(236,72,153,0.2); color: #f472b6; }

/* Filter dropdowns — consistent compact look. */
.analytics-filter-select {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 26px 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f1f5f9;
  flex-shrink: 0;
  white-space: nowrap;
  color: #64748b;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  transition: background 0.15s, color 0.15s;
}
.analytics-filter-select:hover { background-color: #f1f5f9; }
.analytics-filter-select:focus {
  outline: none;
  background-color: #e2e8f0;
}
.dark .analytics-filter-select {
  background-color: #2c333a !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px !important;
  border-color: transparent !important;
  color: #9fadbc !important;
}
.dark .analytics-filter-select:hover { background-color: #2c333a !important; }
/* Tags button in dashboard toolbar — match sibling toggles */
#tagFilterBar .analytics-filter-select {
  background: #f1f5f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border-color: transparent; color: #64748b;
}
.dark #tagFilterBar .analytics-filter-select {
  background: #2c333a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border-color: transparent; color: #94a3b8;
}

/* AI button — rosa fuerte, texto blanco. Selector global para que funcione
   tanto dentro de #analyticsView como en #analyticsControls (top bar). */
.analytics-ai-btn {
  background: #ec4899 !important;
  color: #ffffff !important;
  transition: transform 0.15s, background 0.15s;
}
.analytics-ai-btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: #db2777 !important;
}
.analytics-ai-btn:disabled {
  background: #e2e8f0 !important;
  box-shadow: none;
  color: #94a3b8 !important;
}
.dark .analytics-ai-btn:disabled { background: #475569 !important; color: #64748b !important; }

#analyticsView svg .chart-axis { fill: #94a3b8; }
.dark #analyticsView svg .chart-axis { fill: #64748b; }

#analyticsView svg path.funnel-step { transition: opacity 0.15s; cursor: pointer; }
#analyticsView svg path.funnel-step:hover { opacity: 1; }
.dark #analyticsView svg path.funnel-step { opacity: 0.85; }

#analyticsView .analytics-donut-seg { transition: opacity 0.15s; cursor: pointer; }
#analyticsView .analytics-donut-seg:hover { opacity: 0.85; }


#analyticsTooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  max-width: 240px;
}
.dark #analyticsTooltip { background: #1e293b; }

/* Locked section overlay — navy blue tint upsell, must pop in both themes */
.analytics-locked-overlay {
  background: rgba(14,85,200,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(14,85,200,0.22);
}
.dark .analytics-locked-overlay {
  background: rgba(30,58,138,0.20);
  border-color: rgba(59,130,246,0.30);
}

/* AI Banner — animated gradient border (same technique as landing .gradient-border) */
@keyframes ai-border-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.analytics-ai-glow {
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6, #ec4899);
  background-size: 300% 300%;
  animation: ai-border-shift 4s linear infinite;
}
.analytics-ai-glow > div {
  border-radius: 15px;
}
.dark .dark-ai-banner { background: #161a1d; }
.dark .dark-ai-banner strong,
.dark .dark-ai-banner p,
.dark .dark-ai-banner span,
.dark .dark-ai-banner li,
.dark .dark-ai-banner div { color: #d1d5db; }
.dark .dark-ai-banner strong { color: #f1f5f9; }

/* AI CTA buttons */
#analyticsView .analytics-ai-cta {
  border: none !important;
  transition: background 0.15s, color 0.15s;
}
/* Primary CTA (first) — pink to deeper pink on hover */
#analyticsView .analytics-ai-cta:first-child:hover {
  background: #db2777 !important;
}
/* Secondary CTAs — subtle bg shift on hover */
#analyticsView .analytics-ai-cta:not(:first-child):hover {
  background: #2c333a !important;
  color: #e2e8f0 !important;
}

/* Unified controls bar — scrollable, no scrollbar visible */
#mainControlsBar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#mainControlsBar::-webkit-scrollbar { display: none; }
#mainControlsBar > * { flex-shrink: 0; }
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Selected card tints — light in light theme, vivid in dark */
.card-sel-blue    { background: #eff6ff; }
.card-sel-orange  { background: #fff7ed; }
.card-sel-emerald { background: #ecfdf5; }
.card-sel-amber   { background: #fffbeb; }
.card-sel-red     { background: #fef2f2; }
.card-sel-slate   { background: #f8fafc; }
.dark .card-sel-blue    { background: rgba(59,130,246,0.15) !important; }
.dark .card-sel-orange  { background: rgba(249,115,22,0.15) !important; }
.dark .card-sel-emerald { background: rgba(16,185,129,0.15) !important; }
.dark .card-sel-amber   { background: rgba(245,158,11,0.15) !important; }
.dark .card-sel-red     { background: rgba(239,68,68,0.15) !important; }
.dark .card-sel-slate   { background: rgba(148,163,184,0.1) !important; }

/* Mobile sidebar */
#mobileSidebar { will-change: transform; }
.dark #mobileSidebar { background: #161a1d !important; border-left: 1px solid #2c333a; }
.dark #mobileSidebarOverlay { background: rgba(0,0,0,0.6) !important; }

/* Sidebar menu items */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #475569;
  background: transparent; border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.sb-item:hover { background: #f1f5f9; }
.sb-item.sb-active { background: #ec4899; color: #ffffff; }
.sb-item svg, .sb-item img { flex-shrink: 0; }
.sb-divider { height: 1px; background: #e2e8f0; margin: 8px 0; }

.dark .sb-item { color: #9fadbc; }
.dark .sb-item:hover { background: #22272b; }
.dark .sb-item.sb-active { background: #ec4899; color: #ffffff; }
.dark .sb-divider { background: #2c333a; }

/* Sidebar brand tabs */
.sb-brand { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #475569; background: transparent; border: none; cursor: pointer; transition: all 0.15s; text-align: center; }
.sb-brand:hover { background: #f1f5f9; }
.sb-brand.sb-brand-active { background: #ec4899; color: #ffffff; }
.dark .sb-brand { color: #9fadbc; }
.dark .sb-brand:hover { background: #22272b; }
.dark .sb-brand.sb-brand-active { background: #ec4899; color: #ffffff; }

/* Sidebar WA toggle — matches desktop WA button colors */
.sb-wa-btn { background: transparent; color: #64748b; }
.sb-wa-btn.sb-wa-desktop { background: #eff6ff; color: #1d4ed8; }
.sb-wa-btn.sb-wa-web { background: #ecfdf5; color: #047857; }
.dark .sb-wa-btn { color: #8696a7; }
.dark .sb-wa-btn.sb-wa-desktop { background: #1e3a8a; color: #bfdbfe; }
.dark .sb-wa-btn.sb-wa-web { background: #065f46; color: #a7f3d0; }

/* View toggle (Columnas / Lista) — no border flash */
.view-toggle-on, .view-toggle-off { border: none; outline: none; }
.view-toggle-on {
  background: #eff6ff; color: #2563eb;
}
.view-toggle-off {
  background: transparent; color: #64748b;
}
.dark .view-toggle-on {
  background: #3b82f6 !important; color: #fff !important;
}
.dark .view-toggle-off {
  color: #94a3b8 !important;
}

/* Main mode toggle */
.dark #mainModeToggle { background: #1d2125; }
.dark #controlsDivider { background: #38414a; }

/* Analytics controls inline — same style as active controls */
#analyticsControls .analytics-filter-select { font-size: 11px; }

/* Filters panel: inline on desktop, slide-in drawer on mobile. */
@media (max-width: 639px) {
  #analyticsFiltersPanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85vw;
    max-width: 320px;
    background: #ffffff;
    padding: 20px 16px;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.15);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 50;
    gap: 12px;
  }
  #analyticsFiltersPanel.is-open { transform: translateX(0); }
  .dark #analyticsFiltersPanel { background: #1a1d21; box-shadow: -4px 0 20px rgba(0,0,0,0.45); }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.9s linear infinite; }

.card-enter { animation: cardIn 0.3s ease-out forwards; }
@keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.pulse-send { animation: pulseSend 1.5s ease-in-out infinite; }
@keyframes pulseSend { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); } }

.queue-progress { transition: width 0.4s ease; }

/* ===== WORKSPACE TOASTS ===== */
.ws-toast-enter {
  animation: wsToastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ws-toast-exit {
  animation: wsToastOut 0.2s ease-in forwards;
}
@keyframes wsToastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wsToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Smooth theme transition */
body, nav, .bg-white, .bg-slate-50, .bg-slate-100, textarea, input {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* WA mode toggle */
.wa-toggle-web { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.wa-toggle-web:hover { background: #d1fae5; }
.wa-toggle-desktop { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wa-toggle-desktop:hover { background: #dbeafe; }
.dark .wa-toggle-web { background: #065f46 !important; color: #a7f3d0 !important; border-color: #34d399 !important; }
.dark .wa-toggle-web:hover { background: #047857 !important; }
.dark .wa-toggle-desktop { background: #1e3a8a !important; color: #bfdbfe !important; border-color: #60a5fa !important; }
.dark .wa-toggle-desktop:hover { background: #1d4ed8 !important; }

.wa-btn:hover .wa-icon { transform: scale(1.15); }

/* WA connected status button */
.wa-status-connected { color: #15803d; background: #dcfce7; border: 1px solid #86efac; }
.wa-status-connected:hover { background: #bbf7d0; }
.dark .wa-status-connected { color: #4ade80 !important; background: rgba(22,163,74,0.2) !important; border-color: rgba(34,197,94,0.3) !important; }
.dark .wa-status-connected:hover { background: rgba(22,163,74,0.3) !important; }

/* WA syncing indicator — subtle pulsing glow on the connected button */
.wa-status-syncing.wa-status-connected {
  animation: waSyncPulse 1.8s ease-in-out infinite;
}
@keyframes waSyncPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* Panel action buttons — override dark !important */
.btn-action-paste, .btn-action-delete {
  color: #8696a7;
  transition: color 0.15s, transform 0.15s;
  position: relative;
  cursor: pointer;
}
.btn-action-paste:hover {
  color: #ec4899 !important;
  transform: scale(1.15);
}
.btn-action-delete:hover {
  color: #f87171 !important;
  transform: scale(1.15);
}
.btn-action-paste::after, .btn-action-delete::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.btn-action-paste:hover::after, .btn-action-delete:hover::after {
  opacity: 1;
}
textarea:focus { outline: none; box-shadow: 0 0 0 2px #ec4899; }

.score-ring {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}

.ai-loading {
  background: linear-gradient(90deg, #f8f8f8 25%, #e0e0e0 50%, #f8f8f8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.timing-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }



/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 639px) {
  /* Force list view on mobile — kanban hidden via JS */
  #kanbanView { display: none !important; }

  /* Brand tab bar — full-width tabs, no container background (inherits from 767px rule) */

  /* Lead cards — consistent width, no overflow */
  .card-enter { padding: 8px 10px !important; overflow: hidden; }

  /* Queue card padding */
  #queueCard { padding: 12px !important; }

  /* Training tab bar scroll */
  #trainTabBar { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #trainTabBar::-webkit-scrollbar { display: none; }

  /* Config editor smaller font on mobile */
  #cfgEditor { font-size: 12px !important; padding: 10px !important; }

  /* Score ring smaller */
  .score-ring { width: 26px !important; height: 26px !important; font-size: 9px !important; }

  /* Safe area for bottom action bar + modals */
  #actionBar { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Modals — fullscreen on mobile */
  #settingsModal,
  #queueModal,
  #trainingModal,
  #addLeadModal,
  #aiHelperModal,
  #chatPreviewModal { align-items: stretch !important; padding: 0 !important; }

  #settingsModal > div,
  #queueModal > div,
  #trainingModal > div,
  #addLeadModal > div,
  #aiHelperModal > div,
  #chatPreviewModal > div {
    border-radius: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
  }
}

/* Kanban Drag & Drop */
.kanban-drop-target {
  border-radius: 8px;
  transition: all 0.15s;
}
.kanban-step-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.kanban-step-zone {
  background: transparent;
  border-style: dashed;
  opacity: 0.5;
  transition: all 0.2s;
  cursor: copy;
}
.kanban-step-zone:hover,
.kanban-step-zone.drag-over {
  opacity: 1;
  border-style: solid;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), 0 0 4px rgba(139, 92, 246, 0.2);
  transform: scale(1.02);
}
.dark .kanban-step-zone {
  background: transparent;
}
.dark .kanban-step-zone:hover,
.dark .kanban-step-zone.drag-over {
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4), 0 0 6px rgba(139, 92, 246, 0.3);
}

/* ============================================================
   WORKSPACE — Optional ConvertAI prompt input
   ============================================================ */
.workspace-prompt-wrap {
  position: relative;
}
.workspace-prompt-icon {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 14px;
  height: 14px;
  color: #ec4899;
  pointer-events: none;
}
.workspace-prompt-input {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  color: #1e293b;
  resize: none;
  field-sizing: content;
  max-height: 96px;
  overflow-y: auto;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.workspace-prompt-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}
.workspace-prompt-input:focus {
  outline: none;
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}
.workspace-prompt-input.has-content {
  border-color: #fbcfe8;
}
.workspace-prompt-input.has-content:focus {
  border-color: #ec4899;
}
.dark .workspace-prompt-input {
  background: #1e2328;
  border-color: #2c333a;
  color: #e2e8f0;
}
.dark .workspace-prompt-input.has-content {
  border-color: rgba(236, 72, 153, 0.4);
}
.dark .workspace-prompt-input::placeholder {
  color: #64748b;
}

/* ============================================================
   QUICK MESSAGES — Soft delete
   ============================================================ */
.qm-card {
  transition: background-color 220ms ease-out, transform 220ms ease-out;
}
.qm-card.qm-pending-delete {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  transform: translateX(16px);
  animation: qmSlidePendingDelete 220ms ease-out forwards;
}
@keyframes qmSlidePendingDelete {
  from { transform: translateX(0); background-color: #ffffff; border-color: #e2e8f0; }
  to   { transform: translateX(16px); background-color: #fef2f2; border-color: #fecaca; }
}
.dark .qm-card.qm-pending-delete {
  background-color: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.3);
  animation-name: qmSlidePendingDeleteDark;
}
@keyframes qmSlidePendingDeleteDark {
  from { transform: translateX(0); background-color: transparent; border-color: #38414a; }
  to   { transform: translateX(16px); background-color: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.3); }
}
.qm-card.qm-restoring {
  animation: qmSlideRestore 220ms ease-out forwards;
}
@keyframes qmSlideRestore {
  from { transform: translateX(16px); background-color: #fef2f2; border-color: #fecaca; }
  to   { transform: translateX(0); background-color: #ffffff; border-color: #e2e8f0; }
}
.dark .qm-card.qm-restoring {
  animation-name: qmSlideRestoreDark;
}
@keyframes qmSlideRestoreDark {
  from { transform: translateX(16px); background-color: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }
  to   { transform: translateX(0); background-color: transparent; border-color: rgb(226, 232, 240); }
}
@media (prefers-reduced-motion: reduce) {
  .qm-card.qm-pending-delete,
  .qm-card.qm-restoring {
    animation-duration: 0.01ms;
  }
}

/* ===== WORKSPACE MOBILE (< 640px) ===== */
@media (max-width: 639px) {
  /* Queue sidebar — fullscreen overlay (app-like) */
  #leftSidebar.ws-queue-open {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0;
    height: 100% !important;
    z-index: 91;
    width: 100% !important;
    max-width: none;
    box-shadow: none;
  }

  /* Lead panel — bottom sheet */
  #leadPanel.ws-panel-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    z-index: 96;
    max-height: 85vh;
    width: 100% !important;
    border-radius: 16px 16px 0 0;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
    padding-bottom: 0 !important;
  }
  .dark #leadPanel.ws-panel-open {
    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
  }

  /* Panel content — flexbox column, tabs at bottom.
     No !important on display — inbox.js toggle() sets inline
     style="display:none" which must win over this rule. */
  #leadPanelContent {
    display: flex;
    flex-direction: column;
  }
  #leadPanelContent .ws-panel-tabs {
    order: 99;
    margin-top: 0 !important;
    margin-bottom: 0;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  }
  #leadPanelContent .ws-panel-content {
    order: 1;
    flex: 1;
    overflow-y: auto;
  }

}



/* ============================================================
   PHONE INPUT — country selector + number
   ============================================================ */
.phone-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: visible;
  margin-top: 0.125rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: white;
}
.phone-input-wrapper:focus-within {
  border-color: var(--brand-400, #f472b6);
  box-shadow: 0 0 0 2px var(--brand-100, #fce7f3);
}
.phone-country-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.5rem 0.625rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.875rem;
  border-right: 1px solid #e2e8f0;
}
.phone-country-btn:hover { background: rgba(0,0,0,0.03); }
.phone-dial {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}
.phone-number-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  background: transparent;
  min-width: 0;
}
.phone-number-input::placeholder { color: #cbd5e1; }
.phone-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  max-height: 300px;
  overflow: hidden;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
}
.phone-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.8125rem;
  outline: none;
  flex-shrink: 0;
}
.phone-search-input:focus {
  border-bottom-color: #ec4899;
}
.phone-search-input::placeholder {
  color: #94a3b8;
}
.phone-options-list {
  overflow-y: auto;
  max-height: 250px;
  flex: 1;
}
.phone-country-empty {
  padding: 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.8125rem;
}
.phone-country-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  text-align: left;
}
.phone-country-option:hover { background: #f1f5f9; }
.phone-country-name { flex: 1; color: #334155; }
.phone-country-dial { color: #94a3b8; font-size: 0.75rem; font-weight: 600; }
/* Dark theme overrides for phone input */
.dark .phone-input-wrapper { background: #1e293b; border-color: #334155; }
.dark .phone-input-wrapper:focus-within { border-color: #ec4899; box-shadow: 0 0 0 2px rgba(236,72,153,0.15); }
.dark .phone-country-btn { background: transparent; border-right-color: #334155; }
.dark .phone-country-btn:hover { background: rgba(255,255,255,0.05); }
.dark .phone-input-wrapper .phone-number-input,
.dark .phone-input-wrapper input[type="tel"].phone-number-input { color: #e2e8f0; background: transparent !important; border-color: transparent !important; }
.dark .phone-number-input::placeholder { color: #64748b; }
.dark .phone-dropdown { background: #1e293b; border-color: #334155; }
.dark .phone-search-input { background: #1e293b; color: #e2e8f0; border-bottom-color: #334155; }
.dark .phone-search-input:focus { border-bottom-color: #ec4899; }
.dark .phone-search-input::placeholder { color: #64748b; }
.dark .phone-country-option:hover { background: #334155; }
.dark .phone-country-name { color: #e2e8f0; }
.dark .phone-country-dial { color: #64748b; }
.dark .phone-country-empty { color: #64748b; }

/* ============================================================
   Dynamic modals — dark theme overrides
   (arEditorModal, arDeleteModal, lfEditorModal, lfDeleteModal, etc.)
   ============================================================ */
.dark #arEditorModal > div,
.dark #arDeleteModal > div,
.dark #lfEditorModal > div,
.dark #lfDeleteModal > div { background: #1e293b; }

.dark #arEditorModal h3,
.dark #arDeleteModal h3,
.dark #lfEditorModal h3,
.dark #lfDeleteModal h3 { color: #f1f5f9; }

.dark #arDeleteModal p,
.dark #lfDeleteModal p { color: #94a3b8; }

/* Icon circle */
.dark #arDeleteModal .bg-pink-50,
.dark #lfDeleteModal .bg-pink-50 { background: rgba(236,72,153,0.15); }

/* Warning / info banner — pink for archive reasons */
.dark #arDeleteModal .bg-pink-50 { background: rgba(236,72,153,0.1); }
.dark #arDeleteModal .border-pink-100 { border-color: rgba(236,72,153,0.25); }
.dark #arDeleteModal .text-pink-600 { color: #f472b6; }
/* Warning / info banner — amber for editor warnings & lead fields */
.dark #arEditorModal .bg-amber-50 { background: rgba(245,158,11,0.1); }
.dark #arEditorModal .border-amber-200 { border-color: rgba(245,158,11,0.25); }
.dark #arEditorModal .text-amber-700 { color: #fbbf24; }
.dark #lfDeleteModal .bg-pink-50 { background: rgba(236,72,153,0.1); }
.dark #lfDeleteModal .border-pink-100 { border-color: rgba(236,72,153,0.25); }
.dark #lfDeleteModal .text-pink-600 { color: #f472b6; }

/* Buttons */
.dark #arEditorModal button.hover\:bg-slate-100,
.dark #arDeleteModal button.hover\:bg-slate-100,
.dark #lfEditorModal button.hover\:bg-slate-100,
.dark #lfDeleteModal button.hover\:bg-slate-100 { color: #94a3b8; }
.dark #arEditorModal button.hover\:bg-slate-100:hover,
.dark #arDeleteModal button.hover\:bg-slate-100:hover,
.dark #lfEditorModal button.hover\:bg-slate-100:hover,
.dark #lfDeleteModal button.hover\:bg-slate-100:hover { background: #334155; }

/* Labels */
.dark #lfEditorModal label,
.dark #arEditorModal label { color: #94a3b8; }
.dark #lfEditorModal .text-slate-400,
.dark #arEditorModal .text-slate-400 { color: #64748b; }

/* ============================================================
 * Inbox surface (dark mode)
 * The colors above already cover bg-white / slate-* via class
 * overrides. These are the bits that ride on raw hex literals
 * or new components introduced by the Inbox flow.
 * ============================================================ */
.dark #inboxList { background: #1d2125; }
.dark #inboxList button[data-jid].bg-brand-50 { background: rgba(236, 72, 153, 0.18) !important; }
.dark #inboxList button[data-jid].border-brand-200 { border-color: rgba(236, 72, 153, 0.45) !important; }
.dark #chatBubbles .bg-brand-50 { background: rgba(236, 72, 153, 0.20) !important; }
.dark #chatBubbles .border-brand-100 { border-color: rgba(236, 72, 153, 0.30) !important; }
.dark #chatBubbles .bg-white { background: #2c333a !important; }
.dark #chatBubbles .border-slate-200 { border-color: #38414a !important; }
.dark #chatBubbles p { color: #dee4ea; }

/* Bot de auto-contestar en la lista de chats.
   Sin fondo: convive con los chips (Lead / Cliente / Hot) sin pelearles el
   espacio en filas donde el nombre ya viene truncado. Un pelo más grande que
   un chip porque la silueta necesita antena + ojos para leerse como bot. */
.inbox-auto-bot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #ec4899;
}
.inbox-auto-bot svg {
  width: 15px;
  height: 15px;
}
@media (min-width: 640px) {
  .inbox-auto-bot svg {
    width: 13px;
    height: 13px;
  }
}
.dark .inbox-auto-bot { color: #f9a8d4 !important; }

/* Inbox lead chip */
.inbox-lead-chip {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  background: #fce7f3;
  color: #be185d;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .inbox-lead-chip {
    font-size: 9px;
    padding: 2px 5px;
  }
}
.dark .inbox-lead-chip {
  background: rgba(236,72,153,0.18) !important;
  color: #f9a8d4 !important;
}
/* Client chip — green */
.inbox-lead-chip--client {
  background: #dcfce7;
  color: #15803d;
}
.dark .inbox-lead-chip--client {
  background: rgba(34,197,94,0.18) !important;
  color: #86efac !important;
}
/* Archived chip — slate */
.inbox-lead-chip--archived {
  background: #f1f5f9;
  color: #64748b;
}
.dark .inbox-lead-chip--archived {
  background: rgba(100,116,139,0.18) !important;
  color: #94a3b8 !important;
}
/* Hot chip — warm amber to stand out */
.inbox-lead-chip--hot {
  background: #fef3c7;
  color: #b45309;
}
.dark .inbox-lead-chip--hot {
  background: rgba(245,158,11,0.18) !important;
  color: #fcd34d !important;
}
/* Paused chip — purple to match dashboard */
.inbox-lead-chip--paused {
  background: #ede9fe;
  color: #6d28d9;
}
.dark .inbox-lead-chip--paused {
  background: rgba(139,92,246,0.18) !important;
  color: #c4b5fd !important;
}

/* Inbox inline phone input — compact to fit sidebar header */
#inboxNewChatWrap .phone-input-wrapper {
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
}
#inboxNewChatWrap .phone-country-btn {
  padding: 4px 4px 4px 8px;
  gap: 2px;
}
#inboxNewChatWrap .phone-dial {
  font-size: 10px;
}
#inboxNewChatWrap .phone-number-input {
  padding: 4px 8px;
  font-size: 12px;
}
#inboxNewChatWrap .phone-dropdown {
  z-index: 60;
}

/* Day separator pill */
.inbox-day-pill { background: rgba(255,255,255,0.8); border-color: #e2e8f0; color: #64748b; }
.dark .inbox-day-pill { background: #2c333a !important; border-color: #38414a !important; color: #8696a7 !important; }

.dark #unifiedBottomBar { background: #22272b !important; border-color: #38414a !important; }
.dark #unifiedBottomBar textarea { background: transparent !important; color: #dee4ea !important; }
.dark #unifiedBottomBar .composer-wrap { background: #2c333a !important; }
#unifiedBottomBar textarea:focus { box-shadow: none !important; outline: none !important; }
.dark #inboxRecordingBar { background: rgba(236, 72, 153, 0.10) !important; }
.dark #inboxAttachMenu, .dark #inboxEmojiMenu { background: #2c333a; border-color: #38414a; }
.dark #inboxEmojiMenu button:hover { background: #38414a; }
.dark #inboxSendError { background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; }
.dark #inboxLeadForm { color: #dee4ea; }

/* Composer: drag-over highlight */
.composer-wrap.composer-dragover {
  outline: 2px dashed #8b5cf6;
  outline-offset: -2px;
  background: rgba(139, 92, 246, 0.06) !important;
}
.dark .composer-wrap.composer-dragover {
  background: rgba(139, 92, 246, 0.12) !important;
}

/* ============================================================
   COMPOSER SPLIT — Dividir / Juntar message blocks
   ============================================================ */
#composerSplitBlocks {
  border-top: 1px solid #e2e8f0;
}
.dark #composerSplitBlocks {
  border-top-color: #38414a;
}
.split-block {
  display: flex;
  align-items: stretch;
  border-bottom: 1px dashed #e2e8f0;
  position: relative;
}
.split-block:last-child {
  border-bottom: none;
}
.dark .split-block {
  border-bottom-color: #38414a;
}
.split-block-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(0,0,0,0.02);
  border-right: 1px solid #e2e8f0;
  user-select: none;
}
.dark .split-block-number {
  color: #64748b;
  background: rgba(255,255,255,0.02);
  border-right-color: #38414a;
}
.split-block textarea {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  resize: none;
  field-sizing: content;
  min-height: 32px;
  max-height: 120px;
  overflow-y: auto;
  color: #1e293b;
}
.split-block textarea:focus {
  outline: none;
  box-shadow: none;
}
.dark .split-block textarea {
  color: #dee4ea;
}
.split-block-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  cursor: pointer;
  color: #22c55e;
  background: transparent;
  border: none;
  border-left: 1px solid #e2e8f0;
  transition: background 0.15s, color 0.15s;
}
.split-block-send:hover {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}
.split-block-send:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}
.dark .split-block-send {
  border-left-color: #38414a;
  color: #4ade80;
}
.dark .split-block-send:hover {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.dark .split-block-send:disabled {
  color: #475569;
}
.split-block-sent {
  opacity: 0.4;
  pointer-events: none;
}
.split-block-sent textarea {
  text-decoration: line-through;
  color: #94a3b8;
}
.dark .split-block-sent textarea {
  color: #64748b;
}
/* Split button (next to Restaurar) */
.dark #btnSplitMsg {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
.dark #btnSplitMsg:hover {
  color: #93c5fd !important;
}

/* ============================================================
   ACCOUNT — Plan tab grid, upgrade card, locked field, outline btn
   ============================================================ */
.acc-plan-grid {
  display: grid;
  grid-template-columns: 1fr 80px 80px 80px;
  gap: 1px;
}
@media (min-width: 640px) {
  .acc-plan-grid { grid-template-columns: 1fr 110px 110px 110px; }
}
.acc-plan-cat-header {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: background 0.15s;
}
.acc-plan-cat-header:hover { background: #e2e8f0; }
.acc-plan-cat-active {
  background: #fdf2f8 !important;
  border-color: #fbcfe8 !important;
}
.acc-plan-cat-active:hover { background: #fce7f3 !important; }
.acc-plan-cat-active span.text-slate-700 { color: #be185d !important; }
.dark .acc-plan-cat-header { background: #1d2125; border-color: #2c333a; }
.dark .acc-plan-cat-header:hover { background: #22272b; }
.dark .acc-plan-cat-active {
  background: rgba(236, 72, 153, 0.08) !important;
  border-color: rgba(236, 72, 153, 0.25) !important;
}
.dark .acc-plan-cat-active:hover { background: rgba(236, 72, 153, 0.12) !important; }
.dark .acc-plan-cat-active span.text-slate-700 { color: #f9a8d4 !important; }
.acc-plan-row {
  border-bottom: 1px solid #f1f5f9;
}
.acc-plan-row:hover { background: rgba(236, 72, 153, 0.03); }
.dark .acc-plan-row { border-bottom-color: #2c333a; }
.dark .acc-plan-row:hover { background: rgba(236, 72, 153, 0.06); }
.acc-plan-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  font-size: 11px;
  text-align: center;
}
/* Plan pricing cards */
.acc-plan-card-default {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.acc-plan-card-recommended {
  background: #ffffff;
  border: 2px solid #ec4899;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.12);
}
.dark .acc-plan-card-default {
  background: #1d2125;
  border-color: #2c333a;
}
.dark .acc-plan-card-recommended {
  background: #1d2125;
  border-color: #ec4899;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
}
.acc-field-locked {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  user-select: none;
}
.dark .acc-field-locked {
  background: #1a1d21 !important;
  color: #64748b !important;
  border-color: #2c333a !important;
}
.acc-btn-outline {
  background: transparent;
  color: #db2777;
  border: 1.5px solid #ec4899;
}
.acc-btn-outline:hover {
  background: #fce7f3;
  color: #be185d;
  border-color: #ec4899;
}
.dark .acc-btn-outline {
  color: #9fadbc;
  border-color: #4a5568;
  background: transparent;
}
.dark .acc-btn-outline:hover {
  background: rgba(236, 72, 153, 0.12);
  color: #f9a8d4;
  border-color: #ec4899;
}
/* Solid dark button — mirrors landing page non-recommended plan buttons */
.acc-btn-dark {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.acc-btn-dark:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.dark .acc-btn-dark {
  background: #2c333a;
  color: #e2e8f0;
  border: 1px solid #38414a;
}
.dark .acc-btn-dark:hover {
  background: #38414a;
  color: #f1f5f9;
}
/* Upgrade story block */
.acc-upgrade-story {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.dark .acc-upgrade-story {
  background: #1d2125;
  border-color: #2c333a;
}
.acc-upgrade-divider {
  width: 1px;
  align-self: stretch;
  background: #e2e8f0;
  margin: 0 2px;
}
.dark .acc-upgrade-divider {
  background: #2c333a;
}
/* Ring gauge in tokens */
.acc-ring-gauge {
  width: 80px;
  height: 80px;
}
.acc-ring-track {
  stroke: #e2e8f0;
}
.dark .acc-ring-track {
  stroke: #38414a;
}
/* Credit pack cards */
.acc-credit-pack {
  background: #ffffff;
}
.acc-credit-pack p:first-child { color: #334155; }
.acc-credit-pack p:last-child { color: #94a3b8; }
.dark .acc-credit-pack {
  background: #2c333a;
  border-color: #38414a;
}
.dark .acc-credit-pack p:first-child { color: #e2e8f0; }
.dark .acc-credit-pack p:last-child { color: #64748b; }
.acc-credit-pack-selected {
  background: #fdf2f8;
}
.acc-credit-pack-selected p:first-child { color: #ec4899; }
.acc-credit-pack-selected p:last-child { color: #94a3b8; }
.dark .acc-credit-pack-selected {
  background: #3b1f32;
}
.dark .acc-credit-pack-selected p:first-child { color: #f472b6; }
.dark .acc-credit-pack-selected p:last-child { color: #64748b; }
/* Card and stat box for credits tab */
.acc-card-bg { background: #f8fafc; }
.dark .acc-card-bg { background: #1e2229; }
.acc-stat-box { background: #ffffff; border: 1px solid #f1f5f9; }
.dark .acc-stat-box { background: #2c333a; border-color: #38414a; }
/* AI tab — team avatars with instant tooltip */
.acc-ai-avatar {
  position: relative;
  cursor: default;
}
.dark .acc-ai-avatar {
  background: #38414a !important;
  color: #e2e8f0 !important;
}
.acc-ai-avatar::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 20;
}
.acc-ai-avatar:hover::after {
  opacity: 1;
}
.dark .acc-ai-avatar::after {
  background: #ec4899;
  color: #ffffff;
}

/* Lead tags — pill colors */
.tag-emerald { background: #d1fae5; color: #065f46; }
.tag-amber   { background: #fef3c7; color: #92400e; }
.tag-red     { background: #fee2e2; color: #991b1b; }
.tag-blue    { background: #dbeafe; color: #1e40af; }
.tag-purple  { background: #ede9fe; color: #5b21b6; }
.tag-pink    { background: #fce7f3; color: #9d174d; }
.tag-slate   { background: #e2e8f0; color: #334155; }
.tag-orange  { background: #ffedd5; color: #9a3412; }

.dark .tag-emerald { background: #064e3b !important; color: #6ee7b7 !important; }
.dark .tag-amber   { background: #78350f !important; color: #fcd34d !important; }
.dark .tag-red     { background: #7f1d1d !important; color: #fca5a5 !important; }
.dark .tag-blue    { background: #1e3a5f !important; color: #93c5fd !important; }
.dark .tag-purple  { background: #3b0764 !important; color: #c4b5fd !important; }
.dark .tag-pink    { background: #831843 !important; color: #f9a8d4 !important; }
.dark .tag-slate   { background: #2a2e33 !important; color: #9ca3af !important; }
.dark .tag-orange  { background: #7c2d12 !important; color: #fdba74 !important; }


/* Pill row — horizontal scroll, hidden scrollbar */
.pill-scroll { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pill-scroll::-webkit-scrollbar { display: none; }

/* ============================================================
   PRODUCT TOUR — guided walkthrough overlay
   ============================================================ */
.product-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.product-tour-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.product-tour-backdrop {
  fill: rgba(15, 23, 42, 0.75);
  transition: d 0.3s ease;
}
.product-tour-highlight-border {
  stroke: rgba(236, 72, 153, 0.6);
  filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.3));
}
.product-tour-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(236, 72, 153, 0.08);
  pointer-events: auto;
  animation: tourTooltipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 301;
}
@keyframes tourTooltipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.product-tour-step-indicator {
  font-size: 11px;
  font-weight: 700;
  color: #ec4899;
  background: #fdf2f8;
  padding: 2px 10px;
  border-radius: 20px;
}
.product-tour-skip-btn {
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.15s;
}
.product-tour-skip-btn:hover { color: #64748b; }
.product-tour-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.product-tour-body {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}
.product-tour-body b { color: #334155; font-weight: 700; }
.product-tour-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  background: #ec4899;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.product-tour-btn-primary:hover { background: #db2777; }
.product-tour-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.product-tour-btn-secondary:hover { background: #e2e8f0; }

/* ── Dark mode ── */
.dark .product-tour-backdrop { fill: rgba(0, 0, 0, 0.82); }
.dark .product-tour-tooltip {
  background: #1e2229;
  border-color: #38414a;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(236, 72, 153, 0.12);
}
.dark .product-tour-step-indicator {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}
.dark .product-tour-skip-btn { color: #64748b; }
.dark .product-tour-skip-btn:hover { color: #94a3b8; }
.dark .product-tour-title { color: #f1f5f9; }
.dark .product-tour-body { color: #94a3b8; }
.dark .product-tour-body b { color: #cbd5e1; }
.dark .product-tour-btn-secondary {
  background: #2c333a;
  color: #94a3b8;
}
.dark .product-tour-btn-secondary:hover { background: #38414a; }

/* Product tour — fullscreen welcome/finale cards */
.product-tour-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 301;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  padding: 24px;
  animation: tourTooltipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.product-tour-fullscreen-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.1);
}
.product-tour-logo {
  height: 64px;
  width: auto;
  margin: 0 auto 24px auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(2000%) hue-rotate(310deg) brightness(100%) contrast(100%);
}
.product-tour-fs-title {
  font-size: 22px;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.product-tour-fs-body {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}
.product-tour-fs-sub {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 4px 0 0 0;
}
.product-tour-fs-sub b { color: #64748b; font-weight: 700; }

/* Dark mode */
.dark .product-tour-fullscreen { background: rgba(0, 0, 0, 0.88); }
.dark .product-tour-fullscreen-card {
  background: #1e2229;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(236, 72, 153, 0.15);
}

.dark .product-tour-fs-title { color: #f1f5f9; }
.dark .product-tour-fs-body { color: #94a3b8; }
.dark .product-tour-fs-sub { color: #64748b; }
.dark .product-tour-fs-sub b { color: #94a3b8; }

/* ============================================================
 * Automatizaciones (Intelligence Core tab + control por chat)
 *
 * bg-white, slate-*, bg-green-100 y text-green-700 ya los cubren
 * los overrides globales de arriba. Aqui solo van los tintes
 * brand y el verde de estado, que no los tenian. Con scope a
 * estos dos contenedores para no alterar el resto de la app.
 * ============================================================ */
.dark #automationsBody .bg-brand-50,
.dark .auto-reply-control .bg-brand-50 {
  background: rgba(236, 72, 153, 0.16) !important;
}
.dark #automationsBody .border-brand-400,
.dark .auto-reply-control .border-brand-400 {
  border-color: rgba(236, 72, 153, 0.55) !important;
}
.dark #automationsBody .text-brand-700,
.dark .auto-reply-control .text-brand-700 {
  color: #f9a8d4 !important;
}
.dark #automationsBody .text-brand-600 { color: #f472b6 !important; }
.dark #automationsBody .text-brand-600:hover { color: #f9a8d4 !important; }

/* Estado "si contesta": el green-600 de Tailwind queda ilegible sobre #22272b */
.dark #automationsBody .text-green-600,
.dark .auto-reply-control .text-green-600 { color: #4ade80 !important; }

/* Bloque de actividad — mas oscuro que la card para que se distinga */
.dark #automationsBody .bg-slate-50 { background: #1d2125 !important; }

/* ============================================================
 * Seguimiento automático — el contador del control (followup-runner.js)
 *
 * En claro se ve bien tal cual. En oscuro no: el brand-500 (#ec4899) sobre un
 * fondo del mismo tinte al 10% y encima el #22272b de la barra se hunde — el
 * numero queda a un paso de ser invisible justo cuando cuenta los segundos que
 * faltan para que salga un mensaje. Se sube el tinte y se aclara el texto al
 * rosa 300, el mismo que ya usa el tab de Automatizaciones para su texto brand.
 * ============================================================ */
.dark .followup-count {
  background: rgba(236, 72, 153, 0.22) !important;
  color: #f9a8d4 !important;
}