/* ============================================================
   TEMA "WhatsApp Web" para Chatwoot v3.16 (WorldShop) — PRODUCCION
   El equipo lo aprobo (2026-07-18): ahora se inyecta en la direccion
   ORIGINAL https://bot.agenciagarvil.com (:443), en el location / que
   proxya a Chatwoot (3031). El :9443 quedo como Chatwoot ORIGINAL sin
   tema. Conserva el riel de iconos (todos los botones activos) y oculta
   solo la columna secundaria de bandejas. Clases REALES verificadas en
   vivo en la instancia chatwoot-ws.
   ============================================================ */

:root {
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-chat-bg: #efeae2;
  --wa-panel: #f0f2f5;
  --wa-panel-deep: #e9edef;
  --wa-sidebar: #ffffff;
  --wa-text: #111b21;
  --wa-text-2: #667781;
  --wa-icon: #54656f;
  --wa-green: #00a884;
  --wa-green-d: #008069;
  --wa-badge: #25d366;
  --wa-border: #e9edef;
  --wa-hover: #f5f6f6;
  --wa-active: #f0f2f5;
  --wa-private: #fff8c5;
  --wa-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body, html.dark body { font-family: var(--wa-font) !important; }

/* ============================================================
   0. CROMO — PRODUCCION: se CONSERVA el riel de iconos (64px) con
   TODOS los botones criticos (conversaciones, contactos, ajustes,
   perfil/disponibilidad, notificaciones, salir); solo se limpia
   visualmente a gris WhatsApp. Layout resultante: [riel][lista][chat],
   igual que WhatsApp Web. (El demo ocultaba el riel entero; en
   produccion NO, para que "todo este activo".)
   ============================================================ */
.app-wrapper { background: var(--wa-panel-deep) !important; }

/* riel primario (real: <aside class="flex h-full"> > 1er div .w-16) */
.app-wrapper > aside > div:first-child,
.app-wrapper > aside .w-16 {
  background: var(--wa-panel) !important;
  border-right: 1px solid var(--wa-panel-deep) !important;
}
/* columna secundaria (2do hijo del aside, .w-48: bandejas/etiquetas/
   menciones) -> OCULTA para el look de 2 columnas de WhatsApp. Lo que el
   asesor necesita a diario queda: el riel tiene ajustes/contactos/perfil,
   la lista tiene busqueda + filtros de estado, el chat tiene Resolver. */
.app-wrapper > aside > div:nth-child(2),
.app-wrapper > aside > div.w-48 {
  display: none !important;
}
/* icono activo/seleccionado en verde WhatsApp (en vez de azul woot) */
.app-wrapper > aside a.active,
.app-wrapper > aside a[class*="active"],
.app-wrapper > aside [class*="text-woot"] {
  color: var(--wa-green-d) !important;
}
.app-wrapper > aside [class*="bg-woot"] {
  background-color: var(--wa-green) !important;
}
/* franja de marca finita arriba (acento sutil) */
.app-wrapper::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wa-green); z-index: 999;
}

/* ============================================================
   1. LISTA — estilo WhatsApp
   ============================================================ */
.conversations-list-wrap {
  width: 400px !important;
  background: var(--wa-sidebar) !important;
  border-right: 1px solid var(--wa-border) !important;
}

/* header del panel de lista (mock: .chat-list__top; real: idem) */
.chat-list__top {
  background: var(--wa-panel) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--wa-panel-deep) !important;
  gap: 10px !important; min-height: 60px !important;
}
.chat-list__top h1 {
  color: var(--wa-green-d) !important; font-size: 18px !important; font-weight: 700 !important;
}
.search {
  background: var(--wa-sidebar) !important; border-radius: 8px !important;
  color: var(--wa-text-2) !important; font-size: 14px !important; padding: 8px 12px !important;
}
.tabs { background: var(--wa-sidebar) !important; padding: 8px 16px !important; }
.tabs .tab.on { color: var(--wa-green-d) !important; border-bottom-color: var(--wa-green) !important; }
.conversations-list { background: var(--wa-sidebar) !important; }

/* fila de conversacion (real: .conversation) */
.conversation {
  padding: 10px 16px !important;
  border-left: none !important;
  border-bottom: 1px solid #f5f6f6 !important;
  gap: 13px !important;
}
.conversation:hover { background: var(--wa-hover) !important; }
.conversation.active,
.conversation.conversation--active {
  background: var(--wa-active) !important; border-left: none !important;
}
/* avatar (mock: .avatar; real: .user-thumbnail-box/.user-thumbnail) */
.conversation .avatar,
.conversation .user-thumbnail-box,
.conversation .user-thumbnail,
.conversation .avatar-container {
  width: 49px !important; height: 49px !important;
}
.conversation--user { color: var(--wa-text) !important; font-weight: 500 !important; font-size: 16px !important; }
.conversation--message { color: var(--wa-text-2) !important; font-size: 14px !important; }
.conversation--meta,
.conversation .time { color: var(--wa-text-2) !important; font-size: 12px !important; }
/* badge de no leidos verde (real: .unread) */
.conversation .unread,
.conversations-list-wrap .unread {
  background: var(--wa-badge) !important; color: #fff !important;
  min-width: 20px !important; height: 20px !important; border-radius: 10px !important;
  font-size: 12px !important; align-self: center !important;
}

/* ============================================================
   2. PANEL DE CHAT — fondo beige con doodle
   ============================================================ */
.conversation-details-wrap {
  background: var(--wa-chat-bg) !important; border-left: none !important;
}
/* header del chat (real: primer hijo del wrap, div Tailwind bg-white) */
.conversation-details-wrap > div:first-child {
  background: var(--wa-panel) !important;
  border-bottom: 1px solid var(--wa-panel-deep) !important;
}
.conversation-details-wrap > div:first-child .user--name,
.conv-header .user--name { color: var(--wa-text) !important; }

