/* GPS GUBOT SKIN v2 — the designer's GPS-START blocks VERBATIM, in file order. */

/* ===== gubot-chat-skin.html (verbatim) ===== */
/* ============================================================
   GuBot chat skin — Greenpoint Seeds "paper zine meets terminal"
   CSS ONLY · targets ONLY the documented engine hooks · no markup.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Space+Mono:wght@400;700&display=swap");

/* panel */
#gpsh{
  --gd-page:#F2EFE6; --gd-card:#FCFAF3; --gd-ink:#171410; --gd-lime:#B5E633;
  --gd-vio:#7C3AED; --gd-drop:#4A7D14; --gd-dim:#6E6858;
  --gd-sans:"Bricolage Grotesque",system-ui,sans-serif;
  --gd-mono:"Space Mono",ui-monospace,monospace;
  background:var(--gd-page) !important;
  border:2px solid var(--gd-ink) !important;
  border-radius:18px !important;
  box-shadow:6px 6px 0 0 var(--gd-ink) !important;
  overflow:hidden !important;
  font-family:var(--gd-sans) !important;
  color:var(--gd-ink) !important;
}

/* header bar */
#gpsh .gh-bar{
  background:var(--gd-ink) !important;
  color:var(--gd-page) !important;
  border-bottom:2px solid var(--gd-ink) !important;
  font-family:var(--gd-mono) !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-size:13px !important;
  padding:14px 18px !important;
}

/* message window */
#gpsh #ghMsgs{
  background:var(--gd-page) !important;
  padding:18px !important;
}

/* bubbles — shared */
#gpsh .bot, #gpsh .you{
  border:2px solid var(--gd-ink) !important;
  border-radius:14px !important;
  padding:11px 14px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  box-shadow:3px 3px 0 0 var(--gd-ink) !important;
  max-width:82% !important;
}
/* bot bubble — paper card */
#gpsh .bot{
  background:var(--gd-card) !important;
  color:var(--gd-ink) !important;
  border-bottom-left-radius:4px !important;
}
/* customer bubble — ink */
#gpsh .you{
  background:var(--gd-ink) !important;
  color:var(--gd-page) !important;
  border-bottom-right-radius:4px !important;
  font-family:var(--gd-mono) !important;
  font-weight:700 !important;
  font-size:13px !important;
}

/* action chips */
#gpsh .gh-act{
  font-family:var(--gd-mono) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:var(--gd-ink) !important;
  background:var(--gd-card) !important;
  border:1.5px solid var(--gd-ink) !important;
  border-radius:9999px !important;
  padding:6px 13px !important;
  box-shadow:2px 2px 0 0 var(--gd-ink) !important;
}
#gpsh .gh-act:hover{
  background:var(--gd-lime) !important;
}

/* input dock */
#gpsh .gh-dock{
  background:var(--gd-page) !important;
  border-top:2px solid var(--gd-ink) !important;
  padding:14px 16px !important;
  gap:10px !important;
}
/* text input */
#gpsh #ghIn{
  font-family:var(--gd-mono) !important;
  font-size:13px !important;
  color:var(--gd-ink) !important;
  background:var(--gd-card) !important;
  border:2px solid var(--gd-ink) !important;
  border-radius:9999px !important;
  padding:11px 16px !important;
  box-shadow:3px 3px 0 0 var(--gd-ink) !important;
}
#gpsh #ghIn::placeholder{
  color:var(--gd-dim) !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
#gpsh #ghIn:focus{
  outline:none !important;
  border-color:var(--gd-vio) !important;
}
/* send button */
#gpsh #ghSend{
  font-family:var(--gd-mono) !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-size:13px !important;
  color:var(--gd-ink) !important;
  background:var(--gd-lime) !important;
  border:2px solid var(--gd-ink) !important;
  border-radius:9999px !important;
  padding:11px 20px !important;
  box-shadow:3px 3px 0 0 var(--gd-ink) !important;
  cursor:pointer !important;
  transition:transform .08s ease !important;
}
#gpsh #ghSend:hover{ background:var(--gd-vio) !important; color:var(--gd-page) !important; }
#gpsh #ghSend:active{ transform:translate(1px,1px) !important; box-shadow:1px 1px 0 0 var(--gd-ink) !important; }

/* ===== gubot-card.html (verbatim) ===== */
/* ===== GuBot showcase card — scoped entirely under .gd-card ===== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Space+Mono:wght@400;700&display=swap");

.gd-card{
  --gd-page:#F2EFE6; --gd-desk:#EDE9DD; --gd-card:#FCFAF3; --gd-ink:#171410;
  --gd-lime:#B5E633; --gd-vio:#7C3AED; --gd-drop:#4A7D14; --gd-brick:#B3402A;
  --gd-pviol:#F3EDFC; --gd-plime:#EAF6C8; --gd-dim:#6E6858; --gd-faint:#9B9484;
  --gd-sans:"Bricolage Grotesque",system-ui,sans-serif;
  --gd-mono:"Space Mono",ui-monospace,monospace;
  display:block; position:relative; width:100%;
  font-family:var(--gd-sans); color:var(--gd-ink); line-height:1.2;
  background:var(--gd-card); border:2px solid var(--gd-ink); border-radius:18px;
  box-shadow:6px 6px 0 0 var(--gd-ink); overflow:hidden; cursor:pointer;
  text-decoration:none; -webkit-font-smoothing:antialiased;
  transition:transform .12s ease, box-shadow .12s ease;
}
.gd-card *{box-sizing:border-box; margin:0; padding:0;}
.gd-card:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 0 var(--gd-ink);}
.gd-card:active{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--gd-ink);}
.gd-card:focus-visible{outline:3px solid var(--gd-vio); outline-offset:3px;}

/* ---- terminal chrome bar ---- */
.gd-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--gd-ink); color:var(--gd-page); padding:12px 18px;
  border-bottom:2px solid var(--gd-ink);}
