/* Cac hop thoai (modal). (Tach tu styles.css - nap theo DUNG thu tu trong index.html) */

/* =====================================================================
   Modal
   ===================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 100; padding: 16px;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: modal-fade .2s ease-out;
}
.modal-box {
  position: relative;
  background: var(--surface); padding: 26px 24px 22px; border-radius: 20px; width: 400px; max-width: 100%;
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: modal-pop .28s var(--ease);
}
.modal-box::before { /* dai gradient mong tren dinh modal */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.modal-box h3 { margin: 0 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.modal-box p { margin: 0; line-height: 1.5; }
.modal-box input:not([type="checkbox"]):not([type="color"]) { padding: 11px 13px; }

/* Nut chinh trong modal - dung :where() de giu specificity thap, cac nut
   .small-btn/.link-btn ben trong van giu style rieng. */
:where(.modal-box) button {
  padding: 11px 16px; background: var(--grad); color: #fff; border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 104, 255, .25);
  transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
:where(.modal-box) button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(0, 104, 255, .32); }

/* Nut "Đóng" cuoi moi modal -> nut phu, can phai */
.modal-box > .link-btn:last-child {
  align-self: flex-end; margin-top: 4px; padding: 8px 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-weight: 500;
}
.modal-box > .link-btn:last-child:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }

#qr-modal .qr-modal-box {
  width: min(540px, 92vw);
  gap: 14px;
}
#qr-modal .qr-relink-note {
  white-space: pre-line;
  color: var(--text-2);
  font-size: 13.5px;
}
#qr-modal .qr-stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#qr-modal .qr-image-wrap,
#qr-image-wrap { text-align: center; width: 100%; }
#qr-image-wrap:empty { display: none; }
#qr-image-wrap img {
  width: 260px; height: 260px; max-width: 70vw; padding: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  animation: modal-pop .3s var(--ease);
}
#qr-image-wrap.is-dimmed img { opacity: 0.55; filter: grayscale(0.15); }
#qr-modal .qr-skeleton {
  width: 260px; height: 260px; max-width: 70vw; margin: 0 auto;
  border-radius: 16px; border: 1px dashed var(--border);
  background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));
  background-size: 200% 100%;
  animation: qr-shimmer 1.1s ease-in-out infinite;
}
@keyframes qr-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
#qr-modal .qr-status { text-align: center; min-height: 1.2em; }
#qr-modal .qr-error {
  color: var(--danger, #c0392b);
  background: color-mix(in srgb, var(--danger, #c0392b) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 28%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  white-space: pre-line;
  width: 100%;
  text-align: left;
}
#qr-modal .qr-hint { text-align: center; }
#qr-modal .qr-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
}
#qr-modal .qr-actions .ghost {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  box-shadow: none;
}
#qr-modal .qr-actions .ghost:hover { filter: none; background: var(--surface-hover); }
#qr-modal[data-qr-state="generating"] #qr-start-btn,
#qr-modal[data-qr-state="connecting"] #qr-start-btn { opacity: 0.65; }
#qr-modal[data-qr-state="success"] .qr-status { color: var(--success, #1b7a3c); font-weight: 600; }
.staff-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--grad-soft); border: 1px solid var(--primary-soft-2); border-radius: var(--radius); }

/* Danh sach nhan vien / quy tac trong modal */
.modal-box .staff-list { display: flex; flex-direction: column; gap: 6px; }
.modal-box .staff-list li { border: 1px solid var(--border); cursor: default; padding: 10px 12px; transition: border-color .2s, box-shadow .2s; }
.modal-box .staff-list li:hover { border-color: var(--primary-soft-2); box-shadow: var(--shadow-sm); }
.modal-box .staff-list li > span:first-child { font-weight: 500; }
.modal-box .account-list li { border: 1px solid var(--border); margin-bottom: 6px; }

/* Modal "Tu dong tra loi" */
#auto-reply-modal .modal-box { width: 500px; }
.auto-reply-account-toggle {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--grad-soft); border: 1px solid var(--primary-soft-2); border-radius: var(--radius);
}
.auto-reply-account-toggle select { padding: 10px; }
.switch-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; font-weight: 500; }
.auto-reply-rule-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }
.auto-reply-rule-form textarea { padding: 11px 13px; resize: vertical; }
.auto-reply-rule-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auto-reply-rule-form-row label { display: flex; align-items: center; gap: 6px; }
.auto-reply-rule-form-row button { flex-shrink: 0; }
.auto-reply-rule-item { display: flex; flex-direction: column; gap: 6px; align-items: stretch !important; padding: 12px !important; }
.auto-reply-rule-item .auto-reply-rule-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.auto-reply-rule-item .auto-reply-rule-keyword { font-weight: 600; font-size: 13.5px; }
.auto-reply-rule-item .auto-reply-rule-scope { font-size: 11px; color: var(--primary); background: var(--primary-soft); padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.auto-reply-rule-item .auto-reply-rule-text { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.auto-reply-rule-item .auto-reply-rule-actions { display: flex; gap: 8px; }