/* Plain Pallets: website chatbot triage (assets/js/chatbot.js).
   Uses the colour and type tokens from style.css, so load that first. */

#pp-chat{ font-family:var(--f-body); color:var(--ink); }

.pp-chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:150;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border:0; border-radius:999px; cursor:pointer;
  background:var(--blue); color:#fff;
  font:600 1rem/1 var(--f-display);
  box-shadow:0 10px 28px rgba(14,42,70,.28);
  transition:background .2s, transform .2s;
}
.pp-chat-launcher:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.pp-chat-launcher:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.pp-chat-launcher svg{ width:20px; height:20px; fill:currentColor; }
.pp-chat-launcher.is-hidden{ display:none; }

.pp-chat-box{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:380px; max-width:calc(100vw - 32px);
  height:600px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  display:none; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 50px rgba(14,42,70,.3);
}
.pp-chat-box.is-open{ display:flex; }

.pp-chat-head{
  display:flex; align-items:center; gap:6px; padding:14px 12px 14px 18px;
  background:var(--navy); color:#fff;
}
.pp-chat-head > div{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pp-chat-head strong{ font:600 1.05rem/1.2 var(--f-display); }
.pp-chat-head span{ font-size:.85rem; color:var(--sky); }
.pp-chat-icon{
  width:36px; height:36px; display:grid; place-items:center; flex:none;
  background:transparent; border:0; border-radius:var(--radius); color:#fff; cursor:pointer;
}
.pp-chat-icon:hover, .pp-chat-icon:focus-visible{ background:var(--navy-soft); outline:none; }
.pp-chat-icon svg{ width:18px; height:18px; }

.pp-chat-body{
  flex:1; overflow-y:auto; padding:16px; background:var(--tint);
  display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain;
}

.pp-chat-msg{ display:flex; }
.pp-chat-user{ justify-content:flex-end; }
.pp-chat-bubble{
  max-width:88%; padding:10px 14px; border-radius:12px;
  font-size:.95rem; line-height:1.45; overflow-wrap:anywhere;
}
.pp-chat-bot .pp-chat-bubble{
  background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px;
}
.pp-chat-user .pp-chat-bubble{ background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.pp-chat-bubble a{ color:var(--blue); font-weight:600; }

.pp-chat-options{ display:flex; flex-direction:column; gap:6px; }
.pp-chat-option{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:10px 14px; cursor:pointer;
  background:var(--surface); color:var(--navy);
  border:1.5px solid var(--sky-soft); border-radius:8px;
  font:600 .93rem/1.3 var(--f-body);
  transition:border-color .15s, background .15s;
}
.pp-chat-option:hover, .pp-chat-option:focus-visible{ border-color:var(--blue); background:#fff; outline:none; }
.pp-chat-option.is-primary{ border-color:var(--blue); }
.pp-chat-option-hint{ font-weight:400; font-size:.82rem; color:var(--ink-soft); }

.pp-chat-card{
  display:flex; flex-direction:column; gap:6px; margin:10px 0;
  padding:12px; background:var(--tint); border-radius:8px;
}
.pp-chat-card strong{ color:var(--navy); }
.pp-chat-card span{ font-size:.85rem; color:var(--ink-soft); }
.pp-chat-cta{
  display:block; text-align:center; padding:10px; border-radius:var(--radius);
  background:var(--blue); color:#fff !important; text-decoration:none;
}
.pp-chat-cta.is-secondary{ background:var(--navy); }

.pp-chat-form{
  display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.pp-chat-field{ display:flex; flex-direction:column; gap:4px; }
.pp-chat-field label{ font-size:.85rem; font-weight:600; color:var(--navy); }
.pp-chat-field label span{ color:var(--blue); }
.pp-chat-field input, .pp-chat-field textarea{
  width:100%; padding:9px 11px; font:1rem/1.3 var(--f-body); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
}
.pp-chat-field textarea{ resize:vertical; }
.pp-chat-field input:focus, .pp-chat-field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,102,169,.15);
}
.pp-chat-error{ display:none; margin:0; font-size:.8rem; color:#B42318; }
.pp-chat-field.has-error input, .pp-chat-field.has-error textarea{ border-color:#B42318; }
.pp-chat-field.has-error .pp-chat-error{ display:block; }
.pp-chat-submit{
  padding:12px; border:0; border-radius:var(--radius); cursor:pointer;
  background:var(--blue); color:#fff; font:600 .98rem/1 var(--f-display);
}
.pp-chat-submit:hover{ background:var(--blue-deep); }
.pp-chat-submit:disabled{ opacity:.7; cursor:wait; }
.pp-chat-privacy{ margin:0; font-size:.78rem; color:var(--ink-soft); text-align:center; }

.pp-chat-foot{
  padding:10px 16px; text-align:center; font-size:.85rem;
  border-top:1px solid var(--line); background:var(--surface);
}
.pp-chat-foot a{ color:var(--blue); font-weight:700; text-decoration:none; }

@media (max-width:520px){
  .pp-chat-launcher{ right:16px; bottom:16px; }
  .pp-chat-box{
    right:0; bottom:0; width:100vw; max-width:none;
    height:100vh; height:100dvh; max-height:none; border-radius:0; border:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .pp-chat-launcher, .pp-chat-option{ transition:none; }
  .pp-chat-launcher:hover{ transform:none; }
}