/* ==========================================
   AKINF2P COMMUNITY PAGE STYLES
========================================== */

.community-page {
  padding: 100px 16px 40px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.community-container {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: calc(88vh - 100px);
  min-height: 600px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* Channel Tabs — sits inside the main chat window, not a side drawer */
.channel-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(15, 10, 5, 0.95);
  border-bottom: 1px solid var(--gold-border);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.channel-tabs-bar::-webkit-scrollbar {
  height: 4px;
}

.channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.channel:hover {
  background: rgba(224, 179, 81, 0.08);
  color: #fff;
}

.channel.active {
  background: var(--gold-light);
  color: var(--gold);
  border: 1px solid var(--gold-border);
}

.channel i {
  font-size: 1rem;
}

/* Chat Main Area */
.chat-main-area {
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.channel-page {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.channel-page.active {
  display: flex;
}

/* Chat Header & Dropdown placement */
.chat-header {
  padding: 14px 20px;
  background: rgba(20, 13, 6, 0.9);
  border-bottom: 1px solid rgba(224, 179, 81, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative; /* Anchor point for dropdowns */
  z-index: 30;
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.chat-header-title h2 {
  font-size: 1.15rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search Bar in Chat Header */
.chat-search-wrap {
  position: relative;
  max-width: 220px;
  width: 100%;
}

.chat-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--bg-input);
  border: 1px solid rgba(224, 179, 81, 0.2);
  border-radius: 20px;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
}

.chat-search-input:focus {
  border-color: var(--gold);
}

.chat-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

/* Dropdown Menu on Chat Header (DROPS DOWN NOT UP) */
.chat-dropdown-menu {
  position: absolute;
  top: 100%; /* Drop down below header */
  right: 16px;
  left: auto;
  margin-top: 8px; /* Space so it does NOT overlap title */
  background: rgba(18, 12, 6, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85);
  z-index: 50; /* Sits above messages, below modals */
  display: none;
}

.chat-dropdown-menu.active {
  display: block;
  animation: fadeInDown 0.2s ease-out;
}

.chat-dropdown-item {
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease;
}

.chat-dropdown-item:hover {
  background: var(--gold-light);
  color: var(--gold);
}

/* Messages Scroll Container */
.chat-messages {
  flex: 1;
  padding: 30px 20px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 179, 81, 0.35) transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(224, 179, 81, 0.35);
  border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(224, 179, 81, 0.6);
}

/* Empty Chat State */
.empty-chat-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 12px;
  text-align: center;
}

.empty-chat-state i {
  font-size: 2.5rem;
  color: var(--gold);
}

/* Individual Message Box */
.message {
  display: flex;
  gap: 14px;
  position: relative;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.message:hover {
  background: rgba(224, 179, 81, 0.05);
}

.community-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  border: 1px solid var(--gold-border);
  position: relative;
}

.community-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.community-avatar.owner-avatar {
  border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(224, 179, 81, 0.4);
}

.community-avatar.is-online::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Slightly inside the avatar edge */
  right: -2px; /* Slightly inside the avatar edge */
  width: 14px; /* Slightly larger badge size */
  height: 14px; /* Slightly larger badge size */
  background: #00e676; /* Official vibrant WhatsApp online green */
  border: 3px solid #0b141a; /* Thick dark border matching your background */
  border-radius: 50%;
  box-sizing: border-box; /* Keeps the border inside the 14px size */
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.message-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Inline message edit (replaces the old native prompt() popup) */
.inline-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0;
}

.inline-edit-textarea {
  width: 100%;
  resize: none;
  background: var(--bg-input);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-light);
}

.inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.inline-edit-actions button {
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inline-edit-cancel {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--gold-border) !important;
}

.inline-edit-cancel:hover {
  color: var(--text-primary);
}

.inline-edit-save {
  background: var(--gold);
  color: #1a1207;
}

.inline-edit-save:hover {
  background: var(--gold-hover);
  color: #fff;
}

.message-timestamp {
  font-size: 0.72rem;
  color: #a39580;
  margin-left: auto;
  font-weight: 500;
}

.username {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.username.owner {
  color: var(--gold);
}

.role {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.owner-role {
  background: var(--gold);
  color: #000;
}

.admin-role {
  background: linear-gradient(135deg, #e0b351, #b45309);
  color: #000;
  font-weight: 800;
}

.mod-role {
  background: rgba(224, 179, 81, 0.2);
  border: 1px solid rgba(224, 179, 81, 0.4);
  color: #fef08a;
}

.vip-role {
  background: linear-gradient(
    135deg,
    var(--vip-accent),
    var(--vip-accent-dark)
  );
  color: #1a1207;
  font-weight: 800;
}

.banned-role {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.message p {
  color: #e2d8c8;
  font-size: 0.95rem;
  word-break: break-word;
}

/* Chat image attachments — sized like a real chat bubble image (WhatsApp-
   style) instead of a small 240px thumbnail. Caps out at a sensible max
   so a huge photo doesn't dominate the message list, but is otherwise
   free to fill the message column. */
.message-image-preview {
  margin-top: 6px;
  max-width: 360px;
}

.message-image-preview img {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.message-image-preview img:hover {
  opacity: 0.92;
}

@media (max-width: 768px) {
  .message-image-preview,
  .message-image-preview img {
    max-width: 260px;
  }
}

mark.search-highlight {
  background: rgba(255, 215, 0, 0.45);
  color: #ffffff;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* Reply Quote */
.reply-quote {
  background: rgba(224, 179, 81, 0.1);
  border-left: 3px solid var(--gold);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Hover Action Bar — anchored to the message's own content box (not the
   whole message row), so it always sits right next to the timestamp
   regardless of how tall or short the message is. */
.message-hover-actions {
  position: absolute;
  bottom: 0;
  top: auto;
  right: 0;
  background: rgba(28, 19, 10, 0.98);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 4px 8px;
  display: none;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
  z-index: 30;
  transform-origin: bottom right;
}

.message:hover .message-hover-actions {
  display: flex;
  animation: whatsappPopUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-hover-actions.mobile-visible {
  display: flex;
  animation: whatsappPopUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.88rem;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.hover-action-btn:hover {
  color: var(--gold);
  background: var(--gold-light);
}

/* Reaction Pill. Now that community.js is in hand: the timestamp
   actually lives in .message-bottom-meta, at the BOTTOM of the message
   (WhatsApp-style), with .message-hover-actions overlapping right on
   top of it (bottom: 0; right: 0). The old `bottom: 100%` floated this
   tray a full tray-height above the whole message instead — wrong
   corner entirely, and for messages near the top of the scroll list it
   got clipped by .chat-messages' overflow.
   Fix: anchor it to the bottom too (next to the timestamp, like the
   design intends), just high enough to clear the hover-actions icon
   row so the two don't overlap, and anchor it from the left instead of
   the right so it opens on the side nearer the "React" button (the
   first icon in that row) rather than teleporting to the message's far
   right edge. */
.hover-react-tray {
  position: absolute;
  bottom: 40px;
  top: auto;
  left: 0;
  right: auto;
  margin-bottom: 0;
  max-width: min(280px, calc(100vw - 32px));
  background: rgba(28, 19, 10, 0.98);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: 6px 8px;
  display: none;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* row still scrolls by touch/drag/wheel, just no visible track — matches the pill look of Telegram/Discord reaction rows */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.85);
  z-index: 40;
  transform-origin: bottom left;
}

.hover-react-tray::-webkit-scrollbar {
  display: none;
}

.hover-react-tray.active {
  display: flex;
  animation: whatsappPopUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes whatsappPopUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.react-emoji {
  background: transparent;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.15s ease;
  padding: 4px 5px;
  border-radius: 50%;
  line-height: 1;
}

.react-emoji:hover {
  transform: scale(1.25);
  background: var(--gold-light);
}

/* The + button used to inherit .react-emoji's padding (4px 5px) plus its
   own padding-left: 9px for the divider line — that lopsided left/right
   padding is what pushed the "+" glyph off-center. Fixed width/height +
   flex centering guarantees it's centered no matter what markup (text
   "+" or an <i> icon) ends up inside it; the divider moves to a
   pseudo-element so it no longer eats into the button's own box. */
.react-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--gold);
  font-size: 0.95rem;
  margin-left: 8px;
  position: relative;
}

.react-expand-btn::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
}

.react-expand-btn:hover {
  transform: none;
  color: #fff;
}

/* Message Reactions Badges */
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.reaction {
  background: var(--bg-input);
  border: 1px solid rgba(224, 179, 81, 0.2);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reaction.reaction-mine {
  border-color: var(--gold);
  background: var(--gold-light);
  color: var(--gold);
}

/* Chat Drag & Drop Dropzone Overlay */
.chat-dropzone-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 4, 0.88);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 12px;
}

.chat-dropzone-overlay.active {
  display: flex;
  pointer-events: auto;
}

.dropzone-box {
  border: 2px dashed var(--gold);
  border-radius: 20px;
  padding: 36px 50px;
  text-align: center;
  background: rgba(224, 179, 81, 0.1);
  box-shadow: 0 0 35px rgba(224, 179, 81, 0.3);
  animation: pulseGlow 1.5s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 20px rgba(224, 179, 81, 0.2);
  }
  100% {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(224, 179, 81, 0.5);
  }
}

.dropzone-box i {
  font-size: 3.5rem;
  color: var(--gold);
  margin-bottom: 12px;
}

.dropzone-box h3 {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 6px;
}

.dropzone-box p {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Image Attachment Preview Bar */
.image-attachment-preview {
  display: none;
  width: 100%;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(224, 179, 81, 0.15);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: 6px 12px;
  max-width: 100%;
}

/* Chat Input Bar */
.chat-input-bar {
  padding: 16px 20px;
  background: rgba(20, 13, 6, 0.95);
  border-top: 1px solid rgba(224, 179, 81, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: relative;
}

.chat-input-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid rgba(224, 179, 81, 0.25);
  border-radius: 24px;
  padding: 6px 16px;
  transition: border-color 0.2s ease;
}

.chat-input-wrapper:focus-within {
  border-color: var(--gold);
}

.chat-message-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  padding: 6px 0;
}

.input-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.15s ease;
}

.input-action-btn:hover {
  color: var(--gold);
  background: var(--gold-light);
}

.input-action-btn:active {
  transform: scale(0.92);
}

.send-message-btn {
  background: var(--gold);
  color: #000;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
  flex-shrink: 0;
}

.send-message-btn:hover {
  transform: scale(1.08);
  background: var(--gold-hover);
}

.send-message-btn:active {
  transform: scale(0.94);
}

/* Ready for when the send handler disables the button while a message is
   in flight — the fix for the "sent 4 times" bug is disabling this on
   click and re-enabling on success/error, which lives in community.js. */
.send-message-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* VIP Locked Overlay inside Community */

/* ==========================================
   GIVEAWAY BANNER + REDEEM BOX (mobile-safe)
========================================== */
.giveaway-banner {
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(42, 33, 18, 0.95));
  border-bottom: 2px solid var(--gold);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.giveaway-banner-icon {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 6rem;
  color: rgba(224, 179, 81, 0.05);
  pointer-events: none;
  transform: rotate(-15deg);
  z-index: 0;
}

.giveaway-banner-info {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.giveaway-banner-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.giveaway-tag-active {
  background: rgba(224, 179, 81, 0.2);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.giveaway-tag-live {
  color: #4ade80;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.giveaway-tag-live i {
  font-size: 0.5rem;
}

.giveaway-banner-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.giveaway-banner-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.giveaway-redeem-box {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  margin: 0 auto;
  gap: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.giveaway-redeem-label {
  font-size: 0.76rem;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.giveaway-redeem-row {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

.giveaway-redeem-input {
  flex: 1 1 120px;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.giveaway-redeem-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--gold), #b8860b);
  color: #111;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.giveaway-redeem-btn:hover {
  filter: brightness(1.1);
}

.giveaway-redeem-error {
  font-size: 0.75rem;
  margin: 0;
  min-height: 16px;
  text-align: center;
  width: 100%;
}

@media (max-width: 480px) {
  .giveaway-redeem-row {
    flex-direction: column;
  }

  .giveaway-redeem-btn {
    width: 100%;
  }
}

/* ==========================================
   GIVEAWAY UNLOCKED ACCOUNT — centered modal overlay
========================================== */
.giveaway-unlocked-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.giveaway-unlocked-overlay.visible {
  display: flex;
}

.giveaway-unlocked-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  background: var(--bg-card);
  border: 2px solid #22c55e;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  position: relative;
  text-align: center;
}

.giveaway-unlocked-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.giveaway-unlocked-close:hover {
  color: #fff;
}

.giveaway-unlocked-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #4ade80;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 10px;
}

.giveaway-unlocked-desc {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 14px;
  line-height: 1.4;
}

.giveaway-unlocked-text {
  margin: 0 0 16px;
  width: 100%;
  box-sizing: border-box;
  max-height: 220px;
  color: #fff;
  font-family: monospace;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  text-align: left;
}

.giveaway-unlocked-copy-btn {
  width: 100%;
  box-sizing: border-box;
  background: #22c55e;
  color: #000;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

.giveaway-unlocked-copy-btn:hover {
  background: #16a34a;
}

.vip-locked-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
  background: rgba(13, 8, 4, 0.95);
}

.vip-locked-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vip-locked-card i {
  font-size: 3rem;
  color: var(--gold);
}

/* Mobile Responsive Adjustments */
@media (max-width: 992px) {
  .community-container {
    display: flex;
  }

  .channel-tabs-bar {
    padding: 10px 12px;
  }

  .channel {
    font-size: 0.82rem;
    padding: 8px 12px;
  }
}

@media (max-width: 768px) {
  .chat-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .chat-header-title h2 {
    font-size: 1.02rem;
  }

  .chat-search-wrap {
    width: 32px;
    height: 32px;
    max-width: none;
    flex-shrink: 0;
    margin-left: auto;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .chat-search-wrap:focus-within {
    width: 110px;
  }

  .chat-search-input {
    height: 100%;
    padding: 0 8px 0 28px;
    font-size: 0.8rem;
  }

  .chat-search-wrap i {
    left: 10px;
    font-size: 0.8rem;
  }

  /* Chat Input Bar - Same Line on Mobile */
  .chat-input-bar {
    padding: 6px 8px;
    gap: 4px;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Deliberately no overflow:hidden here — that was clipping the emoji
       picker panel, which is meant to float above this bar and is much
       taller than it. The row itself can't overflow sideways anyway:
       .chat-input-wrapper has min-width:0 to shrink, and the buttons
       either side have flex-shrink:0, so nothing here needs clipping. */
  }

  .chat-input-wrapper {
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    height: 36px;
    box-sizing: border-box;
  }

  .chat-message-input {
    font-size: 0.84rem;
    padding: 4px 0;
    width: 100%;
    min-width: 0;
  }

  .input-action-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0.95rem;
  }

  .send-message-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    flex-shrink: 0;
    padding: 0;
    font-size: 0.85rem;
    margin: 0;
  }

  /* Compact Message Bubbles on Mobile */
  .chat-messages {
    padding: 10px 8px;
    gap: 6px;
  }

  .message {
    padding: 6px 8px;
    gap: 8px;
    border-radius: 8px;
  }

  .community-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .username {
    font-size: 0.84rem;
  }

  .role {
    font-size: 0.65rem;
    padding: 1px 5px;
  }

  .message-timestamp {
    font-size: 0.65rem;
  }

  .message p {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .reply-quote {
    padding: 4px 8px;
    font-size: 0.78rem;
    margin-bottom: 4px;
  }

  .message-reactions {
    margin-top: 3px;
    gap: 4px;
  }

  .reaction {
    padding: 1px 6px;
    font-size: 0.72rem;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   USER PROFILE VISUAL BADGE SYSTEM STYLES
   ========================================== */

.username,
.community-avatar {
  cursor: pointer;
}

.user-badges-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.user-badges-group.compact {
  gap: 4px;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  user-select: none;
}

.user-badge:hover {
  transform: translateY(-1px);
}

/* VIP Member Badge */
.user-badge.badge-vip {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.25),
    rgba(180, 83, 9, 0.45)
  );
  border: 1px solid rgba(245, 158, 11, 0.65);
  color: #fef08a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.user-badge.badge-vip i {
  color: #fbbf24;
}

/* Giveaway Winner Badge */
.user-badge.badge-winner {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.25),
    rgba(4, 120, 87, 0.45)
  );
  border: 1px solid rgba(16, 185, 129, 0.65);
  color: #a7f3d0;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.user-badge.badge-winner i {
  color: #34d399;
}

/* Community Contributor Badge */
.user-badge.badge-contributor {
  background: linear-gradient(
    135deg,
    rgba(224, 179, 81, 0.25),
    rgba(180, 83, 9, 0.45)
  );
  border: 1px solid rgba(224, 179, 81, 0.65);
  color: #fef08a;
  box-shadow: 0 0 10px rgba(224, 179, 81, 0.25);
}

.user-badge.badge-contributor i {
  color: #c084fc;
}

/* USER PROFILE CARD MODAL */
.user-profile-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.user-profile-modal.active {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}

.user-profile-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(224, 179, 81, 0.35);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(224, 179, 81, 0.15);
  animation: fadeInUp 0.25s ease-out;
}

.close-profile-modal {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.close-profile-modal:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
}

.user-profile-banner {
  height: 100px;
  background: linear-gradient(
    135deg,
    rgba(224, 179, 81, 0.3),
    rgba(168, 85, 247, 0.3),
    rgba(15, 23, 42, 0.9)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-profile-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #000;
  box-shadow: 0 0 15px rgba(224, 179, 81, 0.5);
  margin: -40px auto 10px;
  overflow: hidden;
  background: #0f172a;
}

.user-profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-info {
  text-align: center;
  padding: 0 20px 14px;
}

.user-profile-info h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.user-profile-badges-section {
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.user-profile-badges-section h4 {
  font-size: 0.82rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-badges-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.badge-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.badge-card-item.active {
  background: rgba(255, 255, 255, 0.06);
}

.badge-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.badge-card-info {
  flex: 1;
}

.badge-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-card-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}

.user-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 20px;
}

.profile-stat-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.profile-stat-box .stat-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  display: block;
}

.profile-stat-box .stat-label {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
}

.user-profile-actions {
  padding: 0 20px 18px;
}

/* ==========================================
   EMOJI PICKER — categorized, searchable "keyboard" style panel.
   Used both by the compose-box "Add Emoji" button and the
   reaction pill's expand (+) button.
========================================== */
.chat-input-bar {
  position: relative;
}

.emoji-picker-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  height: min(380px, 60vh);
  height: min(380px, 60dvh);
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  z-index: 90;
  flex-direction: column;
  gap: 8px;
}

.emoji-picker-panel.active {
  display: flex;
  animation: fadeInUp 0.2s ease-out;
}

/* Fixed-position variant used for the shared reaction picker,
   which is appended to <body> and positioned via JS. */
.shared-reaction-picker {
  bottom: auto;
  right: auto;
}

.emoji-picker-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  padding: 7px 10px;
  flex-shrink: 0;
}

