/* =================================================================
   Minimal Chat — iOS-inspired slim chat-list UI
   Ported from design-system drop `minimal-chat.html` (variant C).

   CRITICAL: every rule in chat-contacts-redesign.css is scoped with
   `#profileSelection` (ID, specificity 0,1,1,0) AND `!important`. We
   MUST match that specificity or lose the cascade — so every selector
   in this file is also anchored at `#profileSelection` and every
   override uses `!important`. Anything less gets beaten silently and
   the list keeps looking like the old card design.
   ================================================================= */

/* ---------- Tokens ---------- */
#profileSelection,
#profileSelection .profile-selection-container {
    --mc-row-py:       13px;
    --mc-row-px:       16px;
    --mc-avatar-size:  46px;
    --mc-avatar-radius: 14px;
    --mc-online-size:  14px;
    --mc-base-bg:      #0D0A0F;
    --mc-fg1:          #fff;
    --mc-fg2:          rgba(255,255,255,.62);
    --mc-fg3:          rgba(255,255,255,.42);
    --mc-divider:      rgba(255,255,255,.05);
    --mc-pink:         #E91E63;
    --mc-pink-light:   #FF4081;
    --mc-pink-soft:    #FF80AB;
    --mc-pink-deep:    #C2185B;
    --mc-accent-grad:  linear-gradient(135deg,#FF4081 0%,#E91E63 55%,#C2185B 100%);
    --mc-unread-wash:  linear-gradient(90deg, rgba(233,30,99,.10) 0%, transparent 60%);
}

/* ---------- Swipe-to-delete wrapper — flat rows, no pill radius ---------- */
#profileSelection .swipe-container {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}
#profileSelection .swipe-actions-bg {
    border-radius: 0 !important;
}

#profileSelection .contact-list {
    padding: 0 !important;
    gap: 0 !important;
}

/* ---------- Row (the .contact-item is styled as the minimal .row) ---------- */
#profileSelection .contact-item,
#profileSelection .contact-item.swipeable {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: var(--mc-row-py) var(--mc-row-px) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mc-divider) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: background .15s ease !important;
}

/* Neutralise the old decorative pseudo-elements (left accent bar + hover
   radial wash). Leave our own ::before free to host the unread glow dot. */
#profileSelection .contact-item::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
#profileSelection .contact-item::before {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: none !important;
}

@media (hover: hover) {
    #profileSelection .contact-item:hover {
        background: rgba(255,255,255,.02) !important;
        border-color: var(--mc-divider) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    #profileSelection .contact-item:hover::before,
    #profileSelection .contact-item:hover::after {
        opacity: 0 !important;
        transform: none !important;
        content: none !important;
        display: none !important;
    }
}

#profileSelection .contact-item:active {
    transform: scale(0.995) !important;
    background: rgba(255,255,255,.03) !important;
    border-color: var(--mc-divider) !important;
    box-shadow: none !important;
}

/* Locked rows (no .contact-verified): keep the minimal look, not a card */
#profileSelection .contact-item:not(:has(.contact-verified)) {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mc-divider) !important;
    box-shadow: none !important;
}
#profileSelection .contact-item:not(:has(.contact-verified)) .contact-avatar {
    background: transparent !important;
    box-shadow: none !important;
}
#profileSelection .contact-item:not(:has(.contact-verified)) .contact-name h3 {
    color: rgba(255, 255, 255, 0.78) !important;
}
#profileSelection .contact-item:not(:has(.contact-verified)) .contact-preview {
    color: rgba(255, 255, 255, 0.42) !important;
}

/* ---------- Avatar tile — rounded SQUARE (no gradient ring) ---------- */
#profileSelection .contact-avatar {
    position: relative !important;
    flex: none !important;
    flex-shrink: 0 !important;
    width: var(--mc-avatar-size) !important;
    height: var(--mc-avatar-size) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--mc-avatar-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
@media (hover: hover) {
    #profileSelection .contact-item:hover .contact-avatar {
        transform: none !important;
        box-shadow: none !important;
    }
}

#profileSelection .contact-avatar-img {
    width: 100% !important;
    height: 100% !important;
    min-width: auto !important;
    border: 0 !important;
    border-radius: var(--mc-avatar-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    color: #fff !important;
    background-clip: padding-box !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.3) !important;
}

#profileSelection .contact-avatar-img .avatar-img-layer,
#profileSelection .contact-avatar-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--mc-avatar-radius) !important;
}

/* Online dot — bottom-right, ringed by base bg, no pulse */
#profileSelection .contact-online-dot {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    top: auto !important;
    left: auto !important;
    width: var(--mc-online-size) !important;
    height: var(--mc-online-size) !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    border: 3px solid var(--mc-base-bg) !important;
    box-shadow: none !important;
    animation: none !important;
    z-index: 2;
}

