/* =========================
   Tokens
========================= */
:root {
  /* surfaces */
  --chat--body--background: #fff;
  --chat--footer--background: #fff;

  /* radii */
  --chat--layout--radius: 1.5rem;
  --chat--input--border-radius: 0;
  --chat--footer--radius: 2rem;
  --chat--send--radius: 2rem;

  /* message */
  --chat--message--padding: 0.75rem 1rem;
  --chat--message--border-radius: 1rem;
  --chat--input--padding: 0;
  --chat--textarea--height: 2.5rem;

  /* bot */
  --chat--message--bot--background: #f2f7fb;
  --chat--message--bot--color: #021a23;

  /* user */
  --chat--message--user--background: #021a23;
  --chat--message--user--color: var(--chat--color-white);

  /* send button */
  --chat--input--send--button--background: #021a23;
  --chat--input--send--button--color: #fff;
  --chat--input--send--button--disabled-bg: #f1f2f2;
  --chat--input--send--button--disabled-color: #5d5d5d;

  /* footer */
  --chat--footer--border: #e2e4e5;
  --chat--footer--border-focus: #dbdbdb;
  --chat--footer--shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);

  /* bot avatar */
  --chat--bot-avatar--size: 1.5rem;
  --chat--bot-avatar--gap-mobile: 2.5rem;
  --chat--bot-avatar--gap-desktop: 2rem;
  --chat--bot-avatar--bottom: 0.125rem;
  --chat--bot-avatar--url: url("/images/chatbot/avatar.webp");

  /* typing */
  --chat--typing-dot-size: 6px;
  --chat--color-typing: #021a23;
}

/* =========================
   Base
========================= */
html,
body {
  width: 100%;
  height: 100%;
}

/* =========================
   Layout
========================= */

@keyframes chat-layout-appear {
  from { opacity: 0; transform: translateY(.5rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-layout {
  background: var(--chat--body--background);
  animation: chat-layout-appear 220ms ease-out both;
  will-change: opacity, transform;
}

@media (width >= 768px) {
  .chat-layout {
    border-radius: var(--chat--layout--radius);
  }
}

.chat-layout .chat-header {
  display: none;
}

/* =========================
   Footer / input container
========================= */
.chat-layout .chat-footer {
  margin: 0;
  padding: 16px;
  border-top: 1px solid var(--chat--footer--border);
  background: var(--chat--footer--background);
  color: var(--chat--footer--color);
  box-shadow: var(--chat--footer--shadow);
}

.chat-layout .chat-footer:focus-within {
  border-color: var(--chat--footer--border-focus);
}

.chat-inputs {
  gap: .5rem;
  align-items: center !important;
}


/* =========================
   Messages (bot avatar)
========================= */
.chat-message.chat-message-from-bot {
  position: relative;
  margin-left: var(--chat--bot-avatar--gap-mobile);
}

.chat-message.chat-message-from-bot::before {
  content: "";
  position: absolute;
  width: var(--chat--bot-avatar--size);
  height: var(--chat--bot-avatar--size);
  left: calc(var(--chat--bot-avatar--gap-mobile) * -1);
  bottom: var(--chat--bot-avatar--bottom);
  border-radius: 999px;
  background: var(--chat--bot-avatar--url) center / 100% 100% no-repeat;
}

@media (width >= 768px) {
  .chat-message.chat-message-from-bot {
    width: 72%;
    margin-left: var(--chat--bot-avatar--gap-desktop);
  }

  .chat-message.chat-message-from-bot::before {
    left: calc(var(--chat--bot-avatar--gap-desktop) * -1);
  }
}

#n8n-chat[data-chat-expanded="true"] [data-js="expand-chat-container"] {
  display: none;
}

/* =========================
   Send button
========================= */
.chat-input-send-button {
  border-radius: var(--chat--send--radius);
}

.chat-input-send-button[disabled] {
  color: var(--chat--input--send--button--disabled-color);
  background: var(--chat--input--send--button--disabled-bg);
}

.chat-input-send-button svg {
  width: 20px;
  height: 20px;
}

/* =========================
   Typing indicator
========================= */

.chat-message-typing.chat-message-typing-animation-bouncing .chat-message-typing-circle {
  opacity:.35;
  transform: translateY(0);
  animation: typing-bounce 1.05s infinite ease-in-out;
}

.chat-message-typing {
  max-width: fit-content;
}

.chat-message-typing .chat-message-typing-circle {
  width: var(--chat--typing-dot-size);
  height: var(--chat--typing-dot-size);
  margin: 2px;
}

.chat-message-typing .chat-message-typing-circle:nth-child(2){ animation-delay: .15s; }
.chat-message-typing .chat-message-typing-circle:nth-child(3){ animation-delay: .30s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity:.35; }
  40%  { transform: translateY(-4px); opacity:1; }
}

.chat-message-markdown ol,
.chat-message-markdown ul {
  list-style: disc;
}