/* VETO public site — enhance layer styles (holders board + Kitty chat).
   Uses the base page's palette and type so the new sections read as
   part of the same case file. */

/* ---------- Holders & Bundles ---------- */
.holders-box h4,
.lore-panel h4,
.kitty-box h4 {
  font-family: "Anton", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  margin: 24px 0 10px;
}
.holder-tiles {
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0 18px;
}
.holders-loading,
.holders-unavail,
.holders-none {
  color: var(--muted);
  font-size: 14.5px;
  margin: 10px 0;
}
.holders-note {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 14px 0 4px;
}

/* bubble map */
.bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}
.bub {
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--chip);
  color: var(--ink);
}
.bub-bundler { background: var(--red); border-color: var(--red-deep); color: #fff; }
.bub-insider { background: #eec26a; color: var(--ink); }
.bub-sniper { background: #2f6fb2; border-color: #20507f; color: #fff; }
.bub-dev { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bub-vault { background: transparent; border-style: dashed; color: var(--muted); }
.bub-wallet { background: var(--chip); color: var(--ink); }
.bub-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 2px 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bub-legend .sw {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  margin-right: 6px;
  vertical-align: -1px;
}
.sw-bundler { background: var(--red); border-color: var(--red-deep); }
.sw-insider { background: #eec26a; }
.sw-sniper { background: #2f6fb2; border-color: #20507f; }
.sw-dev { background: var(--ink); }
.sw-vault { background: transparent; border-style: dashed; }
.sw-wallet { background: var(--chip); }

/* holder rows */
.holder-rows { list-style: none; margin: 6px 0 0; padding: 0; }
.holder-rows li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.holder-rows .tag { margin-top: 0; }
.htag-bundler { color: var(--red); }
.htag-insider { color: var(--amber); }
.htag-sniper { color: #2f6fb2; }
.htag-dev { color: var(--ink); }
.htag-vault { color: var(--muted); }
.htag-wallet { color: var(--muted); }
.hr-name { font-weight: 700; flex: 1 1 auto; }
.hr-addr {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.hr-pct {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- The Lore (summary panel) ---------- */
.lore-loading,
.lore-unavail {
  color: var(--muted);
  font-size: 14.5px;
  margin: 10px 0;
}
.lore-summary {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 8px 0 4px;
}
.lore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.lore-chips a {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--surface);
}
.lore-chips a:hover { background: var(--chip); }
.lore-credit {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 10px 0 4px;
}

/* ---------- Ask VETO's Kitty ---------- */
.kitty-box {
  border: 1.5px dashed var(--line-strong);
  border-radius: 6px;
  padding: 4px 18px 16px;
  background: var(--surface-2);
  margin-top: 26px;
}
.kitty-greeting {
  margin: 6px 0 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.kitty-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.kitty-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.kitty-msg.kitty {
  align-self: flex-start;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  color: var(--ink-soft);
}
.kitty-msg.user {
  align-self: flex-end;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  color: var(--bg);
  font-weight: 600;
}
.kitty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.kitty-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.kitty-chip:hover { background: var(--chip); transform: translate(-1px, -1px); }
.kitty-chip:disabled { opacity: 0.55; cursor: wait; transform: none; }
.kitty-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.kitty-form input {
  flex: 1 1 auto;
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  padding: 10px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.kitty-form input:disabled { opacity: 0.6; }
.kitty-form button:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 640px) {
  .holder-tiles { grid-template-columns: repeat(2, 1fr); }
  .kitty-msg { max-width: 94%; }
  .kitty-form { flex-direction: column; }
}