/* JCKFRUT Chatbot Widget — Front-end CSS v3 */
:root {
  --jck-primary:        #B89B6E;
  --jck-secondary:      #1C1917;
  --jck-accent:         #4A6741;
  --jck-panel-bg:       #FAF8F5;
  --jck-bot-bubble:     #EDE9E2;
  --jck-user-bubble:    #4A6741;
  --jck-input-bg:       #FFFFFF;
  --jck-input-border:   #D5CEC6;
  --jck-text:           #1C1917;
  --jck-muted:          #6B6560;
  --jck-header-color:   #ffffff;
  --jck-shadow:        0 8px 32px rgba(0,0,0,.18);
  --jck-panel-w:       360px;
  --jck-panel-h:       520px;
  --jck-radius:        14px;
  /* Launcher */
  --jck-l-pad-l:       20px;
  --jck-l-pad-r:       20px;
  --jck-l-pad-v:       12px;
  --jck-l-radius:      40px;
  --jck-l-font-size:   14px;
  --jck-l-font-weight: 600;
  --jck-l-min-w:       0px;
  --jck-l-text-wrap:   nowrap;
  --jck-l-align:       center;
  --jck-l-icon-gap:    8px;
  /* Fonts */
  --jck-font-base:     "Inter", system-ui, sans-serif;
  --jck-font-launcher: var(--jck-font-base);
  --jck-font-header:   var(--jck-font-base);
  --jck-font-bubble:   var(--jck-font-base);
  --jck-font-input:    var(--jck-font-base);
  --jck-font-button:   var(--jck-font-base);
  --jck-sz-header:     14px;
  --jck-sz-subtitle:   11px;
  --jck-sz-bubble:     13.5px;
  --jck-sz-input:      13.5px;
  --jck-lh-bubble:     1.55;
}

/* ── Root container ────────────────────────────────────────────────────────── */
#jckfrut-cb-root {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--jck-font-base);
}
#jckfrut-cb-root.jck-br { bottom: 24px; right: 24px; }
#jckfrut-cb-root.jck-bl { bottom: 24px; left: 24px; align-items: flex-start; }
#jckfrut-cb-root.jck-tr { top: 24px; right: 24px; flex-direction: column-reverse; }
#jckfrut-cb-root.jck-tl { top: 24px; left: 24px; flex-direction: column-reverse; align-items: flex-start; }

/* ── Launcher ──────────────────────────────────────────────────────────────── */
#jck-launcher {
  display: inline-flex;
  flex-direction: row;
  align-items: var(--jck-l-align);
  gap: var(--jck-l-icon-gap);
  min-width: var(--jck-l-min-w);
  background: var(--jck-primary);
  color: var(--jck-secondary);
  border: none;
  border-radius: var(--jck-l-radius);
  padding: var(--jck-l-pad-v) var(--jck-l-pad-r) var(--jck-l-pad-v) var(--jck-l-pad-l);
  font-family: var(--jck-font-launcher);
  font-size: var(--jck-l-font-size);
  font-weight: var(--jck-l-font-weight);
  cursor: pointer;
  box-shadow: var(--jck-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: var(--jck-l-text-wrap);
  line-height: 1.3;
  text-align: center;
}
#jck-launcher:hover  { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.22); }
#jck-launcher:active { transform: translateY(0); }

/* Icon positions */
#jck-launcher.jck-icon-right  { flex-direction: row-reverse; }
#jck-launcher.jck-icon-top    { flex-direction: column; }
#jck-launcher.jck-icon-bottom { flex-direction: column-reverse; }
#jck-launcher.jck-icon-only .jck-launcher-text { display: none; }

