/* ================================
   Crypto Community Chat – UI Styles
   Light + Dark (auto via prefers-color-scheme)
   Soft rounded (≈10px), premium card UI, mobile-first
   ================================ */

/* ---------- Theme Tokens ---------- */
:root {
  --ccc-bg: #ffffff;
  --ccc-card: #ffffff;
  --ccc-text: #0f172a;         /* slate-900 */
  --ccc-muted: #6b7280;        /* gray-500 */
  --ccc-soft: #e5e7eb;         /* gray-200 */
  --ccc-soft2: #f8fafc;        /* slate-50 */
  --ccc-primary: #2563eb;      /* blue-600 */
  --ccc-green: #16a34a;        /* green-600 */
  --ccc-red: #ef4444;          /* red-500 */
  --ccc-chip: #f3f4f6;         /* gray-100 */
  --ccc-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.04);
  --ccc-radius: 10px;          /* soft rounded */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Binance / Phantom style dark navy */
    --ccc-bg: #0b1220;         /* deep navy */
    --ccc-card: #0f172a;       /* slate-900-ish */
    --ccc-text: #e5e7eb;       /* slate-200 */
    --ccc-muted: #9ca3af;      /* gray-400 */
    --ccc-soft: #1f2937;       /* slate-800 border */
    --ccc-soft2: #0b1220;      /* same bg */
    --ccc-primary: #60a5fa;    /* blue-400 */
    --ccc-green: #22c55e;      /* green-500 */
    --ccc-red: #f43f5e;        /* rose-500 */
    --ccc-chip: #0d172b;       /* slightly lighter navy */
    --ccc-shadow: 0 2px 16px rgba(0,0,0,.35);
  }
}

/* Container (shortcode mount) */
#ccc-container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ccc-text);
}

/* Reusable primitives */
.ccc-card {
  background: var(--ccc-card);
  border: 1px solid var(--ccc-soft);
  border-radius: 14px;
  box-shadow: var(--ccc-shadow);
  overflow: hidden;
}
.ccc-section {
  padding: 14px 16px;
}
.ccc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ccc-space {
  height: 10px;
}

/* Inputs */
.ccc-input, .ccc-textarea, .ccc-search, .ccc-field {
  width: 100%;
  border: 1px solid var(--ccc-soft);
  background: var(--ccc-bg);
  color: var(--ccc-text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
}
.ccc-textarea { min-height: 86px; resize: vertical; }

/* Buttons */
.ccc-btn {
  border: 1px solid var(--ccc-soft);
  background: var(--ccc-chip);
  color: var(--ccc-text);
  border-radius: var(--ccc-radius);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.ccc-btn:hover { filter: brightness(0.97); }
.ccc-btn.primary {
  background: var(--ccc-primary);
  color: #fff;
  border-color: transparent;
}
.ccc-btn.green {
  background: rgba(22,163,74,.12);
  color: #065f46;
  border-color: transparent;
}
.ccc-btn.red {
  background: rgba(239,68,68,.12);
  color: #7f1d1d;
  border-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .ccc-btn.green { color: #bbf7d0; }
  .ccc-btn.red { color: #fecaca; }
}

/* Pills / Badges */
.ccc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--ccc-soft);
  background: var(--ccc-card);
  color: var(--ccc-muted);
}

/* Tabs */
.ccc-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--ccc-soft);
}
.ccc-tab {
  padding: 10px 2px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ccc-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ccc-tab.active {
  color: var(--ccc-text);
  border-bottom-color: var(--ccc-primary);
}

/* Feed */
.ccc-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ccc-post {
  background: var(--ccc-card);
  border: 1px solid var(--ccc-soft);
  border-radius: 12px;
  padding: 12px;
}
.ccc-post .ccc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ccc-muted);
}
.ccc-post .ccc-userline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ccc-post .ccc-sent {
  font-weight: 600;
  color: var(--ccc-muted);
}
.ccc-post img, .ccc-post video {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
  border: 1px solid var(--ccc-soft);
}
.ccc-post .ccc-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Follow button state */
.ccc-follow {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--ccc-soft);
  background: #fff;
  color: var(--ccc-text);
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .ccc-follow { background: var(--ccc-card); }
}
.ccc-follow.is-following {
  background: #e0ecff;
  border-color: #bfd3ff;
  color: #0b3b8f;
}
@media (prefers-color-scheme: dark) {
  .ccc-follow.is-following {
    background: #1f3b66;
    border-color: #2c4f8f;
    color: #cfe1ff;
  }
}

