/* App-specific layout + playful animations */

/* ChatGPT prompt box */
.prompt-box .prompt-subtitle { color: var(--pm-dark); opacity: 0.7; margin: -0.5rem 0 1rem; font-size: 0.95rem; }
.prompt-text {
  background: var(--pm-tint);
  border-radius: var(--pm-radius);
  padding: 1rem 1.2rem;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--pm-mint);
  margin-bottom: 1rem;
}
.prompt-actions { display: flex; gap: 0.6rem; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem 2rem;
  position: relative;
  z-index: 1;
}

.hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.hero h1 { margin-bottom: 0.5rem; }
.hero p.lead {
  font-size: 1.2rem;
  color: var(--pm-dark);
  max-width: 36em;
  margin: 0 auto 1.5rem;
}

/* Mint blob background — playful */
.blob-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob-bg svg {
  position: absolute;
  opacity: 0.55;
  filter: blur(2px);
  animation: blob-float 18s ease-in-out infinite;
}
.blob-bg svg:nth-child(1) { top: -120px; left: -80px; width: 520px; animation-delay: 0s; }
.blob-bg svg:nth-child(2) { bottom: -140px; right: -60px; width: 480px; animation-delay: -6s; }
.blob-bg svg:nth-child(3) { top: 40%; left: 55%; width: 320px; animation-delay: -12s; opacity: 0.35; }

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(30px, -20px) rotate(8deg) scale(1.06); }
  66%      { transform: translate(-24px, 18px) rotate(-6deg) scale(0.96); }
}

/* Nav cards */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}
.nav-card {
  display: block;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--pm-radius-lg);
  border: 2px solid var(--pm-tint);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow);
  border-color: var(--pm-mint);
}
.nav-card .emoji { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.nav-card h3 { margin-bottom: 0.3rem; }
.nav-card p { margin: 0; color: var(--pm-ink); opacity: 0.8; }
button.nav-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* Content cards */
.card {
  background: #fff;
  border-radius: var(--pm-radius-lg);
  padding: 1.5rem 1.8rem;
  margin: 1.2rem 0;
  border: 2px solid var(--pm-tint);
}
.card.tint { background: var(--pm-tint); border-color: var(--pm-tint); }

/* Games grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}
.game-slot {
  background: #fff;
  border-radius: var(--pm-radius-lg);
  padding: 1.2rem;
  border: 2px solid var(--pm-tint);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-slot:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow); }
.game-slot .slot-thumb {
  display: block;
  width: calc(100% + 2.4rem);
  margin: -1.2rem -1.2rem 0.2rem;
  aspect-ratio: 320 / 200;
  object-fit: cover;
  border-top-left-radius: calc(var(--pm-radius-lg) - 2px);
  border-top-right-radius: calc(var(--pm-radius-lg) - 2px);
}
.game-slot .slot-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--pm-tint);
  color: var(--pm-dark);
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}
.game-slot.available .slot-badge { background: var(--pm-mint); color: var(--pm-dark); }
.game-slot h3 { margin: 0; }
.game-slot p { margin: 0; font-size: 0.95rem; opacity: 0.8; }
.game-slot .slot-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  align-items: center;
  flex-wrap: wrap;
}

/* Star rating web component */
star-rating {
  display: inline-flex;
  gap: 0.15rem;
  user-select: none;
}
star-rating .star {
  cursor: pointer;
  font-size: 1.8rem;
  color: white;
  -webkit-text-stroke: 1.5px var(--pm-dark);
  transition: transform .15s ease, color .15s ease, text-shadow .15s ease, -webkit-text-stroke .1s ease;
}
star-rating .star:hover,
star-rating .star.hover,
star-rating .star.on {
  color: var(--pm-mint);
  -webkit-text-stroke: 0px transparent;
  transform: scale(1.15);
  text-shadow: 0 0 12px rgba(100, 200, 180, 0.6);
}
star-rating[done] .star { cursor: default; }

/* Open question component */
open-question { display: block; margin: 1rem 0; }
open-question label {
  display: block;
  font-weight: 600;
  color: var(--pm-dark);
  margin-bottom: 0.5rem;
}
open-question .q-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.6rem;
}
open-question .saved-msg {
  color: var(--pm-mint);
  font-weight: 600;
  opacity: 0;
  transition: opacity .3s ease;
}
open-question[saved] .saved-msg { opacity: 1; }

