/* ==========================================
   @layer components — modals, toasts, FAB, call bubble, profile modal,
   mood section, chat sidebar shell. Sits above @layer base (layout)
   so component chrome wins over layout placement, but below
   @layer features so a feature-specific decorator still wins.
   ========================================== */
@layer components {

/* ========================================
   MOOD SECTION
   ======================================== */

.mood-section {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    padding: var(--spacing-sm);
    overflow: hidden; /* STRICT NO SCROLL */
}

.mood-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100dvh;
    width: 100%;
    gap: clamp(var(--spacing-sm), 2dvh, var(--spacing-lg));
}

.mood-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--spacing-sm), 2dvh, var(--spacing-lg));
    max-width: 600px;
    width: 100%;
}

/* Letter Section (between mood and gallery) */
.letter-section {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    animation: fadeIn 0.5s ease;
    overflow: hidden; /* STRICT NO SCROLL */
}

.letter-envelope-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92%;
    max-width: 700px;
    padding: var(--spacing-xl);
}

/* === Envelope Wrapper (envelope + sliding letter) === */
.envelope-wrapper {
    position: relative;
    width: clamp(280px, 80vw, 350px);
    height: clamp(180px, 40dvh, 220px);
    cursor: pointer;
    animation: envelopeBounce 2s ease infinite;
}

.envelope-wrapper.animating {
    animation: none;
}

.envelope-wrapper:hover {
    transform: scale(1.05);
}

/* The folded letter that slides out of the envelope */
.letter-slide {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 40%;
    height: 60%;
    background: #f4e4c1;
    border-radius: 2px;
    z-index: 0;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}

.letter-slide.sliding-out {
    z-index: 4;
    transform: translateY(-180%);
}

.letter-slide.sliding-in {
    z-index: 1;
    transform: translateY(0);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Envelope === */
.envelope {
    position: absolute;
    inset: 0;
    perspective: 800px;
}

.envelope-back {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c9956b, #a67853);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.envelope-front {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: linear-gradient(180deg, #d4a574, #c9956b);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.envelope-label {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 1.3rem;
    color: #4a2c17;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.envelope-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.envelope-mood-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5em;
    line-height: 1;
    pointer-events: none;
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, #d4a574, #c9956b);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top center;
    transition: transform 0.8s ease;
    z-index: 3;
}

.envelope-wrapper.flap-open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 0;
}

.envelope-wrapper.flap-closed .envelope-flap {
    transform: rotateX(0deg);
    z-index: 3;
}

@keyframes envelopeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Wax seal on envelope — breaks on open */
.envelope-wax-seal {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #c0392b 0%, #8B0000 50%, #5c0000 100%);
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.envelope-wax-seal::after {
    content: 'S';
    font-family: 'Special Elite', 'Courier New', monospace;
    color: rgba(255,220,180,0.7);
    font-size: 1.2rem;
}
.envelope-wrapper.flap-open .envelope-wax-seal {
    transform: translateX(-50%) scale(1.3);
    opacity: 0;
    filter: blur(4px);
}

/* Flip hint on the letter */
.letter-flip-hint {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.78rem;
    color: rgba(74, 44, 23, 0.4);
    animation: flipHintPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flipHintPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* === Letter Paper === */
.letter-paper {
    width: 100%;
    transform-origin: bottom center;
}

.letter-paper.hidden {
    display: none;
}

.letter-paper.unfolding {
    animation: letterUnfold 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes letterUnfold {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(90deg) scaleY(0.5);
    }
    40% {
        opacity: 1;
        transform: perspective(1000px) rotateX(45deg) scaleY(0.75);
    }
    70% {
        transform: perspective(1000px) rotateX(10deg) scaleY(0.95);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) scaleY(1);
    }
}

.letter-paper.folding {
    animation: letterFold 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes letterFold {
    0% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) scaleY(1);
    }
    40% {
        transform: perspective(1000px) rotateX(30deg) scaleY(0.85);
    }
    100% {
        opacity: 0;
        transform: perspective(1000px) rotateX(90deg) scaleY(0.5);
    }
}

/* === Letter Flip === */
.letter-flip-container {
    perspective: 1200px;
    width: 100%;
}

.letter-flipper {
    position: relative;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.letter-flipper.flipped {
    transform: rotateY(180deg);
}

/* Both faces share the same base style */
.letter-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
}

.letter-face.letter-front {
    position: relative;
}

.letter-face.letter-back {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
}

/* The parchment inside back fills the face completely */
.letter-face.letter-back .about-letter.parchment {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letter-back-pic-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.letter-back-pic {
    max-width: 75%;
    max-height: 80%;
    object-fit: contain;
}

/* === Flip emoji button (transparent) === */
.letter-flip-emoji-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.7;
    color: rgba(255,255,255,0.8);
    transition: transform 0.2s, opacity 0.2s;
    animation: flipHint 2.5s ease-in-out infinite;
}
.letter-flip-emoji-btn:hover,
.letter-flip-emoji-btn:active {
    transform: scale(1.2);
    opacity: 1;
    animation: none;
}
@keyframes flipHint {
    0%, 70%, 100% { transform: rotateY(0deg); opacity: 0.7; }
    80% { transform: rotateY(180deg); opacity: 1; }
    90% { transform: rotateY(0deg); opacity: 0.7; }
}

/* === Buttons === */
.letter-top-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    animation: fadeIn 0.4s ease;
}

.letter-top-btn.hidden {
    display: none;
}

.letter-bottom-btn {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    animation: fadeIn 0.4s ease;
}

.letter-bottom-btn.hidden {
    display: none;
}

.letter-envelope-scene.closing-fade {
    animation: fadeOutDown 0.6s ease forwards;
}

@keyframes fadeOutDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(30px); }
}