/* Alias inline edit (click-to-edit) */
.ccc-alias-edit {
  border-bottom: 1px dashed var(--ccc-soft);
  cursor: text;
}
.ccc-alias-edit:focus {
  outline: none;
  border-bottom-color: var(--ccc-primary);
}

/* Composer / Toolbar */
.ccc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.ccc-actions-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ccc-gif-input {
  width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
}

/* Sticky "Post" FAB (mobile) */
.ccc-fab {
  position: fixed;
  right: 16px;
  bottom: 84px; /* above WP toolbar on mobile */
  z-index: 9999;
  background: var(--ccc-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 800;
  box-shadow: var(--ccc-shadow);
  display: none; /* visible on mobile */
}
@media (max-width: 640px) {
  .ccc-fab { display: inline-flex; align-items: center; gap: 8px; }
  .ccc-toolbar { flex-direction: column; align-items: flex-start; }
  .ccc-actions-wrap { width: 100%; }
  .ccc-gif-input { width: 100%; }
}

/* Search box section */
.ccc-postbox {
  padding: 12px;
  border-top: 1px solid var(--ccc-soft);
  background: var(--ccc-soft2);
}

/* Empty state */
.ccc-empty {
  padding: 14px;
  color: var(--ccc-muted);
  font-size: 13px;
}

/* ------- Modal (Login + Comments) ------- */
.ccc-modal {
  display: none; /* toggled via JS */
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45); /* translucent backdrop */
  z-index: 10000;
}
.ccc-modal.show { display: block; }
.ccc-modal__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, 92vw);
  max-height: 86vh;
  overflow: auto;
  transform: translate(-50%, -50%);
  background: var(--ccc-card);
  border: 1px solid var(--ccc-soft);
  border-radius: 14px;
  box-shadow: var(--ccc-shadow);
  padding: 18px;
}
.ccc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ccc-modal__title {
  font-weight: 800;
  font-size: 16px;
}
.ccc-modal__close {
  border: 1px solid var(--ccc-soft);
  background: var(--ccc-chip);
  color: var(--ccc-text);
  border-radius: var(--ccc-radius);
  padding: 6px 10px;
  cursor: pointer;
}
.ccc-modal__body {
  display: grid;
  gap: 12px;
}

/* Comments list inside modal */
.ccc-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ccc-comment {
  border: 1px solid var(--ccc-soft);
  background: var(--ccc-card);
  border-radius: 10px;
  padding: 10px;
}
.ccc-comment .ccc-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ccc-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.ccc-comment .ccc-comment-text {
  font-size: 14px;
  color: var(--ccc-text);
  white-space: pre-wrap;
}

/* Reaction chips (like/dislike counters) */
.ccc-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ccc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--ccc-soft);
  border-radius: 999px;
  font-size: 12px;
  background: var(--ccc-card);
  color: var(--ccc-text);
  cursor: pointer;
}
.ccc-chip.is-active {
  background: rgba(37,99,235,.12);
  border-color: #c7d2fe;
  color: var(--ccc-primary);
}

/* Avatars */
.ccc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  border: 1px solid var(--ccc-soft);
}
@media (prefers-color-scheme: dark) {
  .ccc-avatar {
    background: linear-gradient(135deg, #1e293b, #334155);
  }
}

/* Utility */
.ccc-hidden { display: none !important; }
.ccc-right { margin-left: auto; }
.ccc-muted { color: var(--ccc-muted); }
.ccc-title { font-weight: 800; font-size: 16px; }

/* Centered Login/Register/Reset Modal */
.ccc-modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  justify-content:center;
  align-items:center;
  z-index:20000;
}
.ccc-modal.show{ display:flex; }
.ccc-modal__inner.ccc-modal-centered{
  width:100%; max-width:380px;
  background:var(--ccc-bg, #fff);
  color:var(--ccc-text, #111);
  padding:22px 20px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.ccc-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;}
.ccc-modal__close{background:none;border:none;font-size:20px;cursor:pointer;opacity:.7}
.ccc-auth-switch{text-align:center;font-size:13px;margin-top:10px;color:#666}
.ccc-link{color:#2563eb;cursor:pointer;text-decoration:underline}
.ccc-hidden{display:none}