/* Name prompt modal */
.name-modal {
  position: fixed;
  inset: 0;
  background: rgba(76, 115, 100, 0.45);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.name-modal.open { display: flex; }
.name-modal .box {
  background: var(--pm-cream);
  border-radius: var(--pm-radius-lg);
  padding: 2rem;
  max-width: 420px;
  width: 92%;
  box-shadow: var(--pm-shadow);
  text-align: center;
}
.name-modal h2 { margin-top: 0; }
.name-modal input { margin-top: 1rem; text-align: center; font-weight: 600; }
.name-modal .form-row { display: flex; gap: 0.6rem; margin-top: 1rem; }
.name-modal .form-row button { flex: 1; }

/* Identity pill (top-right) */
.identity-pill-wrap { position: relative; display: inline-block; }
.identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35em 0.9em;
  background: var(--pm-tint);
  color: var(--pm-dark);
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.identity-pill:hover { background: var(--pm-mint); }
.identity-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 11rem;
  background: var(--pm-cream);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.identity-menu[hidden] { display: none; }
.identity-menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--pm-radius) - 4px);
  font: inherit;
  color: var(--pm-dark);
  cursor: pointer;
}
.identity-menu-item:hover,
.identity-menu-item:focus-visible { background: var(--pm-tint); outline: none; }
.site-header { gap: 1rem; flex-wrap: wrap; }
.site-header .right { display: flex; align-items: center; gap: 1rem; }