@media (max-width: 480px) {
    .envelope-wrapper {
        width: 300px;
        height: 190px;
    }

    /* Letter section: everything fits on screen, no scrolling at all */
    .letter-section {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0;
    }

    .letter-envelope-scene {
        width: 96%;
        flex: 1;
        min-height: 0;
        padding: 8px 8px;
        box-sizing: border-box;
    }

    /* Equal spacing above and below letter */
    .letter-top-btn {
        margin-bottom: 8px;
    }
    .letter-flip-emoji-btn {
        font-size: 2.5rem;
    }

    .letter-bottom-btn {
        margin-top: 8px;
    }
    .letter-bottom-btn .enter-btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }

    /* Letter paper fills remaining space between buttons, no scroll */
    .letter-paper {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        width: 100%;
    }

    .letter-paper .letter-flip-container {
        height: 100%;
    }
    .letter-paper .letter-flipper {
        height: 100%;
    }
    .letter-paper .letter-face {
        height: 100%;
    }

    /* Parchment: fill the available height */
    .about-letter.parchment {
        min-height: 0;
        height: 100%;
        overflow: hidden;
        padding: 10px 12px 6px;
    }

    .about-letter-title {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .about-letter-body {
        font-size: clamp(0.52rem, 1.35vh, 0.8rem);
        line-height: 1.45;
    }

    .about-letter-body p {
        margin-bottom: 0.2em;
    }

    .letter-footer-images {
        padding: 2px 0 0;
    }

    .letter-amlas-sig {
        width: clamp(65px, 24vw, 110px);
    }

    /* Back: picture centered */
    .letter-back-pic-wrapper {
        height: 100%;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .letter-back-pic {
        max-width: 90%;
        max-height: 90%;
    }
}

.mood-container {
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 600px;
    width: 90%;
}

.mood-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-xs);
}

.mood-subtitle {
    color: rgba(255,255,255,0.6);
    margin-bottom: var(--spacing-xl);
    font-size: 1rem;
}

.mood-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.mood-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-lg) var(--spacing-md);
    background: linear-gradient(145deg, rgba(var(--secondary-rgb),0.1), rgba(52, 73, 94, 0.2));
    border: 2px solid rgba(var(--secondary-rgb),0.2);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    color: white;
    font-family: inherit;
    font-size: inherit;
}

.mood-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb),0.15);
}

.mood-card.selected {
    border-color: var(--primary);
    background: linear-gradient(145deg, rgba(var(--primary-rgb),0.15), rgba(var(--secondary-rgb),0.2));
    box-shadow: 0 0 20px rgba(var(--primary-rgb),0.2);
}

.mood-emoji {
    font-size: 2.5rem;
}

.mood-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.mood-greeting {
    margin-top: var(--spacing-lg);
    animation: fadeIn 0.5s ease;
}

.mood-greeting-text {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

@media (max-width: 480px) {
    .mood-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   THERAPY CHATBOT
   ======================================== */

.therapy-container {
    /* Match the visual width of the .content-nav tab pill above. With
       the legacy 600px max-width the chat box read as noticeably
       narrower than the nav. 720px lines up at the typical desktop
       nav width on top, with 100% width on phone. */
    max-width: 720px;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 0;
}

.salma-face-wrap {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-top: 10px;
}

.therapy-label {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Legacy class kept (still set as the inner span of #therapy-sublabel
   inside the new intro chip) but the standalone-paragraph styling is
   superseded by .therapy-intro-text below. */
.therapy-sublabel {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

/* SOTA "start of conversation" chip — sits at the top of the message
   list, replaces the old subtitle paragraph that floated above the
   chat box. Convention: Discord ("This is the beginning of your
   conversation"), Slack (channel-purpose card), iMessage (contact
   card). Subtle, pill-shaped, gradient text so it doesn't compete
   with real messages but still announces context.

   Implementation note: the parent .therapy-messages is a flex-column.
   To center an inline-sized child cleanly across all browsers, wrap
   it in a flex-flow row with `justify-content: center` on the wrapper
   and let the chip itself be `display: inline-flex; width: auto`.
   The legacy `align-self: center + margin: auto` combo computed to
   zero-width on some Chromium versions when paired with `inline-flex`
   — fine on mobile (different render path) but invisible on desktop. */
.therapy-intro-chip {
    /* Flex item in .therapy-messages (column). align-self centers it
       horizontally; `width: fit-content` makes it shrink to content
       so it pill-fits its text without auto-margin tricks. */
    align-self: center;
    width: fit-content;
    max-width: 90%;
    margin: 4px 0 14px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--secondary-rgb), 0.08));
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.72rem;
    /* Solid muted color rather than gradient-clipped text — clip+
       transparent occasionally rendered as zero-glyph on desktop
       Chromium when the chip's bg gradient was also applied. */
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.35;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}
.therapy-intro-chip .therapy-intro-icon {
    color: var(--primary);
    flex-shrink: 0;
    opacity: 0.85;
}
.therapy-intro-chip .therapy-intro-text {
    /* Slight tint via primary so the text reads as a Salma-flavored
       system note, but no gradient-clip — solid color is the
       reliable cross-browser path. */
    color: var(--primary);
    font-weight: 500;
    opacity: 0.95;
}
@media (max-width: 600px) {
    .therapy-intro-chip {
        margin: 2px 0 10px;
        padding: 5px 11px;
        font-size: 0.64rem;
        gap: 5px;
    }
}

/* ── Therapy duo faces container ── */
.therapy-faces {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}
/* Smooth transitions on all face states */
.therapy-faces .salma-face {
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* ── Sleeping state: 50% opacity, greyed, closed eyes, flat mouth ── */
.therapy-faces .salma-face.sleeping {
    opacity: 0.45;
    filter: grayscale(0.6) brightness(0.75);
    animation: sleepBob 3s ease-in-out infinite;
}
/* Phase 7.7: !important stripped — .therapy-faces .salma-face.sleeping .X
   is 0,4,0 specificity, beats every other .face-eye / .face-mouth state
   rule (max 0,2,1). */
.therapy-faces .salma-face.sleeping .face-eye {
    height: 2px;
    border-radius: 50%;
    margin-top: 6px;
}
.therapy-faces .salma-face.sleeping .face-pupil { display: none; }
.therapy-faces .salma-face.sleeping .face-mouth {
    width: 12px;
    height: 0;
    border-bottom: 2px solid rgba(192, 57, 43, 0.4);
    border-radius: 0;
}
.therapy-faces .salma-face.sleeping .face-blush { opacity: 0.25; }
/* Zzz floater */
.therapy-faces .salma-face.sleeping::after {
    content: 'z z z';
    position: absolute;
    top: -4px;
    right: -12px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(var(--secondary-rgb),0.5);
    letter-spacing: 2px;
    animation: zzzFloat 2.5s ease-in-out infinite;
}
@keyframes sleepBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
@keyframes zzzFloat {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.7; transform: translateY(-6px); }
}

/* ── Awake transition ── */
.therapy-faces .salma-face.waking {
    animation: faceWake 0.8s ease forwards;
}
@keyframes faceWake {
    from { opacity: 0.45; filter: grayscale(0.6) brightness(0.75); }
    to { opacity: 1; filter: none; }
}

/* ── Duo: faces lean toward each other lovingly (no resize!) ── */
.therapy-faces.duo .salma-face:first-child {
    animation: duoLeanRight 4.5s ease-in-out infinite;
}
.therapy-faces.duo .salma-face:last-child {
    animation: duoLeanLeft 4.5s ease-in-out infinite;
}
.therapy-faces.duo .salma-face:first-child .face-pupil {
    animation: duoPupilR 4.5s ease-in-out infinite;
}
.therapy-faces.duo .salma-face:last-child .face-pupil {
    animation: duoPupilL 4.5s ease-in-out infinite;
}

@keyframes duoLeanRight {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-5px) rotate(5deg); }
    60% { transform: translateY(-2px) rotate(0deg); }
    80% { transform: translateY(-3px) rotate(-2deg); }
}
@keyframes duoLeanLeft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-5px) rotate(-5deg); }
    60% { transform: translateY(-2px) rotate(0deg); }
    80% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes duoPupilR {
    0%, 100% { transform: translateX(0); }
    25%, 45% { transform: translateX(1.5px); }
    65%, 85% { transform: translateX(-1px); }
}
@keyframes duoPupilL {
    0%, 100% { transform: translateX(0); }
    25%, 45% { transform: translateX(-1.5px); }
    65%, 85% { transform: translateX(1px); }
}