.jck-launcher-icon { display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.jck-launcher-icon img,
.jck-launcher-icon svg { display: block; }
.jck-launcher-text { flex-shrink: 1; }

/* ── Panel ─────────────────────────────────────────────────────────────────── */
#jck-panel {
  width: var(--jck-panel-w);
  height: var(--jck-panel-h);
  background: var(--jck-panel-bg);
  border-radius: var(--jck-radius);
  box-shadow: var(--jck-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* overflow:clip clips visually without creating a scroll container,
     keeping the #jck-messages scrollbar inside and accessible */
  overflow: clip;
  overscroll-behavior: none;
}
#jck-panel[hidden] { display: none; }
#jck-panel.jck-open { animation: jckSlide .18s ease both; }
@keyframes jckSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
#jck-header {
  background: var(--jck-secondary);
  color: var(--jck-header-color);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  border-bottom: 2px solid var(--jck-primary);
  touch-action: none;
}
#jck-header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--jck-primary); color: var(--jck-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; overflow: hidden;
}
#jck-header-avatar img,
#jck-header-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
#jck-header-text { flex: 1; min-width: 0; }
#jck-header-title {
  display: block;
  font-family: var(--jck-font-header);
  font-size: var(--jck-sz-header);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#jck-header-subtitle {
  display: block;
  font-size: var(--jck-sz-subtitle);
  opacity: .7; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#jck-close {
  background: none; border: none;
  color: color-mix(in srgb, var(--jck-header-color) 65%, transparent);
  font-size: 22px; cursor: pointer;
  padding: 0 2px; flex-shrink: 0; transition: color .1s; line-height: 1;
}
#jck-close:hover { color: var(--jck-header-color); }

/* ── Messages ──────────────────────────────────────────────────────────────── */
/* No scroll-behavior:smooth here, deliberately. Per spec it excludes
   scrollbar-thumb dragging (always instant) but does cover wheel/trackpad
   input, and Chromium in particular makes wheel-driven scroll feel stuck —
   each wheel tick restarts a smooth animation toward a shifting target.
   The one place we want a smooth animation (auto-scroll to the newest
   message) uses scrollTo({behavior:'smooth'}) in chatbot.js instead, which
   is scoped to that single call and doesn't touch user-driven scrolling. */
/* Height is set explicitly in JS (sizeMessages(), chatbot.js) as pixels, not
   left to flex-grow — a fixed pixel height + overflow-y is far less likely
   to be silently broken by an external stylesheet than flex:1/min-height:0
   sizing, which depends on every ancestor keeping its flex context intact.
   The rules below are the pre-JS fallback and a second line of defence:
   !important so a same-specificity theme/plugin rule targeting this ID can't
   quietly disable scrolling. */
#jck-messages {
  /* JS sets an explicit pixel height that already accounts for padding —
     border-box keeps that height inclusive of padding regardless of the
     page's own box-sizing reset (or lack of one). */
  box-sizing: border-box !important;
  flex: 1;
  min-height: 0 !important;
  /* scroll, not auto — always render the scrollbar track so users can see
     and click it without hunting for it */
  overflow-y: scroll !important;
  padding: 16px 6px 16px 14px; /* reduced right padding gives scrollbar room */
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}
.jck-msg { display:flex; align-items:flex-end; gap:8px; }
.jck-msg.user { flex-direction: row-reverse; }
.jck-avatar {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0; overflow:hidden;
  background: var(--jck-primary); color: var(--jck-secondary);
}
.jck-msg.user .jck-avatar { background: var(--jck-accent); color:#fff; }
.jck-avatar img, .jck-avatar svg { width:100%; height:100%; object-fit:cover; display:block; }
.jck-bubble {
  max-width:75%; padding:10px 13px; border-radius:12px;
  font-family: var(--jck-font-bubble);
  font-size: var(--jck-sz-bubble);
  line-height: var(--jck-lh-bubble);
  background: var(--jck-bot-bubble); color: var(--jck-text);
}
.jck-msg.bot  .jck-bubble { border-bottom-left-radius:4px; }
.jck-msg.user .jck-bubble { background:var(--jck-user-bubble); color:#fff; border-bottom-right-radius:4px; }
.jck-bubble ul { padding-left:18px; margin:6px 0; }
.jck-bubble li { margin-bottom:3px; }

.jck-typing span {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--jck-muted); margin:0 2px;
  animation: jckDot 1.2s infinite;
}
.jck-typing span:nth-child(2) { animation-delay:.2s; }
.jck-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes jckDot {
  0%,80%,100%{transform:scale(.7);opacity:.5;}
  40%{transform:scale(1);opacity:1;}
}
.jck-ticket {
  margin-top:10px; padding:8px 10px;
  background:rgba(184,155,110,.12); border-radius:8px;
  font-size:12.5px; color:var(--jck-muted);
}
.jck-ticket a { color:var(--jck-primary); text-decoration:underline; }

/* ── Suggestions ───────────────────────────────────────────────────────────── */
#jck-suggestions {
  padding: 0 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  touch-action: none;
}
.jck-sug {
  background:none; border:1px solid var(--jck-primary); border-radius:20px;
  padding:5px 12px;
  font-family:var(--jck-font-button); font-size:12px; color:var(--jck-primary);
  cursor:pointer; transition:background .12s,color .12s;
}
.jck-sug:hover { background:var(--jck-primary); color:var(--jck-secondary); }

