/* Food Ladder Chat Widget — IBM Carbon "AI Chat" pattern
   Interactive elements use cds-* web components; this file = layout + theme tokens. */

/* ─── Embedded / inline mode (for Framer or any iframe) ───
   Hides the floating launcher; shows a centred chat panel capped at ~400×640
   so it stays narrow like the standalone widget, even in a wide frame. */
#fl-chat-root.fl-embedded {
  display: flex;
  align-items: center;
  justify-content: center;
}
#fl-chat-root.fl-embedded #fl-launcher,
#fl-chat-root.fl-embedded #fl-minimize { display: none; }
#fl-chat-root.fl-embedded #fl-window {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 640px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ─── Carbon design tokens (green-accented AI theme) ─── */
#fl-chat-root,
#fl-window,
#fl-window * {
  --cds-interactive: #198038;
  --cds-focus: #0f62fe;
  --cds-button-primary: #198038;
  --cds-button-primary-hover: #0e6027;
  --cds-button-primary-active: #0a4620;
  --cds-button-tertiary: #198038;
  --cds-button-tertiary-hover: #0e6027;
  --cds-link-primary: #198038;
  --cds-link-primary-hover: #0e6027;
  --cds-background: #ffffff;
  --cds-layer-01: #f4f4f4;
  --cds-border-subtle-01: #e0e0e0;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;

  --fl-green-60: #198038;
  --fl-green-70: #0e6027;
  --fl-green-50: #24a148;
  --fl-green-10: #defbe6;
  --fl-green-20: #a7f0ba;

  --s-02: 0.25rem;
  --s-03: 0.5rem;
  --s-04: 0.75rem;
  --s-05: 1rem;
  --s-06: 1.5rem;
  --s-07: 2rem;
}

/* :where() keeps the reset at specificity 0 so class-based padding/margin rules below always win */
:where(#fl-chat-root *) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ─── Launcher (FAB) ─── */
#fl-launcher {
  position: fixed;
  bottom: var(--s-06);
  right: var(--s-06);
  width: 56px;
  height: 56px;
  background: var(--fl-green-60);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.24);
  transition: background 0.1s ease;
}
#fl-launcher:hover { background: var(--fl-green-70); }
#fl-launcher:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
#fl-launcher svg { width: 24px; height: 24px; fill: #fff; pointer-events: none; }
#fl-launcher .fl-icon-close { display: none; }
#fl-launcher.open .fl-icon-chat  { display: none; }
#fl-launcher.open .fl-icon-close { display: block; }

#fl-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: #da1e28;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px; font-weight: 600;
  color: #fff;
  padding: 0 4px;
  border: 2px solid #fff;
}
#fl-badge.visible { display: flex; }

/* ─── Chat window ─── */
#fl-window {
  position: fixed;
  bottom: 88px;
  right: var(--s-06);
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 104px);
  background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-01);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9998;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.15s ease;
}
#fl-window.open { transform: translateY(0); opacity: 1; pointer-events: all; }

/* Carbon AI gradient — signature left edge accent */
#fl-window::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--fl-green-50) 0%, var(--fl-green-20) 40%, rgba(167,240,186,0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ─── Header (minimal, light) ─── */
#fl-header {
  display: flex;
  align-items: center;
  gap: var(--s-04);
  padding: var(--s-04) var(--s-05);
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  flex-shrink: 0;
}
.fl-avatar {
  width: 32px; height: 32px;
  background: var(--fl-green-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.fl-avatar svg { width: 18px; height: 18px; fill: var(--fl-green-60); }
.fl-header-text { flex: 1; min-width: 0; }
.fl-header-text h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  letter-spacing: 0.16px;
  line-height: 1.29;
}
.fl-header-meta { display: flex; align-items: center; gap: var(--s-02); margin-top: 1px; }
.fl-status-dot { width: 6px; height: 6px; background: var(--fl-green-50); border-radius: 50%; }
.fl-header-text p { font-size: 0.75rem; color: var(--cds-text-secondary); letter-spacing: 0.32px; }
.fl-header-actions { display: flex; align-items: center; gap: var(--s-02); }
.fl-header-actions cds-ai-label { margin-right: var(--s-02); }
.fl-icon-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cds-text-secondary);
}
.fl-icon-btn:hover { background: var(--cds-layer-01); }
.fl-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ─── Messages region ─── */
#fl-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-05);
  display: flex;
  flex-direction: column;
  gap: var(--s-06);
  scroll-behavior: smooth;
  position: relative;
  /* subtle AI gradient wash */
  background:
    radial-gradient(120% 60% at 0% 100%, rgba(36,161,72,0.05) 0%, rgba(255,255,255,0) 60%),
    var(--cds-background);
}
#fl-messages::-webkit-scrollbar { width: 4px; }
#fl-messages::-webkit-scrollbar-track { background: transparent; }
#fl-messages::-webkit-scrollbar-thumb { background: #c6c6c6; }

/* ─── Message blocks ─── */
.fl-msg {
  display: flex;
  flex-direction: column;
  gap: var(--s-03);
  animation: fl-msg-in 0.16s ease-out;
}
@keyframes fl-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sender row: avatar + name + timestamp (assistant) */
.fl-msg-head {
  display: flex;
  align-items: center;
  gap: var(--s-03);
}
.fl-msg-head .fl-sender-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--fl-green-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fl-msg-head .fl-sender-avatar svg { width: 12px; height: 12px; fill: var(--fl-green-60); }
.fl-sender-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  letter-spacing: 0.16px;
}
.fl-sender-time {
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
  letter-spacing: 0.32px;
}

