/* ══════════════════════════════════════════════════════════════════
   chats-escalados.css — vista "Chats escalados" estilo WhatsApp (app Mac).
   CSS EXTERNO a propósito: el CSP del LMS es `style-src 'self' <hashes>`,
   así que una hoja propia same-origin se permite sin tocar los <style> con
   hash. El wallpaper de "doodles" es un SVG data-URI (img-src permite data:).
   ══════════════════════════════════════════════════════════════════ */

/* ── Paleta WhatsApp (cambia con el tema del LMS) ─────────────────── */
#view-chats-escalados{
  --ce-app-bg:#161717;        /* fondo del hilo (wallpaper) — color exacto de la imagen ref */
  --ce-panel:#161717;         /* fondo de la lista */
  --ce-head:#161717;          /* barras de cabecera/redactor */
  --ce-inset:#262828;         /* buscador / avatar / fila seleccionada (lift sutil) */
  --ce-hover:#1f2121;
  --ce-row-active:#262828;
  --ce-chip:#2E2F2F;          /* fondo de avatares (círculo) y tabs (Activos/Cerrados/Todos) */
  --ce-in-bg:#232626;         /* burbuja entrante (cliente/usuario) */
  --ce-input-bg:#232626;      /* fondo del input de mensajes (redactor) */
  --ce-out-bg:#154D37;        /* burbuja saliente (agente/IA) */
  --ce-txt:#ffffff;
  --ce-sub:#8696a0;
  --ce-time:rgba(233,237,239,.5);
  --ce-border:rgba(255,255,255,.07);
  --ce-accent:#00a884;        /* verde WhatsApp (dark) */
  --ce-accent-soft:rgba(0,168,132,.18);
  --ce-navbar:#161717;            /* navbar del hilo — color exacto de la imagen ref */
  --ce-navbar-txt:#e9edef;
  --ce-navbar-sub:#8696a0;
  --ce-navbar-av:#262828;
  --ce-date-bg:rgba(38,40,40,.94);
  --ce-date-txt:#cdd6db;
  --ce-sys-bg:rgba(28,46,56,.9);
  --ce-sys-txt:#cdd6db;
  --ce-splash-mark:#8696a0;
  --ce-splash-title:#d1d7db;
  --ce-shadow:0 1px .5px rgba(11,20,26,.30);
  --ce-wall:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20300%20300'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.05'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='30'%20cy='35'%20r='4.5'/%3E%3Cellipse%20cx='30'%20cy='23'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='30'%20cy='47'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='18'%20cy='35'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='42'%20cy='35'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='36.4'%20cy='28.6'%20rx='2.5'%20ry='5.5'%20transform='rotate(45,36.4,28.6)'/%3E%3Cellipse%20cx='36.4'%20cy='41.4'%20rx='2.5'%20ry='5.5'%20transform='rotate(-45,36.4,41.4)'/%3E%3Cellipse%20cx='23.6'%20cy='41.4'%20rx='2.5'%20ry='5.5'%20transform='rotate(45,23.6,41.4)'/%3E%3Cellipse%20cx='23.6'%20cy='28.6'%20rx='2.5'%20ry='5.5'%20transform='rotate(-45,23.6,28.6)'/%3E%3Cpath%20d='M90%2049C77%2039%2070%2025%2078%2020c4-2%208%201%2012%208%204-7%208-10%2012-8%208%205%202%2019-12%2029'/%3E%3Cpath%20d='M135%2018q-2%200-2%202v20q0%202%202%202h8l4%206%204-6h21q2%200%202-2V20q0-2-2-2z'/%3E%3Cline%20x1='141'%20y1='26'%20x2='169'%20y2='26'/%3E%3Cline%20x1='141'%20y1='32'%20x2='163'%20y2='32'/%3E%3Cline%20x1='141'%20y1='38'%20x2='166'%20y2='38'/%3E%3Cpath%20d='M212%2018l3%2010%2010%204-10%204-3%2010-3-10-10-4%2010-4z'/%3E%3Ccircle%20cx='268'%20cy='35'%20r='14'/%3E%3Cline%20x1='268'%20y1='27'%20x2='268'%20y2='35'/%3E%3Cline%20x1='268'%20y1='35'%20x2='276'%20y2='39'/%3E%3Cline%20x1='261'%20y1='23'%20x2='257'%20y2='18'/%3E%3Cline%20x1='275'%20y1='23'%20x2='279'%20y2='18'/%3E%3Crect%20x='19'%20y='79'%20width='22'%20height='36'%20rx='3'/%3E%3Cline%20x1='27'%20y1='110'%20x2='33'%20y2='110'/%3E%3Cline%20x1='21'%20y1='84'%20x2='39'%20y2='84'/%3E%3Cline%20x1='80'%20y1='114'%20x2='80'%20y2='80'/%3E%3Cline%20x1='80'%20y1='80'%20x2='100'%20y2='74'/%3E%3Cline%20x1='100'%20y1='74'%20x2='100'%20y2='108'/%3E%3Cline%20x1='80'%20y1='83'%20x2='100'%20y2='77'/%3E%3Cellipse%20cx='78'%20cy='115'%20rx='5.5'%20ry='4'%20transform='rotate(-15,78,115)'/%3E%3Cellipse%20cx='98'%20cy='109'%20rx='5.5'%20ry='4'%20transform='rotate(-15,98,109)'/%3E%3Crect%20x='143'%20y='76'%20width='14'%20height='22'%20rx='7'/%3E%3Cpath%20d='M136%2095q0%2014%2014%2014%2014%200%2014-14'/%3E%3Cline%20x1='150'%20y1='109'%20x2='150'%20y2='117'/%3E%3Cline%20x1='144'%20y1='117'%20x2='156'%20y2='117'/%3E%3Crect%20x='195'%20y='82'%20width='30'%20height='24'%20rx='2'/%3E%3Ccircle%20cx='210'%20cy='94'%20r='7'/%3E%3Cpath%20d='M199%2082l3-6h6'/%3E%3Crect%20x='197'%20y='84'%20width='5'%20height='4'%20rx='1'/%3E%3Cpath%20d='M278%2078l-13%2022h9l-7%2017%2014-24h-10z'/%3E%3Ccircle%20cx='30'%20cy='155'%20r='15'/%3E%3Ccircle%20cx='25'%20cy='150'%20r='2'/%3E%3Ccircle%20cx='35'%20cy='150'%20r='2'/%3E%3Cpath%20d='M23%20159q7%208%2014%200'/%3E%3Cpath%20d='M80%20138h20v16q0%2010-10%2013-10-3-10-13z'/%3E%3Cline%20x1='85'%20y1='167'%20x2='85'%20y2='174'/%3E%3Cline%20x1='95'%20y1='167'%20x2='95'%20y2='174'/%3E%3Cline%20x1='80'%20y1='174'%20x2='100'%20y2='174'/%3E%3Cpath%20d='M80%20141q-7%200-7%205%200%206%207%207'/%3E%3Cpath%20d='M100%20141q7%200%207%205%200%206-7%207'/%3E%3Crect%20x='133'%20y='140'%20width='34'%20height='26'%20rx='2'/%3E%3Cellipse%20cx='133'%20cy='153'%20rx='2'%20ry='13'/%3E%3Cellipse%20cx='167'%20cy='153'%20rx='2'%20ry='13'/%3E%3Cline%20x1='140'%20y1='148'%20x2='160'%20y2='148'/%3E%3Cline%20x1='140'%20y1='155'%20x2='160'%20y2='155'/%3E%3Cline%20x1='140'%20y1='162'%20x2='153'%20y2='162'/%3E%3Ccircle%20cx='210'%20cy='155'%20r='4.5'/%3E%3Cellipse%20cx='210'%20cy='144'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='210'%20cy='166'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='199'%20cy='155'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='221'%20cy='155'%20rx='5.5'%20ry='2.5'/%3E%3Cpath%20d='M256%20148q-5%200-7%205l-7%2014q-2%204%201%206%203%202%206%200l4-4h14l4%204q3%202%206%200%203-2%201-6l-7-14q-2-5-7-5z'/%3E%3Cline%20x1='256'%20y1='157'%20x2='262'%20y2='157'/%3E%3Cline%20x1='259'%20y1='154'%20x2='259'%20y2='160'/%3E%3Ccircle%20cx='273'%20cy='155'%20r='2'/%3E%3Ccircle%20cx='277'%20cy='159'%20r='2'/%3E%3Cpath%20d='M14%20206q-2%200-2%202v18q0%202%202%202h6l-5%208%208-2h22q2%200%202-2v-18q0-2-2-2z'/%3E%3Cline%20x1='19'%20y1='214'%20x2='40'%20y2='214'/%3E%3Cline%20x1='19'%20y1='220'%20x2='33'%20y2='220'/%3E%3Cpath%20d='M75%20208q15-4%2015%204v22q-15-4-15-4z'/%3E%3Cpath%20d='M105%20208q-15-4-15%204v22q15-4%2015-4z'/%3E%3Cline%20x1='90'%20y1='212'%20x2='90'%20y2='230'/%3E%3Cpath%20d='M150%20206l2.5%209%209%202.5-9%202.5-2.5%209-2.5-9-9-2.5%209-2.5z'/%3E%3Cpath%20d='M210%20230c-8-7-14-16-9-20%202-2%205-1%209%204%204-5%207-6%209-4%205%204-1%2013-9%2020'/%3E%3Crect%20x='258'%20y='204'%20width='22'%20height='36'%20rx='3'/%3E%3Cline%20x1='265'%20y1='235'%20x2='273'%20y2='235'/%3E%3Cline%20x1='260'%20y1='209'%20x2='278'%20y2='209'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="light"] #view-chats-escalados{
  --ce-app-bg:#EAE0D5;
  --ce-panel:#ffffff;
  --ce-head:#f0f2f5;
  --ce-inset:#f0f2f5;
  --ce-hover:#f5f6f6;
  --ce-row-active:#F6F5F5;
  --ce-chip:#F6F5F5;          /* fondo de avatares (círculo) y tabs (Activos/Cerrados/Todos) */
  --ce-in-bg:#ffffff;
  --ce-input-bg:#ffffff;
  --ce-out-bg:#d9fdd3;
  --ce-txt:#111b21;
  --ce-sub:#667781;
  --ce-time:rgba(17,27,33,.45);
  --ce-border:rgba(0,0,0,.08);
  --ce-accent:#008069;
  --ce-accent-soft:rgba(0,128,105,.12);
  --ce-navbar:#ffffff;            /* navbar BLANCO (pedido del operador) */
  --ce-navbar-txt:#111b21;
  --ce-navbar-sub:#667781;
  --ce-navbar-av:#f0f2f5;
  --ce-date-bg:rgba(255,255,255,.92);
  --ce-date-txt:#54656f;
  --ce-sys-bg:#ffffff;
  --ce-sys-txt:#54656f;
  --ce-splash-mark:#7c8b92;
  --ce-splash-title:#41525d;
  --ce-shadow:0 1px .5px rgba(11,20,26,.13);
  --ce-wall:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20300%20300'%3E%3Cg%20fill='none'%20stroke='%230b141a'%20stroke-opacity='0.06'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='30'%20cy='35'%20r='4.5'/%3E%3Cellipse%20cx='30'%20cy='23'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='30'%20cy='47'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='18'%20cy='35'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='42'%20cy='35'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='36.4'%20cy='28.6'%20rx='2.5'%20ry='5.5'%20transform='rotate(45,36.4,28.6)'/%3E%3Cellipse%20cx='36.4'%20cy='41.4'%20rx='2.5'%20ry='5.5'%20transform='rotate(-45,36.4,41.4)'/%3E%3Cellipse%20cx='23.6'%20cy='41.4'%20rx='2.5'%20ry='5.5'%20transform='rotate(45,23.6,41.4)'/%3E%3Cellipse%20cx='23.6'%20cy='28.6'%20rx='2.5'%20ry='5.5'%20transform='rotate(-45,23.6,28.6)'/%3E%3Cpath%20d='M90%2049C77%2039%2070%2025%2078%2020c4-2%208%201%2012%208%204-7%208-10%2012-8%208%205%202%2019-12%2029'/%3E%3Cpath%20d='M135%2018q-2%200-2%202v20q0%202%202%202h8l4%206%204-6h21q2%200%202-2V20q0-2-2-2z'/%3E%3Cline%20x1='141'%20y1='26'%20x2='169'%20y2='26'/%3E%3Cline%20x1='141'%20y1='32'%20x2='163'%20y2='32'/%3E%3Cline%20x1='141'%20y1='38'%20x2='166'%20y2='38'/%3E%3Cpath%20d='M212%2018l3%2010%2010%204-10%204-3%2010-3-10-10-4%2010-4z'/%3E%3Ccircle%20cx='268'%20cy='35'%20r='14'/%3E%3Cline%20x1='268'%20y1='27'%20x2='268'%20y2='35'/%3E%3Cline%20x1='268'%20y1='35'%20x2='276'%20y2='39'/%3E%3Cline%20x1='261'%20y1='23'%20x2='257'%20y2='18'/%3E%3Cline%20x1='275'%20y1='23'%20x2='279'%20y2='18'/%3E%3Crect%20x='19'%20y='79'%20width='22'%20height='36'%20rx='3'/%3E%3Cline%20x1='27'%20y1='110'%20x2='33'%20y2='110'/%3E%3Cline%20x1='21'%20y1='84'%20x2='39'%20y2='84'/%3E%3Cline%20x1='80'%20y1='114'%20x2='80'%20y2='80'/%3E%3Cline%20x1='80'%20y1='80'%20x2='100'%20y2='74'/%3E%3Cline%20x1='100'%20y1='74'%20x2='100'%20y2='108'/%3E%3Cline%20x1='80'%20y1='83'%20x2='100'%20y2='77'/%3E%3Cellipse%20cx='78'%20cy='115'%20rx='5.5'%20ry='4'%20transform='rotate(-15,78,115)'/%3E%3Cellipse%20cx='98'%20cy='109'%20rx='5.5'%20ry='4'%20transform='rotate(-15,98,109)'/%3E%3Crect%20x='143'%20y='76'%20width='14'%20height='22'%20rx='7'/%3E%3Cpath%20d='M136%2095q0%2014%2014%2014%2014%200%2014-14'/%3E%3Cline%20x1='150'%20y1='109'%20x2='150'%20y2='117'/%3E%3Cline%20x1='144'%20y1='117'%20x2='156'%20y2='117'/%3E%3Crect%20x='195'%20y='82'%20width='30'%20height='24'%20rx='2'/%3E%3Ccircle%20cx='210'%20cy='94'%20r='7'/%3E%3Cpath%20d='M199%2082l3-6h6'/%3E%3Crect%20x='197'%20y='84'%20width='5'%20height='4'%20rx='1'/%3E%3Cpath%20d='M278%2078l-13%2022h9l-7%2017%2014-24h-10z'/%3E%3Ccircle%20cx='30'%20cy='155'%20r='15'/%3E%3Ccircle%20cx='25'%20cy='150'%20r='2'/%3E%3Ccircle%20cx='35'%20cy='150'%20r='2'/%3E%3Cpath%20d='M23%20159q7%208%2014%200'/%3E%3Cpath%20d='M80%20138h20v16q0%2010-10%2013-10-3-10-13z'/%3E%3Cline%20x1='85'%20y1='167'%20x2='85'%20y2='174'/%3E%3Cline%20x1='95'%20y1='167'%20x2='95'%20y2='174'/%3E%3Cline%20x1='80'%20y1='174'%20x2='100'%20y2='174'/%3E%3Cpath%20d='M80%20141q-7%200-7%205%200%206%207%207'/%3E%3Cpath%20d='M100%20141q7%200%207%205%200%206-7%207'/%3E%3Crect%20x='133'%20y='140'%20width='34'%20height='26'%20rx='2'/%3E%3Cellipse%20cx='133'%20cy='153'%20rx='2'%20ry='13'/%3E%3Cellipse%20cx='167'%20cy='153'%20rx='2'%20ry='13'/%3E%3Cline%20x1='140'%20y1='148'%20x2='160'%20y2='148'/%3E%3Cline%20x1='140'%20y1='155'%20x2='160'%20y2='155'/%3E%3Cline%20x1='140'%20y1='162'%20x2='153'%20y2='162'/%3E%3Ccircle%20cx='210'%20cy='155'%20r='4.5'/%3E%3Cellipse%20cx='210'%20cy='144'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='210'%20cy='166'%20rx='2.5'%20ry='5.5'/%3E%3Cellipse%20cx='199'%20cy='155'%20rx='5.5'%20ry='2.5'/%3E%3Cellipse%20cx='221'%20cy='155'%20rx='5.5'%20ry='2.5'/%3E%3Cpath%20d='M256%20148q-5%200-7%205l-7%2014q-2%204%201%206%203%202%206%200l4-4h14l4%204q3%202%206%200%203-2%201-6l-7-14q-2-5-7-5z'/%3E%3Cline%20x1='256'%20y1='157'%20x2='262'%20y2='157'/%3E%3Cline%20x1='259'%20y1='154'%20x2='259'%20y2='160'/%3E%3Ccircle%20cx='273'%20cy='155'%20r='2'/%3E%3Ccircle%20cx='277'%20cy='159'%20r='2'/%3E%3Cpath%20d='M14%20206q-2%200-2%202v18q0%202%202%202h6l-5%208%208-2h22q2%200%202-2v-18q0-2-2-2z'/%3E%3Cline%20x1='19'%20y1='214'%20x2='40'%20y2='214'/%3E%3Cline%20x1='19'%20y1='220'%20x2='33'%20y2='220'/%3E%3Cpath%20d='M75%20208q15-4%2015%204v22q-15-4-15-4z'/%3E%3Cpath%20d='M105%20208q-15-4-15%204v22q15-4%2015-4z'/%3E%3Cline%20x1='90'%20y1='212'%20x2='90'%20y2='230'/%3E%3Cpath%20d='M150%20206l2.5%209%209%202.5-9%202.5-2.5%209-2.5-9-9-2.5%209-2.5z'/%3E%3Cpath%20d='M210%20230c-8-7-14-16-9-20%202-2%205-1%209%204%204-5%207-6%209-4%205%204-1%2013-9%2020'/%3E%3Crect%20x='258'%20y='204'%20width='22'%20height='36'%20rx='3'/%3E%3Cline%20x1='265'%20y1='235'%20x2='273'%20y2='235'/%3E%3Cline%20x1='260'%20y1='209'%20x2='278'%20y2='209'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Botón de navegación #si-chats-escalados ──────────────────────────
   La hoja con hash lista IDs explícitos para el color de cada ítem del
   sidebar y omite éste → invisible en claro (heredaba #sidebar .sb-item
   blanco, sin scope de tema) y "lima lavado" activo en claro. Replicamos
   las reglas por id (ganan en especificidad, CSP-safe). */