/* Optional match-percentage pill (rendered when data provides it) */
#profileSelection .contact-match-pill {
    position: absolute;
    top: -6px;
    right: -8px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--mc-accent-grad);
    color: #fff;
    font: 800 9px/1.2 -apple-system, sans-serif;
    letter-spacing: .3px;
    box-shadow: 0 3px 10px rgba(233,30,99,.5);
    pointer-events: none;
    z-index: 3;
}

/* ---------- Info column (name/age top-line, preview/badge bottom-line) ---------- */
#profileSelection .contact-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    justify-content: center !important;
}

#profileSelection .contact-name {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

#profileSelection .contact-name h3 {
    font: 700 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.2px !important;
    color: var(--mc-fg1) !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profileSelection .contact-age {
    font: 600 12px/1 -apple-system, sans-serif !important;
    color: var(--mc-fg3) !important;
    flex: none !important;
}

#profileSelection .contact-verified {
    color: var(--mc-pink-light) !important;
    flex: none !important;
}

#profileSelection .contact-preview {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font: 500 13px/1.3 -apple-system, sans-serif !important;
    color: var(--mc-fg2) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ---------- Meta column (time top, badge bottom) ---------- */
#profileSelection .contact-meta {
    position: static !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: var(--mc-avatar-size) !important;
}

#profileSelection .contact-time {
    font: 500 11px/1 -apple-system, sans-serif !important;
    color: var(--mc-fg3) !important;
    letter-spacing: 0 !important;
}

#profileSelection .contact-unread-badge {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 11px !important;
    background: var(--mc-accent-grad) !important;
    color: #fff !important;
    font: 800 12px/22px -apple-system, sans-serif !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
    display: inline-block !important;
    box-shadow:
        0 4px 14px rgba(233,30,99,.55),
        0 0 0 1.5px rgba(255,255,255,.12) inset !important;
    animation: mcBadgePulse 2s ease-in-out infinite !important;
}

/* ---------- Unread state — matched selector + !important to beat old rules ---------- */
#profileSelection .contact-item:has(.contact-unread-badge) {
    background: var(--mc-unread-wash) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mc-divider) !important;
    box-shadow: none !important;
}
#profileSelection .contact-item:has(.contact-unread-badge) .contact-name h3 {
    font-weight: 800 !important;
    color: var(--mc-fg1) !important;
}
#profileSelection .contact-item:has(.contact-unread-badge) .contact-preview {
    font-weight: 600 !important;
    color: var(--mc-fg1) !important;
}
#profileSelection .contact-item:has(.contact-unread-badge) .contact-time {
    font-weight: 800 !important;
    color: var(--mc-pink-light) !important;
    letter-spacing: .3px !important;
}

/* Pulsing left glow dot on unread rows — overrides the old ::before which we
   killed above, so we re-enable content: "" with !important here. */
#profileSelection .contact-item:has(.contact-unread-badge)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #FF4081, #C2185B) !important;
    box-shadow: 0 0 10px rgba(233,30,99,.9) !important;
    animation: mcUnreadGlow 1.8s ease-in-out infinite !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ---------- Keyframes ---------- */
@keyframes mcUnreadGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(233,30,99,.9);
        transform: translateY(-50%) scale(1);
    }
    50% {
        box-shadow:
            0 0 18px rgba(233,30,99,1),
            0 0 30px rgba(233,30,99,.5);
        transform: translateY(-50%) scale(1.15);
    }
}

@keyframes mcBadgePulse {
    0%, 100% {
        box-shadow:
            0 4px 14px rgba(233,30,99,.55),
            0 0 0 1.5px rgba(255,255,255,.12) inset,
            0 0 0 0 rgba(233,30,99,.5);
    }
    50% {
        box-shadow:
            0 4px 18px rgba(233,30,99,.75),
            0 0 0 1.5px rgba(255,255,255,.12) inset,
            0 0 0 6px rgba(233,30,99,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #profileSelection .contact-unread-badge,
    #profileSelection .contact-item:has(.contact-unread-badge)::before {
        animation: none !important;
    }
}

/* ---------- Entry animation — keep the stagger from the old redesign but
   tone the scale/translate down so flat rows don't pop as hard. -------- */
#profileSelection .contact-list > .swipe-container {
    animation: mcRowIn 0.34s var(--vc-ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes mcRowIn {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Verified badge — Instagram/Twitter-style rosette ----------
   Wins over every earlier .contact-verified rule in the cascade: higher
   specificity than the bare-class rules in chat-redesign/chat-ui-fanfix,
   and same-specificity-but-later than the #profileSelection rules in
   critical-ui-fix/chat-vibe/chat-contacts-redesign. */
.contact-verified,
#profileSelection .contact-verified,
.chat-list .contact-verified {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    margin: 0 0 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
    opacity: 1 !important;
    flex: none !important;
    vertical-align: middle !important;
    filter: drop-shadow(0 1px 2px rgba(233, 30, 99, 0.45));
    overflow: visible !important;
}

.contact-verified .contact-verified__body {
    fill: #E91E63;
}

.contact-verified .contact-verified__check {
    stroke: #ffffff;
    fill: none;
}