/* CSS 3D Animated Face — sized down ~14% from 110 → 95 so the duo
   faces don't dominate the therapy view, leaving more vertical room
   for the actual chat content below. */
.salma-face {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd89b, #f8b4b4);
    margin: 0 auto;
    position: relative;
    animation: faceBob 3s ease-in-out infinite;
    box-shadow: 0 8px 30px rgba(248, 180, 180, 0.3);
}

.face-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* Eyes */
.face-eyes {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 34px;
}

.face-eye {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.face-pupil {
    width: 7px;
    height: 7px;
    background: #2c3e50;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

/* Mouth */
.face-mouth {
    width: 20px;
    height: 10px;
    border-bottom: 2px solid #c0392b;
    border-radius: 0 0 50% 50%;
    margin: 12px auto 0;
    transition: background 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Blush */
.face-blush {
    width: 16px;
    height: 8px;
    background: rgba(255, 130, 130, 0.5);
    border-radius: 50%;
    position: absolute;
    top: 58px;
}

.face-blush.left { left: 12px; }
.face-blush.right { right: 12px; }

/* Expression Classes */
.face-happy .face-mouth {
    width: 24px;
    height: 12px;
    border-bottom: 2px solid #c0392b;
    border-radius: 0 0 50% 50%;
}

.face-thinking .face-mouth {
    width: 11px;
    height: 11px;
    border: 2px solid #c0392b;
    border-radius: 50%;
    background: none;
}

.face-thinking .face-pupil {
    transform: translate(2px, -2px);
}

.face-concerned .face-mouth {
    width: 18px;
    height: 8px;
    border-bottom: none;
    border-top: 2px solid #c0392b;
    border-radius: 50% 50% 0 0;
}

.face-concerned .face-blush {
    opacity: 0.3;
}

.face-laughing .face-mouth {
    width: 28px;
    height: 15px;
    border-bottom: 2px solid #c0392b;
    border-radius: 0 0 50% 50%;
    background: rgba(0,0,0,0.1);
}

.face-laughing .face-eye {
    height: 4px;
    border-radius: 0 0 50% 50%;
    overflow: hidden;
}

.face-laughing .face-pupil {
    display: none;
}

/* Angry */
.face-angry .face-mouth {
    width: 16px;
    height: 6px;
    border-bottom: none;
    border-top: 2px solid #c0392b;
    border-radius: 40% 40% 0 0;
}

.face-angry .face-eye {
    transform: skewY(-8deg);
}

.face-angry .face-eye.right {
    transform: skewY(8deg);
}

.face-angry .face-pupil {
    width: 8px;
    height: 8px;
    background: #1a1a2e;
}

.face-angry .face-blush {
    opacity: 0.9;
    background: rgba(255, 80, 80, 0.6);
}

/* Crying — user hasn't typed in a while */
.face-crying .face-mouth {
    width: 18px;
    height: 8px;
    border-bottom: none;
    border-top: 2px solid #c0392b;
    border-radius: 50% 50% 0 0;
}

.face-crying .face-eye::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background: rgba(100, 180, 255, 0.7);
    border-radius: 0 0 3px 3px;
    animation: tearDrop 1.5s ease-in infinite;
}

.face-crying .face-eye.right::after {
    animation-delay: 0.7s;
}

.face-crying .face-pupil {
    transform: translateY(2px);
}

.face-crying .face-blush {
    opacity: 0.7;
    background: rgba(255, 100, 100, 0.5);
}

@keyframes tearDrop {
    0% { opacity: 0; height: 0; bottom: -2px; }
    30% { opacity: 1; height: 8px; bottom: -8px; }
    100% { opacity: 0; height: 8px; bottom: -16px; }
}

/* Listening — user is typing, soft smile with attentive eyes */
.face-listening .face-mouth {
    width: 16px;
    height: 8px;
    border-bottom: 2px solid #c0392b;
    border-radius: 0 0 50% 50%;
}

.face-listening .face-pupil {
    transform: translateY(4px);
}

.face-listening .face-blush {
    opacity: 0.8;
}

/* Blink Animation */
.salma-face.blink .face-eye {
    height: 3px;
    transition: height 0.1s ease;
}

.salma-face.blink .face-pupil {
    display: none;
}

/* Idle Bobbing */
@keyframes faceBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* AI Chat */
.therapy-chat {
    width: 100%;
    flex: 1;
    min-height: 0;
    background: rgba(13, 11, 30, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--primary-rgb),0.15);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.therapy-messages-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
}

.therapy-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* Always-visible purple scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--secondary-rgb),0.6) rgba(13, 11, 30, 0.3);
}