#sidebar #si-chats-escalados:not(.active){
  background:transparent !important; color:rgba(255,255,255,.52) !important; border-color:transparent !important;
}
#sidebar #si-chats-escalados:not(.active):hover{
  background:rgba(255,255,255,.07) !important; color:rgba(255,255,255,.88) !important;
}
#sidebar #si-chats-escalados.active{
  background:rgba(225,250,63,.15) !important; color:#E1FA3F !important; border-color:rgba(225,250,63,.28) !important;
}
[data-theme="light"] #sidebar #si-chats-escalados:not(.active){
  background:transparent !important; color:#374151 !important; border-color:transparent !important;
}
[data-theme="light"] #sidebar #si-chats-escalados:not(.active):hover{
  background:#F9FAFB !important; color:#111827 !important;
}
[data-theme="light"] #sidebar #si-chats-escalados.active{
  background:#F3F4F6 !important; color:#111827 !important; border-color:#E5E7EB !important;
}

/* ── Badge de "Chats escalados" = IDÉNTICO al de "Soporte IA" ──────────
   Notificación de pendientes: verde de marca en light / lima en dark cuando
   hay conteo y el ítem está INACTIVO; GRIS al seleccionarse (no lima). Son
   copia exacta de las reglas #si-ai-support .sb-count del <style> con hash,
   replicadas acá en la hoja externa (CSP-safe) con #sidebar (2 IDs) +
   !important para ganarle a las reglas hasheadas en cualquier estado. */
