/* QuizioMatch Redesign 2026 — chat layer. See qm/qm-base.css for tokens.
   ==========================================================================
   Covers (all inside #chatScreen unless noted):
     #profileSelection  contact list      → design frame "Chats"  (SChats)
     #actualChat        1:1 conversation  → design frame "Chat"   (SChat)
     #quizFlow          quiz + #matchFeedback → "Quiz"            (SQuiz)
     #unlockModal       pass / fail result → "Chat freigeschaltet" (SUnlock)
     #levelDetailModal  level sheet (body level) → "Level"         (SLevel)

   Rules of this file:
   - Every selector is anchored at #chatScreen (or #levelDetailModal) so the
     redesign never leaks into other screens.
   - The legacy chat CSS (minimal-chat, chat-contacts-redesign, chat-vibe,
     chat-ui-fanfix, quiz-redesign …) is scoped by ID *and* !important, so
     visual properties here use !important with a higher-specificity
     selector (two IDs). Layout-critical properties of the scroll
     containers (#chatMessages, .contact-list, .quiz-content), the fixed
     composer (.chat-input-area) and all display/visibility/opacity states
     are deliberately NOT touched.
   - Only transform / opacity are animated.
   ========================================================================== */

/* ── 0. Canvas ───────────────────────────────────────────────────────────── */
#chatScreen #profileSelection,
#chatScreen #profileSelection .profile-selection-container,
#chatScreen #actualChat,
#chatScreen #quizFlow,
#chatScreen #unlockModal {
    background: var(--qm-bg) !important;
    font-family: var(--qm-sans);
    color: var(--qm-fg);
}

/* ==========================================================================
   1. CHATS LIST  (#profileSelection)  →  SChats
   ========================================================================== */
#chatScreen #profileSelection .messages-header {
    padding: 14px 20px 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#chatScreen #profileSelection .messages-header h1 {
    font: 800 clamp(38px, 11vw, 46px)/1 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 0 !important;
}

/* List: 20px gutters, room for the floating dock at the bottom. */
#chatScreen #profileSelection .messages-header::before,
#chatScreen #profileSelection .messages-header::after { opacity: 0 !important; }

/* List keeps padding 0: the swipe-delete panel parks just outside each row,
   so gutters live inside the row (padding) instead of on the list. */
#chatScreen #profileSelection .contact-list {
    padding: 6px 0 120px !important;
}

#chatScreen #profileSelection .swipe-container {
    background: var(--qm-bg) !important;
    border-radius: 0 !important;
}

/* Row (.li) — opaque canvas bg so the swipe-delete panel stays hidden. */
#chatScreen #profileSelection .contact-item,
#chatScreen #profileSelection .contact-item.swipeable,
#chatScreen #profileSelection .contact-item:not(:has(.contact-verified)),
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge) {
    gap: 12px !important;
    min-height: 78px !important;
    padding: 12px 20px !important;
    background: var(--qm-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .18s var(--qm-ease-spring), opacity .18s ease !important;
}
/* 1px divider inset to the 20px gutters (drawn as a background layer). */
#chatScreen #profileSelection .swipe-container + .swipe-container .contact-item {
    background: linear-gradient(var(--qm-line), var(--qm-line)) center top / calc(100% - 40px) 1px no-repeat, var(--qm-bg) !important;
}
@media (hover: hover) {
    #chatScreen #profileSelection .contact-item:hover {
        transform: translateX(2px) !important;
    }
    #chatScreen #profileSelection .contact-item:hover .contact-name h3 { color: var(--qm-pink-soft) !important; }
}
#chatScreen #profileSelection .contact-item:active {
    transform: scale(.985) !important;
}
#chatScreen #profileSelection .contact-item:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--qm-pink-soft) !important;
    border-radius: 20px !important;
}
/* Legacy pulsing unread dot on the row edge → the pink count badge is enough. */
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge)::before {
    animation: none !important;
    opacity: 0 !important;
}

/* Squircle avatar 54px + online dot ringed in canvas colour. */
#chatScreen #profileSelection .contact-avatar,
#chatScreen #profileSelection .contact-item:not(:has(.contact-verified)) .contact-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 36% !important;
    background: transparent !important;
    box-shadow: none !important;
}
#chatScreen #profileSelection .contact-avatar-img {
    border-radius: 36% !important;
    box-shadow: none !important;
    font: 800 22px/1 var(--qm-sans) !important;
    letter-spacing: -.02em !important;
}
#chatScreen #profileSelection .contact-avatar-img .avatar-img-layer,
#chatScreen #profileSelection .contact-avatar-img img {
    border-radius: 36% !important;
}
#chatScreen #profileSelection .contact-online-dot {
    width: 16px !important;
    height: 16px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: var(--qm-green) !important;
    border: 3px solid var(--qm-bg) !important;
}