/* Desktop/Android: native custom scrollbar */
.therapy-messages::-webkit-scrollbar {
    width: 6px;
    display: block;
}

.therapy-messages::-webkit-scrollbar-track {
    background: rgba(13, 11, 30, 0.3);
    border-radius: 10px;
}

.therapy-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--secondary-rgb),0.7), rgba(100, 50, 150, 0.9));
    border-radius: 10px;
    min-height: 30px;
}

/* iOS Safari: custom JS-driven scrollbar */
.therapy-scrollbar-track {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .therapy-messages {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        padding-right: 10px;
        margin-right: -10px;
        clip-path: inset(0 10px 0 0);
    }
    .therapy-messages::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .therapy-scrollbar-track {
        display: block;
        width: 6px;
        background: rgba(13, 11, 30, 0.3);
        border-radius: 10px;
        margin-left: 4px;
        flex-shrink: 0;
        position: relative;
    }
    .therapy-scrollbar-thumb {
        width: 100%;
        background: linear-gradient(180deg, rgba(var(--secondary-rgb),0.7), rgba(100, 50, 150, 0.9));
        border-radius: 10px;
        position: absolute;
        top: 0;
        min-height: 20px;
        transition: top 0.1s ease-out;
    }
    .therapy-scrollbar-track.hidden {
        display: none;
    }
}

.ai-chat-bubble {
    display: flex;
    gap: 10px;
    max-width: 85%;
    animation: fadeIn 0.3s ease;
}

.ai-chat-bubble.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-chat-bubble.salma {
    align-self: flex-start;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.ai-bubble-content {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

.ai-chat-bubble.salma .ai-bubble-content {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb),0.18), rgba(var(--primary-rgb),0.12));
    border: 1px solid rgba(var(--secondary-rgb),0.25);
    color: rgba(255,255,255,0.9);
    border-bottom-left-radius: 4px;
}

.ai-chat-bubble.user .ai-bubble-content {
    background: linear-gradient(135deg, rgba(var(--secondary-dark-rgb),0.25), rgba(var(--secondary-rgb),0.15));
    border: 1px solid rgba(var(--secondary-rgb),0.35);
    color: rgba(255,255,255,0.9);
    border-bottom-right-radius: 4px;
}

/* Partner bubble — gold to match Salma's theme */
.ai-chat-bubble.partner {
    align-self: flex-start;
    flex-direction: column;
}

.ai-bubble-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(var(--primary-rgb),0.7);
    margin-bottom: 2px;
    padding-left: 4px;
}

.ai-chat-bubble.partner .ai-bubble-content {
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.15), rgba(var(--primary-rgb),0.08));
    border: 1px solid rgba(var(--primary-rgb),0.25);
    color: rgba(255,255,255,0.9);
    border-bottom-left-radius: 4px;
}

/* System message (mode switch notification) */
.ai-chat-system {
    align-self: center;
    text-align: center;
    font-size: 0.75rem;
    /* Phase 8.5 contrast */
    color: var(--text-muted);
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    animation: fadeIn 0.3s ease;
}

/* Typing dots */
.typing-dots span {
    animation: typingBounce 1.4s infinite;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-secondary);
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

.therapy-input-area {
    display: flex;
    gap: 8px;
    padding: var(--spacing-md);
    border-top: 1px solid rgba(var(--primary-rgb),0.15);
}

.therapy-send-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    min-height: 36px;
}

.therapy-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(var(--primary-rgb),0.15);
    border-radius: 20px;
    padding: 10px 16px;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.therapy-input:focus {
    border-color: var(--accent-secondary);
}


/* ========================================
   SESSION OVERLAY
   ======================================== */
.session-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.session-overlay.hidden {
    display: none;
}

.session-overlay-content {
    max-width: 680px;
    width: 92%;
    max-height: 96vh;
    max-height: 96dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: clamp(var(--spacing-md), 3dvh, var(--spacing-xl));
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .session-overlay-content {
        padding: var(--spacing-xl) var(--spacing-xxl);
    }
    .session-overlay-content .role-avatar {
        width: 80px;
        height: 80px;
    }
    .session-overlay-content .role-card {
        padding: 24px 28px;
        gap: 12px;
    }
    .session-overlay-content .role-name {
        font-size: 1.15rem;
    }
    .session-overlay-content .lobby-subtitle {
        font-size: 1.15rem;
    }
}

.shared-lobby {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.session-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-overlay-close:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}

/* ========================================
   SESSION STATUS BUTTON (Header)
   ======================================== */
.session-status-btn {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 6px 10px 6px 16px;
    color: rgba(255,255,255,0.8);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    height: 36px;
    max-width: 180px;
    min-width: 80px;
    box-sizing: border-box;
    margin-left: 8px;
}

