/* V7.17 - targeted UI only */

/* 1) Presence: offline must always be gray, even if a stale class survives. */
.presence-dot.offline{background:#94a3b8 !important;border-color:#0f172a !important}
.presence-dot.online{background:#22c55e !important}
/* Header status uses a pseudo-element; force the dot to follow the real state. */
.chat-header-status.online-text::before{background:#22c55e !important}
.chat-header-status.idle-text::before{background:var(--primary) !important}
.chat-header-status.busy-text::before{background:#ef4444 !important}
.chat-header-status.offline-text{color:#94a3b8 !important}
.chat-header-status.offline-text::before{background:#94a3b8 !important}
.presence-dot-inline.offline{background:#94a3b8 !important}

/* 2) Reaction badge: translucent dark glass, never a white pill in dark mode. */
:root[data-theme="dark"] .msg-bubble-wrapper > .reactions-badge,
:root[data-theme="dark"] .reactions-badge{
  background:rgba(24,27,32,.72) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%) !important;
}

/* 3) File attachment staging + link preview. */
.attachment-preview-container{display:none;padding:8px 14px;border-top:1px solid rgba(255,255,255,.05);background:var(--bg-header,#211b14)}
.attachment-preview-container.show{display:block}
.attachment-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;color:var(--text-sub)}
.attachment-upload-global-status{margin-left:auto;color:var(--primary);font-size:11px;font-weight:600}
.attachment-preview-head button:disabled,.attachment-preview-item button:disabled{opacity:.45;cursor:not-allowed}
.attachment-preview-head button{border:0;background:transparent;color:#ef4444;cursor:pointer;font-size:12px}
.attachment-preview-list{display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.attachment-preview-item{position:relative;display:flex;align-items:center;gap:7px;min-width:180px;max-width:280px;padding:7px 9px;border:1px solid var(--border-color);border-radius:10px;background:rgba(255,255,255,.035)}
.attachment-preview-icon{font-size:20px;flex:0 0 auto}
.attachment-preview-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main);font-size:12px}
.attachment-preview-status{color:var(--primary);font-size:10px;white-space:nowrap;min-width:62px;text-align:right}.attachment-preview-item.uploading .attachment-preview-status{color:#60a5fa}.attachment-preview-item.error .attachment-preview-status{color:#ef4444}.attachment-preview-item.sent .attachment-preview-status{color:#22c55e}.attachment-progress{position:absolute;left:8px;right:8px;bottom:3px;height:2px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.attachment-progress i{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .15s linear}.attachment-preview-item small{color:var(--text-sub);font-size:10px;white-space:nowrap}
.attachment-preview-item button{width:22px;height:22px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text-sub);cursor:pointer;flex:0 0 auto}
.chat-file-card,.web-link-preview{display:flex;align-items:center;gap:10px;max-width:min(420px,100%);margin-top:8px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.055);color:inherit;text-decoration:none;box-sizing:border-box}
.chat-file-icon{font-size:26px;line-height:1;flex:0 0 auto}
.chat-file-meta,.web-link-preview-body{display:flex;flex-direction:column;min-width:0;flex:1}
.chat-file-meta strong,.web-link-preview-body strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-file-meta small,.web-link-preview-body small{margin-top:2px;color:var(--text-sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-file-download,.web-link-preview-arrow{font-size:20px;color:var(--primary);flex:0 0 auto}
.web-link-preview-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:color-mix(in srgb, var(--primary) .12, transparent);font-size:20px}
.composer-link-preview{display:none;padding:6px 12px 0}
.composer-link-preview.show{display:block}
.composer-link-preview>a{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--border-color);border-radius:10px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;max-width:520px}
.composer-link-globe{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--primary) .12, transparent);font-size:17px;flex:0 0 auto}
.composer-link-preview span{display:flex;flex-direction:column;min-width:0;flex:1}
.composer-link-preview strong{font-size:12px}.composer-link-preview small{font-size:10px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer-link-preview b{color:var(--primary);font-size:18px}

/* 4) Toolbar/send controls: visually balanced with the message font. */
.zalo-toolbar{gap:14px !important;padding:7px 14px !important}
.z-tool-icon{width:44px !important;height:44px !important;border-radius:12px !important}
.z-tool-icon svg{width:25px !important;height:25px !important}
.send-submit-btn{width:44px !important;height:44px !important;border-radius:12px !important;font-size:20px !important;align-self:center !important;margin:0 !important}

/* PC/tablet reaction picker stays dark and readable without covering the bubble. */
@media (min-width:701px){
  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2{background:rgba(25,28,33,.82) !important;box-shadow:0 12px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06) !important;backdrop-filter:blur(16px) saturate(125%) !important;-webkit-backdrop-filter:blur(16px) saturate(125%) !important}
}

@media (max-width:767px){
  .zalo-toolbar{gap:8px !important;padding:4px 10px !important}
  .z-tool-icon{width:42px !important;height:42px !important}
  .z-tool-icon svg{width:24px !important;height:24px !important}
  .send-submit-btn{width:42px !important;height:42px !important;font-size:19px !important;align-self:center !important;margin:0 !important}
  .attachment-preview-container{padding:7px 10px}
  .attachment-preview-item{min-width:165px}
  .attachment-preview-status{min-width:58px;font-size:9px}
}