/* ========================================
   SIVO — WhatsApp Chat Panel v1.0.0
   UI de chat integrada en el panel admin
   ======================================== */

/* LAYOUT PRINCIPAL — Split view */
.wa-chat-container{
	display:flex;
	height:calc(100vh - 60px);
	background:#f0f2f5;
	border-radius:8px;
	overflow:hidden;
	border:1px solid #e0e0e0;
}

/* ========================================
   SIDEBAR — Lista de conversaciones
   ======================================== */
.wa-sidebar{
	width:360px;
	min-width:300px;
	background:#fff;
	border-right:1px solid #e0e0e0;
	display:flex;
	flex-direction:column;
}

/* Header sidebar */
.wa-sidebar-header{
	padding:12px 16px;
	background:#f0f2f5;
	border-bottom:1px solid #e0e0e0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.wa-sidebar-header h3{
	margin:0;
	font-size:15px;
	font-weight:700;
	color:#333;
}
.wa-sidebar-header .wa-badge{
	background:#25d366;
	color:#fff;
	font-size:11px;
	font-weight:700;
	padding:2px 8px;
	border-radius:12px;
	min-width:20px;
	text-align:center;
}

/* Búsqueda */
.wa-search{
	padding:8px 12px;
	border-bottom:1px solid #f0f0f0;
}
.wa-search input{
	width:100%;
	padding:8px 12px 8px 34px;
	border:none;
	background:#f0f2f5;
	border-radius:20px;
	font-size:13px;
	color:#333;
	outline:none;
	box-sizing:border-box;
}
.wa-search input::placeholder{
	color:#999;
}
.wa-search-wrap{
	position:relative;
}
.wa-search-wrap i{
	position:absolute;
	left:12px;
	top:50%;
	transform:translateY(-50%);
	color:#999;
	font-size:13px;
}

/* Lista de conversaciones */
.wa-conv-list{
	flex:1;
	overflow-y:auto;
	overflow-x:hidden;
}

/* Item de conversación */
.wa-conv-item{
	display:flex;
	align-items:center;
	padding:12px 16px;
	cursor:pointer;
	transition:background 0.15s;
	border-bottom:1px solid #f5f5f5;
	gap:12px;
}
.wa-conv-item:hover{
	background:#f5f5f5;
}
.wa-conv-item.active{
	background:#f0f7e4;
}

/* Avatar conversación */
.wa-conv-avatar{
	width:48px;
	height:48px;
	border-radius:50%;
	background:#dfe5e7;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:#fff;
	flex-shrink:0;
	font-weight:700;
}
.wa-conv-avatar.vinculado{
	background:#25d366;
}

/* Info conversación */
.wa-conv-info{
	flex:1;
	min-width:0;
}
.wa-conv-name{
	font-size:14px;
	font-weight:600;
	color:#333;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.wa-conv-preview{
	font-size:12px;
	color:#888;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	margin-top:2px;
}

/* Meta conversación (hora + badge) */
.wa-conv-meta{
	text-align:right;
	flex-shrink:0;
}
.wa-conv-time{
	font-size:11px;
	color:#999;
}
.wa-conv-unread{
	background:#25d366;
	color:#fff;
	font-size:10px;
	font-weight:700;
	width:20px;
	height:20px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-left:auto;
	margin-top:4px;
}

/* ============================================
   WHATSAPP SEND MODAL
   ============================================ */