.session-status-btn .session-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Partner pill text wrap - scrolling marquee like opponent pill */
.partner-pill-text-wrap {
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.partner-pill-text {
    display: inline-block;
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.partner-pill-text.scrolling {
    animation: marquee-scroll 8s linear infinite;
}
.session-status-btn #session-status-text {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-status-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.session-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}

.session-dot.waiting {
    background: var(--primary-dark);
    box-shadow: 0 0 6px rgba(243, 156, 18, 0.5);
    animation: pulse-dot 1.5s infinite;
}

.session-dot.offline {
    background: rgba(255,255,255,0.3);
}

.session-dot.solo {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Session Pill Dropdown */
.session-pill-wrap {
    position: relative;
    overflow: visible;
}
.session-pill-arrow {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-left: 2px;
    transition: transform 0.2s;
}
/* ========================================
   OPPONENT ACTIVITY PILL (Header Right)
   ======================================== */
/* Room pill — fixed-width frosted glass status pill */
.room-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 5px 12px 5px 9px;
    width: 160px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.room-pill:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.2);
}

/* My tab badge — shows your name above your active tab */
.nav-tab .my-tab-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.nav-tab.my-tab-here .my-tab-badge {
    opacity: 1;
}

/* Partner tab highlight — shows which tab partner is on */
.nav-tab .partner-tab-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    color: #ffa502;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.nav-tab.partner-here .partner-tab-badge {
    opacity: 1;
}
.nav-tab.partner-here::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 165, 2, 0.12);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Same tab — both users on this tab: gold border */
.nav-tab.same-tab .my-tab-badge {
    top: -18px;
    color: var(--primary);
}
.nav-tab.same-tab .partner-tab-badge {
    top: -10px;
}
.nav-tab.same-tab::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1.5px solid rgba(var(--primary-rgb),0.5);
    background: rgba(var(--primary-rgb),0.08);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(var(--primary-rgb),0.15);
}
.nav-tab {
    position: relative;
}

.room-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}
.room-pill-dot.online {
    background: #2ed573;
    box-shadow: 0 0 6px rgba(46, 213, 115, 0.5);
}
.room-pill-dot.both {
    background: var(--primary);
    box-shadow: 0 0 6px rgba(var(--primary-rgb),0.5);
}
.room-pill-dot.offline {
    background: rgba(255, 255, 255, 0.25);
}

.room-pill-text-wrap {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.room-pill-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(235, 225, 250, 0.92);
    letter-spacing: 0.1px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.room-pill-text.scrolling {
    animation: roomPillScroll var(--scroll-dur, 10s) linear infinite;
}

@keyframes roomPillScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* One person online — subtle green tint */
.room-pill.one-online {
    border-color: rgba(46, 213, 115, 0.2);
}
/* Both online — purple glow pulse */
.room-pill.partner-online {
    border-color: rgba(var(--primary-rgb),0.35);
    background: rgba(var(--primary-rgb),0.08);
    box-shadow: 0 0 12px rgba(var(--primary-rgb),0.2), 0 0 4px rgba(var(--primary-rgb),0.15);
    animation: pillGlow 2.5s ease-in-out infinite;
}

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .room-pill { width: 120px; padding: 5px 10px 5px 8px; gap: 5px; }
    .room-pill-text { font-size: 0.75rem; }
    .room-pill-dot { width: 6px; height: 6px; }
}
/* breakpoint snap 380px -> 480px (Phase 7.6 ladder) */
@media (max-width: 480px) {
    .room-pill { width: 100px; }
    .room-pill-text { font-size: 0.7rem; }
}

/* Legacy opponent pill — hidden (removed from HTML) */
.opponent-pill {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 0;
    color: #e0d0f0;
    width: 150px;
    height: 36px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    margin-right: 8px;
    transition: background 0.2s, border-color 0.2s;
}

.opponent-pill:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.opponent-pill:active {
    background: rgba(255,255,255,0.14);
}

.opponent-pill.hidden { display: none; }

/* Partner online glow — gentle pulse while both connected */
.opponent-pill.partner-online {
    border-color: rgba(var(--secondary-alt-rgb),0.4);
    box-shadow: 0 0 12px rgba(var(--secondary-alt-rgb),0.2), 0 0 4px rgba(255, 100, 150, 0.15);
    animation: pillGlow 3s ease-in-out infinite;
}

@keyframes pillGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--primary-rgb),0.15), 0 0 3px rgba(255, 200, 100, 0.1); }
    50% { box-shadow: 0 0 16px rgba(var(--primary-rgb),0.3), 0 0 6px rgba(255, 200, 100, 0.2); }
}

/* ========================================
   ROOM MODAL — member list, roles, activity
   ======================================== */
.room-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.room-modal.hidden { display: none; }
.room-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.room-modal-content {
    position: relative;
    width: 90%;
    max-width: 360px;
    background: linear-gradient(135deg, rgba(20, 18, 30, 0.98), rgba(15, 12, 25, 0.99));
    border: 1px solid rgba(var(--secondary-alt-rgb),0.2);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--secondary-alt-rgb),0.25), 0 0 40px rgba(var(--secondary-alt-rgb),0.1);
    overflow: hidden;
}
.room-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: rgba(var(--secondary-alt-rgb),0.06);
    border-bottom: 1px solid rgba(var(--secondary-alt-rgb),0.12);
    position: relative;
}
.room-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}
.room-modal-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
}
.room-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.room-modal-members {
    padding: 12px 16px;
}
.room-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
}
.room-member-card:hover {
    background: rgba(var(--secondary-alt-rgb),0.08);
    border-color: rgba(var(--secondary-alt-rgb),0.2);
}
.room-member-card:last-child { margin-bottom: 0; }
.room-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--secondary-alt-rgb),0.25);
    flex-shrink: 0;
}
.room-member-info {
    flex: 1;
    min-width: 0;
}
.room-member-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.room-member-username {
    font-size: 0.7rem;
    /* Phase 8.5 contrast */
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.2;
}
.room-member-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-member-status .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.room-member-status .status-dot.online { background: #2ed573; box-shadow: 0 0 6px rgba(46, 213, 115, 0.5); }
.room-member-status .status-dot.offline { background: rgba(255,255,255,0.2); }
.room-member-status .status-dot.ai-ready { background: var(--secondary); box-shadow: 0 0 6px rgba(var(--secondary-rgb),0.5); }
.room-member-status .status-dot.partner-online { background: var(--primary); box-shadow: 0 0 6px rgba(var(--primary-rgb),0.5); }
.room-member-go {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(var(--secondary-alt-rgb),0.6);
    padding: 4px 10px;
    border: 1px solid rgba(var(--secondary-alt-rgb),0.2);
    border-radius: 12px;
    background: rgba(var(--secondary-alt-rgb),0.06);
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.room-member-go:hover {
    background: rgba(var(--secondary-alt-rgb),0.15);
    border-color: rgba(var(--secondary-alt-rgb),0.4);
    color: #c4a0ff;
}
.room-member-you {
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

/* Game invite modal — Invite button styling */
.game-invite-btn {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    padding: 6px 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-dark));
    box-shadow: 0 4px 15px rgba(var(--secondary-dark-rgb),0.35);
    cursor: pointer;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.game-invite-btn:hover, .game-invite-btn:active {
    background: linear-gradient(135deg, var(--secondary-alt), var(--secondary-dark));
    box-shadow: 0 6px 20px rgba(var(--secondary-dark-rgb),0.5);
    transform: scale(1.02);
}
.game-invite-btn[data-target="partner"] {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 4px 15px rgba(var(--primary-rgb),0.35);
}
.game-invite-btn[data-target="partner"]:hover, .game-invite-btn[data-target="partner"]:active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.5);
}
.game-invite-offline-msg {
    font-size: 0.75rem;
    color: rgba(255, 150, 150, 0.7);
    text-align: center;
    padding: 8px 12px;
    margin-top: 4px;
}

