.n8n-agent-chat-widget {
  bottom: 24px;
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  right: 24px;
  z-index: 99999;
}

.n8n-agent-chat-toggle {
  align-items: center;
  background: #12816f;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(17, 77, 68, 0.24);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 9px;
  line-height: 1;
  letter-spacing: 0;
  padding: 14px 18px;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.n8n-agent-chat-toggle:hover,
.n8n-agent-chat-toggle:focus {
  background: #0f6f60;
  box-shadow: 0 18px 42px rgba(17, 77, 68, 0.32);
  color: #ffffff;
  transform: translateY(-1px);
}

.n8n-agent-chat-toggle__icon {
  background: #ffffff;
  border-radius: 3px;
  color: #12816f;
  font-size: 11px;
  padding: 5px 6px;
}

.n8n-agent-chat-widget.is-open .n8n-agent-chat-toggle {
  display: none;
}

.n8n-agent-chat {
  border: 1px solid #d8e5e1;
  border-radius: 6px;
  max-width: 680px;
  padding: 16px;
  background: #ffffff;
}

.n8n-agent-chat--floating {
  box-shadow: 0 22px 54px rgba(10, 45, 40, 0.22);
  box-sizing: border-box;
  max-width: none;
  padding: 0;
  overflow: hidden;
  width: 385px;
}

.n8n-agent-chat__header {
  align-items: center;
  background: #12816f;
  border-bottom: 3px solid #7cc144;
  border-radius: 6px 6px 0 0;
  color: #ffffff;
  display: grid;
  grid-template-columns: 38px 1fr 32px;
  min-height: 58px;
  padding: 0 12px;
}

.n8n-agent-chat__brand {
  align-items: center;
  background: #ffffff;
  border-radius: 4px;
  color: #12816f;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.n8n-agent-chat__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.n8n-agent-chat__title strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.n8n-agent-chat__title span {
  color: #d9f6ee;
  font-size: 11px;
  line-height: 1;
}

.n8n-agent-chat__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.n8n-agent-chat__close:hover,
.n8n-agent-chat__close:focus {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.n8n-agent-chat__messages {
  background: #f4faf8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  min-height: 120px;
  overflow-y: auto;
  padding: 4px 2px 14px;
}

.n8n-agent-chat--floating .n8n-agent-chat__messages {
  max-height: 320px;
  min-height: 280px;
  padding: 16px;
}

.n8n-agent-chat__message {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(10, 45, 40, 0.08);
  line-height: 1.45;
  max-width: 85%;
  overflow-wrap: anywhere;
  padding: 11px 13px;
  white-space: pre-wrap;
}

.n8n-agent-chat__message--user {
  align-self: flex-end;
  background: #12816f;
  border-bottom-right-radius: 3px;
  color: #ffffff;
}

.n8n-agent-chat__message--agent {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #d9e9e4;
  border-bottom-left-radius: 3px;
  color: #23312f;
}

.n8n-agent-chat__message--error {
  align-self: center;
  background: #fff6d7;
  border: 1px solid #f3d177;
  color: #665010;
}

.n8n-agent-chat__form {
  display: grid;
  gap: 10px;
}

.n8n-agent-chat--floating .n8n-agent-chat__form {
  background: #ffffff;
  border-top: 1px solid #d9e5e1;
  grid-template-columns: 1fr auto;
  padding: 12px;
}

.n8n-agent-chat__input {
  border: 1px solid #b9d5cf;
  border-radius: 5px;
  box-sizing: border-box;
  font: inherit;
  min-height: 86px;
  padding: 11px 12px;
  resize: vertical;
  width: 100%;
}

.n8n-agent-chat__input:focus {
  border-color: #12816f;
  box-shadow: 0 0 0 3px rgba(18, 129, 111, 0.14);
  outline: none;
}

.n8n-agent-chat--floating .n8n-agent-chat__input {
  min-height: 50px;
  resize: none;
}

.n8n-agent-chat__button {
  align-self: end;
  background: #7cc144;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  justify-self: end;
  min-height: 50px;
  min-width: 92px;
  padding: 0 18px;
}

.n8n-agent-chat__button:hover,
.n8n-agent-chat__button:focus {
  background: #65a936;
  color: #ffffff;
}

.n8n-agent-chat__button:disabled {
  cursor: wait;
  opacity: 0.75;
}

@media (max-width: 520px) {
  .n8n-agent-chat-widget {
    bottom: 14px;
    left: 12px;
    right: 12px;
  }

  .n8n-agent-chat-toggle {
    justify-content: center;
    width: 100%;
  }

  .n8n-agent-chat {
    padding: 12px;
  }

  .n8n-agent-chat--floating {
    padding: 0;
    width: 100%;
  }

  .n8n-agent-chat--floating .n8n-agent-chat__form {
    grid-template-columns: 1fr;
  }

  .n8n-agent-chat__message {
    max-width: 100%;
  }

  .n8n-agent-chat__button {
    justify-self: stretch;
  }
}