@font-face {
  font-family: 'LazyDog';
  src: url('/assets/fonts/lazy_dog.ttf') format('truetype');
}

@font-face {
  font-family: 'OctoberCrow';
  src: url('/assets/fonts/October_Crow.ttf') format('truetype');

}




:root {
  --pg-bg:#090013; --pg-panel:#1cce5b; --pg-border:#1cce5b; --pg-text:#eaeaea; --pg-muted:#aaa;
}

#phasmo-chat-panel {
  display:grid; grid-template-rows:auto auto 1fr auto auto; gap:8px; padding:10px;
  background:rgba(0,0,0,0.15); border:1px solid #1cce5b; border-radius:12px;
  box-shadow: 0 0 10px #000, inset 0 0 5px #000;
}

/* Header */
.pg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; background:#090013; color:var(--pg-panel); border:1px solid; border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1; border-radius:10px; }
.pg-head .title{ font-family:'OctoberCrow', sans-serif; letter-spacing:.5px; font-weight:lighter; text-shadow:0 0 10px #1cce5b;font-size: 2rem;}
.pg-badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.15); }
.pg-badge.owner{ background:#1cce5b; color:#240047; font-weight:700; }
.pg-cta{ display:inline-flex; gap:8px; align-items:center; }

/* Zone messages */
.pg-body{ display:flex; flex-direction:column-reverse; gap:10px; max-height:300px; overflow:auto; padding:8px; background:rgba(0,0,0,0.2); border-radius:10px; }
.pg-banner{ padding:6px 10px; border-radius:8px; border:1px solid rgba(255,0,0,.35); background:rgba(255,0,0,.08); color:#ffdddd; }

/* Message */
.pg-item{ display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:flex-start; }
.pg-avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:rgba(255,255,255,0.15); color:#fff; box-shadow:inset 0 0 8px #000; border:1px solid rgba(255,255,255,0.12); }
.pg-avatar.me{ background:#1cce5b; color:#240047; }
.pg-bubble{ position:relative; padding:10px 12px; border-radius:12px; background:#140026; color:#fff; border:1px solid rgba(255,255,255,0.12); box-shadow:inset 0 0 10px #000; }
.pg-bubble.me{ background:rgba(28,206,91,0.14); }
.pg-meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.pg-name{ color:#1cce5b; font-size:18px; letter-spacing:.2px; text-transform:uppercase; }
.pg-badge.uid{ background:#4a4a4a; color:#fff; font-size:10px; padding:1px 6px; border-radius:999px; }
.pg-time{ margin-right:auto; font-size:15px; color:#aaa; opacity:.95; }
.pg-text{ white-space:pre-wrap; line-height:1.35; }
.pg-actions{ position:absolute; top:6px; right:8px; display:flex; gap:8px; opacity:.95; }
.pg-action-btn{ border:none; background:transparent; color:#ddd; cursor:pointer; font-size:12px; padding:0; }
.pg-action-btn:hover{ text-decoration:underline; }
.pg-action-btn.danger{ color:#ff4d4f; }

/* Pseudo (anonymes) */
.pg-name-row{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
.pg-name-row input{ padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.25); color:#fff; }
.pg-name-row button{ padding:8px 12px; border-radius:8px; border:none; background:#1cce5b; color:#240047; font-weight:700; cursor:pointer; }

/* Form */
.pg-form{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:start; }
.pg-emoji-btn{ border:0; border-radius:10px; padding:0 8px; background:var(--pg-panel); color:#240047; font-size:20px; cursor:pointer; font-weight:700; }
.pg-input{ resize:vertical; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.25); color:#fff; font-family:inherit; }
.pg-send-btn{ padding:8px 12px; border-radius:8px; border:none; background:#1cce5b; color:#240047; font-weight:700; cursor:pointer; }

/* Emojis */
.pg-emoji-panel{ display:none; flex-wrap:wrap; gap:6px; padding:6px; background:rgba(0,0,0,0.2); border-radius:8px; max-height:110px; overflow:auto; }
.pg-emoji-panel button{ border:none; background:transparent; font-size:20px; cursor:pointer; line-height:1; }

@media (max-width: 560px){ .pg-body{ max-height: 220px; } .pg-head{ font-size:.95rem } }