/* ════════════════════════════════════════════════════════════════════
   QuizioMatch — Chat list v2 (Simon, Oct 2026)
   Instagram-style inbox on the QM design system: large title, three tabs
   (Chats · Anfragen · Quizze) with counts, a requests banner on top of the
   chats, flat rows with round photos that fill their circle completely,
   swipe-left-to-delete. Loaded last; the legacy chat-list layers
   (chat-contacts-redesign, chat-vibe, minimal-chat, critical-ui-fix,
   qm-chat) style the same .contact-list / .swipe-container /
   .contact-avatar-img hooks with !important, hence the strong scope.
   ════════════════════════════════════════════════════════════════════ */

html body #chatScreen #profileSelection .ql {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: var(--qm-bg);
    color: var(--qm-fg);
    font-family: var(--qm-sans);
}

/* ── header: title + tabs (stays put while the list scrolls) ── */
html body #chatScreen #profileSelection .ql-head {
    flex: none;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px;
}
html body #chatScreen #profileSelection .ql-title {
    margin: 0 0 14px;
    font: 800 30px/1.05 var(--qm-disp);
    letter-spacing: -.03em;
    color: var(--qm-fg);
    background: none;
    -webkit-text-fill-color: currentColor;
}
html body #chatScreen #profileSelection .ql-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s1);
}
html body #chatScreen #profileSelection .ql-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: transparent;
    color: var(--qm-fg2);
    font: 700 14px/1 var(--qm-sans);
    cursor: pointer;
    transition: background .18s var(--qm-ease-out), color .18s var(--qm-ease-out);
    -webkit-tap-highlight-color: transparent;
}
html body #chatScreen #profileSelection .ql-tab.is-on {
    background: var(--qm-s3);
    color: var(--qm-fg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
html body #chatScreen #profileSelection .ql-tab:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
html body #chatScreen #profileSelection .ql-tab-n:empty { display: none; }
html body #chatScreen #profileSelection .ql-tab-n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--qm-r-pill);
    background: rgba(255, 255, 255, .12);
    color: var(--qm-fg);
    font: 800 11px/1 var(--qm-sans);
}
/* requests are never hidden: their count is always pink */
html body #chatScreen #profileSelection .ql-tab-n[data-ql-n="requests"] { background: var(--qm-pink); color: #fff; }

/* ── requests banner (only on the Chats tab, only with requests) ── */
html body #chatScreen #profileSelection .ql-banner {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 16px 6px;
    padding: 10px 12px 10px 10px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(100deg, rgba(233, 30, 99, .20), rgba(124, 77, 255, .14));
    box-shadow: inset 0 0 0 1px rgba(255, 128, 171, .22);
    color: var(--qm-fg);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html body #chatScreen #profileSelection .ql-banner[hidden] { display: none; }
html body #chatScreen #profileSelection .ql-banner:active { transform: scale(.985); }
html body #chatScreen #profileSelection .ql-banner-avs { display: flex; flex: none; }
html body #chatScreen #profileSelection .ql-banner-av {
    width: 34px;
    height: 34px;
    margin-inline-start: -10px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--qm-s3);
    color: var(--qm-pink-soft);
    font: 800 14px/1 var(--qm-sans);
    box-shadow: 0 0 0 2.5px var(--qm-bg);
}
html body #chatScreen #profileSelection .ql-banner-av:first-child { margin-inline-start: 0; }
html body #chatScreen #profileSelection .ql-banner-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #chatScreen #profileSelection .ql-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body #chatScreen #profileSelection .ql-banner-txt b { font: 800 15px/1.2 var(--qm-sans); }
html body #chatScreen #profileSelection .ql-banner-txt small { font: 500 12.5px/1.3 var(--qm-sans); color: var(--qm-fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #chatScreen #profileSelection .ql-banner-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #chatScreen #profileSelection .ql-banner-go { width: 20px; height: 20px; flex: none; color: var(--qm-pink-soft); }
body.rtl #chatScreen #profileSelection .ql-banner-go { transform: scaleX(-1); }

/* ── list (the scroller) ── */
html body #chatScreen #profileSelection .ql-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
html body #chatScreen #profileSelection .ql .contact-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 0 calc(var(--nav-height, 65px) + 40px) !important;
    margin: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    scrollbar-width: none;
}
html body #chatScreen #profileSelection .ql .contact-list::-webkit-scrollbar { display: none; }

/* tabs filter rows - no re-render, avatars stay alive */
html body #chatScreen #profileSelection .ql[data-ql-tab="chats"]    .ql-row:not([data-ql-tab="chats"]),
html body #chatScreen #profileSelection .ql[data-ql-tab="requests"] .ql-row:not([data-ql-tab="requests"]),
html body #chatScreen #profileSelection .ql[data-ql-tab="quiz"]     .ql-row:not([data-ql-tab="quiz"]) { display: none !important; }

