/* V24.15 TARGETED BUGFIX - only requested UI fixes */
.v2415-no-chat-permission{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  margin:12px 16px;
  padding:12px 14px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:var(--bg-card,var(--bg-main));
  color:var(--text-sub);
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.v2415-no-chat-content{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  padding:20px;
  color:var(--text-sub);
  text-align:center;
  font-size:15px;
  font-weight:600;
}
/* Refined clean focus on composer */
.zalo-input-box.v2415-rainbow-input{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary) 0.2, transparent) !important;
  animation: none !important;
}


/* Send button follows the admin-selected global accent in both themes. */
.send-submit-btn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  flex:0 0 44px !important;
  border:0 !important;
  border-radius:50% !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--primary,#2563eb) !important;
  color:var(--primary-contrast,#fff) !important;
  box-shadow:0 3px 9px color-mix(in srgb,var(--primary,#2563eb) 28%,transparent) !important;
  transition:transform .14s ease,background .14s ease,box-shadow .14s ease !important;
}
.send-submit-btn:hover,
.send-submit-btn:focus-visible{
  background:color-mix(in srgb,var(--primary,#2563eb) 84%,#000) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 5px 13px color-mix(in srgb,var(--primary,#2563eb) 34%,transparent) !important;
  outline:none !important;
}
.send-submit-btn:active{
  transform:translateY(0) scale(.96) !important;
  box-shadow:0 2px 6px color-mix(in srgb,var(--primary,#2563eb) 24%,transparent) !important;
}
.send-submit-btn svg{
  width:20px !important;
  height:20px !important;
  fill:currentColor !important;
}
:root[data-theme="dark"] .send-submit-btn{
  background:var(--primary,#3b82f6) !important;
  color:var(--primary-contrast,#fff) !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary,#3b82f6) 34%,transparent) !important;
}
:root[data-theme="dark"] .send-submit-btn:hover,
:root[data-theme="dark"] .send-submit-btn:focus-visible{
  background:color-mix(in srgb,var(--primary,#3b82f6) 84%,#000) !important;
  color:var(--primary-contrast,#fff) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary,#3b82f6) 42%,transparent) !important;
}
:root[data-theme="light"] .send-submit-btn{
  background:var(--primary,#2563eb) !important;
  color:var(--primary-contrast,#fff) !important;
}

@media(max-width:767px){
  .zalo-input-box.v2415-rainbow-input{border-width:2px !important;border-radius:22px !important;}
  .send-submit-btn{width:42px !important;height:42px !important;min-width:42px !important;flex-basis:42px !important;}
}

/* Make admin action colors survive the existing theme/accent overrides. */
#adminModal #adminUserTable .action-btn{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important;}
#adminModal #adminUserTable .kick-btn{background:#fff !important;border-color:#fecaca !important;color:#ef4444 !important;}
#adminModal .admin-action-edit{background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
#adminModal .admin-action-toggle{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important;}
#adminModal .admin-action-delete{background:#ef4444 !important;border-color:#ef4444 !important;color:#fff !important;}
#adminModal .admin-action-forward{background:#16a34a !important;border-color:#16a34a !important;color:#fff !important;}
#adminModal #adminUserTable .action-btn::before,
#adminModal #adminUserTable .kick-btn::before,
#adminModal .admin-action-button::before{background:currentColor !important;}
#adminModal #adminUserTable .action-btn::before{background:#fff !important;}
#adminModal #adminUserTable .kick-btn::before{background:#ef4444 !important;}
#adminModal .admin-action-button::before{background:#fff !important;}

/* Mobile: keep edit/action buttons above table overflow and comfortably tappable. */
@media(max-width:767px){
  #adminModal .table-responsive{touch-action:pan-x pan-y !important;}
  #adminModal .admin-user-actions,
  #adminModal .admin-message-actions{position:relative;z-index:5;pointer-events:auto !important;}
  #adminModal #adminUserTable .action-btn,
  #adminModal #adminUserTable .kick-btn,
  #adminModal .admin-action-button{
    position:relative !important;
    z-index:6 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
  .sub-modal{
    z-index:30000 !important;
    pointer-events:auto !important;
    touch-action:auto !important;
  }
  .sub-modal-box{
    position:relative;
    z-index:30001;
    pointer-events:auto !important;
  }
}


/* FIX: theme-scoped rainbow focus must outrank V13/V14 border/background resets.
   The focus ring belongs ONLY to .zalo-input-box, never to the chat frame.
   :focus-within also keeps the effect reliable even if the focus handler is
   delayed/rebound by another chat UI script. */
:root[data-theme="light"] .zalo-input-box.v2415-rainbow-input,
:root[data-theme="dark"] .zalo-input-box.v2415-rainbow-input{
  position:relative !important;
  border:2px solid transparent !important;
  border-radius:22px !important;
  background:
    linear-gradient(var(--bg-main,#fff),var(--bg-main,#fff)) padding-box,
    linear-gradient(90deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55) border-box !important;
  background-clip:padding-box,border-box !important;
}

:root[data-theme="light"] .zalo-input-box:focus-within,
:root[data-theme="dark"] .zalo-input-box:focus-within{
  position:relative !important;
  border:2px solid transparent !important;
  border-radius:22px !important;
  background:
    linear-gradient(var(--bg-main,#fff),var(--bg-main,#fff)) padding-box,
    linear-gradient(90deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55) border-box !important;
  background-clip:padding-box,border-box !important;
  box-shadow:0 0 10px rgba(0,122,255,.20) !important;
}


/* ===== V24.15 MULTI-QUOTE + REPLY REFERENCE POLISH ===== */
.v2415-quote-selection-bar{
  flex-direction:column !important;
  gap:7px !important;
  padding:8px 12px !important;
  border-top:1px solid color-mix(in srgb,#2563eb 24%,var(--border-color)) !important;
  background:color-mix(in srgb,#2563eb 5%,var(--bg-header)) !important;
  color:var(--text-main) !important;
  box-shadow:0 -4px 16px rgba(37,99,235,.06) !important;
}
.v2415-quote-selection-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  font-size:12px !important;
  color:var(--text-sub) !important;
}
.v2415-quote-selection-head strong{color:#2563eb !important;font-weight:800 !important}
.v2415-quote-selection-clear{
  border:0 !important;
  background:transparent !important;
  color:#ef4444 !important;
  font-size:11px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  padding:3px 6px !important;
  border-radius:7px !important;
}
.v2415-quote-selection-clear:hover{background:rgba(239,68,68,.09) !important}
.v2415-quote-selection-list{
  display:flex !important;
  gap:7px !important;
  overflow-x:auto !important;
  scrollbar-width:thin !important;
  padding-bottom:1px !important;
}
.v2415-quote-selection-item{
  flex:0 0 min(260px,72vw) !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 8px !important;
  border:1px solid rgba(37,99,235,.20) !important;
  border-left:3px solid #2563eb !important;
  border-radius:10px !important;
  background:var(--bg-card,#fff) !important;
  box-shadow:0 2px 8px rgba(15,23,42,.07) !important;
}
.v2415-quote-selection-text{min-width:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
.v2415-quote-selection-text strong{font-size:11px !important;color:#2563eb !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.v2415-quote-selection-text span{font-size:11px !important;color:var(--text-sub) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.v2415-quote-selection-remove{
  flex:0 0 auto !important;
  width:23px !important;height:23px !important;
  border:0 !important;border-radius:50% !important;
  background:rgba(148,163,184,.12) !important;
  color:var(--text-sub) !important;
  font-size:17px !important;line-height:20px !important;
  cursor:pointer !important;
}
.v2415-quote-selection-remove:hover{background:rgba(239,68,68,.12) !important;color:#ef4444 !important}

/* Sent message references: reply = RIGHT accent, quote = LEFT accent. */
.msg-bubble .reply-quote-box.v2415-reply-reference{
  margin:5px 0 7px auto !important;
  border-left:0 !important;
  border-right:3px solid var(--quote-depth-color,#8b5cf6) !important;
  border-top:1px solid color-mix(in srgb,var(--quote-depth-color,#8b5cf6) 18%,transparent) !important;
  border-bottom:1px solid color-mix(in srgb,var(--quote-depth-color,#8b5cf6) 18%,transparent) !important;
  border-radius:10px 5px 5px 10px !important;
  background:color-mix(in srgb,var(--quote-depth-color,#8b5cf6) 8%,var(--bg-header)) !important;
}
.msg-bubble .reply-quote-box.v2415-quote-reference{
  margin:5px 0 7px 0 !important;
  border-left:3px solid var(--quote-depth-color,#2563eb) !important;
  border-right:0 !important;
  border-top:1px solid color-mix(in srgb,var(--quote-depth-color,#2563eb) 18%,transparent) !important;
  border-bottom:1px solid color-mix(in srgb,var(--quote-depth-color,#2563eb) 18%,transparent) !important;
  border-radius:5px 10px 10px 5px !important;
  background:color-mix(in srgb,var(--quote-depth-color,#2563eb) 7%,var(--bg-header)) !important;
}
.v2415-reference-head{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:2px !important}
.v2415-reference-type{font-size:10px !important;font-weight:800 !important;letter-spacing:.1px !important;white-space:nowrap !important;opacity:.92 !important}
.v2415-reply-reference .v2415-reference-type{color:#8b5cf6 !important}
.v2415-quote-reference .v2415-reference-type{color:#2563eb !important}
.v2415-reply-reference .reply-quote-sender{color:#8b5cf6 !important}
.v2415-quote-reference .reply-quote-sender{color:#2563eb !important}
.v2415-quote-reference .reply-quote-box{margin-left:7px !important}

/* Clear, premium navigation feedback when a reference jumps to its source. */
.msg-row.v2415-message-highlight{
  position:relative !important;
  z-index:8 !important;
  animation:v2415ReferenceRowGlow 2.8s cubic-bezier(.2,.72,.22,1) both !important;
}
.msg-bubble.v2415-message-highlight-inner{
  animation:v2415ReferenceBubbleGlow 2.8s cubic-bezier(.2,.72,.22,1) both !important;
}
@keyframes v2415ReferenceRowGlow{
  0%{filter:brightness(1);transform:scale(1)}
  10%{filter:brightness(1.12);transform:scale(1.012)}
  24%{filter:brightness(1.05);transform:scale(1.006)}
  55%{filter:brightness(1.02);transform:scale(1.002)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes v2415ReferenceBubbleGlow{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 4px 12px rgba(0,0,0,.08)}
  12%{box-shadow:0 0 0 3px rgba(37,99,235,.58),0 0 24px rgba(37,99,235,.32),0 8px 22px rgba(0,0,0,.12)}
  32%{box-shadow:0 0 0 5px rgba(139,92,246,.34),0 0 28px rgba(139,92,246,.22),0 8px 22px rgba(0,0,0,.10)}
  65%{box-shadow:0 0 0 3px rgba(37,99,235,.15),0 0 15px rgba(37,99,235,.08),0 5px 14px rgba(0,0,0,.08)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 4px 12px rgba(0,0,0,.08)}
}

.msg-row.v2415-quote-selected .msg-bubble{
  box-shadow:0 0 0 2px rgba(37,99,235,.38),0 0 18px rgba(37,99,235,.13) !important;
  transition:box-shadow .18s ease,transform .18s ease !important;
}
.msg-row.v2415-quote-selected .msg-bubble::after{
  content:'❝ Đã chọn trích dẫn' !important;
  display:block !important;
  margin-top:5px !important;
  color:#2563eb !important;
  font-size:10px !important;
  font-weight:800 !important;
  opacity:.82 !important;
}

.zalo-primary-quote-v2415 svg{width:17px !important;height:17px !important;fill:currentColor !important}
@media(max-width:700px){
  .v2415-quote-selection-bar{padding:7px 9px !important}
  .v2415-quote-selection-item{flex-basis:230px !important}
  .msg-bubble .reply-quote-box.v2415-reply-reference,
  .msg-bubble .reply-quote-box.v2415-quote-reference{max-width:100% !important}
}

/* Composer reference modes: quote = blue on left, reply = purple on right. */
#quoteSelectionBar{border-left:3px solid #2563eb !important;border-right:0 !important}
#replyPreviewBar{
  border-left:0 !important;
  border-right:3px solid #8b5cf6 !important;
  background:color-mix(in srgb,#8b5cf6 6%,var(--bg-header)) !important;
  padding:8px 12px !important;
}
#replyPreviewSender{color:#8b5cf6 !important}