/* Together celebration — floating hearts overlay */
.together-celebration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.together-heart {
    position: absolute;
    bottom: -40px;
    font-size: 1.4rem;
    opacity: 0;
    animation: heartFloat 3s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes heartFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
    15% { opacity: 1; transform: translateY(-80px) scale(1) rotate(-10deg); }
    70% { opacity: 0.8; transform: translateY(-60vh) scale(1.1) rotate(15deg); }
    100% { opacity: 0; transform: translateY(-100vh) scale(0.8) rotate(-5deg); }
}

/* Warm pulse on entire UI when partner connects */
.together-warm-pulse::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 100, 150, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9998;
    animation: warmPulse 2s ease-out forwards;
}

@keyframes warmPulse {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* Fixed left section: avatar + emoji — generous spacing */
.opponent-pill-fixed {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    flex-shrink: 0;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    height: 100%;
}

.opponent-pill-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(196, 160, 255, 0.4);
}

.opponent-pill-emoji {
    font-size: 0.9rem;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
}

/* Scrolling text section — takes remaining space */
.opponent-pill-text-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 0 22px 22px 0;
    /* fade edges for seamless scroll */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.opponent-pill-text {
    display: inline-block;
    white-space: nowrap;
    color: #c4a0ff;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.2px;
}

.opponent-pill-text.scrolling {
    animation: marquee-scroll 8s linear infinite;
    will-change: transform;
}

.opponent-pill-text.scrolling .marquee-half {
    display: inline;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .opponent-pill {
        width: 105px;
        height: 32px;
        margin-right: 4px;
    }
    .opponent-pill-fixed { gap: 3px; padding: 0 5px; }
    .opponent-pill-avatar { width: 16px; height: 16px; border-width: 1px; }
    .opponent-pill-emoji { font-size: 0.65rem; }
    .opponent-pill-text { font-size: 0.58rem; }
    .opponent-pill-text-wrap { padding: 0 5px; }
}


/* Profile theme picker — selected swatch checkmark pop-in */
@keyframes sfxSwatchPop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.sfx-theme-swatch { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s, box-shadow 0.2s; }
.sfx-theme-swatch:hover:not([style*="scale(1.06)"]) { transform: scale(1.03); border-color: rgba(255, 255, 255, 0.25) !important; }


/* ========================================
   MOBILE FIXES — touch targets, sizing
   ======================================== */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .session-status-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
        min-height: 32px;
        width: 95px;
    }

    .header-left,
    .header-right {
        gap: 2px;
        min-width: 60px;
    }

    .header-icon-btn {
        font-size: 1.1rem;
        padding: 3px 5px;
    }

    .media-input-row {
        gap: 6px;
    }

    .media-url-input {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .media-ctrl-btn {
        width: 38px;
        height: 38px;
    }

    .media-skip10-btn {
        width: 38px;
        height: 38px;
        padding: 0;
    }

    .media-play-btn,
    .media-pause-btn-new {
        width: 48px;
        height: 48px;
    }

    .lobby-cards {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px; /* Extra compression */
    }

    .lobby-card {
        width: 50%;
        max-width: none;
        padding: 12px 8px; /* Compress */
    }

    .lobby-card-icon {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    .lobby-card h3 {
        margin-bottom: 4px;
        font-size: 0.95rem;
    }

    .lobby-card p {
        margin-bottom: 10px;
        font-size: 0.75rem;
    }

    .role-cards {
        flex-direction: row;
        gap: 8px;
        justify-content: center;
    }

    .role-card {
        width: 50%;
        padding: 12px 8px;
        gap: 6px;
    }
    
    .role-avatar {
        width: 48px;
        height: 48px;
    }
    
    .role-name {
        font-size: 0.9rem;
    }

    .custom-name-input {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .session-overlay-content {
        width: 98%;
        padding: clamp(10px, 2dvh, 16px);
        max-height: 98vh;
        max-height: 98dvh;
    }

    #shared-session-options .lobby-subtitle,
    #role-selection-view .lobby-subtitle {
        margin-bottom: 10px;
        font-size: 1rem;
    }

    .therapy-container {
        padding: var(--spacing-xs) 0;
        height: 100%;
        gap: 5px;
    }

    .salma-face {
        width: clamp(44px, 9dvh, 70px);
        height: clamp(44px, 9dvh, 70px);
    }
    
    .therapy-label {
        font-size: 0.9rem;
        margin-top: 5px;
    }
    
    .salma-face-wrap {
        margin-bottom: var(--spacing-sm);
    }
    
    .therapy-messages {
        padding: 10px;
    }
    
    .therapy-input-area {
        padding: 8px;
    }

    /* Phase 7.7: !important stripped — this media query's .therapy-send-btn
       rule has the same specificity as the base rule above but wins by
       source order. */
    .therapy-send-btn {
        padding: 6px 14px;
        font-size: 0.75rem;
        min-height: 0;
        min-width: 0;
        flex-shrink: 0;
        width: auto;
    }

    .salma-face .face-eyes {
        gap: clamp(12px, 2dvh, 20px);
        padding-top: clamp(15px, 2.5dvh, 35px);
    }

    .salma-face .face-eye {
        width: 16px;
        height: 16px;
    }

    .salma-face .face-pupil {
        width: 6px;
        height: 6px;
    }

    .salma-face .face-mouth {
        margin-top: 10px;
    }

    .salma-face .face-blush {
        top: 55px;
        width: 14px;
        height: 8px;
    }

    .salma-face .face-blush.left { left: 10px; }
    .salma-face .face-blush.right { right: 10px; }
}

/* Ensure all interactive elements have minimum touch target */
.ttt-btn,
.chat-reaction-btn,
.media-queue-remove,
.role-card,
.game-pick-card,
.session-status-btn,
.chat-send-btn {
    min-height: 44px;
}

/* ========================================
   CUSTOM NAME INPUT IN ROLE CARD
   ======================================== */
.role-card-custom {
    cursor: pointer;
}

.custom-name-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--secondary-rgb),0.3);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: center;
    outline: none;
    width: 100%;
    max-width: 160px;
}