#chatScreen #profileSelection .contact-info { gap: 3px !important; }
#chatScreen #profileSelection .contact-name { gap: 6px !important; }
#chatScreen #profileSelection .contact-name h3,
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge) .contact-name h3 {
    font: 600 15px/1.25 var(--qm-sans) !important;
    letter-spacing: -.01em !important;
    color: var(--qm-fg) !important;
    transition: color .15s ease;
}
#chatScreen #profileSelection .contact-item:not(:has(.contact-verified)) .contact-name h3 {
    color: var(--qm-fg2) !important;
}
#chatScreen #profileSelection .contact-verified {
    width: 15px !important;
    height: 15px !important;
    color: var(--qm-pink) !important;
}
#chatScreen #profileSelection .contact-verified .contact-verified__body { fill: var(--qm-pink) !important; }
#chatScreen #profileSelection .contact-verified .contact-verified__check { stroke: #fff !important; }

#chatScreen #profileSelection .contact-preview,
#chatScreen #profileSelection .contact-item:not(:has(.contact-verified)) .contact-preview {
    font: 400 13px/1.35 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge) .contact-preview {
    font-weight: 600 !important;
    color: var(--qm-fg) !important;
}
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge) .contact-preview::before {
    content: none !important;
}

#chatScreen #profileSelection .contact-meta {
    min-height: 46px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
#chatScreen #profileSelection .contact-time,
#chatScreen #profileSelection .contact-item:has(.contact-unread-badge) .contact-time {
    font: 400 12px/1 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #profileSelection .contact-unread-badge,
#chatScreen #profileSelection .contact-list.mc-rows-settled .contact-unread-badge {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--qm-pink) !important;
    color: #fff !important;
    font: 800 12px/22px var(--qm-sans) !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Empty state */
#chatScreen #profileSelection .chats-empty-title {
    font: 800 26px/1.05 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
}
#chatScreen #profileSelection .chats-empty-sub {
    font: 400 15px/1.5 var(--qm-sans) !important;
    color: var(--qm-fg2) !important;
}

/* ==========================================================================
   2. 1:1 CHAT  (#actualChat)  →  SChat
   Layout of #chatMessages / .chat-input-area is untouched (scroll + composer
   are fragile); only surfaces, typography and radii change.
   ========================================================================== */

/* ── Header ─────────────────────────────────────────────────────────────── */
#chatScreen #actualChat .chat-hdr {
    background: var(--qm-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#chatScreen #actualChat .chat-hdr-top {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 8px 16px 10px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    row-gap: 8px !important;
}
#chatScreen #actualChat .chat-hdr-back,
#chatScreen #actualChat .chat-hdr-menu-btn {
    width: 44px !important;
    height: 44px !important;
    flex: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--qm-s2) !important;
    color: var(--qm-fg) !important;
    box-shadow: none !important;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .16s var(--qm-ease-spring), opacity .16s ease !important;
}
#chatScreen #actualChat .chat-hdr-back:hover,
#chatScreen #actualChat .chat-hdr-menu-btn:hover { transform: translateY(-1px) !important; }
#chatScreen #actualChat .chat-hdr-back:active,
#chatScreen #actualChat .chat-hdr-menu-btn:active { transform: scale(.92) !important; }
#chatScreen #actualChat .chat-hdr-back:focus-visible,
#chatScreen #actualChat .chat-hdr-menu-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--qm-focus-ring) !important;
}
#chatScreen #actualChat .chat-hdr-partner {
    gap: 12px !important;
    cursor: pointer;
    border-radius: 16px;
    transition: opacity .15s ease;
}
#chatScreen #actualChat .chat-hdr-partner:hover { opacity: .85; }
#chatScreen #actualChat .chat-hdr-partner:active { opacity: .7; }
#chatScreen #actualChat .chat-hdr-avatar-wrap {
    width: 42px !important;
    height: 42px !important;
    flex: none !important;
}
#chatScreen #actualChat .chat-hdr-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 36% !important;
    border: 0 !important;
    box-shadow: none !important;
    font: 800 18px/1 var(--qm-sans) !important;
    overflow: hidden;
}
#chatScreen #actualChat .chat-hdr-avatar img,
#chatScreen #actualChat .chat-hdr-avatar .avatar-img-layer { border-radius: 36% !important; }
#chatScreen #actualChat .chat-hdr-online-dot {
    width: 14px !important;
    height: 14px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: var(--qm-green) !important;
    border: 3px solid var(--qm-bg) !important;
    box-shadow: none !important;
    animation: none !important;
}
#chatScreen #actualChat .chat-hdr-name {
    font: 700 16px/1.2 var(--qm-sans) !important;
    letter-spacing: -.01em !important;
    color: var(--qm-fg) !important;
}
#chatScreen #actualChat .chat-hdr-status {
    font: 400 13px/1.3 var(--qm-sans) !important;
}
#chatScreen #actualChat .chat-hdr-actions { margin-inline-start: auto; }

