/* ============================================================
   Jude Peace Portraits — studio assistant chat widget
   Self-contained styles. All classes namespaced .jc-* to avoid
   collisions with the host site. Palette mirrors the brand.
   ============================================================ */
.jc-root{
  --jc-cream:#f6f1e7; --jc-cream-2:#efe7d6; --jc-paper:#fbf7ef;
  --jc-ink:#1f1a14; --jc-ink-soft:#3b342b;
  --jc-accent:#a8612a; --jc-accent-deep:#7e4317; --jc-gold:#c39b54;
  --jc-line:#e4dcca;
  --jc-shadow:0 24px 60px rgba(20,15,8,.28);
  position:fixed; z-index:2147483000; right:24px; bottom:24px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--jc-ink);
  /* the widget root must NOT capture page clicks — only the bubble and the
     OPEN panel are interactive. Otherwise its fixed/overflow geometry sits over
     the page (e.g. the footer) and silently eats real taps. */
  pointer-events:none;
}
.jc-root *{box-sizing:border-box}

/* ---- launcher bubble ---- */
.jc-bubble{
  pointer-events:auto;
  width:62px;height:62px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--jc-accent),var(--jc-accent-deep));
  color:#fdf6e6;display:grid;place-items:center;
  box-shadow:0 14px 32px rgba(126,67,23,.42);
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .25s;
  animation:jc-pop .5s cubic-bezier(.34,1.4,.5,1) both;
}
.jc-bubble:hover{transform:translateY(-3px) scale(1.05)}
.jc-bubble:focus-visible{outline:3px solid var(--jc-gold);outline-offset:3px}
.jc-bubble svg{width:28px;height:28px;transition:transform .3s}
.jc-bubble .jc-ico-close{display:none}
.jc-root.jc-open .jc-bubble .jc-ico-open{display:none}
.jc-root.jc-open .jc-bubble .jc-ico-close{display:block}
.jc-badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  background:var(--jc-gold);color:var(--jc-ink);font-size:.7rem;font-weight:600;
  border-radius:10px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.jc-root.jc-open .jc-badge{display:none}

@keyframes jc-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* ---- panel ---- */
.jc-panel{
  position:absolute;right:0;bottom:78px;width:380px;max-width:calc(100vw - 32px);
  height:min(620px,calc(100vh - 120px));
  background:var(--jc-paper);border:1px solid var(--jc-line);border-radius:18px;
  box-shadow:var(--jc-shadow);display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;opacity:0;transform:translateY(12px) scale(.96);
  pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.2,.5,1);
}
.jc-root.jc-open .jc-panel{opacity:1;transform:none;pointer-events:auto}