.emoji-picker-search-wrap i {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.emoji-picker-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.82rem;
}

.emoji-picker-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.emoji-cat-tab {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.emoji-cat-tab:hover {
  color: #fff;
}

.emoji-cat-tab.active {
  background: var(--gold-light);
  border-color: var(--gold-border);
  color: var(--gold);
}

.emoji-picker-grid {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 179, 81, 0.4) transparent;
}

.emoji-picker-grid::-webkit-scrollbar {
  width: 6px;
}

.emoji-picker-grid::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(224, 179, 81, 0.4);
  border-radius: 10px;
}

.emoji-picker-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(224, 179, 81, 0.65);
}

.emoji-cat-section {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.emoji-pick {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.emoji-pick:hover {
  background: var(--gold-light);
  transform: scale(1.15);
}

@media (max-width: 480px) {
  .emoji-picker-panel {
    right: -8px;
    width: 268px;
  }
}

/* Respect the OS-level "reduce motion" setting: keep every popup/tray
   functional, just swap the pop/slide animations for an instant show
   and turn off smooth-scroll easing. */
@media (prefers-reduced-motion: reduce) {
  .hover-react-tray.active,
  .emoji-picker-panel.active,
  .message-hover-actions.mobile-visible,
  .message:hover .message-hover-actions,
  .chat-dropdown-menu.active,
  .user-profile-modal.active,
  .user-profile-card {
    animation: none !important;
  }

  .chat-messages,
  .emoji-picker-grid,
  .emoji-picker-tabs,
  .channel-tabs-bar,
  .hover-react-tray {
    scroll-behavior: auto;
  }
}