/**
 * AI Sales Assistant — Chat Widget Styles (Image 1 Aesthetic + Custom Preferences)
 * Uses CSS custom properties set dynamically by PHP/JS.
 *
 * @package AI_Sales_Assistant
 */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  --asa-primary:        #1c1c1e;
  --asa-accent:         #a8ae98;
  --asa-secondary:      #a8ae98;
  --asa-width:          380px;
  --asa-radius:         28px;
  --asa-radius-msg:     18px;
  --asa-shadow:         0 24px 80px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.3);
  --asa-shadow-sm:      0 4px 16px rgba(0,0,0,.2);
  --asa-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --asa-anim-speed:     .28s;
  --asa-ease:           cubic-bezier(.4,0,.2,1);
  --asa-bg:             #1c1c1e;
  --asa-surface:        #1c1c1e;
  --asa-border:         rgba(255,255,255,.1);
  --asa-text:           #ffffff;
  --asa-text-muted:     #a1a1aa;
  --asa-user-bg:        #3a3a3e;
  --asa-user-text:      #ffffff;
  --asa-bot-bg:         #2c2c2e;
  --asa-bot-text:       #f4f4f5;
  --asa-z:              999999;
}

/* ── Reset & Theme Override Isolation ─────────────────────────────────────── */
#asa-chat-widget *,
#asa-chat-widget *::before,
#asa-chat-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#asa-chat-widget {
  font-family: var(--asa-font);
  position: fixed;
  z-index: var(--asa-z);
}

/* ── Position Variants (Including Middle / Center) ────────────────────────── */
.asa-launcher.asa--bottom { bottom: 24px; }
.asa-launcher.asa--top    { top: 24px; }
.asa-launcher.asa--right  { right: 24px; }
.asa-launcher.asa--left   { left: 24px; }
.asa-launcher.asa--center { left: 50% !important; right: auto !important; transform: translateX(-50%); }

.asa-window.asa--bottom.asa--right  { bottom: 92px; right: 24px; }
.asa-window.asa--bottom.asa--left   { bottom: 92px; left: 24px; }
.asa-window.asa--top.asa--right     { top: 92px;    right: 24px; }
.asa-window.asa--top.asa--left      { top: 92px;    left: 24px; }

/* Middle / Center window position */
.asa-window.asa--bottom.asa--center {
  bottom: 92px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(16px) scale(.97);
}

.asa-window.asa--bottom.asa--center.asa--visible {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Launcher Bubble (GIF Support) ────────────────────────────────────────── */
.asa-launcher {
  position: fixed;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--asa-primary);
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform var(--asa-anim-speed) var(--asa-ease),
              box-shadow var(--asa-anim-speed) var(--asa-ease);
  overflow: hidden;
}

.asa-launcher:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}

.asa-launcher.asa--center:hover {
  transform: translateX(-50%) scale(1.08);
}

.asa-launcher__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: absolute;
  transition: opacity var(--asa-anim-speed) var(--asa-ease),
              transform var(--asa-anim-speed) var(--asa-ease);
}

.asa-launcher__icon-close {
  width: 26px;
  height: 26px;
  color: #fff;
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(.7);
  transition: opacity var(--asa-anim-speed) var(--asa-ease),
              transform var(--asa-anim-speed) var(--asa-ease);
}

.asa-launcher.asa--open .asa-launcher__img {
  opacity: 0;
  transform: rotate(90deg) scale(.7);
}
.asa-launcher.asa--open .asa-launcher__icon-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Unread badge */
.asa-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #a8ae98;
  color: #1c1c1e;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  padding: 0 5px;
  border: 2px solid #1c1c1e;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s var(--asa-ease), transform .2s var(--asa-ease);
  z-index: 10;
}

.asa-badge.asa--visible {
  opacity: 1;
  transform: scale(1);
}

/* Pulse animation */
@keyframes asa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,174,152,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(168,174,152,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,174,152,0); }
}
.asa-launcher.asa--pulse { animation: asa-pulse .9s var(--asa-ease); }

/* ── Chat Window (4px All-Side Padding Frame & #a8ae98 Header) ───────────── */
.asa-window {
  position: fixed;
  width: var(--asa-width);
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 110px);
  border-radius: var(--asa-radius);
  background: var(--asa-bg);
  box-shadow: var(--asa-shadow);
  border: 1px solid var(--asa-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px; /* 4px padding frame on all sides */

  /* Hidden state */
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity var(--asa-anim-speed) var(--asa-ease),
              transform var(--asa-anim-speed) var(--asa-ease),
              width var(--asa-anim-speed) var(--asa-ease),
              height var(--asa-anim-speed) var(--asa-ease);
}

.asa-window.asa--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Expanded state */
.asa-window.asa-window--expanded {
  width: 560px !important;
  height: 740px !important;
  max-height: calc(100vh - 60px) !important;
}

