/* V10 TARGETED UI FIXES
   Scope: admin message list (desktop only), composer theme/icon polish,
   and the admin-selectable global accent color.
   Does not alter chat/message logic or mobile admin layout. */

/* ---------- Global accent token ---------- */
:root{
  --primary:var(--primary);
  --primary-contrast:#ffffff;
  --primary-soft:color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-border:color-mix(in srgb, var(--primary) 48%, var(--border-color));
}

/* ---------- Composer ---------- */
.chat-input-zone{
  background:var(--bg-header) !important;
  border-top-color:var(--border-color) !important;
}
.zalo-toolbar{
  background:transparent !important;
  border-bottom:1px solid color-mix(in srgb,var(--border-color) 72%,transparent) !important;
  padding:7px 14px !important;
  gap:10px !important;
}
.z-tool-icon{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  color:var(--text-sub) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  transition:background .16s ease,color .16s ease,transform .16s ease,border-color .16s ease !important;
}
.z-tool-icon svg{width:21px !important;height:21px !important;fill:currentColor !important}
.z-tool-icon:hover,.z-tool-icon:focus-visible{
  color:var(--primary) !important;
  background:var(--primary-soft) !important;
  border-color:var(--primary-border) !important;
  transform:translateY(-1px);
}
.zalo-input-area{padding:9px 14px !important;gap:9px !important;background:transparent !important}
.zalo-input-box{
  background:var(--bg-main) !important;
  border:1px solid color-mix(in srgb,var(--border-color) 92%,transparent) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  padding:7px 13px !important;
}
.chat-input{
  background:transparent !important;
  color:var(--text-main) !important;
  -webkit-text-fill-color:var(--text-main) !important;
  caret-color:var(--primary) !important;
}
.chat-input::placeholder{color:var(--text-sub) !important;opacity:.88 !important}
.send-submit-btn{
  width:40px !important;height:40px !important;border-radius:12px !important;
  background:var(--primary) !important;color:var(--primary-contrast) !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 25%,transparent) !important;
}
.send-submit-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.send-submit-btn svg{width:20px !important;height:20px !important;fill:currentColor !important}

/* Light theme keeps a clean neutral input; dark theme follows the dark chat surface. */
:root[data-theme="light"] .zalo-input-box{background:#ffffff !important}
:root[data-theme="dark"] .zalo-input-box{background:var(--bg-main) !important}

/* ---------- Admin message list: desktop only ---------- */
@media (min-width:1025px){
  #adminModal .msg-mgmt-container{height:60vh !important;min-height:420px !important}
  #adminModal .msg-mgmt-sidebar{
    width:300px !important;
    flex:0 0 300px !important;
    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:8px !important;
    background:var(--bg-sidebar) !important;
  }
  #adminModal .msg-mgmt-room-item{
    display:flex !important;
    width:100% !important;
    min-height:52px !important;
    margin:0 0 6px !important;
    padding:13px 14px !important;
    align-items:center !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    background:transparent !important;
    color:var(--text-main) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:left !important;
  }
  #adminModal .msg-mgmt-room-item:hover{
    background:var(--hover-bg) !important;
    border-color:color-mix(in srgb,var(--border-color) 75%,transparent) !important;
  }
  #adminModal .msg-mgmt-room-item.active{
    background:var(--primary) !important;
    color:var(--primary-contrast) !important;
    border-color:var(--primary) !important;
    box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 20%,transparent) !important;
  }
  #adminModal .msg-mgmt-room-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #adminModal .msg-mgmt-content>div:first-child{
    min-height:64px !important;
    padding:12px 16px !important;
    gap:18px !important;
  }
  #adminModal #adminSelectedRoomTitle{
    flex:1 1 auto !important;
    min-width:0 !important;
    color:var(--text-main) !important;
    font-size:15px !important;
    font-weight:800 !important;
  }
  #adminModal #admMsgSearchInput{
    flex:0 1 420px !important;
    width:min(420px,42%) !important;
    max-width:none !important;
    margin-left:auto !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
}

/* Restore the established mobile/tablet horizontal room selector. */
@media (max-width:1024px){
  #adminModal .msg-mgmt-sidebar{
    display:flex !important;
    width:100% !important;
    height:96px !important;
    flex:0 0 96px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--border-color) !important;
  }
  #adminModal .msg-mgmt-room-item{
    min-width:150px !important;
    max-width:200px !important;
    min-height:48px !important;
    margin:0 !important;
    border:0 !important;
    border-right:1px solid var(--border-color) !important;
    border-radius:0 !important;
    white-space:nowrap !important;
  }
  #adminModal .msg-mgmt-content>div:first-child{padding:8px !important;gap:6px !important;flex-wrap:wrap !important}
  #adminModal .msg-mgmt-content #admMsgSearchInput{width:100% !important;max-width:none !important;margin-left:0 !important}
}

/* ---------- Accent color propagation ---------- */
.nav-icon.active{background:var(--primary) !important;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 34%,transparent) !important}
.create-btn,.send-submit-btn{background:var(--primary) !important;color:var(--primary-contrast) !important}
.filter-tab.active{color:var(--primary) !important;border-bottom-color:var(--primary) !important}
.search-input:focus,.msg-search-box:focus{border-color:var(--primary) !important}
.z-tool-icon:hover,.z-tool-icon:focus-visible{color:var(--primary) !important}
.chat-header-status{color:#10b981}
.atab-btn.active{background:var(--primary) !important;color:var(--primary-contrast) !important}
.admin-table .action-btn:hover{border-color:var(--primary) !important}
.account-avatar-lg{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#ffffff)) !important}
.room-avt.is-private{background:var(--primary) !important}
.room-item.active{background:var(--primary) !important}

/* Theme-aware emoji panel accents without changing its existing behavior. */
.emoji-cell:hover,.zalo-popup-footer span:hover{color:var(--primary) !important}

/* ---------- Admin accent picker ---------- */
.admin-accent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.admin-accent-option{min-width:0;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border-color);border-radius:11px;background:var(--hover-bg);color:var(--text-main);cursor:pointer;font:inherit;text-align:left;transition:.16s ease}
.admin-accent-option:hover{border-color:var(--primary);transform:translateY(-1px)}
.admin-accent-option.selected{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent);background:color-mix(in srgb,var(--primary) 8%,var(--hover-bg))}
.admin-accent-swatch{width:24px;height:24px;border-radius:50%;background:var(--sw);border:1px solid rgba(100,116,139,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);flex:0 0 auto}
@media(max-width:600px){.admin-accent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-accent-option{font-size:11px;padding:8px}}

/* Additional global accent surfaces: only visual tokens, no behavior changes. */
.avatar{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,#ffffff)) !important}
.create-btn:hover{background:color-mix(in srgb,var(--primary) 84%,#000000) !important}
.room-item.active .room-sub{color:color-mix(in srgb,var(--primary-contrast) 82%,transparent) !important}
.message-info-status.seen{color:var(--primary) !important}
.reply-quote-box strong,.message-mention{color:var(--primary) !important}
.inline-edit-pencil{color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 12%,transparent) !important}
.account-modal .v19-input:focus,.account-modal .v19-select:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent) !important}