/* V13 TARGETED FIXES - ONLY the 7 issues reported after V12.
   No chat/Firebase schema changes. */

/* 1) Composer: remove the framed "box inside box" look. The composer and
   input surface share the exact chat background in both themes. */
.chat-input-zone,
.zalo-toolbar,
.zalo-input-area,
.zalo-input-box{
  background:var(--bg-main) !important;
}
.chat-input-zone{
  border-top:0 !important;
}
.zalo-toolbar{
  border-bottom:0 !important;
}
.zalo-input-box{
  border:0 !important;
  box-shadow:none !important;
  border-radius:14px !important;
}
.chat-input{background:transparent !important;color:var(--text-main) !important;-webkit-text-fill-color:var(--text-main) !important}
.chat-input::placeholder{color:var(--text-sub) !important}

/* 3) Theme-matched scrollbars for the chat/right admin areas. */
.chat-window,
.sidebar-scroll-content,
.right-info-panel .panel-body,
.member-list-wrapper,
#adminModal .msg-mgmt-sidebar,
#adminModal .admin-message-scroll,
#adminModal .admin-log-scroll{
  scrollbar-color:color-mix(in srgb,var(--text-sub) 38%,var(--bg-main)) var(--bg-main);
  scrollbar-width:thin;
}
.chat-window::-webkit-scrollbar,
.sidebar-scroll-content::-webkit-scrollbar,
.right-info-panel .panel-body::-webkit-scrollbar,
.member-list-wrapper::-webkit-scrollbar,
#adminModal .msg-mgmt-sidebar::-webkit-scrollbar,
#adminModal .admin-message-scroll::-webkit-scrollbar,
#adminModal .admin-log-scroll::-webkit-scrollbar{width:6px;height:6px}
.chat-window::-webkit-scrollbar-track,
.sidebar-scroll-content::-webkit-scrollbar-track,
.right-info-panel .panel-body::-webkit-scrollbar-track,
.member-list-wrapper::-webkit-scrollbar-track,
#adminModal .msg-mgmt-sidebar::-webkit-scrollbar-track,
#adminModal .admin-message-scroll::-webkit-scrollbar-track,
#adminModal .admin-log-scroll::-webkit-scrollbar-track{background:var(--bg-main) !important}
.chat-window::-webkit-scrollbar-thumb,
.sidebar-scroll-content::-webkit-scrollbar-thumb,
.right-info-panel .panel-body::-webkit-scrollbar-thumb,
.member-list-wrapper::-webkit-scrollbar-thumb,
#adminModal .msg-mgmt-sidebar::-webkit-scrollbar-thumb,
#adminModal .admin-message-scroll::-webkit-scrollbar-thumb,
#adminModal .admin-log-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--text-sub) 34%,var(--bg-main)) !important;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--bg-main) 72%,transparent);
}
.chat-window::-webkit-scrollbar-thumb:hover,
.sidebar-scroll-content::-webkit-scrollbar-thumb:hover,
.right-info-panel .panel-body::-webkit-scrollbar-thumb:hover,
.member-list-wrapper::-webkit-scrollbar-thumb:hover,
#adminModal .msg-mgmt-sidebar::-webkit-scrollbar-thumb:hover,
#adminModal .admin-message-scroll::-webkit-scrollbar-thumb:hover,
#adminModal .admin-log-scroll::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--primary) 38%,var(--text-sub)) !important;
}

/* 5) Group delete: icon button, theme-aware surface, danger accent preserved. */
.v13-delete-group-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:100% !important;
  min-height:38px !important;
  margin-top:8px !important;
  background:var(--bg-main) !important;
  color:#ef4444 !important;
  border:1px solid color-mix(in srgb,#ef4444 38%,var(--border-color)) !important;
  border-radius:9px !important;
}
.v13-delete-group-btn:hover{background:color-mix(in srgb,#ef4444 9%,var(--bg-main)) !important;border-color:#ef4444 !important}
.v13-delete-group-icon{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 17px}
.v13-delete-group-icon svg{width:17px;height:17px;fill:currentColor}

/* 6) Admin action buttons follow the active theme instead of leaving white
   rectangles. Primary/danger actions retain their semantic colors. */
#adminModal .admin-user-actions .action-btn,
#adminModal .admin-message-actions .admin-action-button,
#adminModal .action-btn{
  background:var(--bg-header) !important;
  color:var(--text-main) !important;
  border:1px solid var(--border-color) !important;
  box-shadow:none !important;
}
#adminModal .admin-user-actions .action-btn:hover,
#adminModal .admin-message-actions .admin-action-button:hover,
#adminModal .action-btn:hover{
  background:var(--hover-bg) !important;
  border-color:var(--primary) !important;
  color:var(--text-main) !important;
}
#adminModal .admin-message-actions .admin-action-edit{background:var(--bg-header) !important;color:var(--primary) !important;border-color:var(--border-color) !important}
#adminModal .admin-message-actions .admin-action-toggle{background:var(--bg-header) !important;color:var(--primary) !important;border-color:var(--border-color) !important}
#adminModal .admin-message-actions .admin-action-delete{background:var(--bg-header) !important;color:#ef4444 !important;border-color:color-mix(in srgb,#ef4444 38%,var(--border-color)) !important}
#adminModal .admin-message-actions .admin-action-forward{background:var(--bg-header) !important;color:var(--primary) !important;border-color:var(--border-color) !important}