.gd-bar-l{display:flex; align-items:center; gap:10px; min-width:0;}
.gd-dots-win{display:flex; gap:6px; flex-shrink:0;}
.gd-dots-win i{width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(242,239,230,.4); display:block;}
.gd-dots-win i:nth-child(1){background:var(--gd-brick);}
.gd-dots-win i:nth-child(2){background:var(--gd-lime);}
.gd-dots-win i:nth-child(3){background:var(--gd-vio);}
.gd-bar-title{font-family:var(--gd-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gd-page); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gd-online{display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:var(--gd-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gd-ink); background:var(--gd-lime); border:2px solid var(--gd-ink);
  border-radius:9999px; padding:4px 10px;}
.gd-online .gd-live{width:8px; height:8px; border-radius:50%; background:var(--gd-drop);
  box-shadow:0 0 0 0 rgba(74,125,20,.6); animation:gd-pulse 1.6s ease-out infinite;}

/* ---- hero: character + headline ---- */
.gd-hero{display:flex; align-items:center; gap:18px; padding:22px 22px 6px;
  background:var(--gd-page);}
.gd-avatar{position:relative; width:96px; height:96px; flex-shrink:0;
  animation:gd-float 4.5s ease-in-out infinite;}
.gd-avatar svg{width:100%; height:100%; display:block; overflow:visible;}
.gd-aura{position:absolute; inset:6px; border-radius:22px; background:var(--gd-lime);
  z-index:-1; opacity:.45; animation:gd-aura 2.8s ease-in-out infinite;}
.gd-eye{transform-box:fill-box; transform-origin:center; animation:gd-blink 5.2s infinite;}
.gd-antenna-bulb{transform-box:fill-box; transform-origin:center; animation:gd-bulb 1.8s ease-in-out infinite;}
.gd-hero-txt{min-width:0;}
.gd-kicker{font-family:var(--gd-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gd-vio); margin-bottom:6px;}
.gd-hero-h{font-size:clamp(1.75rem,6vw,2.4rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.92;}
.gd-hero-sub{font-family:var(--gd-mono); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gd-dim); margin-top:8px; line-height:1.5;}

/* ---- chat transcript ---- */
.gd-chat{padding:18px 22px 8px; background:var(--gd-page); display:flex; flex-direction:column; gap:14px;}
.gd-row{display:flex; align-items:flex-end; gap:10px; max-width:100%;}
.gd-row.gd-you{flex-direction:row-reverse;}
.gd-pfp{width:30px; height:30px; flex-shrink:0; border:2px solid var(--gd-ink); border-radius:9px;
  background:var(--gd-lime); display:flex; align-items:center; justify-content:center;}
.gd-pfp svg{width:20px; height:20px; display:block;}
.gd-pfp.gd-me{background:var(--gd-vio);}
.gd-pfp.gd-me span{font-family:var(--gd-mono); font-size:11px; font-weight:700; color:#fff;}
.gd-bub{max-width:78%; border:2px solid var(--gd-ink); border-radius:14px; padding:11px 14px;
  font-size:14px; line-height:1.45; box-shadow:3px 3px 0 0 var(--gd-ink);}
.gd-bub.gd-bot{background:var(--gd-card); border-bottom-left-radius:4px;}
.gd-bub.gd-mine{background:var(--gd-ink); color:var(--gd-page); border-bottom-right-radius:4px;
  font-family:var(--gd-mono); font-size:13px; font-weight:700; letter-spacing:.02em;}
.gd-bub b{font-weight:800;}

/* ---- product cards inside a bot bubble ---- */
.gd-lead{font-size:14px; line-height:1.45; margin-bottom:10px;}
.gd-prods{display:flex; flex-direction:column; gap:9px;}
.gd-prod{display:flex; align-items:center; gap:11px; border:2px solid var(--gd-ink);
  border-radius:11px; background:var(--gd-page); padding:8px 9px;}
.gd-thumb{width:40px; height:40px; flex-shrink:0; border:2px solid var(--gd-ink); border-radius:8px;
  display:flex; align-items:center; justify-content:center;}
.gd-thumb.gd-t1{background:var(--gd-plime);}
.gd-thumb.gd-t2{background:var(--gd-pviol);}
.gd-thumb svg{width:24px; height:24px; display:block;}
.gd-pinfo{flex:1; min-width:0;}
.gd-pname{font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:14px; line-height:1.05;}
.gd-ptag{font-family:var(--gd-mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gd-dim); margin-top:3px;}
.gd-pill{flex-shrink:0; font-family:var(--gd-mono); font-weight:700; font-size:14px;
  color:var(--gd-ink); background:var(--gd-lime); border:2px solid var(--gd-ink);
  border-radius:9999px; padding:5px 11px; font-variant-numeric:tabular-nums;}

/* ---- typing indicator ---- */
.gd-typing{display:inline-flex; align-items:center; gap:6px; border:2px solid var(--gd-ink);
  border-radius:14px; border-bottom-left-radius:4px; background:var(--gd-card);
  padding:12px 15px; box-shadow:3px 3px 0 0 var(--gd-ink);}
.gd-typing i{width:8px; height:8px; border-radius:50%; background:var(--gd-dim); display:block;
  animation:gd-type 1.3s ease-in-out infinite;}
.gd-typing i:nth-child(2){animation-delay:.18s;}
.gd-typing i:nth-child(3){animation-delay:.36s;}

/* ---- category chips ---- */
.gd-chips{display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px 4px; background:var(--gd-page);}
.gd-chip{font-family:var(--gd-mono); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gd-ink); background:var(--gd-card);
  border:1.5px solid var(--gd-ink); border-radius:9999px; padding:5px 11px;}
.gd-chip.gd-hot{background:var(--gd-lime);}
.gd-chip.gd-vio{background:var(--gd-pviol); color:var(--gd-vio);}

/* ---- CTA dock ---- */
.gd-dock{padding:16px 22px 22px; background:var(--gd-page); border-top:2px dashed rgba(23,20,16,.25); margin-top:10px;}
.gd-fauxin{display:flex; align-items:center; gap:10px; border:2px solid var(--gd-ink); border-radius:9999px;
  background:var(--gd-card); padding:7px 8px 7px 16px; box-shadow:3px 3px 0 0 var(--gd-ink); margin-bottom:14px;}
.gd-fauxin span{flex:1; font-family:var(--gd-mono); font-size:12px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gd-faint); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gd-caret{color:var(--gd-vio); animation:gd-caret 1.05s step-end infinite; font-family:var(--gd-mono); font-weight:700;}
.gd-send{flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--gd-vio);
  border:2px solid var(--gd-ink); display:flex; align-items:center; justify-content:center;}