/* Mobile full-screen */
@media (max-width: 480px) {
  .asa-window {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
  }
}

/* ── Header (#a8ae98 background) ─────────────────────────────────────────── */
#asa-chat-widget .asa-header {
  background: #a8ae98 !important;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: none;
  border-top-left-radius: calc(var(--asa-radius) - 4px);
  border-top-right-radius: calc(var(--asa-radius) - 4px);
}

.asa-header__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asa-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.asa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  border: 1.5px solid rgba(28,28,30,.2);
}

.asa-header__text { display: flex; flex-direction: column; gap: 2px; }
#asa-chat-widget .asa-header__name {
  color: #1c1c1e !important;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.2px;
  -webkit-text-fill-color: #1c1c1e !important;
}

.asa-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

#asa-chat-widget .asa-header__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s;
  flex-shrink: 0;
  color: #1c1c1e !important;
  text-decoration: none;
}
#asa-chat-widget .asa-header__btn:hover {
  background: rgba(28,28,30,.15) !important;
  color: #000000 !important;
}
#asa-chat-widget .asa-header__btn svg {
  width: 18px;
  height: 18px;
  stroke: #1c1c1e !important;
}

/* ── Messages Area ────────────────────────────────────────────────────────── */
#asa-chat-widget .asa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 40px 14px !important; /* Generous 40px bottom padding */
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  background: var(--asa-surface);

  /* Completely hide vertical scrollbars for a clean look */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#asa-chat-widget .asa-messages::-webkit-scrollbar {
  display: none;
}

/* ── Welcome Hero Section (Light Text Enforced) ──────────────────────────── */
.asa-welcome-hero {
  padding: 4px 0 12px 0;
  animation: asa-slide-in .25s var(--asa-ease) both;
}

#asa-chat-widget .asa-welcome-hero__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: -.2px !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  text-transform: none !important;
}

#asa-chat-widget .asa-welcome-hero__subtitle {
  font-size: 14px !important;
  color: rgba(255,255,255,.75) !important;
  margin-bottom: 22px !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255,255,255,.75) !important;
}

/* ── Predefined Query Chips (#a8ae98 Border & Light Text Enforced) ────────── */
.asa-query-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 8px;
  animation: asa-slide-in .28s var(--asa-ease) both;
}

#asa-chat-widget .asa-chip-btn {
  background: transparent !important;
  border: 1px solid #a8ae98 !important;
  border-radius: 24px !important;
  padding: 9px 18px !important;
  color: #ffffff !important;
  font-family: var(--asa-font) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background .18s, border-color .18s, transform .15s !important;
  line-height: 1.25 !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-transform: none !important;
}

#asa-chat-widget .asa-chip-btn:hover {
  background: rgba(168,174,152,0.2) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

#asa-chat-widget .asa-chip-btn:active {
  transform: translateY(0) !important;
}

/* ── Message Bubbles (Side Padding Frame to Prevent Edge Touching) ───────── */
#asa-chat-widget .asa-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88% !important;
  margin: 0 4px !important; /* 4px gap so bubbles never stick to window walls */
  animation: asa-slide-in .22s var(--asa-ease) both;
}

@keyframes asa-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.asa-msg--animating { animation: none; opacity: 0; transform: translateY(8px); }

#asa-chat-widget .asa-msg--user {
  align-self: flex-end !important;
  flex-direction: row-reverse;
  margin-left: auto !important;
  margin-right: 4px !important;
}

#asa-chat-widget .asa-msg--bot {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 4px !important;
}

.asa-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
}

#asa-chat-widget .asa-msg__bubble {
  padding: 12px 16px !important; /* 2px extra internal padding on all sides */
  border-radius: var(--asa-radius-msg);
  max-width: 100%;
  word-break: break-word;
}

.asa-msg--user .asa-msg__bubble {
  background: var(--asa-user-bg);
  color: var(--asa-user-text);
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
}

.asa-msg--bot .asa-msg__bubble {
  background: var(--asa-bot-bg);
  color: var(--asa-bot-text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--asa-shadow-sm);
  border: 1px solid rgba(255,255,255,.05);
}

.asa-msg__text {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: inherit;
}

.asa-msg__text strong { font-weight: 600; color: #fff; }
.asa-msg__text em     { font-style: italic; }
.asa-msg__text code   { font-family: monospace; background: rgba(255,255,255,.1); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

.asa-msg__time {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  opacity: .5;
  text-align: right;
}

.asa-msg--bot .asa-msg__time { text-align: left; }

.asa-link {
  color: #a8ae98;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

/* ── Typing Indicator ─────────────────────────────────────────────────────── */
.asa-typing-row {
  animation: asa-slide-in .22s var(--asa-ease) both;
}

.asa-typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  background: var(--asa-bot-bg);
  border-radius: var(--asa-radius-msg);
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.asa-typing-indicator span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--asa-text-muted);
  animation: asa-bounce 1.2s infinite;
}

.asa-typing-indicator span:nth-child(2) { animation-delay: .15s; }
.asa-typing-indicator span:nth-child(3) { animation-delay: .30s; }

@keyframes asa-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .6; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Product Carousel Component (With Generous Bottom Space) ──────────────── */
#asa-chat-widget .asa-carousel-container {
  position: relative;
  width: 100%;
  margin: 12px 0 36px 0 !important; /* 36px bottom space under carousel */
  animation: asa-slide-in .28s var(--asa-ease) both;
}

