/* support.css - chat panel. Loaded ONLY on first launcher click, never on page load.
 * Every colour, radius and font here is a token already defined in store.css :root, so the
 * panel is the same object as the rest of the store rather than a bolted-on widget.
 * Fallbacks are given after each var() so the panel still looks right if this file is ever
 * loaded on a page that did not ship store.css. */

.kjdc-panel{
  position:fixed;right:18px;bottom:18px;z-index:190;
  width:min(384px, calc(100vw - 28px));
  max-height:min(640px, calc(100dvh - 36px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--bg-2,#0e1213);
  border:1px solid var(--line-strong,rgba(255,194,51,.30));
  border-radius:18px;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  color:var(--white,#fff);
  font:15px/1.55 var(--font-body,system-ui,'Segoe UI',Roboto,Arial,sans-serif);
  -webkit-backdrop-filter:blur(var(--glass-blur,14px));backdrop-filter:blur(var(--glass-blur,14px));
}
.kjdc-panel.kjdc-on{display:flex;animation:kjdc-in .18s var(--ease,cubic-bezier(.22,.61,.36,1))}
@keyframes kjdc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .kjdc-panel.kjdc-on{animation:none}
  .kjdc-dot{animation:none !important}
}

.kjdc-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line,rgba(185,196,198,.14));
  background:var(--card,rgba(255,255,255,.028));
}
.kjdc-av{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;object-fit:cover;
  background:rgba(255,194,51,.14);border:1px solid rgba(255,194,51,.30);
}
.kjdc-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.kjdc-who strong{font-family:var(--font-display,'Arial Narrow',Arial,sans-serif);font-size:1.08rem;letter-spacing:.02em}
.kjdc-sub{color:var(--muted-dim,#7f8a8c);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kjdc-x{
  flex:0 0 auto;background:transparent;border:0;color:var(--muted,#B9C4C6);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:.1rem .35rem;border-radius:8px;
}
.kjdc-x:hover{color:var(--white,#fff);background:rgba(255,255,255,.06)}

.kjdc-log{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem;
}
.kjdc-msg{
  max-width:88%;padding:.6rem .8rem;border-radius:14px;
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:.93rem;
}
.kjdc-val{align-self:flex-start;background:var(--card-hi,rgba(255,255,255,.05));
  border:1px solid var(--line,rgba(185,196,198,.14));border-bottom-left-radius:5px}
.kjdc-you{align-self:flex-end;background:linear-gradient(180deg,#f4cf7a,var(--gold,#FFC233));
  color:#1a1204;font-weight:560;border-bottom-right-radius:5px}
/* An answer from a real person must never look like the bot's. */
.kjdc-owner{align-self:flex-start;background:rgba(20,128,140,.16);
  border:1px solid rgba(34,167,182,.42);border-bottom-left-radius:5px}
.kjdc-owner::before{
  content:"From the owner";display:block;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-lite,#22a7b6);margin-bottom:.25rem;
}

.kjdc-typing{display:flex;gap:.28rem;align-items:center;padding:.72rem .8rem}
.kjdc-dot{width:6px;height:6px;border-radius:50%;background:var(--muted,#B9C4C6);
  animation:kjdc-b 1.1s infinite ease-in-out}
.kjdc-dot:nth-child(2){animation-delay:.16s}
.kjdc-dot:nth-child(3){animation-delay:.32s}
@keyframes kjdc-b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.kjdc-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .3rem}
.kjdc-chip{
  background:transparent;border:1px solid var(--line,rgba(185,196,198,.14));
  color:var(--muted,#B9C4C6);border-radius:999px;padding:.38rem .7rem;
  font:inherit;font-size:.8rem;cursor:pointer;
}
.kjdc-chip:hover{border-color:var(--line-strong,rgba(255,194,51,.30));color:var(--white,#fff)}

.kjdc-human{
  align-self:flex-start;background:transparent;border:0;padding:.15rem 0;
  color:var(--gold,#FFC233);font:inherit;font-size:.82rem;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}

.kjdc-form{display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--line,rgba(185,196,198,.14))}
.kjdc-in{
  flex:1 1 auto;min-width:0;background:#0d0f10;color:var(--white,#fff);
  border:1px solid var(--line,rgba(185,196,198,.14));border-radius:11px;
  padding:.65rem .75rem;font:inherit;font-size:.93rem;
}
.kjdc-in:focus{outline:2px solid var(--line-strong,rgba(255,194,51,.30));outline-offset:1px}
.kjdc-go{
  flex:0 0 auto;background:linear-gradient(180deg,#f4cf7a,var(--gold,#FFC233));color:#1a1204;
  border:0;border-radius:11px;padding:.65rem 1rem;font:inherit;font-weight:700;cursor:pointer;
}
.kjdc-go[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.kjdc-wide{width:100%;margin-top:.15rem}

.kjdc-foot{padding:0 1rem .8rem;color:var(--muted-dim,#7f8a8c);font-size:.72rem;line-height:1.45}

.kjdc-esc{
  align-self:stretch;display:flex;flex-direction:column;gap:.45rem;
  background:var(--card,rgba(255,255,255,.028));
  border:1px solid var(--line-strong,rgba(255,194,51,.30));border-radius:14px;padding:.85rem;
}
.kjdc-esch{font-family:var(--font-display,'Arial Narrow',Arial,sans-serif);
  font-size:1.02rem;color:var(--gold,#FFC233)}
.kjdc-f{
  background:#0d0f10;color:var(--white,#fff);border:1px solid var(--line,rgba(185,196,198,.14));
  border-radius:10px;padding:.6rem .7rem;font:inherit;font-size:.9rem;width:100%;resize:vertical;
}
.kjdc-err{color:#ff9aa1;font-size:.82rem;min-height:1em}
.kjdc-fine{color:var(--muted-dim,#7f8a8c);font-size:.72rem}

/* Phone: the panel becomes the screen. A 384px card floating over a 390px viewport is the
   classic chat-widget mistake - it hides the page and is still fiddly to type in. */
@media (max-width:560px){
  .kjdc-panel{right:0;left:0;bottom:0;width:100%;max-height:82dvh;border-radius:18px 18px 0 0;border-bottom:0}
}