#sidebar #si-chats-escalados:not(.active) .sb-count{
  background:rgba(225,250,63,.12) !important;
  border-color:rgba(225,250,63,.3) !important;
  color:#E1FA3F !important;
}
[data-theme="light"] #sidebar #si-chats-escalados:not(.active) .sb-count{
  background:rgba(31,182,117,.12) !important;
  border-color:rgba(31,182,117,.35) !important;
  color:#0E7C4B !important;
}
[data-theme="light"] #sidebar #si-chats-escalados.active .sb-count{
  background:#F3F4F6 !important;
  border-color:#D1D5DB !important;
  color:#374151 !important;
}

/* ── Contenedor 2 paneles ─────────────────────────────────────────── */
#view-chats-escalados .ce-wrap{
  display:flex; height:calc(100vh - 168px); min-height:400px; margin-top:4px;
  border:1px solid var(--ce-border); border-radius:12px; overflow:hidden;
  background:var(--ce-panel);
  box-shadow:0 8px 30px rgba(11,20,26,.10);
}

/* ── Panel izquierdo: lista de chats ──────────────────────────────── */
.ce-listpane{
  width:340px; min-width:286px; display:flex; flex-direction:column;
  background:var(--ce-panel); border-right:1px solid var(--ce-border);
}
.ce-search{ padding:8px 12px 6px; background:var(--ce-panel); }
.ce-search-box{
  display:flex; align-items:center; gap:9px;
  background:var(--ce-inset); border-radius:9px; padding:7px 12px;
}
.ce-search-box svg{ flex:none; color:var(--ce-sub); }
.ce-search-input{
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--ce-txt); font-size:13.5px; font-family:inherit;
}
.ce-search-input::placeholder{ color:var(--ce-sub); }