.conversation-panel {
  background-color: var(--wa-chat-bg) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='none' stroke='%23d9cfc0' stroke-width='2' stroke-linecap='round' opacity='0.55'><circle cx='30' cy='28' r='9'/><path d='M104 20q9-11 18 0'/><path d='M24 98l7 7m0-7l-7 7'/><circle cx='132' cy='84' r='6'/><path d='M66 58c5-7 13-7 18 0'/><rect x='60' y='118' width='14' height='14' rx='4'/><path d='M112 128q7 9 16 3'/><circle cx='80' cy='18' r='3.5'/><path d='M152 38l6 6m0-6l-6 6'/><path d='M16 144q8-7 16 0'/><circle cx='158' cy='142' r='8'/><path d='M40 60l5 5m0-5l-5 5'/></g></svg>") !important;
  padding: 18px 6% !important;
}

/* ============================================================
   3. BURBUJAS — verde/blanca, radio 7.5, cola, sombra
   (real verificado: .conversation-panel > li.right/.left > .bubble)
   ============================================================ */
.conversation-panel > li { margin: 1px 0 !important; }

.conversation-panel > li.right .bubble {
  background: var(--wa-out) !important; color: var(--wa-text) !important;
  border: none !important; border-radius: 7.5px !important; border-top-right-radius: 0 !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
  padding: 6px 9px 8px 9px !important; font-size: 14.2px !important; line-height: 19px !important;
  max-width: 65% !important; position: relative !important;
}
.conversation-panel > li.right .bubble * { color: var(--wa-text) !important; }
.conversation-panel > li.right .bubble a { color: #027eb5 !important; }
.conversation-panel > li.right .bubble::after {
  content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px;
  background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 60%);
}

.conversation-panel > li.left .bubble {
  background: var(--wa-in) !important; color: var(--wa-text) !important;
  border: none !important; border-radius: 7.5px !important; border-top-left-radius: 0 !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
  padding: 6px 9px 8px 9px !important; font-size: 14.2px !important; line-height: 19px !important;
  max-width: 65% !important; position: relative !important;
}
.conversation-panel > li.left .bubble * { color: var(--wa-text) !important; }
.conversation-panel > li.left .bubble::after {
  content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px;
  background: var(--wa-in); clip-path: polygon(100% 0, 0 0, 100% 60%);
}

/* nota privada (real: .bubble.is-private) — amarilla funcional */
/* La nota privada DEBE verse amarilla (no verde de mensaje enviado) — un
   asesor jamas debe confundir una nota interna con algo que le llego al
   cliente. Se sube la especificidad (li.right/li.left + .is-private) para
   ganarle a la regla verde de burbuja saliente. */
.conversation-panel > li.right .bubble.is-private,
.conversation-panel > li.left .bubble.is-private,
.conversation-panel .bubble.is-private {
  background: var(--wa-private) !important; color: #5b4d00 !important;
}
.conversation-panel > li.right .bubble.is-private::after,
.conversation-panel > li.left .bubble.is-private::after,
.conversation-panel .bubble.is-private::after { background: var(--wa-private) !important; }
.conversation-panel > li.right .bubble.is-private *,
.conversation-panel > li.left .bubble.is-private *,
.conversation-panel .bubble.is-private * { color: #5b4d00 !important; }

/* timestamp dentro de la burbuja (mock: .msg-time; real: .time) */
.bubble .msg-time, .bubble .time {
  font-size: 11px !important; color: var(--wa-text-2) !important;
  float: right; margin: 4px -2px -3px 12px !important;
}
.conversation-panel > li.right .bubble .msg-time,
.conversation-panel > li.right .bubble .time { color: #5a8a6b !important; }

/* pastilla de fecha */
.center .date-pill, .conversation-panel > li.center span {
  background: #ffffff !important; color: var(--wa-text-2) !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important; border-radius: 8px !important;
  font-size: 12px !important; padding: 5px 12px !important;
}

/* ============================================================
   4. COMPOSITOR — bandeja gris + input pill + enviar verde
   (real: .reply-box, .reply-box__top, .input, .button--reply)
   ============================================================ */
.reply-box {
  background: var(--wa-panel) !important; border-top: 1px solid var(--wa-panel-deep) !important;
  padding: 8px 16px !important; border-radius: 0 !important;
}
.reply-box__top { gap: 10px !important; }
.reply-box .input, .reply-box textarea, .reply-box .ProseMirror {
  background: #ffffff !important; color: var(--wa-text) !important;
  border: none !important; border-radius: 8px !important; font-size: 15px !important;
}
.reply-box textarea::placeholder { color: var(--wa-text-2) !important; }
.reply-box.is-private, .reply-box.is-private .input, .reply-box.is-private textarea {
  background: var(--wa-private) !important;
}
/* boton enviar (real .button--reply): acento verde, sin romper layout */
.reply-box .button--reply.is-active,
.reply-box .button--reply {
  color: var(--wa-green) !important;
}
/* boton mock circular */
.reply-box .send-button {
  background: var(--wa-green) !important; color: #fff !important;
  border-radius: 50% !important; border: none !important;
  width: 42px !important; height: 42px !important;
}

/* ============================================================
   5. ACENTOS globales azul->verde
   ============================================================ */
.button:not(.secondary):not(.clear):not(.alert):not(.link) {
  background-color: var(--wa-green) !important; border-color: var(--wa-green) !important;
}
.button.clear.primary { color: var(--wa-green-d) !important; }
[class*="text-woot"] { color: var(--wa-green-d) !important; }
[class*="bg-woot"] { background-color: var(--wa-green) !important; }