.gd-send svg{width:18px; height:18px; display:block;}
.gd-cta{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--gd-lime); color:var(--gd-ink); border:2px solid var(--gd-ink); border-radius:9999px;
  padding:16px 24px; box-shadow:4px 4px 0 0 var(--gd-ink);
  font-family:var(--gd-mono); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase;}
.gd-cta .gd-arrow{transition:transform .18s ease;}
.gd-card:hover .gd-cta .gd-arrow{transform:translateX(5px);}
.gd-subline{text-align:center; font-family:var(--gd-mono); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gd-dim); margin-top:14px; line-height:1.5;}

/* ---- responsive: hold down to 360px ---- */
@media(max-width:440px){
  .gd-hero{gap:14px; padding:18px 16px 4px;}
  .gd-avatar{width:76px; height:76px;}
  .gd-chat{padding:14px 16px 6px;}
  .gd-chips,.gd-dock{padding-left:16px; padding-right:16px;}
  .gd-bub{max-width:82%; font-size:13px;}
  .gd-bar{padding:11px 14px;}
}

/* ---- keyframes ---- */
@keyframes gd-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
@keyframes gd-aura{0%,100%{transform:scale(1); opacity:.4;} 50%{transform:scale(1.08); opacity:.6;}}
@keyframes gd-blink{0%,92%,100%{transform:scaleY(1);} 96%{transform:scaleY(.1);}}
@keyframes gd-bulb{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(1.15);}}
@keyframes gd-pulse{0%{box-shadow:0 0 0 0 rgba(74,125,20,.6);} 70%{box-shadow:0 0 0 7px rgba(74,125,20,0);} 100%{box-shadow:0 0 0 0 rgba(74,125,20,0);}}
@keyframes gd-type{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-5px); opacity:1;}}
@keyframes gd-caret{0%,100%{opacity:1;} 50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .gd-avatar,.gd-aura,.gd-eye,.gd-antenna-bulb,.gd-online .gd-live,.gd-typing i,.gd-caret{animation:none !important;}
}

/* ===== GPS-MESSENGER-LAW — replicates the designer preview's own layout
   (their mock carried these as inline styles; CSS-only fragment supplies them) ===== */
#gpsh{display:flex !important;flex-direction:column !important}
#gpsh #ghMsgs{display:flex !important;flex-direction:column !important;gap:14px !important;flex:1 1 auto !important;overflow-y:auto !important}
#gpsh .bot{align-self:flex-start !important;width:fit-content !important}
#gpsh .you{align-self:flex-end !important;width:fit-content !important;text-align:left !important}
#gpsh .gh-dock{display:flex !important;align-items:center !important}
#gpsh #ghIn{flex:1 1 auto !important;min-width:0 !important}