.ce-tabs{ display:flex; gap:8px; padding:4px 12px 10px; background:var(--ce-panel); }
.ce-tab{
  font-size:12.5px; font-weight:500; color:var(--ce-sub); cursor:pointer;
  background:var(--ce-chip); border:0; border-radius:999px; padding:6px 14px;
  transition:background .12s, color .12s;
}
.ce-tab:hover{ filter:brightness(.97); }
.ce-tab.active{ color:var(--ce-accent); background:var(--ce-chip); font-weight:600; }

.ce-list{ flex:1; overflow-y:auto; background:var(--ce-panel); }
.ce-list::-webkit-scrollbar{ width:6px; }
.ce-list::-webkit-scrollbar-thumb{ background:var(--ce-border); border-radius:6px; }

.ce-row{
  display:flex; align-items:center; gap:13px;
  padding:0 0 0 14px; cursor:pointer; transition:background .1s;
}
.ce-row:hover{ background:var(--ce-hover); }
.ce-row.active{ background:var(--ce-row-active); }
.ce-av{
  flex:none; width:49px; height:49px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ce-chip); color:var(--ce-sub);
  font-size:16px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
}
.ce-row:hover .ce-av, .ce-row.active .ce-av{ background:var(--ce-panel); }
.ce-row-main{
  flex:1; min-width:0; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--ce-border);
}
.ce-row:last-child .ce-row-main{ border-bottom:0; }
.ce-row-top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.ce-row-name{ font-weight:500; font-size:15px; color:var(--ce-txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ce-row-time{ font-size:11.5px; color:var(--ce-sub); white-space:nowrap; flex:none; }
.ce-row-sub{ font-size:13px; color:var(--ce-sub); margin-top:3px; display:flex; align-items:center; gap:6px; }
.ce-row-prev{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ce-row-badge{
  flex:none; margin-left:auto; min-width:19px; height:19px; padding:0 6px;
  border-radius:999px; background:var(--ce-accent); color:#fff;
  font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
}

.ce-enc{
  flex:none; padding:11px 16px 13px; text-align:center;
  font-size:11px; color:var(--ce-sub); border-top:1px solid var(--ce-border);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ── Panel derecho: hilo ──────────────────────────────────────────── */
.ce-threadpane{ flex:1; display:flex; flex-direction:column; min-width:0; background:var(--ce-app-bg); }

/* Navbar del hilo — BLANCO en light / slate WhatsApp en dark (NO verde). */
.ce-thread-head{
  display:flex; align-items:center; gap:12px;
  padding:9px 16px; background:var(--ce-navbar); border-bottom:1px solid var(--ce-border);
  flex:none;
}
.ce-thread-head:empty{ display:none; }
.ce-th-av{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ce-navbar-av); color:var(--ce-navbar-txt);
  font-size:14px; font-weight:600; text-transform:uppercase;
}
.ce-th-meta{ min-width:0; flex:1; }
.ce-th-name{ font-weight:600; font-size:15px; color:var(--ce-navbar-txt); }
.ce-th-sub{ font-size:12px; color:var(--ce-navbar-sub); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ce-th-menu{
  flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:default;
  background:transparent; color:var(--ce-navbar-sub); display:flex; align-items:center; justify-content:center;
}

/* Cuerpo: wallpaper de doodles (SVG data-URI) */
.ce-thread-body{ flex:1; min-height:0; display:flex; }
.ce-chat{
  flex:1; height:100%; overflow-y:auto; padding:16px 6.5% 12px;
  background:transparent;   /* el wallpaper va en .ce-threadpane → continuo bajo el chat Y el redactor (sin línea/seam) */
  display:flex; flex-direction:column; gap:2px;
}
.ce-chat::-webkit-scrollbar{ width:7px; }
.ce-chat::-webkit-scrollbar-thumb{ background:rgba(127,127,127,.28); border-radius:7px; }

/* ── Wallpaper REAL de WhatsApp ───────────────────────────────────────
   Imágenes del patrón en public_html/ (mismo dir que esta hoja, subidas por
   el operador a Hostinger): wp-background.v2.png (light) y
   wp-background-dark.v2.png (dark). Se pintan ENCIMA del SVG de respaldo: si la
   imagen no carga, el 404 no pinta nada y se ve el SVG (sin pantalla en blanco).
   El tamaño va en 'auto' (tile natural); si los doodles quedan grandes o
   chicos, se ajusta background-size del 1er layer. data-theme siempre se setea
   explícito ('light'|'dark') en <html>, así que ambos scopes aplican bien. */
/* Wallpaper del HILO activo (doodles .v2) */
[data-theme="light"] #view-chats-escalados .ce-threadpane{
  background-image:url("wp-background.v2.png"), var(--ce-wall);
  background-repeat:repeat, repeat;
  background-size:auto, 158px;
  background-position:top left, top left;
}
[data-theme="dark"] #view-chats-escalados .ce-threadpane{
  background-image:url("wp-background-dark.v2.png"), var(--ce-wall);
  background-repeat:repeat, repeat;
  background-size:auto, 158px;
  background-position:top left, top left;
}
/* Fondo SIN selección (splash): imagen "clean" (nombre real con typo confirmado
   en Hostinger: wp-bacground-clean*.png) + SVG de respaldo, cover. La carga
   ("Cargando…") y el chat abierto muestran el wallpaper del panel (.ce-threadpane). */
[data-theme="light"] #view-chats-escalados .ce-splash{
  background-image:url("wp-bacground-clean.png"), var(--ce-wall);
  background-repeat:no-repeat, repeat;
  background-size:cover, 158px;
  background-position:center, top left;
}
[data-theme="dark"] #view-chats-escalados .ce-splash{
  background-image:url("wp-bacground-clean-dark.png"), var(--ce-wall);
  background-repeat:no-repeat, repeat;
  background-size:cover, 158px;
  background-position:center, top left;
}
/* La imagen "clean" YA trae su propio título/gráfico/texto → ocultamos el texto
   del splash de Lirium para que NO se superponga sobre el de la imagen. */