/* 7) Presence-specific legacy rules used !important orange. Override those
   only for the avatar circles, so the admin-selected accent really propagates. */
.room-avt.is-private,
.room-avt.is-private.presence-avatar-online,
.room-avt.is-private.presence-avatar-offline,
.room-avt.is-private.presence-avatar-idle,
.room-avt.is-private.presence-avatar-busy,
.member-dot.presence-avatar-online,
.member-dot.presence-avatar-offline,
.member-dot.presence-avatar-idle,
.member-dot.presence-avatar-busy,
.avatar,
.account-avatar-lg,
.panel-avt{
  background:var(--primary) !important;
  background-image:none !important;
}
.room-avt.is-private.presence-avatar-online,
.member-dot.presence-avatar-online{border-color:#22c55e !important;box-shadow:0 0 0 2px color-mix(in srgb,#22c55e 20%,transparent) !important}
.room-avt.is-private.presence-avatar-offline,
.member-dot.presence-avatar-offline{border-color:#94a3b8 !important;box-shadow:none !important}

/* Group avatar keeps a subtle accent tint rather than orange. */
.room-avt.is-group,.group-grid-avt{background:color-mix(in srgb,var(--primary) 18%,var(--bg-sidebar)) !important}

/* Media list in group management panel. */
.v13-group-media-section{margin-top:2px !important}
.v13-group-media-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--input-bg);border:1px solid var(--border-color);border-radius:10px;color:var(--text-main);font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.v13-group-media-head::after{content:'⌄';font-size:15px;line-height:1;transition:transform .18s ease;opacity:.75}
.v13-group-media-section.v13-collapsed .v13-group-media-head::after{transform:rotate(-90deg)}
.v13-group-media-list{display:none;flex-direction:column;gap:6px;margin-top:6px;max-height:220px;overflow-y:auto;padding-right:3px}
.v13-group-media-section.v13-expanded .v13-group-media-list{display:flex}
.v13-group-media-item{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px;background:color-mix(in srgb,var(--bg-main) 94%,var(--primary) 6%);border:1px solid var(--border-color);border-radius:9px;color:var(--text-main)}
.v13-group-media-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:7px;object-fit:cover;background:var(--bg-header);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:18px}
.v13-group-media-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.v13-group-media-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v13-group-media-time{font-size:9px;color:var(--text-sub)}
.v13-group-media-actions{display:flex;gap:4px;flex:0 0 auto}
.v13-group-media-action{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-color);background:var(--bg-header);color:var(--text-sub);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.v13-group-media-action:hover{color:var(--primary);border-color:var(--primary);background:var(--hover-bg)}
.v13-group-media-empty{padding:10px;color:var(--text-sub);font-size:11px;text-align:center}

@media(max-width:768px){
  .zalo-input-area{padding:7px 8px !important}
  .zalo-input-box{border-radius:14px !important}
  .v13-group-media-list{max-height:180px}
}

/* V15 targeted: composer must blend exactly into the chat surface in Light too.
   The legacy Light/Dark selectors in earlier CSS are more specific, so these
   theme-scoped rules intentionally match their specificity. */
:root[data-theme="light"] .chat-input-zone,
:root[data-theme="light"] .zalo-toolbar,
:root[data-theme="light"] .zalo-input-area,
:root[data-theme="light"] .zalo-input-box,
:root[data-theme="dark"] .chat-input-zone,
:root[data-theme="dark"] .zalo-toolbar,
:root[data-theme="dark"] .zalo-input-area,
:root[data-theme="dark"] .zalo-input-box{
  background:var(--bg-main) !important;
}
:root[data-theme="light"] .zalo-input-box,
:root[data-theme="dark"] .zalo-input-box{
  border:0 !important;
  box-shadow:none !important;
}