.custom-name-input:focus {
    border-color: var(--primary);
}

.custom-name-input::placeholder {
    /* Phase 8.5 contrast */
    color: var(--text-placeholder);
    font-size: 0.85rem;
}

/* ========================================
   ABOUT TAB
   ======================================== */
/* Header Icon Buttons (mood, letter) */
.header-icon-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: transform 0.2s, filter 0.2s;
    filter: grayscale(0.3);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-icon-btn:hover {
    transform: scale(1.2);
    filter: grayscale(0);
}

.letter-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
}

.letter-mood-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.67em;
    line-height: 1;
    pointer-events: none;
}

/* About Overlay */
.about-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

.about-overlay.hidden {
    display: none;
}

.about-overlay-content {
    position: relative;
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.about-close-btn {
    position: fixed;
    top: 16px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1501;
    transition: background 0.2s;
}

.about-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.about-container {
    max-width: 650px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

/* Parchment / Tea-Stained Paper */
.about-letter.parchment {
    width: 100%;
    position: relative;
    background: #f4e4c1;
    background-image:
        linear-gradient(to bottom, rgba(139, 90, 43, 0.06) 1px, transparent 1px);
    background-size: 100% 2em;
    border: none;
    border-radius: 2px;
    padding: clamp(16px, 4vh, 45px) clamp(16px, 3vw, 40px) clamp(10px, 2vh, 20px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 40px rgba(139, 90, 43, 0.15),
        inset 0 0 80px rgba(139, 90, 43, 0.08);
    overflow: hidden;
    transform: rotate(-0.5deg);
}

/* Rough torn edges */
.about-letter.parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0.6em, #f4e4c1 0.6em),
        linear-gradient(225deg, transparent 0.6em, #f4e4c1 0.6em),
        linear-gradient(315deg, transparent 0.6em, #f4e4c1 0.6em),
        linear-gradient(45deg, transparent 0.6em, #f4e4c1 0.6em);
    pointer-events: none;
    font-size: unset;
    padding: 0;
    top: 0;
    left: 0;
    transform: none;
}

/* Burn / dark edges */
.about-letter.parchment::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    box-shadow:
        inset 0 0 60px rgba(101, 60, 20, 0.25),
        inset 0 0 120px rgba(80, 40, 10, 0.1);
    pointer-events: none;
}

/* Coffee / tea stain spots */
.parchment-stain {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.parchment-stain.stain-1 {
    width: 120px;
    height: 110px;
    top: 15%;
    right: 8%;
    background: radial-gradient(ellipse, rgba(139, 90, 43, 0.12) 0%, rgba(139, 90, 43, 0.06) 40%, transparent 70%);
    transform: rotate(15deg);
}

.parchment-stain.stain-2 {
    width: 90px;
    height: 85px;
    bottom: 20%;
    left: 5%;
    background: radial-gradient(ellipse, rgba(120, 70, 30, 0.1) 0%, rgba(120, 70, 30, 0.04) 50%, transparent 70%);
    transform: rotate(-25deg);
}

.parchment-stain.stain-3 {
    width: 70px;
    height: 70px;
    top: 60%;
    right: 20%;
    background: radial-gradient(circle, rgba(101, 60, 20, 0.08) 0%, transparent 60%);
    border: 2px solid rgba(139, 90, 43, 0.06);
}

.about-letter-title {
    text-align: center;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: clamp(0.9rem, 2.5vh, 1.8rem);
    font-weight: 400;
    color: #000000;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    margin-bottom: clamp(0.3em, 1.2vh, 1.2em);
    position: relative;
    z-index: 2;
}

.about-letter-body {
    font-family: 'Special Elite', 'Courier New', monospace;
    color: #000000;
    font-size: clamp(0.7rem, 1.7vh, 1.1rem);
    line-height: clamp(1.4em, 2.5vh, 2.2em);
    white-space: pre-wrap;
    position: relative;
    z-index: 2;
    flex: 1;
}

.about-letter-body p {
    margin-bottom: clamp(0.3em, 1vh, 0.8em);
}

/* ========================================
   MOBILE FIXES — books, header, file names, admin cards
   ======================================== */

/* Book cards: smaller on mobile */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .books-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
        gap: var(--spacing-sm);
    }
    .book-card .video-desc {
        display: none;
    }
    .book-card .video-info {
        padding: 8px 10px;
    }
    .book-card .video-info h3 {
        font-size: 1rem;
    }
    .book-thumbnail {
        height: 430px;
    }
    .book-card .video-meta span {
        font-size: 0.65rem;
    }
}

/* Header: uniform size/alignment for all buttons (lock, connect, mood, letter) */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .logout-btn,
    .header-icon-btn {
        height: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 1rem;
        padding: 0 6px;
    }
    .session-status-btn {
        height: 32px;
        min-height: 32px;
        display: grid;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 0.7rem;
        gap: 4px;
    }
    .header-left,
    .header-right {
        align-items: center;
        gap: 3px;
    }
}

.parchment-signature {
    font-family: 'Special Elite', 'Courier New', monospace;
    text-align: right;
    color: #000000;
    font-size: clamp(0.8rem, 1.5vh, 1.15rem);
    font-weight: 400;
    margin-top: clamp(0.5em, 1vh, 1.5em);
    font-style: italic;
    position: relative;
    z-index: 2;
}

.letter-footer-images {
    display: flex;
    justify-content: flex-end;
    padding: clamp(2px, 0.5vh, 16px) 0 clamp(2px, 0.5vh, 10px);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.letter-amlas-sig {
    width: clamp(80px, 20vw, 180px);
    height: auto;
}

/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .letter-amlas-sig {
        width: clamp(75px, 28vw, 130px);
    }
}

/* (duplicate letter flip styles removed — defined above) */

/* Mobile Viewport Height Fix for Modals.
   Phase 7.7: !important stripped — components.css loads AFTER gallery.css
   per index.html, and these media-query rules have equal-or-higher
   specificity than the base rules they override. Source order already
   wins. */
@media (max-width: 768px) {
    .video-modal,
    .book-reader-modal,
    .modal-overlay,
    .session-overlay,
    #video-modal,
    #book-modal,
    #sfx-modal {
        height: 100dvh;
        max-height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Detail/show modals: slide up from bottom, content scrolls within */
    .detail-modal,
    .show-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    .detail-modal-content,
    .show-modal-content {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    }

    .session-overlay-content {
        max-height: 90dvh;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   Profile modal — compaction (both phone + a universal height trim)
   --------------------------------------------------------------------------
   Two tiers:
   1. Universal height trim — applies to ALL screen sizes. Reduces the
      cumulative vertical space the modal eats by tightening section-to-
      section gaps, collapsible toggle padding, margin-tops on dividers,
      and the avatar cluster. The modal was starting to scroll on
      shorter-height laptops; this gets it back under a single screen.
   2. Phone compaction (≤600px) — an additional ~10-15% shrink on top of
      (1) for smaller widths. Avatar 72→58px, swatches 54→44px, tighter
      body padding, smaller text.

   All rules use `#profile-modal` scoping + `!important` where necessary to
   win against the inline styles in the innerHTML template set in
   game-session.js `openProfileModal`.
   ========================================================================== */

/* -------- Universal height trim (all screens) -------- */
#profile-modal-body {
    /* Base readability unchanged; the savings come from tighter inter-
       section margins on the children, declared below. */
}
/* Avatar cluster — shrink top/bottom margins a touch */
#profile-modal-body > div:first-child {
    margin-bottom: 10px !important;
}
/* Visible Online + Quick Links bottom-margins — was 14px, now 10px */
#profile-modal-body > div[style*="Visible Online"],
#profile-modal-body #prof-quick-links {
    margin-bottom: 10px !important;
}
/* Every `border-top:1px solid` divider section uses margin-top:10px and
   padding-top:10px — shrink each by 2px. Specifically targets the
   Theme / Password / Data & Privacy collapsibles. */
#profile-modal-body > div[style*="border-top:1px solid rgba(255,255,255,0.06)"] {
    margin-top: 8px !important;
    padding-top: 8px !important;
}
/* Section toggle rows — drop the vertical padding from 6/4px to 3px */
#prof-theme-toggle, #prof-pw-toggle, #prof-data-toggle {
    padding: 3px 0 !important;
}
/* Admin + Logout top-margins — the Admin button's margin-top:14px +
   Logout's margin-top:8px together add 22px of vertical space. Trim both. */
