/* ================================================================ *\
 *                           V2 CHAT STYLES
 *             Shared chat styles for Feed and LiveChart
 * ================================================================ */

:root {
  --chat-bg: rgba(10, 14, 22, 0.6);
  --chat-border: rgba(148, 163, 184, 0.18);
  --chat-accent: rgba(99, 102, 241, 0.35);
  --chat-accent-strong: rgba(99, 102, 241, 0.55);
  --chat-text: #e2e8f0;
  --chat-muted: #94a3b8;
  --chat-success: #76ffd4;
}

/* Container used in Feed chat tab */
.chat-container {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-md);
  border-radius: var(--radius-2xl, 1.25rem);
  background-color: #060606;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

/* Header */
.asset-chat-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--chat-border);
  margin-bottom: 0.75rem;
}
.asset-chat-title {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  font-weight: 600;
  color: var(--chat-text);
}
.asset-chat-subtitle {
  font-size: 0.9rem;
  color: var(--chat-muted);
}

/* Messages */
.asset-chat-messages {
  ;
  border: 1px solid var(--chat-border);
  border-radius: 0.875rem;
  padding: 0.75rem;
  max-height: 52vh;
  overflow-y: auto;
}
.asset-chat-message {
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 0.55rem;
}
.asset-chat-message-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--chat-muted);
  font-size: 0.8rem;
}
.asset-chat-username {
  color: var(--chat-text);
  font-weight: 600;
}
.asset-chat-timestamp { color: var(--chat-muted); }
.asset-chat-message-content { color: var(--chat-text); line-height: 1.4; }

/* Input */
.asset-chat-input-section { margin-top: 0.75rem; }
.asset-chat-input-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.asset-chat-input {
  flex: 1;
  min-height: 40px;
  max-height: 140px;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  resize: none;
}
.asset-chat-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid var(--chat-accent);
  background: rgba(99, 102, 241, 0.18);
  color: #f8fafc;
  cursor: pointer;
}
.asset-chat-send-btn .spin { animation: chat-spin 0.9s linear infinite; }

@keyframes chat-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

/* LiveChart chat (chat.html) compatibility */
.chat-discussion { text-align: center; color: var(--chat-text); font-size: 1.05rem; margin-bottom: 0.75rem; }
.chat-messages-container { ; border: 1px solid var(--chat-border); border-radius: 0.875rem; padding: 0.75rem; max-height: 52vh; overflow-y: auto; }
.chat-message { margin-bottom: 0.6rem; padding: 0.6rem 0.7rem; background: rgba(148, 163, 184, 0.06); border-radius: 0.6rem; border-left: 3px solid var(--chat-accent); }
.chat-timestamp { font-size: 0.75rem; color: var(--chat-muted); margin-bottom: 0.25rem; }
.chat-author { font-weight: 600; color: var(--chat-text); text-decoration: none; }
.chat-author:hover { color: var(--chat-success); }
.discord-author { color: #63c6ff; }
.chat-message-text { color: var(--chat-text); margin-top: 0.35rem; }
.delete-form { margin-top: 0.35rem; text-align: right; }
.delete-btn { background: rgba(220,53,69,0.12); border: 1px solid rgba(220,53,69,0.28); color: #ef4444; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.75rem; cursor: pointer; }
.delete-btn:hover { background: rgba(220,53,69,0.22); }
.chat-input-section { margin-top: 0.75rem; }
.chat-textarea { width: 100%; background: rgba(15,23,42,0.5); border: 1px solid var(--chat-border); border-radius: 0.75rem; padding: 0.75rem; color: var(--chat-text); font-size: 0.9rem; resize: vertical; min-height: 80px; }
.chat-textarea:focus { outline: none; border-color: var(--chat-accent-strong); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.chat-send-btn { background: linear-gradient(135deg, #76ffd4, #63c6ff); color: #021827; border: none; padding: 0.75rem 1.2rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: transform 0.2s ease; }
.chat-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(118,255,212,0.25); }

/* Responsive */
@media (max-width: 768px) {
  .chat-container { padding: var(--space-sm); }
  .asset-chat-input-form { flex-direction: column; }
  .asset-chat-send-btn { width: 100%; justify-content: center; }
}