/* Level strip → full-width "Level 2 · Verbunden" card under the header row. */
#chatScreen #actualChat .chat-lvl-strip {
    order: 10;
    flex: 1 1 100% !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
    background: var(--qm-s1) !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform .16s var(--qm-ease-spring) !important;
}
#chatScreen #actualChat .chat-lvl-strip:hover { transform: translateY(-1px); }
#chatScreen #actualChat .chat-lvl-strip:active { transform: scale(.985); }
#chatScreen #actualChat .chat-lvl-pill { gap: 10px !important; }
#chatScreen #actualChat .chat-lvl-badge {
    width: 26px !important;
    height: 26px !important;
    border-radius: 30% !important;
    background: var(--qm-pink) !important;
    box-shadow: 0 2px 0 var(--qm-pink-edge) !important;
    font: 800 13px/1 var(--qm-sans) !important;
    transform: rotate(-6deg);
}
#chatScreen #actualChat .chat-lvl-meta { gap: 5px !important; align-items: baseline !important; }
#chatScreen #actualChat .chat-lvl-tier,
#chatScreen #actualChat .chat-lvl-name {
    font: 700 13px/1.2 var(--qm-sans) !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    color: var(--qm-fg) !important;
}
#chatScreen #actualChat .chat-lvl-tier::after { content: " ·"; color: var(--qm-fg3); }
#chatScreen #actualChat .chat-lvl-xp {
    font: 400 12px/1 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #actualChat .chat-lvl-xp .num { color: var(--qm-fg2) !important; font-weight: 600 !important; }
#chatScreen #actualChat .chat-lvl-xp .sep,
#chatScreen #actualChat .chat-lvl-xp .max { color: var(--qm-fg3) !important; font-weight: 400 !important; }
#chatScreen #actualChat .chat-lvl-bar {
    height: 6px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .1) !important;
}
#chatScreen #actualChat .chat-lvl-fill {
    background: var(--qm-pink) !important;
    border-radius: 9px !important;
}
#chatScreen #actualChat .chat-lvl-head { opacity: 0 !important; }

/* Header dropdown */
#chatScreen #actualChat .chat-hdr-dropdown {
    background: var(--qm-s2) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: var(--qm-shadow-float) !important;
    padding: 6px !important;
}
#chatScreen #actualChat .chat-hdr-dropdown-item {
    border-radius: 14px !important;
    font: 600 14px/1.2 var(--qm-sans) !important;
    transition: transform .14s var(--qm-ease-spring) !important;
}
#chatScreen #actualChat .chat-hdr-dropdown-item:hover { background: rgba(255, 59, 48, .12) !important; }
#chatScreen #actualChat .chat-hdr-dropdown-item:active { transform: scale(.97); }
#chatScreen #actualChat .chat-hdr-dropdown-item:focus-visible { outline: 2px solid var(--qm-pink-soft) !important; }
#chatScreen #actualChat .chat-hdr-dropdown-danger { color: var(--qm-red-soft) !important; }

/* ── Messages ───────────────────────────────────────────────────────────── */
#chatScreen #actualChat #chatMessages {
    background: transparent !important;
    background-image: none !important;
}
#chatScreen #actualChat .message-date-separator span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    color: var(--qm-fg3) !important;
    font: 600 12px/1 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#chatScreen #actualChat .message-date-separator::before,
#chatScreen #actualChat .message-date-separator::after { opacity: 0 !important; }

#chatScreen #actualChat .message .message-bubble {
    padding: 11px 15px !important;
    border-radius: 22px !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#chatScreen #actualChat .message.received .message-bubble {
    background: var(--qm-s2) !important;
    color: var(--qm-fg) !important;
    border-end-start-radius: 8px !important;
}
#chatScreen #actualChat .message.sent .message-bubble {
    background: var(--qm-pink) !important;
    background-image: none !important;
    color: #fff !important;
    border-end-end-radius: 8px !important;
}
#chatScreen #actualChat .message .message-bubble p {
    font: 400 15px/1.4 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    color: inherit !important;
}
#chatScreen #actualChat .message .message-time {
    font: 400 11px/1 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #actualChat .message.sent .message-time { color: rgba(255, 255, 255, .72) !important; }
#chatScreen #actualChat .message-avatar {
    border-radius: 36% !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--qm-sans) !important;
    font-weight: 800 !important;
    overflow: hidden;
}
#chatScreen #actualChat .message-avatar img,
#chatScreen #actualChat .message-avatar .avatar-img-layer { border-radius: 36% !important; }

/* System line ("Quiz bestanden · Chat freigeschaltet") → pk chip */
#chatScreen #actualChat .message.system .message-system-bubble {
    min-height: 28px;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(233, 30, 99, .16) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qm-pink-soft) !important;
    font: 600 12px/1.3 var(--qm-sans) !important;
}
#chatScreen #actualChat .message.system .message-system-text { color: inherit !important; font: inherit !important; }

