/* Inky — public chat widget for Broken Art Tattoo
   Matches the site palette: --ink #171310, --paper #F6F4EE, --red #B0281E.
   Fonts: Anton (display) + Barlow (body), already loaded on the page. */

:root{
  --inky-ink:#171310; --inky-paper:#F6F4EE; --inky-red:#B0281E;
  --inky-line:#D9D4C9; --inky-grey:#6F6A62; --inky-white:#fff;
}

/* ---- Floating launcher ---- */
.inky-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9998;
  display:flex; align-items:center; gap:.55rem;
  background:var(--inky-red); color:var(--inky-white);
  border:none; cursor:pointer; padding:.7rem 1.05rem;
  font:700 13px/1 "Barlow",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; box-shadow:0 6px 20px rgba(23,19,16,.28);
  transition:transform .15s ease, background .15s ease;
}
.inky-launcher:hover{ background:var(--inky-ink); transform:translateY(-2px); }
.inky-launcher svg{ width:18px; height:18px; display:block; }
.inky-launcher.inky-hidden{ display:none; }

/* ---- Chat panel ---- */
.inky-panel{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 40px));
  display:none; flex-direction:column; overflow:hidden;
  background:var(--inky-paper); color:var(--inky-ink);
  border:2px solid var(--inky-ink); border-radius:14px;
  box-shadow:0 18px 50px rgba(23,19,16,.35);
}
.inky-panel.inky-open{ display:flex; }

/* Inline (dedicated Ask Inky page) mode */
.inky-inline .inky-panel{
  position:static; display:flex; width:100%; height:min(620px,72vh);
  right:auto; bottom:auto; box-shadow:none; border-radius:12px; margin:1.5rem 0;
}
.inky-inline .inky-launcher{ display:none; }

.inky-head{
  display:flex; align-items:center; gap:.7rem;
  background:var(--inky-ink); color:var(--inky-paper); padding:.85rem 1rem;
}
.inky-head .inky-orb{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 30%, #E2A79F, var(--inky-red) 70%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.25);
}
.inky-head h3{ margin:0; font:400 1.15rem/1 "Anton",sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.inky-head .inky-sub{ margin:.15rem 0 0; font:500 11px/1.2 "Barlow",sans-serif; letter-spacing:.06em; color:#CFC9BE; }
.inky-head .inky-titles{ flex:1 1 auto; }
.inky-close{
  background:none; border:none; color:var(--inky-paper); cursor:pointer;
  font-size:22px; line-height:1; padding:.1rem .3rem; opacity:.85;
}
.inky-close:hover{ opacity:1; }
.inky-inline .inky-close{ display:none; }

.inky-log{
  flex:1 1 auto; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem;
}
.inky-msg{ max-width:85%; padding:.6rem .8rem; border-radius:12px; font:400 15px/1.5 "Barlow",sans-serif; white-space:pre-wrap; word-wrap:break-word; }
.inky-msg.inky-bot{ align-self:flex-start; background:var(--inky-white); border:1px solid var(--inky-line); border-bottom-left-radius:3px; }
.inky-msg.inky-user{ align-self:flex-end; background:var(--inky-ink); color:var(--inky-paper); border-bottom-right-radius:3px; }
.inky-typing{ align-self:flex-start; display:flex; gap:4px; padding:.7rem .85rem; }
.inky-typing span{ width:7px; height:7px; border-radius:50%; background:var(--inky-grey); opacity:.5; animation:inky-bounce 1.1s infinite; }
.inky-typing span:nth-child(2){ animation-delay:.15s; }
.inky-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes inky-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-5px);opacity:.9;} }
@media (prefers-reduced-motion:reduce){ .inky-typing span{ animation:none; } }

.inky-suggests{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .4rem; }
.inky-chip{
  background:transparent; border:1px solid var(--inky-line); color:var(--inky-ink);
  border-radius:999px; padding:.35rem .7rem; cursor:pointer;
  font:600 12px/1 "Barlow",sans-serif; letter-spacing:.02em;
}
.inky-chip:hover{ border-color:var(--inky-red); color:var(--inky-red); }

.inky-form{ display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--inky-line); background:var(--inky-paper); }
.inky-form input{
  flex:1 1 auto; border:1px solid var(--inky-line); border-radius:999px;
  padding:.6rem .9rem; font:400 15px/1.3 "Barlow",sans-serif; color:var(--inky-ink); background:var(--inky-white);
}
.inky-form input:focus{ outline:none; border-color:var(--inky-red); }
.inky-send{
  flex:none; background:var(--inky-red); color:var(--inky-white); border:none; cursor:pointer;
  border-radius:999px; padding:0 1rem; font:700 13px/1 "Barlow",sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.inky-send:hover{ background:var(--inky-ink); }
.inky-send:disabled{ opacity:.5; cursor:default; }

.inky-disclaimer{ padding:0 1rem .7rem; margin:0; font:400 11px/1.4 "Barlow",sans-serif; color:var(--inky-grey); }
.inky-disclaimer a{ color:var(--inky-red); }