/* ============================================
   Central de Comunicaciones - Styles
   Stage 2: Shell visual (3-column layout)
   Stage 3: Modal & participant styles
   Stage 4: Message bubbles & chat styles
============================================ */

/* Main container - 3 column layout */
.central-container {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  height: calc(100vh - 64px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---- Column 1: Conversations List ---- */
.central-conversations-list {
  border-right: 1px solid var(--gray-200, #E5E7EB);
  display: flex;
  flex-direction: column;
  background: var(--gray-50, #F9FAFB);
}
.central-conversations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
}
.central-conversations-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-heading, #0E162F);
}
.btn-new-conversation {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--blue-500, #3B82F6);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.btn-new-conversation:hover {
  background: var(--blue-600, #2563EB);
}
.central-search-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
}
.central-search-box input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  outline: none;
  transition: border-color 0.2s;
}
.central-search-box input:focus {
  border-color: var(--blue-500, #3B82F6);
}
.conversations-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.empty-conversations {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; color: var(--gray-400, #9CA3AF);
}
.empty-conversations svg { margin-bottom: 12px; opacity: 0.5; }
.empty-conversations p { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.empty-conversations small { font-size: 12px; color: var(--gray-400, #9CA3AF); }

.conversation-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.conversation-item:hover { background: var(--gray-100, #F3F4F6); }
.conversation-item.active { background: var(--blue-50, #EFF6FF); border: 1px solid var(--blue-200, #BFDBFE); }
.conversation-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 14px;
  font-weight: 600; color: white; flex-shrink: 0;
}
.conversation-avatar.dm { background: var(--blue-500, #3B82F6); }
.conversation-avatar.group { background: var(--green-500, #22C55E); }
.conversation-avatar.ai { background: var(--amber-500, #F59E0B); }
.conversation-info { flex: 1; min-width: 0; }
.conversation-title {
  font-size: 13px; font-weight: 600; color: var(--text-heading, #0E162F);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conversation-last-msg {
  font-size: 12px; color: var(--text-caption, #8F9095);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.conversation-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conversation-time { font-size: 11px; color: var(--text-caption, #8F9095); }
.conversation-unread {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-500, #3B82F6);
  color: white; font-size: 10px; font-weight: 600; display: flex;
  align-items: center; justify-content: center;
}

/* ---- Column 2: Chat Area ---- */
.central-chat-area { display: flex; flex-direction: column; background: white; }
.central-chat-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--gray-400, #9CA3AF); text-align: center; padding: 40px;
}
.central-chat-placeholder svg { margin-bottom: 16px; opacity: 0.4; }
.central-chat-placeholder h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--text-heading, #0E162F); }
.central-chat-placeholder p { margin: 0; font-size: 14px; color: var(--gray-400, #9CA3AF); }

.central-chat-active { flex: 1; display: flex; flex-direction: column; }
.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--gray-200, #E5E7EB); background: white;
}
.chat-header-info { flex: 1; }
.chat-header-title { font-size: 15px; font-weight: 600; color: var(--text-heading, #0E162F); }
.chat-header-subtitle { font-size: 12px; color: var(--text-caption, #8F9095); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--gray-50, #F9FAFB);
}
.chat-input-area {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--gray-200, #E5E7EB); background: white;
}
.chat-input-area textarea {
  flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 10px; font-size: 13px; font-family: inherit; resize: none;
  outline: none; max-height: 120px; transition: border-color 0.2s; line-height: 1.4;
}
.chat-input-area textarea:focus { border-color: var(--blue-500, #3B82F6); }
.btn-send {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: var(--blue-500, #3B82F6); color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.btn-send:hover { background: var(--blue-600, #2563EB); }

/* ---- Stage 4: Message Bubbles ---- */
.messages-loading, .messages-empty, .messages-error {
  text-align: center; color: var(--gray-400, #9CA3AF); padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1;
}
.messages-empty p { margin: 0 0 4px; font-size: 18px; }
.messages-empty small { font-size: 13px; }
.messages-error { color: #EF4444; }

.message-wrapper {
  display: flex; flex-direction: column; max-width: 75%;
  margin-bottom: 2px;
}
.message-wrapper.own { align-self: flex-end; align-items: flex-end; }
.message-wrapper.other { align-self: flex-start; align-items: flex-start; }

.message-sender-name {
  font-size: 11px; font-weight: 600; color: var(--text-caption, #8F9095);
  margin-bottom: 2px; padding-left: 12px;
}

.message-bubble {
  padding: 10px 14px; border-radius: 16px; font-size: 13px;
  line-height: 1.5; word-wrap: break-word; position: relative;
}
.message-bubble.own {
  background: var(--blue-500, #3B82F6); color: white;
  border-bottom-right-radius: 4px;
}
.message-bubble.other {
  background: white; color: var(--text-body, #3B3D45);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-bottom-left-radius: 4px;
}
.message-bubble.ai-message {
  background: #F0FDF4; border-color: #BBF7D0;
}

.message-content { white-space: pre-wrap; }

.message-time {
  font-size: 10px; margin-top: 4px; opacity: 0.7;
}
.message-bubble.own .message-time { text-align: right; color: rgba(255,255,255,0.7); }
.message-bubble.other .message-time { color: var(--gray-400, #9CA3AF); }

/* ---- Column 3: Details Panel ---- */
.central-details-panel {
  border-left: 1px solid var(--gray-200, #E5E7EB);
  background: var(--gray-50, #F9FAFB); display: flex; flex-direction: column;
}
.details-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--gray-400, #9CA3AF); text-align: center; padding: 20px;
}
.details-placeholder svg { margin-bottom: 12px; opacity: 0.4; }
.details-placeholder p { font-size: 13px; margin: 0; }

.details-content { padding: 20px; }
.details-content h4 {
  margin: 0 0 16px; font-size: 15px; font-weight: 600;
  color: var(--text-heading, #0E162F);
}
.detail-section { margin-bottom: 16px; }
.detail-section label {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-caption, #8F9095); margin-bottom: 4px;
}
.detail-section p {
  margin: 0; font-size: 13px; color: var(--text-body, #3B3D45);
}
.detail-participant {
  font-size: 13px; padding: 6px 0; color: var(--text-body, #3B3D45);
  border-bottom: 1px solid var(--gray-100, #F3F4F6);
}
.detail-participant:last-child { border-bottom: none; }
.detail-participant small { color: var(--text-caption, #8F9095); font-size: 11px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .central-container { grid-template-columns: 280px 1fr; }
  .central-details-panel { display: none; }
}
@media (max-width: 768px) {
  .central-container { grid-template-columns: 1fr; }
  .central-conversations-list { display: none; }
}

/* ---- Stage 3: Modal Styles ---- */
.central-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
}
.central-modal {
  background: white; border-radius: 12px; width: 480px;
  max-width: 90vw; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.central-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--gray-200, #E5E7EB);
}
.central-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-heading, #0E162F); }
.central-modal-close {
  width: 28px; height: 28px; border: none; background: none; font-size: 20px;
  cursor: pointer; color: var(--gray-400, #9CA3AF); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.central-modal-close:hover { background: var(--gray-100, #F3F4F6); }
.central-modal-body { padding: 20px; }
.central-form-group { margin-bottom: 16px; }
.central-form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-heading, #0E162F); margin-bottom: 6px;
}
.central-form-group input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px; font-size: 13px; outline: none;
  transition: border-color 0.2s; box-sizing: border-box;
}
.central-form-group input[type="text"]:focus { border-color: var(--blue-500, #3B82F6); }
.participants-selector {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  border: 1px solid var(--gray-200, #E5E7EB); border-radius: 8px;
  min-height: 42px; align-items: center; cursor: text; transition: border-color 0.2s;
}
.participants-selector:focus-within { border-color: var(--blue-500, #3B82F6); }
.participants-selector input {
  border: none !important; outline: none; flex: 1; min-width: 120px;
  padding: 4px 0 !important; font-size: 13px;
}
.participant-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.participant-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 16px; font-size: 12px; font-weight: 500;
}
.participant-chip.human { background: var(--blue-50, #EFF6FF); color: var(--blue-700, #1D4ED8); }
.participant-chip.ai { background: var(--green-50, #F0FDF4); color: var(--green-700, #15803D); }
.chip-remove { border: none; background: none; cursor: pointer; font-size: 14px; padding: 0 2px; color: inherit; opacity: 0.6; }
.chip-remove:hover { opacity: 1; }
.participant-dropdown {
  border: 1px solid var(--gray-200, #E5E7EB); border-radius: 8px;
  margin-top: 4px; max-height: 200px; overflow-y: auto;
  background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.participant-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: pointer; transition: background 0.15s;
}
.participant-option:hover { background: var(--gray-50, #F9FAFB); }
.participant-option-info { display: flex; flex-direction: column; }
.participant-option-info strong { font-size: 13px; color: var(--text-heading, #0E162F); }
.participant-option-info small { font-size: 11px; color: var(--text-caption, #8F9095); }
.agent-type-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.agent-type-badge.human { background: var(--blue-100, #DBEAFE); color: var(--blue-700, #1D4ED8); }
.agent-type-badge.ai { background: var(--green-100, #DCFCE7); color: var(--green-700, #15803D); }
.conv-type-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--text-caption, #8F9095); min-height: 18px; }
.conv-type-hint.active { color: var(--blue-600, #2563EB); font-weight: 500; }
.central-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px; border-top: 1px solid var(--gray-200, #E5E7EB);
}
.btn-cancel-conv {
  padding: 8px 16px; border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px; background: white; font-size: 13px;
  cursor: pointer; color: var(--text-body, #3B3D45);
}
.btn-cancel-conv:hover { background: var(--gray-50, #F9FAFB); }
.btn-create-conv {
  padding: 8px 20px; border: none; border-radius: 8px;
  background: var(--blue-500, #3B82F6); color: white;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s;
}
.btn-create-conv:hover:not(:disabled) { background: var(--blue-600, #2563EB); }
.btn-create-conv:disabled { opacity: 0.5; cursor: not-allowed; }