/* Assistant body — plain text, no bubble */
.fl-msg.assistant .fl-msg-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cds-text-primary);
  letter-spacing: 0.16px;
  padding-left: calc(20px + var(--s-03)); /* align under avatar */
}
.fl-msg.assistant .fl-msg-body p { margin-bottom: var(--s-04); }
.fl-msg.assistant .fl-msg-body p:last-child { margin-bottom: 0; }
.fl-msg.assistant .fl-msg-body ul { padding-left: var(--s-05); margin: var(--s-03) 0; }
.fl-msg.assistant .fl-msg-body li { margin-bottom: var(--s-02); }
.fl-msg.assistant .fl-msg-body strong { font-weight: 600; }
.fl-msg.assistant .fl-msg-body a { color: var(--fl-green-60); text-decoration: underline; }

/* Greeting heading treatment (first assistant message) */
.fl-msg-body .fl-greeting-h {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cds-text-primary);
  margin: var(--s-02) 0 var(--s-03);
}
.fl-msg-body .fl-greeting-sub {
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
}

/* User message — right aligned, grey rounded bubble */
.fl-msg.user { align-items: flex-end; }
.fl-msg.user .fl-msg-head { justify-content: flex-end; }
.fl-msg.user .fl-msg-body {
  background: #e8e8e8;
  color: var(--cds-text-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.16px;
  padding: var(--s-04) var(--s-05);
  border-radius: 8px;
  max-width: 85%;
}

/* ─── Typing indicator ─── */
.fl-typing { display: flex; flex-direction: column; gap: var(--s-03); }
.fl-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: calc(20px + var(--s-03));
}
.fl-typing-dots span {
  width: 6px; height: 6px;
  background: var(--fl-green-50);
  border-radius: 50%;
  animation: fl-bounce 1.2s infinite;
}
.fl-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.fl-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fl-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ─── Suggestion buttons (cds-chat-button) ─── */
#fl-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-03);
  padding-left: calc(20px + var(--s-03));
  margin-top: var(--s-02);
}
/* Pre-provided suggestion chips — custom buttons that WRAP (long labels never
   overflow horizontally, unlike the Carbon chat-button's nowrap inner button). */
.fl-chip {
  display: inline-block;
  max-width: 100%;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  padding: var(--s-03) var(--s-05);
  background: var(--cds-background);
  border: 1px solid var(--fl-green-60);
  border-radius: 18px;
  color: var(--fl-green-60);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.fl-chip:hover { background: var(--fl-green-60); color: #fff; }
.fl-chip:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 1px; }

/* ─── Inline cards (brief / email) ─── */
.fl-card {
  padding-left: calc(20px + var(--s-03));
}
.fl-card-inner {
  background: var(--fl-green-10);
  border-left: 3px solid var(--fl-green-60);
  padding: var(--s-05);
  border-radius: 0 8px 8px 0;
}
.fl-card-inner h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--fl-green-70);
  margin-bottom: var(--s-03);
}
.fl-card-inner p {
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  line-height: 1.5;
  margin-bottom: var(--s-04);
}
.fl-email-card-inner {
  background: #fff;
  border: 1px solid var(--cds-border-subtle-01);
  border-left: 3px solid var(--fl-green-50);
  padding: var(--s-05);
  border-radius: 0 8px 8px 0;
}
.fl-email-card-inner p { font-size: 0.875rem; color: var(--cds-text-primary); line-height: 1.5; margin-bottom: var(--s-04); }
.fl-email-row { display: flex; gap: var(--s-03); align-items: flex-end; }
.fl-email-row cds-text-input { flex: 1; }

/* ─── Divider ─── */
.fl-divider { display: flex; align-items: center; gap: var(--s-04); }
.fl-divider hr { flex: 1; border: none; border-top: 1px solid var(--cds-border-subtle-01); }
.fl-divider span {
  font-size: 0.6875rem;
  color: var(--cds-text-secondary);
  letter-spacing: 0.32px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Input area ─── */
#fl-input-area {
  position: relative;
  padding: var(--s-04) var(--s-05) var(--s-05);
  border-top: 1px solid var(--cds-border-subtle-01);
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(36,161,72,0.06) 0%, rgba(255,255,255,0) 70%),
    var(--cds-background);
  flex-shrink: 0;
}
.fl-input-shell {
  display: flex;
  align-items: flex-end;
  gap: var(--s-03);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 24px;
  padding: var(--s-02) var(--s-02) var(--s-02) var(--s-05);
  transition: border-color 0.1s;
}
.fl-input-shell:focus-within { border-color: var(--fl-green-60); background: #fff; }
#fl-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cds-text-primary);
  max-height: 96px;
  padding: var(--s-03) 0;
  letter-spacing: 0.16px;
}
#fl-input::placeholder { color: #6f6f6f; }
#fl-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--fl-green-60);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s;
}
#fl-send:hover { background: var(--fl-green-70); }
#fl-send:disabled { background: #c6c6c6; cursor: default; }
#fl-send:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
#fl-send svg { width: 16px; height: 16px; fill: #fff; }

/* ─── Footer ─── */
#fl-footer {
  padding: var(--s-02) var(--s-05) var(--s-04);
  text-align: center;
  font-size: 0.6875rem;
  color: var(--cds-text-secondary);
  background: var(--cds-background);
  letter-spacing: 0.32px;
  flex-shrink: 0;
}
#fl-footer a { color: var(--fl-green-60); text-decoration: none; }
#fl-footer a:hover { text-decoration: underline; }

/* ─── Safety net: never allow horizontal scrolling ───
   Wrap long words, cap chip width, and clip any horizontal overflow. */
#fl-messages { overflow-x: hidden; }
.fl-msg-body { overflow-wrap: break-word; word-break: break-word; }
#fl-suggestions { max-width: 100%; }
#fl-suggestions cds-chat-button { max-width: 100%; }