/**
 * Pod Point — n8n chat widget styling.
 *
 * Overrides @n8n/chat defaults to match Pod Point brand.
 * Custom branding (logo + close button) is injected via n8n-chat.js.
 */

/* == CSS custom properties ================================================= */
:root {
  --chat--color-primary: #14323c;
  --chat--color-primary-shade-50: #0f2731;
  --chat--color-primary-shade-100: #0a1c25;
  --chat--color-secondary: #14323c;
  --chat--color-secondary-shade-50: #0f2731;
  --chat--color-white: #ffffff;
  --chat--color-light: #f4f6f8;
  --chat--color-light-shade-50: #e8ecf0;
  --chat--color-light-shade-100: #c4c8d0;
  --chat--color-medium: #ced2d9;
  --chat--color-dark: #14323c;
  --chat--color-disabled: #888c96;
  --chat--color-typing: #404040;

  --chat--spacing: 1rem;
  --chat--border-radius: 0.875rem;
  --chat--transition-duration: 0.18s;

  --chat--window--width: 400px;
  --chat--window--height: 620px;

  --chat--header-height: auto;
  --chat--header--padding: 1.4rem 1.25rem 1.15rem;
  --chat--header--background: #14323c;
  --chat--header--color: #ffffff;
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--heading--font-size: 1.05rem;
  --chat--subtitle--font-size: 0.84rem;
  --chat--subtitle--line-height: 1.5;

  --chat--textarea--height: 52px;

  --chat--message--font-size: 0.9rem;
  --chat--message--padding: 0.65rem 0.9rem;
  --chat--message--border-radius: 0.875rem;
  --chat--message-line-height: 1.5;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #14323c;
  --chat--message--bot--border: 1px solid #e8ecf0;
  --chat--message--user--background: #14323c;
  --chat--message--user--color: #ffffff;
  --chat--message--user--border: none;

  --chat--toggle--background: #14323c;
  --chat--toggle--hover--background: #0f2731;
  --chat--toggle--active--background: #0a1c25;
  --chat--toggle--color: #ffffff;
  --chat--toggle--size: 62px;
}

.chat-heading {
  margin: 0 !important;
}

.chat-layout .chat-header h1{
  line-height: 20px !important;
  margin: 0 !important;
}

.chat-layout .chat-header p{
  margin:0 !important;
}

/* == Chat window panel ===================================================== */
#n8n-chat .chat-window {
  border-radius: 20px !important;
  box-shadow:
    0 24px 64px rgba(20, 50, 60, 0.20),
    0 8px 24px rgba(20, 50, 60, 0.12) !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 50, 60, 0.07) !important;
}

/* == Header ================================================================ */
#n8n-chat .chat-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  position: relative !important;
  padding: 1.4rem 1.25rem 1.15rem !important;
  gap: 0.75rem !important;
}

/* Title + subtitle wrapper — sits beside the logo in the row */
.pp-chat-text-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
}

#n8n-chat .chat-header .chat-heading {
  margin: 0 !important;
}

/* Hide n8n's built-in close button — replaced by .pp-chat-close */
#n8n-chat .chat-header .chat-close-button,
#n8n-chat .chat-header .chat-window-close {
  display: none !important;
}

/* Title */
#n8n-chat .chat-header-title,
#n8n-chat .chat-header .chat-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  padding-right: 44px !important;
}

/* Subtitle */
#n8n-chat .chat-header-subtitle,
#n8n-chat .chat-header .chat-subtitle {
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* == Injected: Pod Point logo ============================================== */
.pp-chat-brand {
  display: block;
  flex-shrink: 0;
  margin-bottom: 0;
  line-height: 1;
  border-radius: 100px;
  background: #fff;
  padding: 1px;
  overflow: hidden;
}

.pp-chat-brand img {
  height: 36px;
  width: auto;
  display: block;
  pointer-events: none;
}

/* == Injected: custom close button ========================================= */
.pp-chat-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

.pp-chat-close:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

.pp-chat-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6) !important;
  outline-offset: 2px !important;
}

.pp-chat-close svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* == Floating toggle button ================================================ */
#n8n-chat .chat-window-toggle {
  border-radius: 50% !important;
  box-shadow:
    0 8px 28px rgba(20, 50, 60, 0.34),
    0 2px 10px rgba(20, 50, 60, 0.20) !important;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease !important;
}

#n8n-chat .chat-window-toggle:hover {
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow:
    0 14px 38px rgba(20, 50, 60, 0.38),
    0 4px 14px rgba(20, 50, 60, 0.26) !important;
}