#view-chats-escalados .ce-splash-ico,
#view-chats-escalados .ce-splash-title,
#view-chats-escalados .ce-splash-sub,
#view-chats-escalados .ce-splash-enc{ display:none; }

/* Separador de fecha (Hoy / Ayer / dd mmm aaaa) */
.ce-date{ display:flex; justify-content:center; margin:12px 0 10px; }
.ce-date span{
  background:var(--ce-date-bg); color:var(--ce-date-txt);
  font-size:11.5px; font-weight:500; padding:5px 12px; border-radius:8px;
  box-shadow:var(--ce-shadow); text-transform:uppercase; letter-spacing:.2px;
}

/* ── Burbujas estilo WhatsApp ─────────────────────────────────────── */
.ce-msg{ display:flex; max-width:100%; margin:1px 0; }
.ce-msg.in{ justify-content:flex-start; }
.ce-msg.out{ justify-content:flex-end; }
.ce-bub{
  position:relative; max-width:65%; min-width:74px; padding:6px 9px 8px 10px;
  border-radius:7.5px; font-size:14.2px; line-height:1.33; color:var(--ce-txt);
  box-shadow:var(--ce-shadow); white-space:pre-wrap; word-wrap:break-word;
}
.ce-msg.in  .ce-bub{ background:var(--ce-in-bg);  border-top-left-radius:0; }
.ce-msg.out .ce-bub{ background:var(--ce-out-bg); border-top-right-radius:0; }
/* Colita (tail) del lado superior externo */
.ce-msg.in .ce-bub::before{
  content:""; position:absolute; top:0; left:-8px; width:0; height:0;
  border-top:8px solid var(--ce-in-bg); border-left:8px solid transparent;
}
.ce-msg.out .ce-bub::before{
  content:""; position:absolute; top:0; right:-8px; width:0; height:0;
  border-top:8px solid var(--ce-out-bg); border-right:8px solid transparent;
}
.ce-time{
  float:right; margin:8px 0 -3px 12px; font-size:11px; line-height:1;
  color:var(--ce-time); white-space:nowrap; user-select:none;
}
.ce-check{ color:#53bdeb; font-weight:700; }

/* Etiqueta de agente IA — MISMO patrón que el badge de rol del sidebar
   (#sb-role-badge): píldora TEAL #42C8B8 en dark / gris en light. */
.ce-agent-badge, .ce-ia-tag{
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#42C8B8; background:rgba(66,200,184,.12);
  border:1px solid rgba(66,200,184,.38); border-radius:4px; padding:1px 6px;
}
[data-theme="light"] #view-chats-escalados .ce-agent-badge,
[data-theme="light"] #view-chats-escalados .ce-ia-tag{
  color:#4B5563; background:#F3F4F6; border-color:#E5E7EB;
}
.ce-agent-badge{ display:block; width:fit-content; margin:0 0 4px; }
.ce-ia-tag{ display:inline-block; margin-right:7px; vertical-align:middle; white-space:nowrap; }
.ce-sys-act{ vertical-align:middle; }

