/* HERO OVERLAY + P2P CHAT PANEL */

#hero {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  pointer-events: none;
  transition: opacity 0.4s;
}
#hero.faded { opacity: 0; pointer-events: none; }
#hero > * { pointer-events: auto; }

.hero-brand { text-align: center; }
.hero-brand h1 {
  font-size: 3rem; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(135deg, #8b5cf6 0%, #f59e0b 50%, #10b981 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-shadow: none;
}
.hero-sub {
  font-size: 0.95rem; color: #9ca3af; margin-top: 6px; letter-spacing: 0.5px;
}
.ob-ass { color: #f59e0b; font-weight: 700; }
.ob-os { color: #10b981; font-weight: 700; }
.hero-tagline {
  font-size: 0.7rem; color: #556; margin-top: 4px;
  font-family: 'Courier New', monospace; letter-spacing: 1px;
}

.hero-stats {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.hero-stat {
  background: rgba(10,10,26,0.85); border: 1px solid rgba(139,92,246,0.25);
  border-radius: 8px; padding: 10px 16px; text-align: center;
  backdrop-filter: blur(8px); min-width: 100px;
}
.hero-stat .v { font-size: 1.2rem; font-weight: 700; color: #8b5cf6; }
.hero-stat .l { font-size: 0.65rem; color: #667; text-transform: uppercase; letter-spacing: 1px; }

.hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.hero-btn {
  padding: 10px 20px; border-radius: 8px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; color: #fff;
  background: rgba(139,92,246,0.2); border: 1px solid rgba(139,92,246,0.4);
  transition: all 0.2s; white-space: nowrap;
}
.hero-btn:hover { background: rgba(139,92,246,0.4); border-color: #8b5cf6; transform: translateY(-2px); }
.hero-btn.primary { background: #8b5cf6; border-color: #8b5cf6; }
.hero-btn.primary:hover { background: #7c3aed; }
.hero-btn.accent { background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.5); color: #f59e0b; }
.hero-btn.accent:hover { background: rgba(245,158,11,0.4); }
.hero-btn.gold { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4); color: #10b981; }
.hero-btn.gold:hover { background: rgba(16,185,129,0.3); }

.hero-pipes {
  display: flex; gap: 6px; margin-top: 8px;
}
.pipe {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); opacity: 0.7;
  animation: pipe-pulse 2s ease-in-out infinite;
}
.pipe:nth-child(2) { animation-delay: 0.3s; }
.pipe:nth-child(3) { animation-delay: 0.6s; }
.pipe:nth-child(4) { animation-delay: 0.9s; }
.pipe:nth-child(5) { animation-delay: 1.2s; }
.pipe:nth-child(6) { animation-delay: 1.5s; }
.pipe:nth-child(7) { animation-delay: 1.8s; }
@keyframes pipe-pulse { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }

/* ── P2P CHAT PANEL ── */
.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; z-index: 50;
  background: rgba(4,4,8,0.95); border-left: 1px solid rgba(139,92,246,0.3);
  backdrop-filter: blur(12px); display: flex; flex-direction: column;
  transition: transform 0.3s;
}
.chat-panel.hidden { transform: translateX(100%); }

.chat-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(10,10,26,0.9); border-bottom: 1px solid rgba(139,92,246,0.2);
  font-size: 0.75rem; color: #aac;
}
.chat-header #chat-bal { color: #10b981; margin-left: auto; font-size: 0.65rem; }
.chat-close-btn {
  background: none; border: none; color: #667; font-size: 0.85rem; cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
}
.chat-close-btn:hover { background: rgba(139,92,246,0.2); color: #aac; }

.chat-log {
  flex: 1; overflow-y: auto; padding: 8px; font-size: 0.7rem;
  font-family: 'Courier New', monospace;
}
.chat-msg { padding: 2px 0; display: flex; gap: 4px; align-items: baseline; }
.chat-msg .em { font-size: 0.8rem; }
.chat-msg .nm { color: #8b5cf6; font-weight: bold; font-size: 0.65rem; min-width: 50px; }
.chat-msg .tx { color: #aac; flex: 1; word-break: break-word; }
.chat-msg .ts { color: #334; font-size: 0.5rem; margin-left: 4px; }
.chat-msg.sys { color: #556; font-style: italic; }
.chat-msg.ai { border-left: 2px solid #f59e0b; padding-left: 6px; }
.chat-msg.ai .nm { color: #f59e0b; }
.chat-msg .kono { color: #10b981; font-size: 0.55rem; margin-left: 4px; }

.chat-input-bar {
  display: flex; gap: 4px; padding: 6px 8px;
  background: rgba(10,10,26,0.9); border-top: 1px solid rgba(139,92,246,0.2);
}
#chat-input {
  flex: 1; background: rgba(10,14,20,0.8); border: 1px solid rgba(139,92,246,0.2);
  border-radius: 4px; color: #aac; padding: 4px 8px;
  font: 0.7rem 'Courier New', monospace; outline: none;
}
#chat-input:focus { border-color: #8b5cf6; }
.chat-send-btn {
  background: #8b5cf6; color: #fff; border: none; border-radius: 4px;
  padding: 4px 12px; font: bold 0.65rem monospace; cursor: pointer;
}
.chat-send-btn:hover { background: #7c3aed; }

@media (max-width: 640px) {
  .chat-panel { width: 100%; }
  .hero-brand h1 { font-size: 2rem; }
}