/* ===== Alap változók (JS felülírja témánként) ===== */
.n8n-chat-widget {
  --chat--color-primary: #0084ff;
  --chat--color-secondary: #e4e6eb;
  --chat--color-white: #ffffff;
  --chat--color-light: #f2f3f5;
  --chat--color-dark: #1c1e21;
  --chat--brand-accent: #0066cc; /* fejléc gradiens 2. színe */
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}

/* Opcionális: sötét téma finomhangolások */
.n8n-chat-widget.theme-dark .chat-message.bot { background: #1a1a1a; border-color: #333; color: #ddd; }
.n8n-chat-widget.theme-dark .typing-indicator { background: #1a1a1a; border-color: #333; color: #aaa; }
.n8n-chat-widget.theme-dark .chat-input { background: #181818; border-top-color: #333; }
.n8n-chat-widget.theme-dark .chat-message.operator { background: #3a320f; border-color: #c59c00; color: #f2d56b; }
.n8n-chat-widget.theme-dark .chat-message.operator::before { background: #c59c00; color: #1a1a1a; }

/* ===== Gomb, konténer ===== */
.n8n-chat-widget .chat-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--chat--color-primary); color: #fff; border: none; cursor: pointer; font-size: 28px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .2s;
}
.n8n-chat-widget .chat-toggle:hover { transform: scale(1.05); }

.n8n-chat-widget .chat-container {
  display: none; flex-direction: column; width: 380px; height: 600px;
  background: var(--chat--color-white); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.15);
  border: 2px solid var(--chat--color-primary); overflow: hidden;
}
.n8n-chat-widget .chat-container.open { display: flex; }

/* ===== Fejléc ===== */
.n8n-chat-widget .brand-header {
  padding: 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--chat--color-secondary);
  background: linear-gradient(135deg, var(--chat--color-primary), var(--chat--brand-accent));
  color: #fff;
}
.n8n-chat-widget .brand-header img { filter: brightness(0) invert(1); }
.n8n-chat-widget .close-button { margin-left: auto; background: none; border: none; font-size: 24px; cursor: pointer; color: #fff; transition: transform .2s; }
.n8n-chat-widget .close-button:hover { transform: rotate(90deg); }

/* ===== Üzenetlista ===== */
.n8n-chat-widget .chat-messages {
  flex: 1; padding: 16px; overflow-y: auto; background: var(--chat--color-light);
  display: flex; flex-direction: column; gap: 8px;
}
.n8n-chat-widget .chat-message {
  max-width: 75%; padding: 12px 16px; border-radius: 16px; line-height: 1.4; word-wrap: break-word; font-size: 14px; white-space: pre-wrap; animation: fadeIn .3s ease-in;
}
@keyframes fadeIn { from {opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }

.n8n-chat-widget .chat-message.user { align-self: flex-end; background: var(--chat--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.n8n-chat-widget .chat-message.bot { align-self: flex-start; background: var(--chat--color-white); border: 1px solid var(--chat--color-secondary); color: var(--chat--color-dark); border-bottom-left-radius: 4px; }
.n8n-chat-widget .chat-message.operator { align-self: flex-start; background: #fff3cd; border: 1px solid #ffc107; color: #856404; border-bottom-left-radius: 4px; position: relative; }
.n8n-chat-widget .chat-message.operator::before { content: '👤 Operátor'; font-size: 10px; position: absolute; top: -8px; left: 10px; background: #ffc107; color: #856404; padding: 2px 6px; border-radius: 4px; }

/* ===== Input ===== */
.n8n-chat-widget .chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--chat--color-secondary); background: #fff; }
.n8n-chat-widget .chat-input textarea { flex: 1; padding: 10px; border: 1px solid var(--chat--color-secondary); border-radius: 8px; resize: none; font-family: inherit; font-size: 14px; outline: none; }
.n8n-chat-widget .chat-input textarea:focus { border-color: var(--chat--color-primary); }
.n8n-chat-widget .chat-input button { background: var(--chat--color-primary); color: #fff; border: none; border-radius: 8px; padding: 0 20px; cursor: pointer; font-family: inherit; font-weight: 500; transition: background .2s; }
.n8n-chat-widget .chat-input button:hover:not(:disabled) { filter: brightness(.95); }
.n8n-chat-widget .chat-input button:disabled { opacity: .5; cursor: not-allowed; }

/* ===== "Gépel" jelző ===== */
.n8n-chat-widget .typing-indicator { align-self: flex-start; padding: 12px 16px; background: var(--chat--color-white); border: 1px solid var(--chat--color-secondary); border-radius: 16px; border-bottom-left-radius: 4px; font-style: italic; color: #666; }
.n8n-chat-widget .typing-indicator::after { content: '...'; animation: dots 1.5s infinite; }
@keyframes dots { 0%,20%{content:'.'} 40%{content:'..'} 60%,100%{content:'...'} }

/* ===== Kapcsolat státusz ===== */
.n8n-chat-widget .connection-status { padding: 4px 8px; font-size: 11px; text-align: center; background: #28a745; color: #fff; }
.n8n-chat-widget .connection-status.error { background: #dc3545; }
.n8n-chat-widget .connection-status.waiting { background: #ffc107; color: #000; }