/* =========================================
   Custom n8n Chat Overrides
   ========================================= */
:root {
  /* === Custom Chat Theme Variables === */
  --chat--color-primary: #e74266;
  --chat--color-primary-shade-50: #db4061;
  --chat--color-primary-shade-100: #cf3c5c;
  --chat--color-secondary: #20b69e;
  --chat--color-secondary-shade-50: #1ca08a;
  --chat--color-white: #ffffff;
  --chat--color-light: #f2f4f8;
  --chat--color-light-shade-50: #222;
  --chat--color-light-shade-100: #c2c5cc;
  --chat--color-medium: #d2d4d9;
  --chat--color-dark: #101330;
  --chat--color-disabled: #777980;
  --chat--color-typing: #404040;

  --chat--spacing: 1rem;
  --chat--border-radius: 0.25rem; /* Adjust to match your container */
  --chat--transition-duration: 0.15s;

  /* Container size for the chat in "window" mode */
  --chat--window--width: 400px;
  --chat--window--height: 600px;

  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: rgba(0, 0, 0, 0.85);
  --chat--header--color: var(--chat--color-light);
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--heading--font-size: 2em;
  --chat--subtitle--font-size: inherit;
  --chat--subtitle--line-height: 1.8;

  --chat--textarea--height: 50px;

  --chat--message--font-size: 1rem;
  --chat--message--padding: var(--chat--spacing);
  --chat--message--border-radius: var(--chat--border-radius);
  --chat--message-line-height: 1.8;
  --chat--message--bot--background: var(--chat--color-white);
  --chat--message--bot--color: var(--chat--color-dark);
  --chat--message--bot--border: none;
  --chat--message--user--background: #00ffff;
  --chat--message--user--color: #0a0a0b;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.05);

  --chat--toggle--background: var(--chat--color-primary);
  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
  --chat--toggle--color: var(--chat--color-white);
  --chat--toggle--size: 64px;

  /* Optional: override widget background if needed */
  --chat--background: #222;
}

/* Hide the "Powered by n8n" branding */
.chat-powered-by {
  display: none !important;
}

/* Hide any default floating toggle button if it appears */
#chat-modal .chat-toggle {
  display: none !important;
}

/* Center the chat header title */
.chat-header h1 {
  text-align: center;
  margin: 0 auto;
}

/* Fix the overall chat modal height */
#chat-modal {
  height: 600px !important;
  max-height: 600px !important;
}

/* Ensure the chat container fills the modal without growing */
#chat-modal .chat-container {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

/* Lock the chat box height so that new messages cause scrolling, not stretching */
#chat-modal .chat-box {
  flex: 0 0 300px !important; /* Fixed height of 300px */
  max-height: 300px !important;
  overflow-y: auto !important;
  background: #222 !important;
  padding: 15px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Ensure the input area remains fixed below the chat box */
#chat-modal .chat-input-container {
  flex: 0 0 auto !important;
}

/* =========================================
     Additional Chat Layout Overrides
     ========================================= */
.chat-layout .chat-body {
  background: var(--chat--body--background, var(--chat--color-light));
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  min-height: 100px;
  border-radius: 4px;
}

.chat-layout .chat-footer {
  border-top: rgba(0, 0, 0, 0.85);
  background: rgba(0, 0, 0, 0.85);
  color: var(--chat--footer--color, var(--chat--color-dark));
}

/* Ensure the input area remains fixed below the chat box */
#chat-modal .chat-input-container {
  flex: 0 0 auto !important;
}

/* ===============================
   Custom Chat Input Overrides
   =============================== */

/* Target the chat textarea element */
.chat-inputs textarea[data-v-2a7fb1c3] {
  font-family: inherit;
  font-size: var(--chat--input--font-size, 1rem);
  width: 100%;
  border: var(--chat--input--border, 1px solid #00ffff);
  border-radius: var(--chat--input--border-radius, 6px);
  padding: 0.8rem;
  /* Calculate padding-right to account for control button(s) */
  padding-right: calc(
    0.8rem + var(--controls-count, 1) * var(--chat--textarea--height)
  );
  min-height: var(--chat--textarea--height, 50px);
  max-height: var(--chat--textarea--max-height, 50px);
  height: 100%;
  background: var(--chat--input--background, #222);
  resize: var(--chat--textarea--resize, none);
  color: var(--chat--input--text-color, #f9fafb);
  outline: none;
}

/* Optional: Customize the send button */
.chat-input-send-button {
  background: none !important;
  border: none;
  border-radius: 50%;
  color: var(--chat--color-white);
  width: var(--chat--textarea--height);
  height: var(--chat--textarea--height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Adjust the SVG icon size inside the send button */
.chat-input-send-button svg {
  width: 26px;
  height: 26px;
}

/* Style for the chat modal close button */
.chat-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #00ffff;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2001; /* Ensure the button is on top of the chat content */
}