/* Match-origin banner (kept for completeness, usually hidden) */
#chatScreen #actualChat .chat-match-origin-banner {
    background: rgba(233, 30, 99, .16) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--qm-pink-soft) !important;
}

/* ── Composer ───────────────────────────────────────────────────────────── */
#chatScreen #actualChat .chat-input-area {
    background: var(--qm-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#chatScreen #actualChat .chat-input-field {
    min-height: 52px !important;
    border-radius: 999px !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-inline-start: 18px !important;
    padding-inline-end: 6px !important;
    transition: box-shadow .15s ease !important;
}
#chatScreen #actualChat .chat-input-field:focus-within {
    box-shadow: 0 0 0 2px var(--qm-pink) !important;
}
#chatScreen #actualChat .chat-input-field input,
#chatScreen #actualChat #messageInput {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--qm-fg) !important;
    font: 400 15px/1.3 var(--qm-sans) !important;
}
#chatScreen #actualChat #messageInput::placeholder { color: var(--qm-fg3) !important; opacity: 1; }
#chatScreen #actualChat .input-action-btn {
    border: 0 !important;
    cursor: pointer;
    transition: transform .15s var(--qm-ease-spring), opacity .15s ease !important;
}
#chatScreen #actualChat .input-action-btn:hover { transform: translateY(-1px) !important; }
#chatScreen #actualChat .input-action-btn:active { transform: scale(.9) !important; }
#chatScreen #actualChat .input-action-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--qm-focus-ring) !important;
}
#chatScreen #actualChat .audio-action-btn {
    background: transparent !important;
    color: var(--qm-fg2) !important;
    box-shadow: none !important;
}
#chatScreen #actualChat .input-action-btn.send-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: var(--qm-pink) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 3px 0 var(--qm-pink-edge) !important;
}
#chatScreen #actualChat .input-action-btn.send-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 var(--qm-pink-edge) !important;
}

/* Quick actions → chips */
#chatScreen #actualChat .chat-action-buttons { gap: 8px !important; }
#chatScreen #actualChat .chat-action-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qm-fg) !important;
    font: 600 13px/1 var(--qm-sans) !important;
    gap: 6px !important;
    cursor: pointer;
    transition: transform .15s var(--qm-ease-spring) !important;
}
#chatScreen #actualChat .chat-action-btn:hover { transform: translateY(-1px) !important; background: var(--qm-s3) !important; }
#chatScreen #actualChat .chat-action-btn:active { transform: scale(.95) !important; }
#chatScreen #actualChat .chat-action-btn:focus-visible { outline: none !important; box-shadow: var(--qm-focus-ring) !important; }
#chatScreen #actualChat .chat-action-btn .chat-action-label {
    font: 600 13px/1 var(--qm-sans) !important;
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
#chatScreen #actualChat .chat-action-btn .chat-action-icon { font-size: 15px !important; }

/* Counter line */
#chatScreen #actualChat .chat-input-footer {
    font: 400 12px/1.3 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #actualChat .chat-input-footer .char-counter,
#chatScreen #actualChat .chat-input-footer .free-messages {
    font: inherit !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #actualChat .chat-input-footer strong,
#chatScreen #actualChat .chat-input-footer b {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Audio recording bar */
#chatScreen #actualChat .audio-recording-ui {
    background: var(--qm-s2) !important;
    border: 0 !important;
    border-radius: 999px !important;
}
#chatScreen #actualChat .recording-send-btn {
    background: var(--qm-pink) !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 0 var(--qm-pink-edge) !important;
}
#chatScreen #actualChat .recording-cancel-btn {
    background: var(--qm-s3) !important;
    border-radius: 50% !important;
}

/* AI quiz-solver pass card that can appear inside the conversation */
#chatScreen #actualChat .aqs-pass-card {
    background: var(--qm-s2) !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}
#chatScreen #actualChat .aqs-pass-title { color: var(--qm-fg) !important; }
#chatScreen #actualChat .aqs-pass-sub { color: var(--qm-fg3) !important; }
#chatScreen #actualChat .aqs-pass-icon { border-radius: 30% !important; }

/* ==========================================================================
   3. QUIZ  (#quizFlow)  →  SQuiz
   ========================================================================== */
#chatScreen #quizFlow .quiz-container {
    background: var(--qm-bg) !important;
    background-image: none !important;
    font-family: var(--qm-sans);
}
#chatScreen #quizFlow .quiz-container::before,
#chatScreen #quizFlow .quiz-container::after { opacity: 0 !important; }

