:root {
  --color-primary: #273b14;
  --color-primary-container: #3d5229;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #acc591;

  --color-secondary: #775a19;
  --color-secondary-fixed: #ffdea5;
  --color-on-secondary-container: #785a1a;

  --color-background: #fbf9f4;
  --color-on-background: #1b1c19;

  --color-surface: #fbf9f4;
  --color-on-surface: #1b1c19;
  --color-on-surface-variant: #44483e;

  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ee;
  --color-surface-container: #f0eee9;
  --color-surface-container-high: #eae8e3;
  --color-surface-container-highest: #e4e2dd;

  --color-outline: #75786d;
  --color-outline-variant: #c5c8bb;

  --color-error: #ba1a1a;

  /* Additional values used in HTML */
  --color-nav-bg: #fbf9f4;
  --color-footer-bg: #273b14;
  --color-footer-text: #fbf9f4;

  --gradient-gold: linear-gradient(135deg, #775a19 0%, #785a1a 100%);
  --art-deco-border-color: #775a19;
  --art-deco-border-opacity: 1;
}

html.dark {
  --color-primary: #e8c176;
  --color-primary-container: #2c281e;
  --color-on-primary: #131311;
  --color-on-primary-container: #e8c176;

  --color-secondary: #a3a59a;
  --color-secondary-fixed: #e8c176;
  --color-on-secondary-container: #c6c7c0;

  --color-background: #131311;
  --color-on-background: #e5e2de;

  --color-surface: #1a1a17;
  --color-on-surface: #e5e2de;
  --color-on-surface-variant: #c6c7c0;

  --color-surface-container-lowest: #0e0e0c;
  --color-surface-container-low: #181916;
  --color-surface-container: #1c1c19;
  --color-surface-container-high: #22231f;
  --color-surface-container-highest: #2c281e;

  --color-outline: #454742;
  --color-outline-variant: rgba(69, 71, 66, 0.5);

  --color-error: #ffb4ab;

  /* Additional values */
  --color-nav-bg: rgba(19, 19, 17, 0.7);
  --color-footer-bg: #0e0e0c;
  --color-footer-text: #e5e2de;

  --gradient-gold: linear-gradient(135deg, #e8c176 0%, #b89a5e 100%);
  --art-deco-border-color: rgba(232, 193, 118, 0.2);
  --art-deco-border-opacity: 0.2;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Art Deco border — used on bottle-label-style cards */
.art-deco-border {
  border-left: 1px solid var(--art-deco-border-color);
  border-right: 1px solid var(--art-deco-border-color);
}

.hero-mask {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.gold-pattern {
  background-image: linear-gradient(45deg, var(--art-deco-border-color) 25%, transparent 25%, transparent 50%, var(--art-deco-border-color) 50%, var(--art-deco-border-color) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
  opacity: 0.05;
}

.art-deco-bg {
  background-image:
    linear-gradient(45deg, transparent 45%, var(--art-deco-border-color) 45%, var(--art-deco-border-color) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--art-deco-border-color) 45%, var(--art-deco-border-color) 55%, transparent 55%);
  background-size: 60px 60px;
  background-repeat: repeat;
  opacity: 0.03;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Nav specific */
.nav-bg {
  background-color: var(--color-nav-bg);
}

html.dark .nav-bg {
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(69, 71, 66, 0.15);
}

.footer-bg {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

/* Navigation Curtain
   No enter transition — appears the instant a route change begins.
   Lifts smoothly after the new component has painted, revealing the page. */
.nav-curtain-leave-active {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-curtain-leave-to {
  opacity: 0;
}

/* Page Transition (plays hidden under the curtain as a subtle polish layer) */
.fade-slide-enter-active {
  transition: opacity 0.2s ease;
}
.fade-slide-leave-active {
  transition: opacity 0.1s ease;
}
.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
}

/* Mobile menu transition — slides down from the nav bar */
.mobile-menu-enter-active,
.mobile-menu-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-enter-from,
.mobile-menu-leave-to {
  opacity: 0;
  transform: translateY(-12px);
}

/* ─── n8n Chat Widget — Light Mode ──────────────────────────────────────────── */
html.light {
  --chat--color-primary:            #273b14;
  --chat--color-primary-shade-50:   #3d5229;
  --chat--color-primary-shade-100:  #1e2e10;
  --chat--color-secondary:          #775a19;
  --chat--color-secondary-shade-50: #634c15;
  --chat--color-white:              #fbf9f4;
  --chat--color-light:              #f0eee9;
  --chat--color-light-shade-50:     #eae8e3;
  --chat--color-light-shade-100:    #e4e2dd;
  --chat--color-medium:             #c5c8bb;
  --chat--color-dark:               #1b1c19;
  --chat--color-disabled:           #75786d;
  --chat--color-typing:             #44483e;

  --chat--border-radius:            0px;
  --chat--font-family:              'Manrope', sans-serif;

  --chat--toggle--background:        #273b14;
  --chat--toggle--hover--background: #3d5229;
  --chat--toggle--active--background:#1e2e10;
  --chat--toggle--color:             #ffffff;

  --chat--header--background:        #273b14;
  --chat--header--color:             #ffffff;

  --chat--message--bot--background:  #e4e2dd;
  --chat--message--bot--color:       #1b1c19;
  --chat--message--user--background: #3d5229;
  --chat--message--user--color:      #ffffff;

  --chat--input--background:                     #f5f3ee;
  --chat--input--container--background:          #f5f3ee;
  --chat--footer--background:                    #f5f3ee;
  --chat--footer--border-top:                    1px solid rgba(119, 90, 25, 0.2);
  --chat--footer--padding:                       0.5rem;
  --chat--input--button--border-radius:          9999px;

  --chat--input--send--button--background:       #273b14;
  --chat--input--send--button--background-hover: #3d5229;
  --chat--input--send--button--color:            #ffffff;
  --chat--input--send--button--color-hover:      #ffffff;

  --chat--message--border-radius:                12px;
}

/* Light mode: separa la ventana del fondo con layering + ambient shadow del design doc */
html.light .n8n-chat .chat-window {
  border: 1px solid rgba(119, 90, 25, 0.2);
  box-shadow: 0 20px 40px rgba(39, 59, 20, 0.06);
  border-radius: 12px;
}

/* Neutralise @tailwindcss/forms bleed into the n8n chat widget */
.n8n-chat textarea,
.n8n-chat input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

html.light .n8n-chat textarea,
html.light .n8n-chat input[type="text"] {
  color: #1b1c19 !important;
}

html.dark .n8n-chat textarea,
html.dark .n8n-chat input[type="text"] {
  color: #e5e2de !important;
}

/* ─── n8n Chat Widget — Dark Mode ───────────────────────────────────────────── */
html.dark {
  --chat--color-primary:            #e8c176;
  --chat--color-primary-shade-50:   #d4ad64;
  --chat--color-primary-shade-100:  #b89a5e;
  --chat--color-secondary:          #a3a59a;
  --chat--color-secondary-shade-50: #8a918a;
  --chat--color-white:              #e5e2de;
  --chat--color-light:              #22231f;
  --chat--color-light-shade-50:     #2c281e;
  --chat--color-light-shade-100:    #3a3428;
  --chat--color-medium:             #454742;
  --chat--color-dark:               #e5e2de;
  --chat--color-disabled:           #a3a59a;
  --chat--color-typing:             #c6c7c0;

  --chat--toggle--background:        #e8c176;
  --chat--toggle--hover--background: #d4ad64;
  --chat--toggle--active--background:#b89a5e;
  --chat--toggle--color:             #131311;

  --chat--header--background:        #2c281e;
  --chat--header--color:             #e8c176;

  --chat--message--bot--background:  #2c281e;
  --chat--message--bot--color:       #e5e2de;
  --chat--message--user--background: #3a3428;
  --chat--message--user--color:      #e8c176;

  --chat--input--background:                     #1c1c19;
  --chat--input--container--background:          #1c1c19;
  --chat--footer--background:                    #1c1c19;
  --chat--footer--border-top:                    1px solid rgba(232, 193, 118, 0.15);
  --chat--footer--padding:                       0.5rem;
  --chat--input--button--border-radius:          9999px;

  --chat--input--send--button--background:       #e8c176;
  --chat--input--send--button--background-hover: #d4ad64;
  --chat--input--send--button--color:            #131311;
  --chat--input--send--button--color-hover:      #131311;

  --chat--message--border-radius:                12px;
}

/* Dark mode: separa la ventana del fondo con layering + ambient shadow del design doc */
html.dark .n8n-chat .chat-window {
  border: 1px solid rgba(232, 193, 118, 0.2);
  box-shadow: 0 20px 40px rgba(232, 193, 118, 0.06);
  border-radius: 12px;
}

/* Send button: centrado visual y estado disabled con fondo */
.chat-input-send-button {
  margin: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

.chat-input-send-button svg {
  transform: translateX(2px);
}

html.light .chat-input-send-button[disabled] {
  background-color: #c5c8bb !important;
}

html.dark .chat-input-send-button[disabled] {
  background-color: #454742 !important;
}

/* ─── Chat Unavailable Widget ───────────────────────────────────────────────── */
.chat-unavail-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Manrope', sans-serif;
}

/* Toggle button — same size as n8n chat toggle */
.chat-unavail-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.chat-unavail-toggle:hover {
  background-color: var(--color-primary-container);
  transform: scale(1.06);
}

/* Panel window — matches n8n chat window proportions */
.chat-unavail-window {
  width: 380px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
}

html.light .chat-unavail-window {
  border: 1px solid rgba(119, 90, 25, 0.2);
  box-shadow: 0 20px 40px rgba(39, 59, 20, 0.06);
}

html.dark .chat-unavail-window {
  border: 1px solid rgba(232, 193, 118, 0.2);
  box-shadow: 0 20px 40px rgba(232, 193, 118, 0.06);
}

/* Header — mirrors n8n chat header */
.chat-unavail-header {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chat-unavail-header-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.chat-unavail-close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.chat-unavail-close:hover { opacity: 1; }

.chat-unavail-close .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* Body */
.chat-unavail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px 32px;
  text-align: center;
}

/* Sleeping robot */
.chat-unavail-robot {
  width: 120px;
  height: 144px;
  color: var(--color-primary);
  animation: chat-robot-float 4s ease-in-out infinite;
}

.chat-unavail-robot .zzz-group {
  animation: chat-zzz-pulse 2.5s ease-in-out infinite;
}

.chat-unavail-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.5;
  max-width: 260px;
}

.chat-unavail-message {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  max-width: 260px;
}

/* Panel slide-up + fade transition */
.chat-unavail-slide-enter-active,
.chat-unavail-slide-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.chat-unavail-slide-enter-from,
.chat-unavail-slide-leave-to {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

/* Robot floats gently up and down */
@keyframes chat-robot-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Zzz fades in and out */
@keyframes chat-zzz-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}