.wa-modal-overlay{position:fixed;inset:0;background:transparent;backdrop-filter: blur(3px);z-index:99999;display:flex;align-items:center;justify-content:center}
.wa-modal-box{background:#fff;border-radius:12px;width:450px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.wa-modal-header{padding:16px 20px;border-bottom:1px solid #eee;display:flex;align-items:center;gap:10px}
.wa-modal-header-icon{color:#25d366;font-size:22px}
.wa-modal-header-title{font-weight:700;font-size:14px;color:#333}
.wa-modal-header-phone{font-size:12px;color:#888}
.wa-modal-body{padding:16px 20px}
.wa-modal-textarea{width:100%;min-height:200px;border:1px solid #ddd;border-radius:8px;padding:10px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
.wa-modal-footer{padding:12px 20px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.wa-modal-btn-external{background:none;border:none;color:#666;font-size:12px;cursor:pointer;padding:6px 12px}
.wa-modal-btn-external:hover{color:#25d366}
.wa-modal-btns{display:flex;gap:8px}
.wa-modal-btn-cancel{padding:8px 20px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#666;cursor:pointer;font-size:13px}
.wa-modal-btn-cancel:hover{background:#f5f5f5}
.wa-modal-btn-send{padding:8px 20px;border:none;border-radius:8px;background:#25d366;color:#fff;cursor:pointer;font-size:13px;font-weight:600}
.wa-modal-btn-send:hover{background:#20bd5a}
.wa-modal-btn-send:disabled{opacity:0.6;cursor:not-allowed;background:#93d6a8}
.wa-modal-notice{padding:0 20px 12px;font-size:11px;color:#999;display:flex;align-items:center;gap:6px}
.wa-modal-notice i{color:#f0ad4e}

/* ========================================
   PANEL DE CHAT — Mensajes
   ======================================== */
.wa-chat-panel{
	flex:1;
	display:flex;
	flex-direction:column;
	background:#efeae2;
	position:relative;
}

/* Patrón de fondo tipo WhatsApp */
.wa-chat-panel::before{
	content:'';
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cfc6' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity:0.4;
	pointer-events:none;
	z-index:0;
}

/* Header del chat */
.wa-chat-header{
	padding:10px 16px;
	background:#f0f2f5;
	border-bottom:1px solid #e0e0e0;
	display:flex;
	align-items:center;
	gap:12px;
	z-index:1;
}
.wa-chat-header-avatar{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#dfe5e7;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	color:#fff;
	font-weight:700;
	flex-shrink:0;
}
.wa-chat-header-avatar.vinculado{
	background:#25d366;
}
.wa-chat-header-info{
	flex:1;
}
.wa-chat-header-name{
	font-size:14px;
	font-weight:700;
	color:#333;
}
.wa-chat-header-status{
	font-size:11px;
	color:#888;
}
.wa-chat-header-actions{
	display:flex;
	gap:8px;
}
.wa-chat-header-actions button{
	background:none;
	border:none;
	color:#666;
	font-size:16px;
	cursor:pointer;
	padding:6px;
	border-radius:50%;
	transition:background 0.2s;
}
.wa-chat-header-actions button:hover{
	background:#e0e0e0;
}

/* Área de mensajes */
.wa-messages{
	flex:1;
	overflow-y:auto;
	padding:16px 60px;
	z-index:1;
	display:flex;
	flex-direction:column;
}

/* Burbuja de mensaje */
.wa-msg{
	max-width:65%;
	padding:8px 12px;
	border-radius:8px;
	margin-bottom:4px;
	position:relative;
	font-size:13px;
	line-height:1.45;
	word-wrap:break-word;
	box-shadow:0 1px 0.5px rgba(0,0,0,0.08);
}
.wa-msg.entrante{
	background:#fff;
	align-self:flex-start;
	border-top-left-radius:0;
}
.wa-msg.saliente{
	background:#d9fdd3;
	align-self:flex-end;
	border-top-right-radius:0;
}

/* Texto del mensaje */
.wa-msg-text{
	color:#333;
}

/* Media en mensaje */
.wa-msg-media{
	margin-bottom:4px;
}
.wa-msg-media img{
	max-width:100%;
	max-height:300px;
	border-radius:6px;
	cursor:pointer;
}
.wa-msg-media .wa-doc{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px;
	background:rgba(0,0,0,0.04);
	border-radius:6px;
	text-decoration:none;
	color:#333;
}
.wa-msg-media .wa-doc i{
	font-size:24px;
	color:#e74c3c;
}
.wa-msg-media .wa-audio{
	width:100%;
	min-width:240px;
}

/* Footer del mensaje (hora + ticks) */
.wa-msg-footer{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:4px;
	margin-top:2px;
}
.wa-msg-time{
	font-size:10px;
	color:#999;
}
.wa-msg-status{
	font-size:12px;
}
.wa-msg-status.enviando{ color:#bbb; }
.wa-msg-status.enviado{ color:#bbb; }
.wa-msg-status.entregado{ color:#53bdeb; }
.wa-msg-status.leido{ color:#53bdeb; }
.wa-msg-status.fallido{ color:#e74c3c; }

/* Separador de fecha */
.wa-date-separator{
	text-align:center;
	margin:16px 0;
}
.wa-date-separator span{
	background:#e1ddd4;
	color:#555;
	font-size:11px;
	padding:5px 14px;
	border-radius:8px;
	font-weight:500;
	box-shadow:0 1px 0.5px rgba(0,0,0,0.08);
}

/* ========================================
   INPUT — Barra de envío
   ======================================== */
.wa-input-area{
	padding:10px 16px;
	background:#f0f2f5;
	display:flex;
	align-items:flex-end;
	gap:8px;
	z-index:1;
}
.wa-input-area .wa-attach-btn{
	background:none;
	border:none;
	color:#666;
	font-size:20px;
	cursor:pointer;
	padding:6px;
	flex-shrink:0;
}
.wa-input-area .wa-attach-btn:hover{
	color:#333;
}
.wa-input-wrap{
	flex:1;
	position:relative;
}
.wa-input-wrap textarea{
	width:100%;
	padding:10px 14px;
	border:none;
	border-radius:20px;
	background:#fff;
	font-size:13px;
	color:#333;
	outline:none;
	resize:none;
	min-height:20px;
	max-height:120px;
	line-height:1.4;
	box-sizing:border-box;
	font-family:inherit;
}
.wa-input-wrap textarea::placeholder{
	color:#999;
}
.wa-send-btn{
	width:40px;
	height:40px;
	border-radius:50%;
	border:none;
	background:#25d366;
	color:#fff;
	font-size:16px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	transition:background 0.2s;
}
.wa-send-btn:hover{
	background:#1da851;
}
.wa-send-btn:disabled{
	background:#ccc;
	cursor:not-allowed;
}

/* Indicador de ventana de servicio */
.wa-window-alert{
	background:#fff3cd;
	color:#856404;
	padding:8px 16px;
	font-size:12px;
	text-align:center;
	border-bottom:1px solid #ffc107;
	z-index:1;
}
.wa-window-alert i{
	margin-right:4px;
}

/* ========================================
   PANEL SIN CHAT SELECCIONADO
   ======================================== */
.wa-no-chat{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background:#f0f2f5;
	color:#aaa;
	text-align:center;
}
.wa-no-chat img{
	width:280px;
	max-width:80%;
	opacity:0.6;
	margin-bottom:20px;
}
.wa-no-chat h3{
	font-size:24px;
	font-weight:300;
	color:#666;
	margin:0 0 8px;
}
.wa-no-chat p{
	font-size:13px;
	color:#999;
	max-width:400px;
}

/* ========================================
   CONFIGURACIÓN WHATSAPP
   ======================================== */
.wa-config-card{
	background:#fff;
	border-radius:12px;
	padding:24px;
	max-width:600px;
	margin:20px auto;
	box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.wa-config-card h3{
	margin:0 0 20px;
	font-size:16px;
	color:#333;
}
.wa-config-field{
	margin-bottom:16px;
}
.wa-config-field label{
	display:block;
	font-size:13px;
	font-weight:600;
	color:#555;
	margin-bottom:4px;
}
.wa-config-field input{
	width:100%;
	padding:10px 14px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:13px;
	box-sizing:border-box;
}
.wa-config-field small{
	color:#999;
	font-size:11px;
	margin-top:4px;
	display:block;
}
.wa-config-status{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	border-radius:20px;
	font-size:12px;
	font-weight:600;
}
.wa-config-status.connected{
	background:#dcfce7;
	color:#16a34a;
}
.wa-config-status.disconnected{
	background:#fee2e2;
	color:#dc2626;
}

/* ========================================
   PLAN NO DISPONIBLE
   ======================================== */
.wa-upgrade{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:60vh;
	text-align:center;
	padding:40px;
}
.wa-upgrade i{
	font-size:60px;
	color:#25d366;
	margin-bottom:20px;
}
.wa-upgrade h2{
	font-size:22px;
	font-weight:600;
	color:#333;
	margin:0 0 10px;
}
.wa-upgrade p{
	font-size:14px;
	color:#666;
	max-width:450px;
	line-height:1.6;
}
.wa-upgrade .wa-price{
	font-size:28px;
	font-weight:700;
	color:#25d366;
	margin:20px 0 5px;
}
.wa-upgrade .wa-price-label{
	font-size:12px;
	color:#999;
}
.wa-upgrade .btn-wa-contact{
	margin-top:20px;
	background:#25d366;
	color:#fff;
	padding:12px 30px;
	border-radius:25px;
	text-decoration:none;
	font-weight:600;
	font-size:14px;
	transition:background 0.2s;
}
.wa-upgrade .btn-wa-contact:hover{
	background:#1da851;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width:900px){
	.wa-sidebar{
		width:280px;
		min-width:260px;
	}
	.wa-messages{
		padding:12px 20px;
	}
	.wa-msg{
		max-width:80%;
	}
}
@media (max-width:700px){
	.wa-chat-container{
		flex-direction:column;
		height:auto;
		min-height:calc(100vh - 60px);
	}
	.wa-sidebar{
		width:100%;
		max-height:40vh;
	}
	.wa-sidebar.hidden-mobile{
		display:none;
	}
	.wa-chat-panel.hidden-mobile{
		display:none;
	}
	.wa-messages{
		padding:12px;
	}
}