#chatScreen #quizFlow .quiz-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 20px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    min-height: 60px;
    gap: 10px !important;
}
#chatScreen #quizFlow .quiz-back-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qm-fg) !important;
    cursor: pointer;
    transition: transform .15s var(--qm-ease-spring) !important;
}
#chatScreen #quizFlow .quiz-back-btn:hover { transform: translateY(-1px) !important; }
#chatScreen #quizFlow .quiz-back-btn:active { transform: scale(.92) !important; }
#chatScreen #quizFlow .quiz-back-btn:focus-visible { outline: none !important; box-shadow: var(--qm-focus-ring) !important; }
#chatScreen #quizFlow .quiz-header-center { gap: 8px !important; }
#chatScreen #quizFlow .quiz-branding-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 36% !important;
    border: 0 !important;
    box-shadow: none !important;
    font: 800 14px/1 var(--qm-sans) !important;
}
#chatScreen #quizFlow .quiz-header-profile-name {
    font: 700 16px/1.2 var(--qm-sans) !important;
    letter-spacing: -.01em !important;
    color: var(--qm-fg) !important;
}
#chatScreen #quizFlow .quiz-header-step {
    font: 600 13px/1 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
}
#chatScreen #quizFlow .quiz-header-step span { color: inherit !important; }
#chatScreen #quizFlow .quiz-diff-badge {
    min-width: 36px;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    box-shadow: none !important;
    font: 600 14px/1 var(--qm-sans) !important;
}

/* Progress: 8px pink bar on a quiet track, inset to the page gutters. */
#chatScreen #quizFlow .quiz-progress-bar-wrap {
    height: 8px !important;
    margin: 6px 20px 0 !important;
    border-radius: 9px !important;
    background: var(--qm-s3) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
#chatScreen #quizFlow .quiz-progress-fill {
    background: var(--qm-pink) !important;
    background-image: none !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
#chatScreen #quizFlow .quiz-progress-fill::after,
#chatScreen #quizFlow .quiz-progress-fill::before { opacity: 0 !important; }

/* Hero avatar → small squircle sticker; no glow. */
#chatScreen #quizFlow .quiz-hero-avatar-wrap {
    align-self: flex-start;
    margin: 22px 20px 0 !important;
}
#chatScreen #quizFlow .quiz-hero-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 36% !important;
    border: 0 !important;
    box-shadow: 0 4px 0 var(--qm-dark-edge) !important;
    font: 800 24px/1 var(--qm-sans) !important;
}
#chatScreen #quizFlow .quiz-hero-glow { opacity: 0 !important; }

#chatScreen #quizFlow .quiz-question-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 18px 20px 24px !important;
    text-align: start !important;
}
#chatScreen #quizFlow .quiz-question-card::before,
#chatScreen #quizFlow .quiz-question-card::after { content: none !important; }
#chatScreen #quizFlow .quiz-category {
    font: 600 13px/1.3 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--qm-fg2) !important;
    text-align: start !important;
    justify-content: flex-start !important;
    margin: 0 0 10px !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
#chatScreen #quizFlow .quiz-category::before,
#chatScreen #quizFlow .quiz-category::after { content: none !important; }
#chatScreen #quizFlow .quiz-question {
    font: 800 clamp(28px, 8.4vw, 34px)/1.04 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
    text-align: start !important;
    text-wrap: balance;
    margin: 0 0 26px !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Answers: 2-col squircle cards with a dark 3D under-edge. */
#chatScreen #quizFlow .quiz-choices {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
#chatScreen #quizFlow .quiz-choices > .quiz-choice:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 92px !important;
}
#chatScreen #quizFlow .quiz-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 132px !important;
    padding: 16px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: var(--qm-s2) !important;
    background-image: none !important;
    color: var(--qm-fg) !important;
    box-shadow: 0 4px 0 var(--qm-dark-edge) !important;
    text-align: start !important;
    cursor: pointer;
}
#chatScreen #quizFlow .quiz-choice::before,
#chatScreen #quizFlow .quiz-choice::after { content: none !important; }
@media (hover: hover) {
    #chatScreen #quizFlow .quiz-choice:not(:disabled):hover { background: var(--qm-s3) !important; }
}
#chatScreen #quizFlow .quiz-choice:active {
    box-shadow: 0 1px 0 var(--qm-dark-edge) !important;
}
#chatScreen #quizFlow .quiz-choice:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--qm-pink-soft), 0 4px 0 3px var(--qm-dark-edge) !important;
}
#chatScreen #quizFlow .quiz-choice-label {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 30% !important;
    background: var(--qm-s3) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qm-fg2) !important;
    font: 800 14px/34px var(--qm-sans) !important;
    text-align: center !important;
    display: block !important;
    transform: rotate(-6deg);
}
#chatScreen #quizFlow .quiz-choice-text {
    font: 800 16px/1.2 var(--qm-sans) !important;
    letter-spacing: -.01em !important;
    color: inherit !important;
    text-align: start !important;
}
/* Selected (and correct) answer: cream card with pink ring. */
#chatScreen #quizFlow .quiz-choice.selected,
#chatScreen #quizFlow .quiz-choice.correct {
    background: var(--qm-cream) !important;
    color: var(--qm-ink) !important;
    box-shadow: 0 0 0 3px var(--qm-pink), 0 4px 0 3px var(--qm-pink-edge) !important;
}
#chatScreen #quizFlow .quiz-choice.selected .quiz-choice-label,
#chatScreen #quizFlow .quiz-choice.correct .quiz-choice-label {
    background: var(--qm-pink) !important;
    color: #fff !important;
}
#chatScreen #quizFlow .quiz-choice.selected.incorrect,
#chatScreen #quizFlow .quiz-choice.incorrect {
    background: var(--qm-s3) !important;
    color: var(--qm-fg) !important;
    box-shadow: 0 0 0 3px var(--qm-fg3), 0 4px 0 3px var(--qm-dark-edge) !important;
}
#chatScreen #quizFlow .quiz-choice.selected.incorrect .quiz-choice-label {
    background: var(--qm-fg3) !important;
    color: var(--qm-bg) !important;
}