.asa-carousel-container--welcome {
  margin-top: 6px !important;
  margin-bottom: 28px !important;
}

.asa-carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.asa-carousel-track::-webkit-scrollbar {
  display: none;
}

.asa-carousel-card {
  flex: 0 0 140px;
  width: 140px;
  background: transparent;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--asa-ease);
}

.asa-carousel-card:hover {
  transform: translateY(-3px);
}

.asa-carousel-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #ffffff !important;
  width: 100%;
}

.asa-carousel-card__img-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 24px;
  overflow: hidden;
  background: #262628;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  flex-shrink: 0;
}

.asa-carousel-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.asa-product__oos-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

#asa-chat-widget .asa-carousel-card__title {
  margin-top: 8px;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  display: block !important;
  opacity: .95 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.asa-carousel-card__link:hover .asa-carousel-card__title {
  color: #a8ae98 !important;
  -webkit-text-fill-color: #a8ae98 !important;
}

.asa-carousel-nav {
  position: absolute;
  top: 70px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(45,45,50,.92);
  border: 1px solid rgba(255,255,255,.25);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
  transition: transform .18s, background .18s;
  z-index: 10;
}

.asa-carousel-nav--prev {
  left: -6px;
}

.asa-carousel-nav--next {
  right: -6px;
}

.asa-carousel-nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(60,60,65,1);
}

.asa-carousel-nav svg {
  width: 16px;
  height: 16px;
}

/* ── Predefined Query Chips Slider (Horizontal Slider Track) ──────────────── */
.asa-chips-slider-outer {
  position: relative;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 12px;
}

#asa-chat-widget .asa-query-chips-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 4px 2px 8px 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#asa-chat-widget .asa-query-chips-wrap::-webkit-scrollbar {
  display: none !important;
}

#asa-chat-widget .asa-chip-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.asa-chips-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(45,45,50,.92);
  border: 1px solid #a8ae98;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  transition: transform .18s;
  z-index: 10;
}

.asa-chips-nav--prev {
  left: -6px;
}

.asa-chips-nav--next {
  right: -6px;
}

.asa-chips-nav:hover {
  transform: translateY(-50%) scale(1.1);
}

.asa-chips-nav svg {
  width: 14px;
  height: 14px;
}

/* ── Footer / Input Bar (#a8ae98 Send Button & Constant Field BG) ─────────── */
.asa-footer {
  padding: 12px 18px 14px 18px;
  background: #1c1c1e;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: none;
  border-bottom-left-radius: calc(var(--asa-radius) - 4px);
  border-bottom-right-radius: calc(var(--asa-radius) - 4px);
}

#asa-chat-widget .asa-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07) !important; /* Constant background color */
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 28px;
  padding: 4px 6px 4px 18px;
  transition: border-color .2s;
}

/* Do NOT change background color when selected/focused */
#asa-chat-widget .asa-input-row:focus-within {
  background: rgba(255,255,255,.07) !important;
  border-color: #a8ae98 !important;
}

.asa-input {
  flex: 1;
  border: none;
  background: transparent !important;
  font-family: var(--asa-font);
  font-size: 14px;
  color: #ffffff !important;
  resize: none;
  outline: none;
  max-height: 100px;
  line-height: 1.4;
  padding: 7px 0;
  -webkit-text-fill-color: #ffffff !important;
}

.asa-input:focus {
  background: transparent !important;
}

.asa-input::placeholder {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
}

#asa-chat-widget .asa-send {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #a8ae98 !important; /* #a8ae98 send button circle background */
  border: none !important;
  color: #1c1c1e !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform .18s var(--asa-ease), opacity .18s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

#asa-chat-widget .asa-send:hover:not(:disabled) {
  transform: scale(1.08) !important;
}

#asa-chat-widget .asa-send:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

#asa-chat-widget .asa-send svg {
  width: 18px !important;
  height: 18px !important;
  color: #1c1c1e !important;
  stroke: #1c1c1e !important;
  fill: none !important;
  display: block !important;
  margin: auto !important;
}

.asa-footer__actions {
  display: flex;
  justify-content: center;
}

.asa-handoff-link {
  background: transparent;
  border: none;
  color: var(--asa-text-muted) !important;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .15s;
}
.asa-handoff-link:hover { color: #fff !important; text-decoration: underline; }