#n8n-chat .chat-window-toggle svg {
  width: 28px !important;
  height: 28px !important;
}

/* == Messages area ========================================================= */
#n8n-chat .chat-messages,
#n8n-chat .chat-messages-list,
#n8n-chat .chat-body {
 
}

.chat-message{
  font-size: 14px;
}

.chat-message + .chat-message{
  margin-top: 10px !important;
}

.chat-message.chat-message-from-user + .chat-message.chat-message-from-bot, .chat-message.chat-message-from-bot + .chat-message.chat-message-from-user{
  margin-top: 10px !important;
}

/* Flatten the "tail" corner on bubbles */
#n8n-chat .chat-message:not(.chat-message--from-user) .chat-message-text,
#n8n-chat .chat-message:not([data-from="user"]) .chat-message-text {
  border-bottom-left-radius: 4px !important;
}

#n8n-chat .chat-message--from-user .chat-message-text,
#n8n-chat .chat-message[data-from="user"] .chat-message-text {
  border-bottom-right-radius: 4px !important;
}

/* == Input / footer area =================================================== */
#n8n-chat .chat-footer {
  background: #ffffff !important;
  border-top: 1px solid #e8ecf0 !important;
  padding: 0.8rem 1rem !important;
}

#n8n-chat .chat-inputs-wrapper,
#n8n-chat .chat-input-wrapper {
  border: 1.5px solid #ced2d9 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#n8n-chat .chat-inputs-wrapper:focus-within,
#n8n-chat .chat-input-wrapper:focus-within {
  border-color: #14323c !important;
  box-shadow: 0 0 0 3px rgba(20, 50, 60, 0.10) !important;
}

.chat-message{
  padding: 10px 15px;
}

#n8n-chat .chat-input-field,
#n8n-chat textarea {
  background: transparent !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.9rem !important;
  color: #14323c !important;
  margin: 0 !important;
  line-height: 28px !important;
}

#n8n-chat .chat-send-button,
#n8n-chat .chat-input-send-button {
  background: #14323c !important;
  border-radius: 30px !important;
  margin: 4px !important;
  color: #ffffff !important;
  transition: background 0.15s ease !important;
  width: 35px !important;
  height: 35px !important;
}

.chat-inputs{
  border-radius: 40px !important;
  border: 1px solid #ddd !important;
  align-items: center !important;
}

#n8n-chat .chat-input-send-button svg{
  width: 18px;
  height: 18px;
}

#n8n-chat .chat-send-button:hover,
#n8n-chat .chat-input-send-button:hover {
  background: #0f2731 !important;
}

/* == Mobile ================================================================ */
@media (max-width: 480px) {
  :root {
    --chat--window--width: calc(100vw - 20px);
    --chat--window--height: calc(100dvh - 250px);
  }

  #n8n-chat .chat-window {
    border-radius: 16px !important;
  }
}

/* == Custom welcome bubble ================================================= */
.pp-chat-welcome {
  position: fixed;
  right: 20px;
  bottom: 95px;
  z-index: 9998;
  width: 260px;
  padding: 26px 18px 18px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 50, 60, 0.18);
  font-family: inherit;
  color: #14323c;
  pointer-events: auto;
  animation: pp-chat-welcome-in 0.35s ease-out both;
}

.pp-chat-welcome--hidden {
  display: none;
}

.pp-chat-welcome__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #14323c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.pp-chat-welcome__close:hover,
.pp-chat-welcome__close:focus-visible {
  background-color: rgba(20, 50, 60, 0.08);
  outline: none;
}

.pp-chat-welcome__close svg {
  width: 12px;
  height: 12px;
  display: block;
}

.pp-chat-welcome__logo {
  display: flex;
  justify-content: center;
  margin: -42px auto 10px;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 50%;
  align-items: center;
  box-shadow: 0 4px 10px rgba(20, 50, 60, 0.08);
}

.pp-chat-welcome__logo img {
  width: 26px;
  height: 26px;
  display: block;
}

.pp-chat-welcome__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #14323c;
  text-align: left;
}

.pp-chat-welcome::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  transform: rotate(45deg);
  box-shadow: 4px 4px 10px rgba(20, 50, 60, 0.06);
}

@keyframes pp-chat-welcome-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .pp-chat-welcome {
    right: 12px;
    bottom: 88px;
    width: calc(100% - 24px);
    max-width: 280px;
  }

  .pp-chat-welcome::after {
    right: 18px;
  }
}