/* V12 TARGETED BUGFIXES
   Scope: theme/accent readability, nested replies, emoji/reactions,
   @all mention, and admin media/file management. No Firebase schema changes. */

/* 1-5) Accent-aware surfaces and readable active filter text. */
:root{
  --accent-surface: color-mix(in srgb,var(--primary,#f59e0b) 5%,var(--bg-main,#120f0b));
  --accent-surface-strong: color-mix(in srgb,var(--primary,#f59e0b) 9%,var(--bg-header,#2a2116));
  --accent-border: color-mix(in srgb,var(--primary,#f59e0b) 32%,var(--border-color,#334155));
}

.filter-tab{
  border-radius:9px !important;
  padding:7px 10px 6px !important;
  color:var(--text-sub) !important;
}
.filter-tab.active{
  color:var(--primary-contrast,#fff) !important;
  background:var(--primary,#f59e0b) !important;
  border-bottom:0 !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary,#f59e0b) 20%,transparent) !important;
}
.filter-tab:hover:not(.active){
  color:var(--text-main) !important;
  background:var(--hover-bg) !important;
}

.sidebar-menu,
.chat-main,
.right-info-panel,
.chat-header,
.chat-input-zone,
.admin-modal-body,
.msg-mgmt-content{
  background-color:var(--accent-surface) !important;
}
.chat-header,
.chat-input-zone,
.sidebar-menu .filter-tabs,
.admin-modal-header{
  background-color:var(--accent-surface-strong) !important;
}

/* Prevent old hard-coded orange surfaces from surviving an admin accent change. */
.create-btn,
.send-submit-btn,
.nav-icon.active,
.room-item.active,
.atab-btn.active,
.admin-table .badge.admin,
.account-avatar-lg,
.avatar,
.member-dot,
.room-avt.is-private{
  background-color:var(--primary) !important;
  background-image:none !important;
  color:var(--primary-contrast,#fff) !important;
}

/* Large contact/chat avatars follow the same global accent. */
.avatar,
.member-dot,
.account-avatar-lg,
.room-avt.is-private{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--border-color)) !important;
}
.group-grid-avt{background:color-mix(in srgb,var(--primary) 18%,var(--bg-sidebar)) !important}

/* 3) Composer: dark theme must stay dark, not the legacy white override. */
:root[data-theme="dark"] .zalo-input-box{
  background:color-mix(in srgb,var(--bg-main) 92%,#000 8%) !important;
  border-color:var(--accent-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 2px 8px rgba(0,0,0,.18) !important;
}
:root[data-theme="dark"] .chat-input{
  color:var(--text-main) !important;
  -webkit-text-fill-color:var(--text-main) !important;
  caret-color:var(--primary) !important;
}
:root[data-theme="dark"] .chat-input::placeholder{color:var(--text-sub) !important}
:root[data-theme="light"] .zalo-input-box{
  background:#fff !important;
  border-color:var(--accent-border) !important;
}

/* 6) Nested reply/quote chain. Each level remains clickable to the source. */
.reply-quote-box{
  border-left-color:var(--primary) !important;
  background:color-mix(in srgb,var(--primary) 8%,var(--bg-header)) !important;
  color:var(--text-main) !important;
}
.reply-quote-sender{color:var(--primary) !important}
.reply-quote-depth-1{margin-left:8px !important;opacity:.94}
.reply-quote-depth-2{margin-left:8px !important;opacity:.88}
.reply-quote-depth-3{margin-left:8px !important;opacity:.82}
.reply-quote-depth-4{margin-left:8px !important;opacity:.76}
.highlight-msg{
  animation:v12QuoteHighlight 1.7s ease-out !important;
}
@keyframes v12QuoteHighlight{
  0%,100%{box-shadow:0 0 0 0 transparent}
  25%{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 42%,transparent)}
  60%{box-shadow:0 0 0 8px color-mix(in srgb,var(--primary) 12%,transparent)}
}

/* 7 + 9) Native emoji rendering and large emoji-only messages. */
.msg-bubble,
.message-mention,
.chat-input{
  font-family:var(--chat-font-ui,'Segoe UI',system-ui,sans-serif),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji" !important;
}
.msg-bubble.emoji-only{
  font-size:72px !important;
  line-height:1.08 !important;
  letter-spacing:1px !important;
  padding:2px 5px !important;
  background:transparent !important;
}

/* 10) Zalo-like floating reaction animation. */
.reaction-fly-up{
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:90;
  pointer-events:none;
  font-size:32px;
  line-height:1;
  transform:translate(-50%,0) scale(.72);
  animation:v12ReactionFly 1s cubic-bezier(.18,.8,.25,1) forwards;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));
}
@keyframes v12ReactionFly{
  0%{opacity:0;transform:translate(-50%,12px) scale(.55) rotate(-7deg)}
  18%{opacity:1;transform:translate(-50%,0) scale(1.12) rotate(5deg)}
  55%{opacity:1;transform:translate(-50%,-52px) scale(1) rotate(-3deg)}
  100%{opacity:0;transform:translate(-50%,-105px) scale(.84) rotate(4deg)}
}

/* 8) @all suggestion. */
.mention-all-item{
  background:color-mix(in srgb,var(--primary) 7%,var(--hover-bg)) !important;
  border:1px solid color-mix(in srgb,var(--primary) 22%,transparent) !important;
}
.mention-all-item .mention-suggestion-avatar{background:var(--primary) !important;color:var(--primary-contrast) !important}

/* 11) Admin media/file rows: readable names, preview/download/forward. */
.admin-attachment-preview,
.admin-attachment-file{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  border:1px solid var(--border-color);
  border-radius:9px;
  padding:5px 7px;
  background:var(--hover-bg);
  color:var(--text-main);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.admin-attachment-preview img{
  width:42px;height:42px;object-fit:cover;border-radius:6px;flex:0 0 42px;
}
.admin-attachment-preview span,
.admin-attachment-file span:first-child,
.admin-attachment-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.admin-attachment-file{justify-content:space-between}
.admin-attachment-download{color:var(--primary);font-weight:700;flex:0 0 auto}
.admin-attachment-preview:hover,
.admin-attachment-file:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--hover-bg))}
.admin-action-forward{color:var(--primary) !important}

@media (max-width:700px){
  .msg-bubble.emoji-only{font-size:64px !important}
  .reaction-fly-up{font-size:30px}
}

/* Accent consistency for common primary controls; danger/delete remains red. */
.add-btn,
.v19-btn-primary,
.save-btn,
.update-btn,
.primary-btn,
.admin-action-forward{
  background:var(--primary) !important;
  color:var(--primary-contrast,#fff) !important;
  border-color:var(--primary) !important;
}
.add-btn:hover,
.v19-btn-primary:hover,
.save-btn:hover,
.update-btn:hover,
.primary-btn:hover{
  filter:brightness(.96);
}

/* Keep selected navigation/filter text readable on every accent. */
.nav-icon.active,
.atab-btn.active,
.room-item.active,
.filter-tab.active{
  color:var(--primary-contrast,#fff) !important;
}