/* ===========================================================
   CHAT MARKUP SCREEN - which chats of the imported WhatsApp
   history belong in the journal (wa-connect-history, task 8).
   Tokens and shapes follow the V2 reference through
   screens/settings.css: same panel, same status box, same
   checkbox row.
   =========================================================== */

.mk { display: flex; flex-direction: column; gap: var(--qb-s-16); }
.mk__titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--qb-s-12); }
.mk__sub { font-size: var(--qb-fs-body-sm); color: var(--qb-fg-2); margin-bottom: var(--qb-s-16); }

.mk__status { display: flex; align-items: center; gap: 14px; padding: var(--qb-s-16); border: 1px solid var(--qb-border);
  border-radius: var(--qb-r-xl); background: var(--qb-surface-2); }
.mk__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--qb-surface-muted); color: var(--qb-fg-2); flex: none; }
.mk__icon svg { width: 22px; height: 22px; }
.mk__status--ok .mk__icon { background: var(--qb-success-bg); color: var(--qb-success); }
.mk__status--warn .mk__icon { background: var(--qb-warning-bg); color: var(--qb-warning); }
.mk__status--busy .mk__icon { background: var(--qb-info-bg); color: var(--qb-info-2); }
.mk__title { font-weight: 600; font-size: 15px; }
.mk__desc { font-size: 13px; color: var(--qb-fg-2); margin-top: 2px; }

.mk__bar { height: 8px; border-radius: var(--qb-r-pill); background: var(--qb-surface-3); overflow: hidden; }
.mk__bar-fill { height: 100%; background: var(--qb-orange); transition: width .3s ease; }

.mk__head { display: flex; align-items: center; justify-content: space-between; gap: var(--qb-s-12); flex-wrap: wrap; }
.mk__all { display: flex; align-items: center; gap: var(--qb-s-8); font-size: 14px; font-weight: 600; cursor: pointer; }
.mk__all input { width: 16px; height: 16px; accent-color: var(--qb-orange-deep); }
.mk__counter { font-size: 13px; color: var(--qb-fg-2); }

.mk__list { display: flex; flex-direction: column; gap: var(--qb-s-8); max-height: 52vh; overflow-y: auto; }
.mk__row { display: flex; gap: var(--qb-s-12); padding: var(--qb-s-12); border: 1px solid var(--qb-border);
  border-radius: var(--qb-r-lg); align-items: flex-start; cursor: pointer; background: var(--qb-surface); }
.mk__row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--qb-orange-deep); flex: none; }
.mk__row.is-on { border-color: var(--qb-orange); background: var(--qb-orange-lighter); }
.mk__row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk__row-head { display: flex; align-items: baseline; gap: var(--qb-s-8); flex-wrap: wrap; }
.mk__name { font-weight: 600; font-size: 14px; }
.mk__row-head bdi { font-size: 13px; color: var(--qb-fg-2); }
.mk__preview { font-size: 13px; color: var(--qb-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk__meta { display: flex; gap: var(--qb-s-12); font-size: 12px; color: var(--qb-fg-3); flex-wrap: wrap; }

.mk__warn { display: flex; gap: 10px; padding: var(--qb-s-12); border-radius: var(--qb-r-lg);
  background: var(--qb-warning-bg); color: var(--qb-fg-1); font-size: 13px; }
.mk__warn svg { width: 16px; height: 16px; flex: none; color: var(--qb-warning); margin-top: 2px; }
.mk__hint { font-size: 12px; color: var(--qb-fg-3); }
.mk__actions { display: flex; gap: var(--qb-s-8); flex-wrap: wrap; }

@media (max-width: 480px) {
  .mk__list { max-height: none; }
}