/* Notas de sistema (razonamiento / tool calls / escalamiento de la IA) —
   "momento 3" (proceso interno IA). Diseño WhatsApp: contenedor SÓLIDO (NO
   degradado/translúcido — el wallpaper no debe verse a través). Dark: #182229
   + teal #42C8B8. Light: #CBF2EE + gris #55656F. Distinto del momento 1
   (cliente) y momento 2 (agente). */
.ce-sys{ display:flex; justify-content:center; margin:6px 0; }
.ce-sys-pill{
  max-width:80%; padding:5px 11px; border-radius:8px;
  background:#182229; color:#42C8B8; border:0;
  font-size:11.5px; line-height:1.4; text-align:center;
  box-shadow:var(--ce-shadow); word-wrap:break-word;
}
[data-theme="light"] #view-chats-escalados .ce-sys-pill{
  background:#CBF2EE; color:#55656F;
}

/* ── Redactor estilo WhatsApp Web: píldora flotante sobre el wallpaper ──
   El footer NO es una barra sólida: muestra el mismo wallpaper del hilo, y el
   redactor es una píldora redondeada (#FFFFFF light / #232626 dark vía
   --ce-input-bg) que "flota" con margen, con los íconos (+ , sticker) DENTRO.
   El botón Enviar va aparte (círculo a la derecha). */
.ce-thread-foot{
  flex:none; padding:7px 16px 14px;
  background:transparent;   /* deja ver el wallpaper del panel (continuo con el chat), sin borde */
}
.ce-thread-foot:empty{ display:none; }
.ce-composer{ display:flex; align-items:flex-end; gap:8px; position:relative; }
.ce-cbtn{
  flex:none; width:40px; height:40px; border-radius:50%; border:0; background:transparent;
  color:var(--ce-sub); display:flex; align-items:center; justify-content:center; cursor:not-allowed;
}
/* La píldora flotante: contiene + , sticker, el textarea Y el botón Enviar.
   Sin sombra (el operador la pidió quitar). */
.ce-input-wrap{
  flex:1; min-width:0; display:flex; align-items:center; gap:2px;
  background:var(--ce-input-bg); border-radius:24px; padding:4px 6px;
}
.ce-input-wrap .ce-cbtn{ width:34px; height:34px; }
.ce-input-text{
  flex:1; min-width:0; color:var(--ce-sub); font-size:13.5px; line-height:1.3;
  padding:7px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Compositor habilitado (Fase 2 — sesión activa) ──────────────── */
.ce-composer-live .ce-cbtn{ cursor:pointer; }
.ce-input-ta{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ce-txt); font:inherit; font-size:14.5px; line-height:1.45;
  resize:none; overflow:hidden; max-height:120px;
  padding:8px 4px; caret-color:var(--ce-accent);
}
.ce-input-ta::placeholder{ color:var(--ce-sub); }
.ce-send-btn{
  flex:none; width:34px; height:34px; border-radius:50%; border:0;
  background:#ffffff; color:#161717;   /* DARK: botón blanco, flecha oscura */
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity .15s;   /* va DENTRO de la píldora, sin sombra */
}
[data-theme="light"] #view-chats-escalados .ce-send-btn{
  background:#151414; color:#fff;   /* LIGHT: botón #151414, flecha blanca */
}
.ce-send-btn:hover{ opacity:.88; }
.ce-send-btn:disabled{ opacity:.45; cursor:not-allowed; }
/* Badge "Tú" — operador humano (no IA). Mismo layout que ce-agent-badge
   pero distinguible visualmente (color de énfasis más claro). */
