/* ============================================================
   CLAWED — the guide bot
   Comic panel: ink borders, hard offset shadows, halftone.
   Sits above the paper grain (9000), under the custom cursor (9999).
   Inherits every colour from the :root / body.iron theme vars,
   so it flips with the Stark upgrade for free.
   ============================================================ */

.clawed-fab {
  position: fixed;
  right: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vw, 32px);
  z-index: 9500;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  background: var(--red);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
.clawed-fab:hover { transform: translate(-2px, -2px) rotate(-6deg); box-shadow: 8px 8px 0 var(--ink); }
.clawed-fab:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.clawed-fab__spider { width: 38px; height: 38px; position: relative; z-index: 2; }

.clawed-fab__burst {
  position: absolute; inset: -9px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}
.clawed-fab.is-pinging .clawed-fab__burst { animation: clawedBurst 0.7s ease-out; }
@keyframes clawedBurst {
  0%   { opacity: 0.85; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.5); }
}

.clawed-fab__ping {
  position: absolute; top: -3px; right: -3px;
  width: 15px; height: 15px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.clawed-fab.is-open .clawed-fab__ping { display: none; }

/* ------------------------------------------------------------
   HELLO BUBBLE — comic speech balloon off the spider
------------------------------------------------------------ */
.clawed-hello {
  position: fixed;
  right: calc(clamp(14px, 3vw, 32px) + 78px);
  bottom: calc(clamp(14px, 3vw, 32px) + 16px);
  z-index: 9499;
  max-width: 236px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px) scale(0.9);
  transform-origin: bottom right;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clawed-hello strong { color: var(--red); font-weight: 700; }
.clawed-hello.is-on { opacity: 1; transform: translateX(0) scale(1); }

/* the balloon tail, pointing at the spider */
.clawed-hello::after {
  content: "";
  position: absolute;
  right: -9px; bottom: 10px;
  width: 14px; height: 14px;
  background: #fff;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg);
}

body.iron .clawed-hello { background: #1d1d24; color: #f6e8c8; border-color: var(--gold); box-shadow: 4px 4px 0 #000; }
body.iron .clawed-hello::after { background: #1d1d24; border-color: var(--gold); }
body.iron .clawed-hello strong { color: var(--gold); }

@media (max-width: 520px) {
  .clawed-hello { max-width: 60vw; font-size: 0.76rem; right: calc(8px + 66px); }
}

/* ------------------------------------------------------------
   THE PANEL
------------------------------------------------------------ */
.clawed {
  position: fixed;
  right: clamp(14px, 3vw, 32px);
  bottom: calc(clamp(14px, 3vw, 32px) + 84px);
  z-index: 9500;
  width: min(400px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 10px 10px 0 var(--ink);
  transform-origin: bottom right;
}
.clawed[hidden] { display: none; }

.clawed__halftone {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.2px);
  background-size: 9px 9px;
}

.clawed__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--red);
  color: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.clawed__title {
  font-family: var(--font-comic);
  font-size: 1.65rem;
  letter-spacing: 0.06em;
  line-height: 1;
  -webkit-text-stroke: 1px var(--ink);
}
.clawed__role {
  font-family: var(--font-body);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 3px;
}
.clawed__close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.2s, background 0.2s;
}
.clawed__close:hover { transform: rotate(90deg); background: var(--gold); }

/* ------------------------------------------------------------
   LOG
------------------------------------------------------------ */
.clawed__log {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  /* contain stops the scroll chaining up to the page when the log hits
     its end — the wheel stays in the chat instead of jumping the site */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
}
.clawed__log::-webkit-scrollbar { width: 7px; }
.clawed__log::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }

.clawed__msg {
  position: relative;
  max-width: 88%;
  padding: 10px 13px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.clawed__msg p + p { margin-top: 8px; }
.clawed__msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.clawed__msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border-bottom-left-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.clawed__msg--user {
  align-self: flex-end;
  background: var(--red);
  color: #fff;
  border-bottom-right-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.clawed__msg--err {
  align-self: flex-start;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.clawed__typing { display: flex; gap: 5px; align-items: center; padding: 11px 13px; }
.clawed__thinking {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-right: 3px;
}
.clawed__typing span {
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  animation: clawedBlink 1.1s infinite ease-in-out;
}
.clawed__typing span:nth-child(2) { animation-delay: 0.16s; }
.clawed__typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes clawedBlink {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* ------------------------------------------------------------
   CHIPS
------------------------------------------------------------ */
.clawed__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
}
.clawed__chips[hidden] { display: none; }
.clawed__chips button {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  background: var(--paper-dark);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 20px;
  transition: background 0.18s, transform 0.18s;
}
.clawed__chips button:hover { background: var(--gold); transform: translateY(-2px); }

/* ------------------------------------------------------------
   INPUT
------------------------------------------------------------ */
.clawed__form {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 11px;
  background: var(--paper-dark);
  border-top: 3px solid var(--ink);
}
.clawed__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 9px 14px;
  outline: none;
}
.clawed__input::placeholder { color: rgba(19, 16, 21, 0.45); }
.clawed__input:focus { box-shadow: 0 0 0 3px rgba(230, 36, 41, 0.28); }

.clawed__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--red);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.18s, background 0.18s;
}
.clawed__send svg { width: 18px; height: 18px; }
.clawed__send:hover { transform: scale(1.09) rotate(-8deg); }
.clawed__send:disabled { opacity: 0.45; transform: none; }

/* ------------------------------------------------------------
   IRON MAN MODE
------------------------------------------------------------ */
body.iron .clawed-fab { background: var(--gold); color: #14141a; border-color: #14141a; box-shadow: 5px 5px 0 #000; }
body.iron .clawed-fab__ping { background: var(--blue); border-color: #14141a; }
body.iron .clawed { background: #14141a; border-color: var(--gold); box-shadow: 10px 10px 0 #000; }
body.iron .clawed__halftone { background-image: radial-gradient(circle, var(--gold) 1.1px, transparent 1.2px); opacity: 0.09; }
body.iron .clawed__bar { background: var(--red); color: #f6e8c8; border-bottom-color: var(--gold); }
body.iron .clawed__title { -webkit-text-stroke-color: var(--gold); }
body.iron .clawed__close { background: var(--gold); color: #14141a; border-color: #14141a; }
body.iron .clawed__msg { border-color: var(--gold); }
body.iron .clawed__msg--bot { background: #1d1d24; color: #f6e8c8; box-shadow: 3px 3px 0 #000; }
body.iron .clawed__msg--user { background: var(--red); color: #fff; box-shadow: 3px 3px 0 #000; }
body.iron .clawed__msg--err { background: var(--gold); color: #14141a; }
body.iron .clawed__typing span { background: var(--gold); }
body.iron .clawed__thinking { color: var(--gold); }
body.iron .clawed__chips button { background: #1d1d24; color: #f6e8c8; border-color: var(--gold); }
body.iron .clawed__chips button:hover { background: var(--gold); color: #14141a; }
body.iron .clawed__form { background: #0e0e13; border-top-color: var(--gold); }
body.iron .clawed__input { background: #1d1d24; color: #f6e8c8; border-color: var(--gold); }
body.iron .clawed__input::placeholder { color: rgba(246, 232, 200, 0.4); }
body.iron .clawed__send { border-color: var(--gold); }

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */
@media (max-width: 520px) {
  .clawed {
    right: 8px; left: 8px;
    width: auto;
    bottom: 92px;
    height: min(70vh, calc(100vh - 120px));
  }
  .clawed-fab { width: 58px; height: 58px; }
  .clawed-fab__spider { width: 32px; height: 32px; }
}