/* Match feedback overlay (inside the quiz) */
#chatScreen #quizFlow .match-feedback {
    background: var(--qm-scrim) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
#chatScreen #quizFlow .match-content {
    background: var(--qm-s1) !important;
    border: 0 !important;
    border-radius: var(--qm-r-card-lg) !important;
    box-shadow: var(--qm-shadow-card-lift) !important;
    padding: 28px 32px !important;
}
#chatScreen #quizFlow .match-content::before,
#chatScreen #quizFlow .match-content::after { opacity: 0 !important; }
#chatScreen #quizFlow .match-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 30% !important;
    background: var(--qm-pink-pale) !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid;
    place-items: center;
    font-size: 36px !important;
    margin: 0 auto 14px !important;
    transform: rotate(-6deg);
}
#chatScreen #quizFlow .match-content.match-incorrect .match-icon { background: var(--qm-s3) !important; }
#chatScreen #quizFlow .match-text {
    font: 800 34px/1 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
#chatScreen #quizFlow .match-content.match-correct .match-text { color: var(--qm-pink-soft) !important; }
#chatScreen #quizFlow .match-subtext {
    font: 400 15px/1.45 var(--qm-sans) !important;
    color: var(--qm-fg2) !important;
}

/* ==========================================================================
   4. UNLOCK / RESULT  (#unlockModal)  →  SUnlock "Du bist drin!"
   ========================================================================== */
#chatScreen #unlockModal .unlock-modal-content {
    background: transparent !important;
}
#chatScreen #unlockModal .unlock-card {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 24px 20px 28px !important;
    width: 100% !important;
    max-width: 440px !important;
    text-align: center !important;
}
#chatScreen #unlockModal .unlock-card::before,
#chatScreen #unlockModal .unlock-card::after,
#chatScreen #unlockModal .unlock-success-glow { opacity: 0 !important; }

/* Avatar in a cream frame, slightly rotated. */
#chatScreen #unlockModal .unlock-profile-avatar {
    width: 168px !important;
    height: 168px !important;
    margin: 8px auto 0 !important;
    border-radius: 38% !important;
    border: 6px solid var(--qm-cream) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
    font: 800 72px/1 var(--qm-sans) !important;
    color: #fff !important;
    transform: rotate(-4deg);
    animation: none !important;
}
#chatScreen #unlockModal .unlock-avatar--fail {
    width: 120px !important;
    height: 120px !important;
    font-size: 52px !important;
    border-color: var(--qm-s3) !important;
}
/* Score sticker: the success check becomes a rotated pink tile overlapping the frame. */
#chatScreen #unlockModal .unlock-success-badge {
    width: 72px !important;
    height: 72px !important;
    margin: -52px auto 0 !important;
    position: relative !important;
    inset-inline-start: 64px;
    z-index: 2;
    border-radius: 30% !important;
    background: var(--qm-pink) !important;
    border: 0 !important;
    box-shadow: 0 4px 0 var(--qm-pink-edge) !important;
    color: #fff !important;
    transform: rotate(8deg);
    animation: none !important;
}
#chatScreen #unlockModal .unlock-success-badge svg { width: 34px !important; height: 34px !important; }
#chatScreen #unlockModal .unlock-fail-emoji {
    width: 58px;
    height: 58px;
    margin: -40px auto 0 !important;
    position: relative;
    inset-inline-start: 46px;
    display: grid;
    place-items: center;
    border-radius: 30%;
    background: var(--qm-s2);
    font-size: 30px !important;
    transform: rotate(10deg);
    animation: none !important;
}