.ce-human-badge{
  font-size:10px; font-weight:700; letter-spacing:.04em; padding:1px 5px;
  border-radius:4px; display:inline-block; margin-bottom:4px;
  background:rgba(0,168,132,.22); color:var(--ce-accent);
}
[data-theme="light"] .ce-human-badge{
  background:rgba(0,128,105,.12); color:#006d5a;
}

/* ── Estados vacíos / splash ──────────────────────────────────────── */
.ce-empty{ padding:22px 16px; text-align:center; color:var(--ce-sub); font-size:12.5px; }
/* Estado vacío (sin chat): MISMO wallpaper beige del hilo + logo gris
   centrado + nota de cifrado abajo (como WhatsApp Business Web). */
.ce-splash{
  flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 30px 64px; color:var(--ce-sub);
  background-color:var(--ce-app-bg); background-image:var(--ce-wall);
  background-repeat:repeat; background-size:158px;
}
.ce-splash-ico{ margin-bottom:16px; color:var(--ce-splash-mark); }
/* Icono del splash más chico y con más contraste (override del width inline) */
.ce-splash-ico svg{ width:62px; height:62px; }
.ce-splash-title{ font-size:30px; font-weight:300; color:var(--ce-splash-title); letter-spacing:.2px; }
.ce-splash-sub{ font-size:13px; margin-top:12px; max-width:420px; line-height:1.55; color:var(--ce-sub); }
.ce-splash-enc{
  position:absolute; left:0; right:0; bottom:24px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:12.5px; color:var(--ce-sub);
}

/* ── Llenar TODO el alto disponible (patrón de #view-history/#view-auditoria):
   la vista activa es flex-column al 100% del #content-area; .lms-ph queda fija
   y .ce-wrap ocupa el resto, sin hueco abajo y edge-to-edge como WhatsApp Web.
   En CSS externo → #view-….view.active (1,2,0) gana sobre .view.active.
   Aplica desde 761px (cuando es de 2 paneles) para que NO quede hueco en
   ventanas 761-1100px; abajo de 760px se apila (ver @media max-width:760px). */
@media(min-width:761px){
  #view-chats-escalados.view.active{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
  #view-chats-escalados .lms-ph{ flex:none; }
  #view-chats-escalados .ce-wrap{
    flex:1; min-height:0; height:auto; margin:0; border:0; border-radius:0; box-shadow:none;
  }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media(max-width:760px){
  #view-chats-escalados .ce-wrap{ flex-direction:column; height:auto; }
  .ce-listpane{ width:auto; min-width:0; border-right:0; border-bottom:1px solid var(--ce-border); max-height:40vh; }
  .ce-enc{ display:none; }
  .ce-threadpane{ min-height:56vh; }
  .ce-bub{ max-width:82%; }
}

/* ── Redactor vs FAB "Ask IA" ──────────────────────────────────────────
   El FAB "Ask IA" es position:fixed abajo-derecha (≈94px ancho + 22px margen)
   y se montaba ENCIMA del botón Enviar → no se podía enviar. Cuando el FAB
   está visible (body.has-lia-fab) y el panel NO está abierto, reservamos
   espacio a la derecha del redactor: el input se reduce y el botón Enviar
   queda A LA IZQUIERDA del FAB, sin pisarse. Al abrir el panel (.lia-open)
   el FAB se oculta y el contenido se encoge → no hace falta el reserve. */
body.has-lia-fab:not(.lia-open) #view-chats-escalados .ce-thread-foot{
  padding-right:128px;
}
@media(max-width:760px){
  body.has-lia-fab:not(.lia-open) #view-chats-escalados .ce-thread-foot{ padding-right:14px; }
}

/* ══════════════════════════════════════════════════════════════════
   FIX GLOBAL DEL LMS (no pertenece a Chats escalados, pero vive acá): el CSP
   es `style-src 'self' <hashes>` y los <style> inline están "congelados" por
   hash (tocarlos rompe el CSP, trampa #14). Una hoja externa same-origin sí
   se permite, así que los arreglos que tocarían el <style> con hash van acá.
   ══════════════════════════════════════════════════════════════════ */
/* #7 — Footer del sidebar en mobile. El drawer (@media max-width:768px) usaba
   height:100vh; en celular 100vh incluye el área tras la barra de URL y, al
   rotar, el alto cambia → el footer (pill de usuario + ⚙ + Salir) quedaba
   fuera del viewport y se cortaba (el #sidebar tiene overflow:hidden).
   100dvh = alto del viewport VISIBLE real (sigue la barra de URL y la
   rotación). Si el navegador no soporta dvh, la regla se ignora y cae al
   100vh actual (sin regresión). */
@media (max-width:768px){
  #sidebar{ height:100dvh !important; }
}

/* Panel "Servicios" del Dashboard: ahora lista TODAS las Edge Functions (~42),
   así que el grid (display:flex column en el <style> con hash) necesita tope de
   alto + scroll para no estirar la card. Se hace acá (hoja externa, CSP-safe)
   por ID para ganar especificidad sin tocar el <style> hasheado. */
#dash-sla-grid{ max-height:360px; overflow-y:auto; padding-right:4px; }
#dash-sla-grid::-webkit-scrollbar{ width:6px; }
#dash-sla-grid::-webkit-scrollbar-thumb{ background:rgba(127,127,127,.30); border-radius:6px; }