/* ── Input row ─────────────────────────────────────────────────────────────── */
#jck-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--jck-input-border);
  background: var(--jck-panel-bg);
  flex-shrink: 0;
  /* Prevent iOS touch scroll on the input row from scrolling the page */
  touch-action: none;
}
#jck-input {
  flex: 1; border: 1px solid var(--jck-input-border); border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--jck-font-input); font-size: var(--jck-sz-input);
  color: var(--jck-text); background: var(--jck-input-bg);
  resize: none; max-height: 100px; overflow-y: auto;
  transition: border-color .15s; line-height: 1.4;
  /* Override parent touch-action:none so the textarea still receives touch */
  touch-action: auto;
}
#jck-input:focus { outline: none; border-color: var(--jck-primary); }
#jck-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--jck-primary); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--jck-secondary); flex-shrink: 0;
  transition: filter .12s, transform .1s; overflow: hidden;
  padding: 0;
}
#jck-send:hover  { filter: brightness(1.08); transform: scale(1.05); }
#jck-send:active { transform: scale(.96); }
#jck-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* SVG/img fills the button with no white surround */
#jck-send img,
#jck-send svg {
  display: block;
  width: var(--jck-send-icon-w, 18px);
  height: var(--jck-send-icon-h, 18px);
  object-fit: contain;
  background: transparent;
  /* Force SVG paths that use currentColor or black to match button bg text color */
  color: var(--jck-secondary);
}

/* ── Inline embed ─────────────────────────────────────────────────────────── */
/* Two versions of the same rule, deliberately:
   - :host(...) applies from inside the shadow root's own stylesheet (loaded
     via <link> in chatbot.js) — this is what actually fires now that the
     panel lives in shadow DOM and is invisible to plain external selectors.
   - The plain #jck-panel descendant selector is the light-DOM fallback for
     the rare browser without attachShadow support, where the panel is a
     direct child of #jckfrut-cb-root instead.
   :host() is a no-op outside a shadow tree, so both are safe to ship together. */
:host(.jckfrut-cb-inline),
#jckfrut-cb-root.jckfrut-cb-inline {
  position: static !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
}
:host(.jckfrut-cb-inline) #jck-panel,
.jckfrut-cb-inline #jck-panel {
  width:100%; height:480px;
  box-shadow:var(--jck-shadow); border-radius:var(--jck-radius);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:480px) {
  #jck-panel { width:calc(100vw - 32px); height:calc(100dvh - 100px); }
  #jckfrut-cb-root.jck-br,
  #jckfrut-cb-root.jck-bl { right:16px; left:16px; bottom:16px; align-items:stretch; }
}