/* ---- header ---- */
.jc-head{
  background:linear-gradient(135deg,var(--jc-accent),var(--jc-accent-deep));
  color:#fdf6e6;padding:1rem 1.1rem;display:flex;align-items:center;gap:.8rem;flex:none;
}
.jc-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(253,246,230,.16);border:1px solid rgba(253,246,230,.4);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.2rem;color:#fdf6e6;
}
.jc-head-meta{flex:1;min-width:0}
.jc-head-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.25rem;line-height:1.1}
.jc-head-sub{font-size:.72rem;letter-spacing:.04em;opacity:.85;display:flex;align-items:center;gap:.35rem;margin-top:.1rem}
.jc-dot-live{width:7px;height:7px;border-radius:50%;background:#8ed99a;box-shadow:0 0 0 0 rgba(142,217,154,.6);animation:jc-live 2s infinite}
@keyframes jc-live{0%{box-shadow:0 0 0 0 rgba(142,217,154,.5)}70%{box-shadow:0 0 0 6px rgba(142,217,154,0)}100%{box-shadow:0 0 0 0 rgba(142,217,154,0)}}
.jc-head-actions{margin-left:auto;display:flex;gap:.4rem}
.jc-headbtn{background:rgba(253,246,230,.14);border:0;color:#fdf6e6;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.jc-headbtn:hover{background:rgba(253,246,230,.28)}
.jc-headbtn:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jc-head-actions button:first-child svg{transition:transform .45s ease}
.jc-head-actions button:first-child:hover svg{transform:rotate(-180deg)}

/* ---- messages ---- */
.jc-log{flex:1;overflow-y:auto;padding:1.1rem 1rem .4rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth}
.jc-log::-webkit-scrollbar{width:8px}
.jc-log::-webkit-scrollbar-thumb{background:var(--jc-cream-2);border-radius:8px}
.jc-msg{max-width:84%;padding:.7rem .9rem;border-radius:16px;font-size:.92rem;line-height:1.5;animation:jc-in .3s ease both}
.jc-msg a{color:var(--jc-accent-deep);text-decoration:underline;text-underline-offset:2px}
.jc-msg.jc-bot{align-self:flex-start;background:#fff;border:1px solid var(--jc-line);border-bottom-left-radius:5px;color:var(--jc-ink)}
.jc-msg.jc-user{align-self:flex-end;background:linear-gradient(135deg,var(--jc-accent),var(--jc-accent-deep));color:#fdf6e6;border-bottom-right-radius:5px}
.jc-msg p{margin:0 0 .5rem}.jc-msg p:last-child{margin:0}
.jc-msg strong{font-weight:600}
@keyframes jc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* typing indicator */
.jc-typing{align-self:flex-start;background:#fff;border:1px solid var(--jc-line);border-bottom-left-radius:5px;padding:.8rem 1rem;border-radius:16px;display:inline-flex;gap:5px}
.jc-typing span{width:7px;height:7px;border-radius:50%;background:var(--jc-accent);opacity:.5;animation:jc-bounce 1.2s infinite}
.jc-typing span:nth-child(2){animation-delay:.2s}.jc-typing span:nth-child(3){animation-delay:.4s}
@keyframes jc-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ---- quick replies ---- */
.jc-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.2rem 1rem .6rem}
.jc-chip{
  background:var(--jc-cream);border:1px solid var(--jc-line);color:var(--jc-accent-deep);
  font:inherit;font-size:.8rem;padding:.45rem .8rem;border-radius:999px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .1s;
}
.jc-chip:hover{background:#fff;border-color:var(--jc-accent)}
.jc-chip:active{transform:scale(.97)}
.jc-chip:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}

/* ---- composer ---- */
.jc-composer{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--jc-line);background:var(--jc-paper);flex:none}
.jc-input{flex:1;border:1px solid var(--jc-line);background:#fff;border-radius:999px;padding:.7rem 1rem;font:inherit;font-size:.92rem;color:var(--jc-ink)}
.jc-input:focus{outline:0;border-color:var(--jc-accent);box-shadow:0 0 0 3px rgba(168,97,42,.14)}
.jc-send{flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,var(--jc-accent),var(--jc-accent-deep));color:#fdf6e6;display:grid;place-items:center;transition:transform .15s,opacity .2s}
.jc-send:hover{transform:scale(1.06)}
.jc-send:disabled{opacity:.45;cursor:default;transform:none}
.jc-send:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}

/* ---- enquiry form (inside a bot message) ---- */
.jc-form{align-self:stretch;max-width:100%;background:#fff;border:1px solid var(--jc-line);border-radius:16px;padding:1rem;animation:jc-in .3s ease both}
.jc-form-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.15rem;color:var(--jc-ink);margin-bottom:.2rem}
.jc-form-note{font-size:.78rem;color:var(--jc-ink-soft);margin-bottom:.8rem}
.jc-field{margin-bottom:.7rem}
.jc-field label{display:block;font-size:.74rem;letter-spacing:.04em;color:var(--jc-ink-soft);margin-bottom:.25rem;font-weight:500}
.jc-field label .jc-req{color:var(--jc-accent)}
.jc-row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.jc-form input,.jc-form select,.jc-form textarea{
  width:100%;border:1px solid var(--jc-line);background:var(--jc-paper);border-radius:9px;
  padding:.55rem .65rem;font:inherit;font-size:.88rem;color:var(--jc-ink);
}
.jc-form input:focus,.jc-form select:focus,.jc-form textarea:focus{outline:0;border-color:var(--jc-accent);box-shadow:0 0 0 3px rgba(168,97,42,.12)}
.jc-form textarea{resize:vertical;min-height:58px}
.jc-form .jc-invalid{border-color:#c0492f;box-shadow:0 0 0 3px rgba(192,73,47,.12)}
.jc-err{color:#c0492f;font-size:.74rem;margin-top:.2rem;display:none}
.jc-err.jc-show{display:block}
.jc-file{font-size:.82rem}
.jc-file-hint{font-size:.72rem;color:var(--jc-ink-soft);margin-top:.2rem}
.jc-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.jc-submit{width:100%;margin-top:.4rem;border:0;border-radius:999px;cursor:pointer;padding:.75rem 1rem;font:inherit;font-weight:600;letter-spacing:.02em;color:#fdf6e6;background:linear-gradient(135deg,var(--jc-accent),var(--jc-accent-deep));transition:transform .15s,opacity .2s}
.jc-submit:hover{transform:translateY(-1px)}
.jc-submit:disabled{opacity:.6;cursor:default;transform:none}
.jc-form-cancel{display:inline-block;margin-top:.5rem;background:none;border:0;color:var(--jc-ink-soft);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}

.jc-footer-note{text-align:center;font-size:.66rem;color:var(--jc-ink-soft);padding:0 1rem .5rem;opacity:.8}

/* ---- mobile ---- */
@media (max-width:480px){
  .jc-root{right:14px;bottom:14px}
  .jc-panel{right:0;bottom:74px;width:calc(100vw - 22px);height:min(78vh,calc(100vh - 96px))}
  .jc-row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .jc-bubble,.jc-panel,.jc-msg,.jc-form,.jc-dot-live,.jc-typing span{animation:none!important;transition:opacity .15s ease!important}
}