/* Botón "Finalizar" en el header del hilo (marca el chat resuelto → Cerrados). */
.ce-th-end{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  height:30px; padding:0 12px; border-radius:15px; cursor:pointer;
  border:1px solid var(--ce-border); background:transparent;
  color:var(--ce-navbar-sub); font:inherit; font-size:12.5px; font-weight:600;
  transition:background .15s, color .15s, border-color .15s;
}
.ce-th-end:hover{ color:#fff; background:var(--ce-out-bg); border-color:transparent; }
[data-theme="light"] #view-chats-escalados .ce-th-end:hover{ color:#fff; background:#1FA855; }

/* Selector de emojis del redactor: popover en grilla, anclado sobre el redactor. */
.ce-composer{ position:relative; }
.ce-emoji-pop{
  position:absolute; left:8px; bottom:calc(100% + 6px); z-index:40;
  width:300px; max-height:232px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  padding:8px; border-radius:12px;
  background:var(--ce-inset); border:1px solid var(--ce-border);
  box-shadow:0 10px 34px rgba(0,0,0,.38);
}
.ce-emoji-item{
  border:0; background:transparent; cursor:pointer; border-radius:8px;
  font-size:20px; line-height:1; padding:5px 0; transition:background .12s;
}
.ce-emoji-item:hover{ background:var(--ce-hover); }
.ce-emoji-pop::-webkit-scrollbar{ width:7px; }
.ce-emoji-pop::-webkit-scrollbar-thumb{ background:rgba(127,127,127,.30); border-radius:7px; }

/* Botón campana 🔔/🔕 (notificaciones de mensajes nuevos) en el header de Chats
   escalados. Reusa .btn-nav-sm (definido en el <style> con hash) pero como botón
   de SOLO ícono: padding cuadrado. La hoja externa es CSP-safe → se estiliza acá
   sin tocar el hash. Verde WhatsApp cuando está ACTIVO (is-on). */
.lms-ph .btn-nav-sm.btn-nav-ico{ padding:5px 8px; }
.lms-ph .btn-nav-sm.btn-nav-ico svg{ display:block; }
#btn-ce-notify.is-on{ color:#1FA855 !important; border-color:rgba(31,168,85,.5) !important; }
[data-theme="dark"] #btn-ce-notify.is-on{ color:#42C8B8 !important; border-color:rgba(66,200,184,.5) !important; }

/* SVG decorativo en el navbar, después del título "Chats escalados". El title
   y el SVG van en una fila horizontal; el SVG cambia por tema. (CSP-safe: hoja
   externa.) Ancho auto por aspecto del <img> (sin hueco). */
.lms-ph-titlerow{ display:flex; align-items:center; gap:10px; }
/* Píldora que resalta el logo del navbar. */
.ce-navbar-pill{ display:inline-flex; align-items:center; flex:none; padding:7px 15px; border-radius:999px; }
[data-theme="light"] .ce-navbar-pill{ background:#F6F5F5; }
[data-theme="dark"]  .ce-navbar-pill{ background:#252828; }
.ce-navbar-mark{ height:18px; width:auto; flex:none; display:none; }
[data-theme="light"] .ce-nav-light{ display:block; }
/* El SVG dark venía pintado oscuro (invisible sobre el navbar). brightness(0)+
   invert(1) lo fuerza a BLANCO sí o sí → visible en dark sin re-exportarlo. */
[data-theme="dark"]  .ce-nav-dark{ display:block; filter:brightness(0) invert(1); }

/* Header del hilo: 🔍 (buscar) y ⋮ (menú) ahora funcionales. */
.ce-thread-head{ position:relative; }
.ce-th-menu:not([disabled]){ cursor:pointer; }
.ce-th-menu:not([disabled]):hover{ color:var(--ce-navbar-txt); }

/* Barra de búsqueda dentro de la conversación (toggle con 🔍). */
.ce-search-bar{
  display:flex; align-items:center; gap:8px; flex:none;
  padding:8px 14px; background:var(--ce-head); border-bottom:1px solid var(--ce-border);
}
.ce-search-bar[hidden]{ display:none; }
.ce-search-bar input{
  flex:1; min-width:0; border:0; outline:0; border-radius:18px;
  background:var(--ce-input-bg); color:var(--ce-txt);
  padding:8px 14px; font:inherit; font-size:13.5px;
}
.ce-search-count{ flex:none; font-size:12px; color:var(--ce-sub); }
.ce-search-close{
  flex:none; width:28px; height:28px; border:0; border-radius:50%;
  background:transparent; color:var(--ce-sub); cursor:pointer; font-size:15px;
}
.ce-search-close:hover{ background:var(--ce-hover); }

/* Menú kebab (⋮) → "Archivar chat". */
.ce-menu-pop{
  position:absolute; top:calc(100% - 4px); right:12px; z-index:50; min-width:184px;
  background:var(--ce-panel); border:1px solid var(--ce-border); border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.38); padding:4px;
}
.ce-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:transparent; color:var(--ce-txt); cursor:pointer;
  padding:9px 12px; border-radius:7px; font:inherit; font-size:13.5px; text-align:left;
}
.ce-menu-item:hover{ background:var(--ce-hover); }
.ce-menu-item.ce-menu-danger{ color:#e5484d; }

/* Indicador de carga de la conversación de WhatsApp (sync de Truora). */
.ce-sync-loading{
  align-self:center; margin:10px auto; padding:6px 14px; border-radius:14px;
  background:var(--ce-sys-bg); color:var(--ce-sys-txt); font-size:12px;
  display:flex; align-items:center; gap:8px; box-shadow:var(--ce-shadow);
}
.ce-sync-dot{ width:8px; height:8px; border-radius:50%; background:var(--ce-accent); animation:cePulse 1s ease-in-out infinite; }
@keyframes cePulse{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.1); } }