/* ===== XIPHIAS Chat – Brand Theme (Blue: #0F2D81, Yellow: #FFC400) ===== */

/* 1) n8n chat variables */
:root,
#n8n-chat {
  --chat--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --chat--color-primary: #0F2D81;           /* brand blue */
  --chat--color-primary-shade-50: #163A9E;  /* darker blue */
  --chat--color-primary-shade-100: #0B215F; /* deepest */
  --chat--color-secondary: #FFC400;         /* brand yellow */
  --chat--color-tertiary: #2D5BC6;          /* action blue */

  --chat--color-bg: #FFFFFF;
  --chat--color-surface: #F5F7FB;
  --chat--color-border: #E3E8EF;
  --chat--radius: 14px;
}

/* 2) Right dock panel */
.chat-layout.chat-wrapper.n8n-chat {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 420px !important;
  max-width: 92vw !important;
  border-radius: var(--chat--radius) !important;
  overflow: hidden !important;
  background: var(--chat--color-bg) !important;
  font-family: var(--chat--font-family) !important;
  box-shadow: 0 18px 40px rgba(15,45,129,0.25) !important;
}

/* 3) Header – brand blue bar with yellow underline */
.n8n-chat .chat-header {
  background: #0F2D81 !important;
  color: #fff !important;
  padding: 18px 22px !important;
  border-bottom: 4px solid #FFC400 !important;
}
.n8n-chat .chat-header .chat-heading h1 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: .2px !important;
  margin: 0 0 6px 0 !important;
}
.n8n-chat .chat-header p {
  margin: 0 !important;
  opacity: .92 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* 4) Body */
.n8n-chat .chat-body { background: #FFFFFF !important; padding: 14px !important; }

/* Ensure WhatsApp-like column flow (not centered) */
.n8n-chat .chat-messages-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important; /* children control their own side */
  gap: 10px !important;
}

/* 5) Bubbles (shared) */
.n8n-chat .chat-message {
  border: 1px solid var(--chat--color-border) !important;
  padding: 10px 12px !important;
  line-height: 1.45 !important;
  font-size: 14px !important;
  word-break: break-word !important;
  flex: 0 0 auto !important;
}

/* Bot bubble – LEFT side (like WhatsApp incoming) */
.n8n-chat .chat-message-from-bot {
  background: #ECF2FF !important;            /* very light blue */
  border-left: 4px solid #2D5BC6 !important; /* action blue */
  color: #0F2D81 !important;
  align-self: flex-start !important;
  margin-left: 8px !important;
  margin-right: auto !important;

  /* auto-width bubble that hugs content */
  display: inline-block !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 78% !important;

  /* chat-like rounded corners */
  border-radius: 14px 14px 14px 6px !important; /* small bottom-left */
  text-align: left !important;
}

/* User bubble – RIGHT side (like WhatsApp outgoing) */
.n8n-chat .chat-message-from-user {
  background: #FFFFFF !important;
  border-right: 4px solid #FFC400 !important;
  color: #1C2430 !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 8px !important;

  /* auto-width so short texts sit at the far right */
  display: inline-block !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 75% !important;

  /* chat-like rounded corners */
  border-radius: 14px 14px 6px 14px !important; /* small bottom-right */
  text-align: left !important; /* keep text left inside bubble */
}

/* Make sure inner markdown never overrides left text alignment */
.n8n-chat .chat-message-from-user .chat-message-markdown,
.n8n-chat .chat-message-from-user .chat-message-markdown p,
.n8n-chat .chat-message-from-bot .chat-message-markdown,
.n8n-chat .chat-message-from-bot .chat-message-markdown p {
  text-align: left !important;
}

/* Markdown spacing */
.n8n-chat .chat-message-markdown p { margin: 0 0 6px 0 !important; }
.n8n-chat .chat-message-markdown p:last-child { margin-bottom: 0 !important; }

/* 6) Footer / Input */
.n8n-chat .chat-footer {
  background: #FAFBFF !important;
  border-top: 1px solid var(--chat--color-border) !important;
  padding: 12px !important;
}

/* Clear gap between textarea and send button */
.n8n-chat .chat-inputs {
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* input grows, button auto */
  align-items: center !important;
  column-gap: 12px !important;                /* space between them */
}
.n8n-chat .chat-inputs-controls {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
}
.n8n-chat .chat-input textarea {
  background: #FFFFFF !important;
  border: 1px solid var(--chat--color-border) !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  font-family: var(--chat--font-family) !important;
  font-size: 14px !important;
  color: #0F2D81 !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(15,45,129,0.06) inset !important;
  width: 100% !important;                     /* fill its grid cell */
}
.n8n-chat .chat-input textarea::placeholder { color: #7A8CA6 !important; }

/* Send button – brand yellow pill with blue icon */
.n8n-chat .chat-input-send-button {
  background: #FFC400 !important;
  color: #0F2D81 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;                  /* spacing handled by column-gap */
  transition: filter .15s ease !important;
  box-shadow: 0 4px 10px rgba(255,196,0,.35) !important;
}
.n8n-chat .chat-input-send-button:hover { filter: brightness(0.95) !important; }

/* 7) Scrollbar */
.n8n-chat .chat-body::-webkit-scrollbar { width: 8px; }
.n8n-chat .chat-body::-webkit-scrollbar-thumb {
  background: linear-gradient(#2D5BC6, #0F2D81) !important;
  border-radius: 8px !important;
}

/* 8) Buttons/choices rendered by n8n */
.n8n-chat .chat-message .chat-message-actions button,
.n8n-chat .chat-message a.button,
.n8n-chat .chat-message button {
  background: #2D5BC6 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
}
.n8n-chat .chat-message .chat-message-actions button:hover { filter: brightness(0.95) !important; }

/* 9) Mobile */
@media (max-width: 640px) {
    .chat-layout.chat-wrapper.n8n-chat {
        width: 90vw !important;
        height: 75vh !important;
        bottom: 80px !important;
        right: 10px !important;
        top: auto !important;
        left: auto !important;
        border-radius: 14px !important;
    }

    .n8n-chat .chat-header {
        padding: 14px !important;
    }
}