#chatScreen #unlockModal .unlock-title {
    font: 800 clamp(34px, 10vw, 46px)/1 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 22px 0 0 !important;
    text-wrap: balance;
}
#chatScreen #unlockModal .unlock-title--fail { font-size: clamp(34px, 10vw, 44px) !important; }
#chatScreen #unlockModal .unlock-subtitle {
    font: 400 15px/1.45 var(--qm-sans) !important;
    color: var(--qm-fg2) !important;
    margin: 12px 0 0 !important;
}

#chatScreen #unlockModal .unlock-stats {
    display: flex !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#chatScreen #unlockModal .unlock-stat {
    flex: 1 1 0 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: var(--qm-s1) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}
#chatScreen #unlockModal .unlock-stat::before,
#chatScreen #unlockModal .unlock-stat::after { content: none !important; }
#chatScreen #unlockModal .stat-number,
#chatScreen #unlockModal .stat-number--success {
    font: 800 30px/1 var(--qm-disp) !important;
    letter-spacing: -.03em !important;
    color: var(--qm-fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
#chatScreen #unlockModal .stat-label {
    font: 400 13px/1.3 var(--qm-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--qm-fg3) !important;
    margin-top: 6px !important;
}
#chatScreen #unlockModal .unlock-encourage {
    font: 400 14px/1.5 var(--qm-sans) !important;
    color: var(--qm-fg2) !important;
    margin: 18px 0 0 !important;
}
#chatScreen #unlockModal .unlock-encourage-spark {
    font: 600 13px/1.4 var(--qm-sans) !important;
    color: var(--qm-pink-soft) !important;
    margin: 8px 0 0 !important;
}

#chatScreen #unlockModal .unlock-cta {
    width: 100% !important;
    height: 56px !important;
    margin: 28px 0 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--qm-pink) !important;
    background-image: none !important;
    color: #fff !important;
    font: 700 16px/1 var(--qm-sans) !important;
    letter-spacing: -.01em !important;
    box-shadow: var(--qm-shadow-pink-btn) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer;
    transition: transform .14s var(--qm-ease-spring), opacity .14s ease !important;
    animation: none !important;
}
#chatScreen #unlockModal .unlock-cta::before,
#chatScreen #unlockModal .unlock-cta::after { content: none !important; }
#chatScreen #unlockModal .unlock-cta:hover { transform: translateY(-1px) !important; }
#chatScreen #unlockModal .unlock-cta:active {
    transform: translateY(3px) !important;
    box-shadow: var(--qm-shadow-pink-btn-press) !important;
}
#chatScreen #unlockModal .unlock-cta:focus-visible {
    outline: none !important;
    box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring) !important;
}
/* Fail CTA = dark 3D pill */
#chatScreen #unlockModal .unlock-cta--explore {
    background: var(--qm-s3) !important;
    color: #fff !important;
    box-shadow: var(--qm-shadow-dark-btn) !important;
}
#chatScreen #unlockModal .unlock-cta--explore:active { box-shadow: 0 1px 0 var(--qm-dark-edge) !important; }
#chatScreen #unlockModal .unlock-cta--explore:focus-visible { box-shadow: var(--qm-shadow-dark-btn), var(--qm-focus-ring) !important; }

/* ==========================================================================
   5. LEVEL SHEET  (#levelDetailModal)  →  SLevel
   Lives at body level; display is driven by .active in soulmate-rank.css.
   ========================================================================== */
#levelDetailModal.level-detail-overlay {
    background: var(--qm-scrim) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
#levelDetailModal .level-detail-sheet {
    background: var(--qm-s1) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0 !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .45) !important;
    padding: 12px 22px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--qm-sans);
    color: var(--qm-fg);
}
#levelDetailModal .level-detail-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    margin: 0 auto 14px;
}
@media (min-width: 720px) {
    #levelDetailModal .level-detail-sheet {
        border-radius: var(--qm-r-sheet) !important;
        padding-bottom: 28px !important;
    }
    #levelDetailModal .level-detail-sheet::before { content: none; }
}
#levelDetailModal .level-detail-header {
    border: 0 !important;
    padding: 0 0 6px !important;
    background: transparent !important;
}
#levelDetailModal .level-detail-header h3 {
    font: 800 26px/1 var(--qm-disp) !important;
    letter-spacing: -.035em !important;
    color: var(--qm-fg) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
#levelDetailModal .level-detail-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    color: var(--qm-fg) !important;
    font: 400 24px/1 var(--qm-sans) !important;
    cursor: pointer;
    transition: transform .15s var(--qm-ease-spring) !important;
}
#levelDetailModal .level-detail-close:hover { transform: rotate(90deg) !important; }
#levelDetailModal .level-detail-close:active { transform: scale(.9) !important; }
#levelDetailModal .level-detail-close:focus-visible { outline: none !important; box-shadow: var(--qm-focus-ring) !important; }