/* ── one row ── */
html body #chatScreen #profileSelection .ql .swipe-container.ql-row {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    isolation: isolate;
    flex-shrink: 0;
    animation: none !important;
    transform: none !important;
}
html body #chatScreen #profileSelection .ql-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 10px 16px;
    background: var(--qm-bg);
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}
html body #chatScreen #profileSelection .ql-card:active { background: var(--qm-s1); }
@media (hover: hover) {
    html body #chatScreen #profileSelection .ql-card:hover { background: var(--qm-s1); }
}
html body #chatScreen #profileSelection .ql-card:focus-visible { outline: none; box-shadow: inset var(--qm-focus-ring); }

/* avatar: a clean round photo - the photo covers the whole circle, no
   coloured tile can show at the edge (that was the red rim) */
html body #chatScreen #profileSelection .ql-avw {
    position: relative;
    flex: none;
    width: 58px;
    height: 58px;
}
html body #chatScreen #profileSelection .ql .contact-avatar-img.ql-av {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: var(--qm-s2) !important;
    box-shadow: none !important;
    color: var(--qm-pink-soft) !important;
    font: 800 22px/1 var(--qm-disp) !important;
    transform: none !important;
}
html body #chatScreen #profileSelection .ql .contact-avatar-img.ql-av .avatar-initial-fallback {
    position: static !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
}
html body #chatScreen #profileSelection .ql .contact-avatar-img.ql-av .avatar-img-layer {
    position: absolute !important;
    inset: -1px !important;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    max-width: none !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--qm-s2) !important;
}
/* unread: name/preview white + bold, pink ring around the photo */
html body #chatScreen #profileSelection .ql-row[data-ql-unread] .ql-avw::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid var(--qm-pink);
    pointer-events: none;
}
/* quiz rows: progress ring around the photo */
html body #chatScreen #profileSelection .ql-avw--quiz::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(var(--qm-pink) var(--ql-p, 0%), rgba(255, 255, 255, .14) 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

html body #chatScreen #profileSelection .ql-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html body #chatScreen #profileSelection .ql-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font: 700 16px/1.2 var(--qm-sans);
    color: var(--qm-fg);
}
html body #chatScreen #profileSelection .ql-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #chatScreen #profileSelection .ql-verified { width: 15px; height: 15px; flex: none; color: var(--qm-pink-soft); }
html body #chatScreen #profileSelection .ql .contact-preview.ql-prev {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 500 14px/1.3 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
html body #chatScreen #profileSelection .ql-row[data-ql-unread] .ql-name { font-weight: 800; }
html body #chatScreen #profileSelection .ql-row[data-ql-unread] .ql-prev { color: var(--qm-fg) !important; font-weight: 700 !important; }
html body #chatScreen #profileSelection .ql-row[data-ql-tab="quiz"] .ql-prev { color: var(--qm-fg2) !important; }

html body #chatScreen #profileSelection .ql-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
}
html body #chatScreen #profileSelection .ql-time {
    font: 600 12px/1 var(--qm-sans);
    color: var(--qm-fg3);
    white-space: nowrap;
}
html body #chatScreen #profileSelection .ql-row[data-ql-unread] .ql-time { color: var(--qm-pink-soft); }
html body #chatScreen #profileSelection .ql-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 800 12px/1 var(--qm-sans);
}
html body #chatScreen #profileSelection .ql-cta {
    padding: 8px 14px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s3);
    color: var(--qm-fg);
    font: 700 13px/1 var(--qm-sans);
    white-space: nowrap;
}

/* ── swipe left → delete (the row slides, red action underneath) ── */
html body #chatScreen #profileSelection .ql-del {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 0 24px 0 0;
    border: 0;
    background: var(--qm-red);
    color: #fff;
    font: 700 12px/1 var(--qm-sans);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
html body #chatScreen #profileSelection .ql-del svg {
    width: 22px;
    height: 22px;
    margin-inline-end: 6px;
    transform: scale(calc(.7 + var(--ql-pull, 0) * .3));
}
html body #chatScreen #profileSelection .ql-del span { margin-inline-end: 2px; }
html body #chatScreen #profileSelection .ql-row.swiping .ql-del,
html body #chatScreen #profileSelection .ql-row.swiped-open .ql-del { opacity: 1; }

/* ── empty state per tab ── */
html body #chatScreen #profileSelection .ql-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 12%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 32px;
    text-align: center;
    pointer-events: none;
}
html body #chatScreen #profileSelection .ql[data-ql-tab="chats"][data-ql-has-chats="0"]       .ql-empty[data-ql-empty="chats"],
html body #chatScreen #profileSelection .ql[data-ql-tab="requests"][data-ql-has-requests="0"] .ql-empty[data-ql-empty="requests"],
html body #chatScreen #profileSelection .ql[data-ql-tab="quiz"][data-ql-has-quiz="0"]         .ql-empty[data-ql-empty="quiz"] { display: flex; }
html body #chatScreen #profileSelection .ql-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--qm-s2) center / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF80AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
html body #chatScreen #profileSelection .ql-empty h3 { margin: 0; font: 800 19px/1.2 var(--qm-sans); color: var(--qm-fg); }
html body #chatScreen #profileSelection .ql-empty p { margin: 0; max-width: 300px; font: 500 14px/1.45 var(--qm-sans); color: var(--qm-fg2); }

@media (prefers-reduced-motion: reduce) {
    html body #chatScreen #profileSelection .ql-card { transition: none !important; }
}