/* Konfetti */
.confetti {
  position: fixed;
  top: 40%; left: 50%;
  width: 10px; height: 16px;
  pointer-events: none;
  z-index: 200;
  animation: confetti-fall 1.2s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Admin */
.admin main, .admin-main { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 3rem; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.stat {
  background: var(--pm-tint);
  border-radius: var(--pm-radius-lg);
  padding: 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stat-n { font-size: 2.4rem; font-weight: 900; color: var(--pm-dark); line-height: 1; }
.q-block { background: #fff; border-radius: var(--pm-radius); padding: 1rem 1.4rem; margin: 1rem 0; border: 2px solid var(--pm-tint); }
.q-block h3 .count { background: var(--pm-mint); color: var(--pm-dark); padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.8rem; margin-left: 0.5rem; }
.q-block ul { list-style: none; padding: 0; margin: 0; }
.q-block li { padding: 0.7rem 0; border-top: 1px solid var(--pm-tint); }
.q-block li:first-child { border-top: none; }
.export-link { margin-top: 2rem; }

/* Datenschutz list fix */
.datenschutz ul { padding-left: 1.2em; }

@media (max-width: 640px) {
  main { padding: 1rem; }
  .site-header { padding: 1rem; }
  .site-header .logo { height: 32px; }
}

/* ----- comments / profile / admin additions ----- */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; }
.pill-ok { background: #dcf4ef; color: #2f4c44; }
.pill-warn { background: #ffe9c9; color: #7a4a00; }
.pill-muted { background: #eee; color: #555; }

.activity-row { border-bottom: 1px solid #eee; padding: 12px 0; }
.activity-row:last-child { border-bottom: none; }
.activity-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.activity-meta small { color: #666; }

.muted.small { font-size: 0.85rem; color: #666; }
.btn-ghost { background: transparent; border: 1px solid #ddd; padding: 4px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.btn-ghost:hover { background: #f5f5f5; }

.ct { margin-top: 8px; }
.ct-toggle { background: none; border: none; padding: 4px 0; cursor: pointer; font-weight: 600; }
.ct-body { margin-top: 8px; }
.ct-list { list-style: none; padding: 0; margin: 0; }
.ct-row { padding: 8px 0; border-top: 1px solid #eee; }
.ct-row:first-child { border-top: none; }
.ct-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.ct-meta small { color: #888; }
.ct-input { margin-top: 12px; }
.ct-input textarea { width: 100%; min-height: 60px; padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
.ct-msg { display: inline-block; margin-top: 8px; color: #2f4c44; }
.ct-more { margin-top: 8px; }

.fg-consent-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.fg-consent-modal { background: white; border-radius: 12px; padding: 24px; max-width: 480px; width: calc(100% - 32px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.fg-consent-modal h2 { margin-top: 0; }
.fg-consent-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.fg-consent-modal label { display: block; margin-top: 12px; }

.lc-header { display: flex; align-items: center; gap: 12px; }
.lc-badge { background: #64c8b4; color: white; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; }
.lc-list { list-style: none; padding: 0; }
.lc-row { padding: 10px 0; border-top: 1px solid #eee; }
.lc-target { color: #888; }

.mod-row { border: 1px solid #eee; padding: 12px; border-radius: 8px; margin-bottom: 12px; }
.mod-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mod-actions { display: flex; gap: 8px; margin-top: 8px; }
.mod-filters { margin-bottom: 16px; display: flex; gap: 12px; }
.mod-log { width: 100%; border-collapse: collapse; }
.mod-log th, .mod-log td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }

/* Subtle "Privat abschicken" — transparent, low-emphasis vs. primary "Als Kommentar teilen" */
.btn-private-quiet {
  background: transparent;
  border: none;
  color: #6b6b6b;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-private-quiet:hover { color: #2f4c44; }
.btn-private-quiet:disabled { opacity: 0.5; cursor: not-allowed; }

/* open-question .saved-msg defaults to opacity:0 in brand.css (only [saved] flips it).
   Make it visible whenever it has content, so transient toasts show in all paths. */
open-question .saved-msg:not(:empty) { opacity: 1; }

/* Spinner for pending-moderation comments */
.ct-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #e5e5e5;
  border-top-color: #b26b00;
  border-radius: 50%;
  animation: ct-spin 1s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-row.is-pending p { opacity: 0.7; }

/* Workshop chat */
chat-panel { display: contents; }
.chat-fab {
  background: var(--pm-mint);
  border: 2px solid var(--pm-dark);
  color: var(--pm-dark);
  width: 38px; height: 38px;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow); }

.chat-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100vw);
  height: 100dvh;
  background: var(--pm-cream);
  box-shadow: -8px 0 30px rgba(0,0,0,0.18);
  z-index: 1100;
  display: flex; flex-direction: column;
  border-left: 2px solid var(--pm-tint);
  animation: chat-slide-in .25s ease-out;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Lock body scroll while the chat drawer is open (set by chat-panel.js) */
body.chat-drawer-open { overflow: hidden; touch-action: none; }
@keyframes chat-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-tint);
}
.chat-head-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-head-sub { color: #666; font-size: 0.78rem; line-height: 1.3; }
.chat-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-filter-chip {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--pm-tint);
  background: #fff;
  color: var(--pm-dark);
  cursor: pointer;
  width: auto;
  height: auto;
  transition: background .15s, border-color .15s, color .15s;
}
.chat-filter-chip:hover { background: var(--pm-tint); transform: none; box-shadow: none; }
.chat-filter-chip.is-active {
  background: var(--pm-mint);
  border-color: var(--pm-dark);
  color: var(--pm-dark);
}
.chat-close {
  background: transparent; border: none; font-size: 1.4rem; cursor: pointer; padding: 0 6px;
  color: var(--pm-dark); width: auto; height: auto;
}
.chat-close:hover { background: transparent; transform: none; box-shadow: none; }
/* === Instagram-style chat feed === */
.chat-drawer { background: white; color: var(--pm-dark); }
.ig-feed {
  flex: 1; overflow-y: auto; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  background: #fafafa;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.chat-drawer.is-drop { outline: 3px dashed var(--pm-mint); outline-offset: -6px; }

/* URL link preview card (kept) */
.chat-preview {
  display: flex; gap: 10px; align-items: stretch;
  border: 1px solid #efefef; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit; background: #fafafa;
  font-size: 0.85rem;
}
.chat-preview-img { width: 80px; height: auto; object-fit: cover; flex-shrink: 0; }
.chat-preview-text { padding: 8px 10px; flex: 1; min-width: 0; }
.chat-preview-text strong { display: block; margin-bottom: 2px; color: var(--pm-dark); }
.chat-preview-text p { margin: 0 0 4px; color: #555; line-height: 1.3; }
.chat-preview-text small { color: #888; }

/* IG post card */
.ig-post {
  background: white;
  border-bottom: 1px solid #efefef;
  padding: 10px 14px 6px;
}
.ig-post:last-child { border-bottom: none; }
.ig-post-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ig-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase;
}
.ig-post-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ig-post-meta strong { font-size: 0.92rem; color: #262626; }
.ig-time { color: #8e8e8e; font-size: 0.75rem; text-decoration: none; }
.ig-time:hover { text-decoration: underline; color: #8e8e8e; }
.ig-highlight { animation: ig-flash 2s ease-out; }
@keyframes ig-flash { 0%,20% { background: rgba(100,200,180,.25); } 100% { background: transparent; } }
.ig-post:target { outline: 2px solid var(--pm-mint); outline-offset: -2px; border-radius: var(--pm-radius); }
.ig-comment:target { outline: 2px solid var(--pm-mint); outline-offset: 2px; border-radius: 6px; }
.ig-post-media {
  margin: 4px -14px 8px;
  background: #000;
  display: flex; justify-content: center; align-items: center;
}
.ig-post-image { max-width: 100%; max-height: 70vh; display: block; object-fit: contain; }
.ig-post-body {
  font-size: 0.92rem; line-height: 1.45; color: #262626;
  word-wrap: break-word; overflow-wrap: anywhere;
  margin-bottom: 8px;
}
.ig-post-body code { background: #f5f5f5; padding: 1px 4px; border-radius: 4px; font-size: 0.9em; }
.ig-post-body a { color: #00376b; text-decoration: none; }
.ig-post-body a:hover { text-decoration: underline; }
.ig-post-previews { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ig-post-poll { margin-bottom: 8px; }

.ig-post-actions {
  display: flex; gap: 6px; margin: 4px 0 4px;
}
.ig-icon-btn {
  background: transparent; border: none; padding: 4px;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: #262626; width: auto; height: auto; border-radius: 6px;
  transition: transform .12s ease;
}
.ig-icon-btn:hover { background: transparent; transform: scale(1.08); box-shadow: none; }
.ig-icon-btn:active { transform: scale(0.96); }
.ig-comment-btn { display: inline-flex; align-items: center; gap: 4px; }
.ig-comment-count {
  font-size: 0.85rem; font-weight: 600; color: #262626;
  font-family: inherit;
}
.ig-comment-count[hidden] { display: none; }
.ig-like .ig-heart { display: inline-block; transition: transform .15s ease; }
.ig-like.is-liked .ig-heart { animation: ig-heart-pop .35s ease-out; }
@keyframes ig-heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ig-link {
  background: transparent; border: none; color: #00376b;
  font-size: 0.82rem; cursor: pointer; padding: 2px 0;
  width: auto; height: auto; font-weight: 600;
}
.ig-link:hover { background: transparent; transform: none; box-shadow: none; text-decoration: none; opacity: 0.7; }
.ig-link[disabled] { opacity: 0.4; cursor: default; }
.ig-post-del { color: #c44; font-weight: 500; margin-left: auto; font-size: 0.78rem; }

.ig-comment-toggle { margin: 2px 0; }
.ig-comments-expand, .ig-comments-collapse { color: #8e8e8e; font-weight: 500; }

/* Comments */
.ig-comments { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ig-comments[hidden] { display: none; }
.ig-comment { display: flex; gap: 10px; align-items: flex-start; }
.ig-comment[hidden] { display: none; }
.ig-comment .ig-avatar { width: 26px; height: 26px; font-size: 0.78rem; }
.ig-comment-body { flex: 1; min-width: 0; }
.ig-comment-line { font-size: 0.88rem; line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; color: #262626; }
.ig-comment-line strong { margin-right: 4px; }
.ig-comment-line a { color: #00376b; text-decoration: none; }
.ig-comment-line a:hover { text-decoration: underline; }
.ig-comment-meta { display: flex; gap: 12px; margin-top: 2px; font-size: 0.74rem; color: #8e8e8e; align-items: center; }
.ig-comment-meta .ig-link { font-size: 0.74rem; color: #8e8e8e; font-weight: 600; padding: 0; }
.ig-comment-meta .ig-comment-del { color: #c44; }
.ig-comment-children { list-style: none; padding: 0; margin: 8px 0 0 12px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid #efefef; padding-left: 10px; }

.ig-comment-form {
  display: flex; gap: 8px; align-items: center;
  margin: 8px 0 0; padding: 6px 0 4px;
  border-top: 1px solid #efefef;
}
.ig-comment-form[hidden] { display: none; }
.ig-comment-form.is-replying { background: #fafafa; padding: 6px 8px; border-radius: 8px; border-top: none; }
.ig-comment-input {
  flex: 1; resize: none; min-height: 28px; max-height: 100px;
  border: none; outline: none; padding: 4px 0;
  font-family: inherit; font-size: 0.88rem; background: transparent;
}
.ig-comment-send { padding: 4px 6px; font-size: 0.85rem; }

/* Composer */
.ig-composer {
  border-top: 1px solid #dbdbdb; background: white; padding: 8px 12px;
}
.ig-composer-row { display: flex; align-items: flex-end; gap: 6px; position: relative; }
.ig-attach-preview {
  position: relative; display: inline-block;
  margin: 0 0 8px; max-width: 200px;
  border-radius: 10px; overflow: hidden; border: 1px solid #efefef;
}
.ig-attach-preview[hidden] { display: none; }
.ig-attach-preview-img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; }
.ig-attach-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.6); color: white; border: none;
  width: 22px; height: 22px; border-radius: 999px;
  font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ig-attach-remove:hover { background: rgba(0,0,0,0.8); transform: none; box-shadow: none; }
.ig-camera, .ig-more {
  flex-shrink: 0;
  background: transparent; border: none;
  width: 36px; height: 36px;
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: #262626;
}
.ig-camera { background: var(--pm-tint); }
.ig-camera:hover { background: var(--pm-mint); transform: none; box-shadow: none; }
.ig-more:hover { background: #f0f0f0; transform: none; box-shadow: none; }
.ig-more[aria-expanded="true"] { background: var(--pm-tint); }
.ig-more-menu {
  position: absolute; bottom: calc(100% + 6px); left: 40px;
  background: white; border: 1px solid #ddd; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  min-width: 200px; z-index: 10;
  padding: 4px;
}
.ig-more-menu[hidden] { display: none; }
.ig-more-item {
  background: transparent; border: none; color: var(--pm-dark);
  padding: 10px 14px; border-radius: 8px;
  text-align: left; cursor: pointer; font-size: 0.92rem; font-weight: 400;
  width: 100%;
}
.ig-more-item:hover { background: var(--pm-tint); transform: none; box-shadow: none; }
.ig-input {
  flex: 1; resize: none; min-height: 36px; max-height: 140px;
  border: 1px solid #dbdbdb; border-radius: 18px;
  padding: 8px 14px;
  font-family: inherit; font-size: 0.92rem;
  outline: none;
}
.ig-input:focus { border-color: #a8a8a8; }
.ig-send {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: none; border-radius: 999px;
  background: var(--pm-mint); color: var(--pm-dark);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
  font-weight: 700;
}
.ig-send[disabled] { background: #efefef; color: #b0b0b0; cursor: default; }
.ig-send:not([disabled]):hover { transform: scale(1.05); box-shadow: none; }

/* Override: HTML5 hidden must always win */
.chat-fab[hidden], .chat-drawer[hidden], .ig-comment-form[hidden],
.ig-attach-preview[hidden], .ig-more-menu[hidden] { display: none !important; }

.chat-poll-composer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-top: 1px solid var(--pm-tint); background: #fafafa;
}
.chat-poll-composer[hidden] { display: none !important; }
.chat-poll-composer .chat-poll-q,
.chat-poll-composer .chat-poll-opts {
  width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px;
  font-family: inherit; font-size: 0.95rem;
}
.chat-poll-composer .chat-poll-opts { resize: vertical; min-height: 60px; }
.chat-poll-mode { display: flex; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
.chat-poll-mode label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.chat-poll-composer-actions { display: flex; gap: 8px; justify-content: flex-end; }

.chat-msg-poll { margin-top: 8px; }
.chat-poll {
  border: 1px solid var(--pm-tint); border-radius: 10px; padding: 10px; background: #fafafa;
}
.chat-poll-q { margin-bottom: 8px; }
.chat-poll-q small { color: #888; font-weight: 400; }
.chat-poll-options { display: flex; flex-direction: column; gap: 4px; }
.chat-poll-option {
  position: relative; text-align: left; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #ddd; background: white; cursor: pointer; overflow: hidden;
  width: 100%; height: auto; font-weight: 400;
  transition: border-color .15s;
}
.chat-poll-option:hover { background: #f5f5f5; transform: none; box-shadow: none; border-color: var(--pm-mint); }
.chat-poll-option.is-mine { border-color: var(--pm-mint); border-width: 2px; padding: 7px 9px; background: var(--pm-tint); }
.chat-poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--pm-tint); z-index: 0; transition: width .3s ease;
  opacity: 0.55;
}
.chat-poll-option.is-mine .chat-poll-bar { background: var(--pm-mint); opacity: 0.4; }
.chat-poll-text, .chat-poll-count { position: relative; z-index: 1; }
.chat-poll-count { float: right; color: #666; font-size: 0.85rem; }
.chat-poll-voters { display: block; position: relative; z-index: 1; color: #666; font-size: 0.75rem; margin-top: 2px; }
.chat-poll-meta { margin-top: 6px; font-size: 0.8rem; color: #666; }
.chat-poll-meta a { color: var(--pm-dark); text-decoration: underline; }

/* ----- ZIP-Pack attachments ----- */
.ig-zip-pack {
  border: 2px solid var(--pm-mint);
  border-radius: 12px;
  overflow: hidden;
  background: #f0fdf8;
  margin-bottom: 6px;
}
.ig-zip-preview { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.ig-zip-no-preview {
  font-size: 3rem; text-align: center; padding: 24px; background: #e6f7f2;
}
.ig-zip-info {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
}
.ig-zip-badge-card {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pm-mint); background: white; border: 1px solid var(--pm-mint);
  border-radius: 20px; padding: 2px 8px; align-self: flex-start;
}
.ig-zip-filename {
  font-size: 0.85rem; color: #333; word-break: break-all;
}
.ig-pubcomment-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--pm-dark); background: var(--pm-tint); border-radius: 20px; padding: 2px 8px;
  margin-bottom: 4px;
}
.ig-upload-placeholder {
  width: 100%; min-height: 180px;
  background: var(--pm-mint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.ig-upload-emoji { font-size: 3rem; line-height: 1; }
.ig-upload-size { font-size: 0.78rem; color: rgba(255,255,255,0.85); font-weight: 600; letter-spacing: .04em; }
.ig-zip-download {
  font-size: 0.82rem; padding: 4px 10px; border-radius: 6px; align-self: flex-start;
  background: var(--pm-mint); color: white; text-decoration: none;
  border: none; cursor: pointer; font-weight: 600;
}
.ig-zip-download:hover { opacity: 0.85; }
/* Composer preview for ZIP pending attachment */
.ig-attach-preview .ig-zip-badge {
  display: inline-block; background: var(--pm-mint); color: white;
  font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-right: 6px;
}
.ig-attach-preview .ig-zip-name {
  font-size: 0.82rem; color: #333; word-break: break-all;
}

/* Workshop game-publish card — appears in chat stream when a kid publishes a game.
   Mirrors the CICD aesthetic of /games (mint blob bg, brand colours, rounded card). */
.ig-game-card {
  position: relative;
  margin: 8px 0 6px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--pm-cream);
  border: 2px solid var(--pm-tint);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ig-game-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}
.ig-game-card-bg svg {
  position: absolute;
  width: 280px;
}
.ig-game-card-bg svg:nth-child(1) { top: -90px; left: -70px; }
.ig-game-card-bg svg:nth-child(2) { bottom: -100px; right: -60px; width: 240px; }
.ig-game-card-badge {
  display: inline-block;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--pm-mint);
  color: var(--pm-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ig-game-card-title {
  margin: 4px 0 0;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--pm-dark);
  line-height: 1.15;
}
.ig-game-card-author {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pm-dark);
  opacity: 0.75;
}
.ig-game-card-desc {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--pm-ink);
  opacity: 0.85;
}
.ig-game-card-play {
  align-self: center;
  margin-top: 14px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--pm-mint);
  color: var(--pm-dark);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2px solid var(--pm-dark);
  box-shadow: var(--pm-shadow);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ig-game-card-play:hover {
  background: var(--pm-dark);
  color: var(--pm-cream);
  transform: translateY(-2px);
  text-decoration: none;
}
.ig-upload-card-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin-top: 6px;
  border-radius: 12px;
  border: 2px solid var(--pm-tint);
  object-fit: cover;
  align-self: stretch;
}
.ig-upload-card .ig-game-card-title {
  font-size: 1.1rem;
  word-break: break-word;
}

/* Pubcomment card — surfaces published comments in the chat stream. */
.ig-pubcomment {
  margin: 6px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--pm-mint);
  background: var(--pm-tint);
  border-radius: 8px;
}
.ig-pubcomment-target {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pm-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ig-pubcomment-target a { color: var(--pm-dark); text-decoration: underline; text-decoration-color: var(--pm-mint); }
/* On the workshop game wrapper, .workshop-game-bar a (workshop.css) cascades a
   pm-cream color into the chat-panel feed. Higher-specificity reset so the
   game-title link in pubcomment cards inherits the readable colour and is bold. */
chat-panel .ig-pubcomment-target a { color: inherit; font-weight: bolder; }
.ig-pubcomment-quote {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--pm-ink);
  line-height: 1.45;
}