/* Hero: ring + name + progress in a compact row, bar full width below. */
#levelDetailModal .level-hero {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    text-align: start !important;
    padding: 10px 0 4px !important;
    background: transparent !important;
    border: 0 !important;
}
#levelDetailModal .level-hero-ring {
    grid-row: 1 / span 2;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
}
#levelDetailModal .level-hero-ring .level-ring-bg { stroke: rgba(255, 255, 255, .1) !important; }
#levelDetailModal .level-hero-ring .level-ring-fill { stroke: var(--qm-pink) !important; filter: none !important; }
#levelDetailModal .level-hero-number {
    color: var(--qm-fg) !important;
    font: 800 22px/1 var(--qm-sans) !important;
    letter-spacing: -.03em !important;
}
#levelDetailModal .level-hero-name {
    font: 800 18px/1.15 var(--qm-sans) !important;
    letter-spacing: -.02em !important;
    color: var(--qm-fg) !important;
    margin: 0 !important;
    align-self: end;
}
#levelDetailModal .level-hero-progress-text {
    font: 400 13px/1.35 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
    margin: 0 !important;
    align-self: start;
}
#levelDetailModal .level-hero-bar {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    height: 8px !important;
    margin: 12px 0 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .1) !important;
}
#levelDetailModal .level-hero-bar-fill {
    background: var(--qm-pink) !important; /* beats the inline gradient */
    border-radius: 9px !important;
    box-shadow: none !important;
}

/* Roadmap → stacked level cards */
#levelDetailModal .level-roadmap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#levelDetailModal .level-roadmap::before,
#levelDetailModal .level-roadmap::after { content: none !important; }
#levelDetailModal .level-roadmap-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    background: var(--qm-s2) !important;
    border: 0 !important;
    box-shadow: none !important;
}
#levelDetailModal .level-roadmap-item::before,
#levelDetailModal .level-roadmap-item::after { content: none !important; }
#levelDetailModal .level-roadmap-item.locked { opacity: .5; }
#levelDetailModal .level-roadmap-item.current {
    background: var(--qm-pink-pale) !important;
    color: var(--qm-ink-pale) !important;
}
#levelDetailModal .level-roadmap-dot {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 30% !important;
    border: 0 !important;
    background: var(--qm-s3) !important; /* beats the inline per-level colours */
    color: var(--qm-fg2) !important;
    box-shadow: none !important;
    font: 800 14px/1 var(--qm-sans) !important;
}
#levelDetailModal .level-roadmap-item.completed .level-roadmap-dot {
    background: rgba(74, 222, 128, .16) !important;
    color: var(--qm-green) !important;
}
#levelDetailModal .level-roadmap-item.current .level-roadmap-dot {
    background: var(--qm-pink) !important;
    color: #fff !important;
    box-shadow: 0 2px 0 var(--qm-pink-edge) !important;
    transform: rotate(-6deg);
}
#levelDetailModal .level-roadmap-name {
    font: 700 14px/1.25 var(--qm-sans) !important;
    color: var(--qm-fg) !important;
    margin: 0 !important;
}
#levelDetailModal .level-roadmap-sub {
    font: 400 12px/1.35 var(--qm-sans) !important;
    color: var(--qm-fg3) !important;
    margin: 2px 0 0 !important;
}
#levelDetailModal .level-roadmap-item.current .level-roadmap-name { color: var(--qm-ink-pale) !important; }
#levelDetailModal .level-roadmap-item.current .level-roadmap-sub { color: rgba(42, 13, 25, .7) !important; }
#levelDetailModal .level-roadmap-check {
    margin-inline-start: auto;
    color: var(--qm-green) !important;
    font: 800 16px/1 var(--qm-sans) !important;
    background: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #chatScreen #profileSelection .contact-item,
    #chatScreen #actualChat .chat-action-btn,
    #chatScreen #quizFlow .quiz-choice,
    #chatScreen #unlockModal .unlock-cta,
    #levelDetailModal .level-detail-close { transition: none !important; }
}

/* == C: voice bubble == ====================================================
   Voice messages (chat-voice.js renderVoiceMessage, also used for the
   legacy user-to-user audio). Base layout lives in chat-voice.css; this
   block only beats the generic qm bubble rules above (padding, text). */
#chatScreen #actualChat .message .message-bubble.cv-bubble {
    width: var(--cv-w, 220px) !important;
    max-width: 78vw !important;
    padding: 8px 14px 8px 8px !important;
}
#chatScreen #actualChat .message .message-bubble.cv-bubble .cv-meta .message-time {
    display: inline !important;
    margin: 0 0 0 auto !important;
    color: inherit !important;
    opacity: .85;
}
#chatScreen #actualChat .message .message-bubble.cv-bubble .cv-transcript {
    font: 400 14px/1.4 var(--qm-sans) !important;
    color: inherit !important;
    margin: 8px 2px 2px !important;
}
/* == /C: voice bubble == */