#prof-admin-btn { margin-top: 10px !important; }
#prof-logout-btn { margin-top: 6px !important; }

/* -------- Phone-specific compaction (≤600px) -------- */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    /* Modal card: slightly narrower + less padding around the header */
    #profile-modal .room-modal-content {
        max-width: 340px !important;
        width: calc(100% - 32px);
    }
    #profile-modal .room-modal-header {
        padding: 10px 14px;
    }
    #profile-modal .room-modal-title {
        font-size: 0.95rem;
    }
    /* The base .room-modal-close sets `min-width: 44px; min-height: 44px`
       for tap-target compliance, but on phones inside the profile modal
       we intentionally want a smaller, unobtrusive X. Override both the
       min-* values AND width/height, all with !important, to actually
       shrink it. 28×28 keeps it tappable without dominating the header. */
    #profile-modal .room-modal-close {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 0.9rem !important;
    }

    /* Body container — tighter padding so content breathes less */
    #profile-modal-body {
        padding: 10px 12px 12px !important;
        font-size: 0.92rem;
    }

    /* Avatar 72 → 58 — still clearly an avatar at this size */
    #prof-avatar-img {
        width: 58px !important;
        height: 58px !important;
    }

    /* Row card paddings (Visible Online, Google, AI, Download App) */
    #profile-modal-body > div[style*="border-radius:12px"],
    #profile-modal-body div[style*="border-radius:10px"] {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    /* Theme swatches: 54 → 44 (phones don't need 54px swatches) */
    #profile-modal .sfx-theme-swatch {
        height: 44px !important;
    }

    /* Diary palette chips — single-line, even tighter on phone */
    #profile-modal .sfx-diary-palette-opt {
        padding: 5px 9px !important;
        font-size: 0.7rem !important;
    }

    /* Password inputs — slightly tighter */
    #prof-pw-body input {
        padding: 6px 11px !important;
        font-size: 0.78rem !important;
    }

    /* Admin + Logout — less vertical padding, smaller font */
    #prof-admin-btn,
    #prof-logout-btn {
        padding: 9px !important;
        font-size: 0.78rem !important;
    }
    #prof-admin-btn { margin-top: 9px !important; }
    #prof-logout-btn { margin-top: 5px !important; }

    /* Quick Links buttons (Download App) */
    #prof-quick-links button[data-qlink] {
        padding: 7px 10px !important;
    }
    #prof-quick-links {
        margin-bottom: 8px !important;
    }
}

} /* end @layer components */