/* ============================================================
   MSN / YAHOO MESSENGER — COMPLETE RETRO UI  (v3, final polish)
   ============================================================

   Changes from v2:
   - FIX: auth pages (login/signup) now truly fill the screen —
     html now shares the same background as .auth-body, so iOS/
     Android overscroll "bounce" never reveals a mismatched
     color/seam at the bottom of the window.
   - FIX: avatar picker on the signup form no longer collides
     with the primary button — proper spacing + row-gap added,
     and the "selected" scale-up no longer visually laps into
     the button below.
   - POLISH: consistent, slightly springier transitions across
     buttons/icons/contacts, corrected scrollbar corner, softer
     card hover state, better disabled/focus handling, small
     accessibility touch-ups. All class names unchanged — this
     is a drop-in replacement.

   ============================================================ */


/* ============================================================
   GLOBAL
   ============================================================ */

* {
    box-sizing: border-box;
}

:root {
    --blue-dark: #06458f;
    --blue-deep: #003b7a;
    --blue: #1670c5;
    --blue-mid: #438fd3;
    --blue-light: #86b9e9;
    --blue-pale: #e7f1fb;
    --blue-hover: #d8ebfb;

    --purple: #632b91;
    --purple-dark: #45206b;

    --green: #008000;
    --yellow: #d69b00;
    --red: #c92323;
    --gray-status: #7c8794;

    --text: #193957;
    --text-dark: #12345a;
    --text-muted: #71829a;

    --border-dark: #6d91b5;
    --border: #9db7d0;
    --border-light: #d4e0ec;

    --panel: #edf4fb;
    --white: #ffffff;

    /* window control colors, MSN-era style */
    --btn-min: #f4c542;
    --btn-min-dark: #b98a00;
    --btn-max: #4caf6d;
    --btn-max-dark: #1c7a3e;
    --btn-close: #e8564c;
    --btn-close-dark: #a5241c;

    --shadow:
        0 2px 8px rgba(0, 35, 80, .25);

    --bevel:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.14),
        0 1px 2px rgba(0,0,0,.16);

    --glass-sheen:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.10) 45%,
            rgba(255,255,255,0) 46%,
            rgba(255,255,255,.05) 100%
        );

    /* shared easing so hover/press feel consistent app-wide */
    --ease-snap: cubic-bezier(.22, .61, .36, 1);
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;

    font-size: 16px;
    font-family:
        Tahoma,
        Geneva,
        Verdana,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            ellipse at 20% -10%,
            #ffffff 0%,
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #c8dcf3 0%,
            #edf5fd 48%,
            #b9d0ea 100%
        );
}

body {
    overflow: hidden;
}

a {
    color: #0759a5;
    text-decoration: none;
}

a:hover {
    color: #003d79;
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.15);
}


/* ============================================================
   COMMON CLASSIC GRADIENT
   ============================================================ */

.classic-gradient {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #edf6fd 28%,
            #c9def1 70%,
            #a9c8e5 100%
        );
}


/* ============================================================
   APP BODY
   ============================================================ */

.app-body {
    width: 100%;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
}


/* ============================================================
   APP SHELL
   ============================================================ */

.app-shell {
    display: flex;

    width: 100%;
    max-width: 1360px;

    height: 100vh;
    height: 100dvh;

    margin: 0 auto;

    background: #edf4fa;

    border-left: 1px solid #7395b6;
    border-right: 1px solid #7395b6;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.75),
        0 10px 30px rgba(0,30,75,.22),
        0 0 60px rgba(20,80,160,.10);
}


/* ============================================================
   COMPACT MSN TITLE BAR
   ============================================================ */

.title-bar {
    position: relative;

    display: flex;
    align-items: center;

    gap: 6px;

    height: 31px;
    min-height: 27px;

    padding: 4px 7px;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbff 20%,
            #d9eafa 58%,
            #b7d1e9 100%
        );

    border-top: 1px solid #a9d3f6;
    border-bottom: 1px solid #043b78;

    text-shadow:
        0 1px 1px rgba(0,0,0,.55);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30);

    overflow: hidden;
}

.title-bar::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--glass-sheen);

    pointer-events: none;
}

.title-bar-icon {
    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    z-index: 1;
}

.title-bar-icon svg {
    width: 16px;
    height: 16px;
}

.title-bar-text {
    flex: 1;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
    color: #183b62;

    z-index: 1;
}

.title-bar-text small {
    margin-left: 4px;

    font-size: 10px;
    font-weight: 400;

    opacity: .85;
}


/* ============================================================
   WINDOW CONTROLS (min / max / close) — reusable on any bar
   ============================================================ */

.win-controls {
    display: flex;
    gap: 3px;

    z-index: 1;
}

.win-btn {
    width: 19px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #4a3400;

    font-size: 9px;
    line-height: 1;
    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #fff6cf 0%,
            var(--btn-min) 55%,
            var(--btn-min-dark) 100%
        );

    border: 1px solid var(--btn-min-dark);
    border-radius: 2px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 1px 1px rgba(0,0,0,.20);

    transition: filter .1s var(--ease-snap), transform .08s var(--ease-snap);
}

.win-btn.win-max {
    color: #093c1e;
    background:
        linear-gradient(
            180deg,
            #d3ffe4 0%,
            var(--btn-max) 55%,
            var(--btn-max-dark) 100%
        );
    border-color: var(--btn-max-dark);
}

.win-btn.win-close {
    color: #4b0c08;
    background:
        linear-gradient(
            180deg,
            #ffd9d5 0%,
            var(--btn-close) 55%,
            var(--btn-close-dark) 100%
        );
    border-color: var(--btn-close-dark);
}

.win-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-0.5px);
}

.win-btn:active {
    transform: translateY(0.5px);
    filter: brightness(.92);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}


/* ============================================================
   CONTACT PANEL
   ============================================================ */

.contact-panel {
    width: 300px;
    min-width: 300px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #f9fbfe 0%,
            #e7eff7 100%
        );

    border-right: 1px solid #7899b9;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.9);
}


/* ============================================================
   MY PROFILE
   ============================================================ */

.me-card {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 8px 9px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f0f6fc 45%,
            #d9e8f6 100%
        );

    border-bottom: 1px solid #9bb5ce;

    box-shadow:
        inset 0 1px 0 #fff;
}

.me-avatar {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 17px;

    border: 1px solid #6e91b5;
    border-radius: 3px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #d6e6f5
        );

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.18),
        0 0 0 2px rgba(30,170,50,.35),
        0 0 8px rgba(30,170,50,.35);
}

.me-info {
    flex: 1;
    min-width: 0;
}

.me-name-row {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-bottom: 2px;
}

.me-name {
    font-size: 12px;
    font-weight: 700;

    color: #173b63;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   STATUS SELECT
   ============================================================ */

.status-select {
    max-width: 100px;

    padding: 2px 4px;

    color: #154c80;

    font-family: Tahoma, sans-serif;
    font-size: 10px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e5eef7
        );

    border: 1px solid #7899ba;
    border-radius: 2px;

    outline: none;

    box-shadow: var(--bevel);
}


/* ============================================================
   STATUS MESSAGE
   ============================================================ */

.status-input {
    width: 100%;

    padding: 2px 3px;

    color: #718199;

    font-family: Tahoma, sans-serif;
    font-size: 10px;
    font-style: italic;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 2px;

    transition: background .12s ease, border-color .12s ease;
}

.status-input:hover {
    background: #eaf3fc;
    border-color: #b9cee3;
}

.status-input:focus {
    outline: none;

    color: #304b69;

    background: #fff;

    border-color: #6f98be;

    font-style: normal;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.12);
}


/* ============================================================
   ICON BUTTON
   ============================================================ */

.icon-btn {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3px;

    color: #154a7e;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f0f7fd 25%,
            #d2e3f1 100%
        );

    border: 1px solid #7c9dbd;
    border-radius: 3px;

    box-shadow: var(--bevel);

    transition: transform .08s var(--ease-snap), background .12s ease, border-color .12s ease;
}

.icon-btn svg {
    width: 15px;
    height: 15px;
}

.icon-btn:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dceefa
        );

    border-color: #4f7eaa;
}

.icon-btn:active {
    background:
        linear-gradient(
            180deg,
            #b9cee1,
            #e3eef8
        );

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.22);

    transform: scale(.94);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.me-menu {
    position: relative;
}

.dropdown {
    display: none;

    position: absolute;

    top: 29px;
    right: 0;

    min-width: 190px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #6c8eae;
    border-radius: 3px;

    box-shadow:
        2px 4px 12px rgba(0,0,0,.28);

    z-index: 50;
}

.dropdown.open {
    display: block;

    animation: dropdownIn .12s ease-out;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown a {
    display: block;

    padding: 7px 10px;

    color: #173b60;

    font-size: 11px;

    border-bottom: 1px solid #edf2f7;

    transition: background .1s ease, color .1s ease;
}

.dropdown a:last-child {
    border-bottom: none;
}

.dropdown a:hover {
    color: #063e78;

    text-decoration: none;

    background:
        linear-gradient(
            180deg,
            #eaf5ff,
            #cde5f9
        );
}


/* ============================================================
   CLASSIC BUTTON
   ============================================================ */

.btn-small {
    display: inline-block;

    padding: 5px 12px;

    color: #16456f;

    font-size: 11px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfe 18%,
            #dceaf6 58%,
            #bfd5e8 100%
        );

    border: 1px solid #6d91b4;
    border-radius: 3px;

    box-shadow: var(--bevel);

    text-shadow:
        0 1px 0 #fff;

    transition: background .12s ease, border-color .12s ease, transform .06s var(--ease-snap);
}

.btn-small:hover {
    color: #063b70;

    text-decoration: none;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e3f2ff
        );

    border-color: #4778a6;
}

.btn-small:active {
    background:
        linear-gradient(
            180deg,
            #b8cde1,
            #e2edf7
        );

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.22);

    transform: scale(.98);
}

.panel-actions {
    padding: 7px 9px 2px;
}

.panel-actions .btn-small {
    margin-bottom: 6px;
}


/* ============================================================
   SEARCH
   ============================================================ */

.contact-search-row {
    padding: 7px 9px 5px;

    background:
        linear-gradient(
            180deg,
            #eef5fc,
            #dce8f4
        );

    border-bottom: 1px solid #aec4da;
}

.contact-search-row input {
    width: auto;

    padding: 6px 9px;

    color: #244566;

    font-family: Tahoma, sans-serif;
    font-size: 12px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f2f7fb
        );

    border: 1px solid #7798b8;
    border-radius: 2px;

    outline: none;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.10);

    transition: border-color .12s ease;
}

.contact-search-row input:focus {
    border-color: #3e75a8;
    background: #fff;
}


/* ============================================================
   CONTACT CATEGORY
   ============================================================ */

.category-header {
    display: flex;
    align-items: center;

    gap: 5px;

    padding: 6px 10px 4px;

    color: #2d5d8e;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .4px;

    background:
        linear-gradient(
            180deg,
            #fbfdff,
            #e1ebf5
        );

    border-top: 1px solid #fff;
    border-bottom: 1px solid #b1c6dc;

    text-shadow:
        0 1px 0 #fff;

    cursor: default;
}

.category-header::before {
    content: "";

    width: 0;
    height: 0;

    border-left: 4px solid #4a76a8;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;

    transition: transform .12s ease;
}

.category-header.collapsed::before {
    transform: rotate(0deg);
}

.category-header:not(.collapsed)::before {
    transform: rotate(90deg);
}

.contact-group {
    list-style: none;

    margin: 0;
    padding: 3px 5px;
}

.contact-group.collapsed {
    display: none;
}


/* ============================================================
   CONTACT ITEM
   ============================================================ */

.contact-item {
    border-left: 3px solid transparent;

    border-radius: 2px;

    transition: background .12s ease, border-color .12s ease;
}

.contact-item:hover {
    background:
        linear-gradient(
            90deg,
            #e4f2ff,
            #d5eafb,
            #eaf5fd
        );

    border-left-color: #79a9d5;
}

.contact-item.active {
    background:
        linear-gradient(
            90deg,
            #c7e2f9,
            #e5f3ff 55%,
            #cfe7fa
        );

    border-left-color: #1264a9;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
}

.contact-link {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 6px 5px;
}

.contact-link:hover {
    text-decoration: none;
}


/* ============================================================
   AVATAR
   ============================================================ */

.avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 16px;

    border: 1px solid #7899b9;
    border-radius: 3px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #d8e8f6
        );

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.17);
}

.contact-item:has(.dot-online) .avatar {
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.17),
        0 0 0 2px rgba(30,170,50,.30);
}


/* ============================================================
   CONTACT TEXT
   ============================================================ */

.contact-text {
    flex: 1;
    min-width: 0;
}

.contact-name-row {
    display: flex;
    align-items: baseline;

    gap: 5px;

    flex-wrap: wrap;
}

.contact-name {
    color: #183b62;

    font-size: 12px;
    font-weight: 700;
}

.contact-presence-label {
    font-size: 9px;
    font-weight: 700;
}

.contact-sub {
    display: block;

    margin-top: 1px;

    color: #74859b;

    font-size: 10px;
    font-style: italic;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   PRESENCE
   ============================================================ */

.presence-online {
    color: #008000;
}

.presence-away {
    color: #ae7900;
}

.presence-busy {
    color: #c52222;
}

.presence-offline {
    color: #7d8792;
}


/* ============================================================
   STATUS DOT
   ============================================================ */

.dot {
    width: 9px;
    height: 9px;

    display: inline-block;

    flex-shrink: 0;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,.28);

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.7),
        0 1px 1px rgba(0,0,0,.15);
}

.dot-online {
    background:
        radial-gradient(
            circle at 35% 30%,
            #82ef82,
            #1eaa32 45%,
            #007a14 100%
        );

    animation: onlinePulse 2.6s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% {
        box-shadow:
            inset 1px 1px 1px rgba(255,255,255,.7),
            0 1px 1px rgba(0,0,0,.15),
            0 0 0 0 rgba(30,170,50,.45);
    }
    50% {
        box-shadow:
            inset 1px 1px 1px rgba(255,255,255,.7),
            0 1px 1px rgba(0,0,0,.15),
            0 0 0 3px rgba(30,170,50,0);
    }
}

.dot-away {
    background:
        radial-gradient(
            circle at 35% 30%,
            #fff08c,
            #e3ad00 50%,
            #a16d00
        );
}

.dot-busy {
    background:
        radial-gradient(
            circle at 35% 30%,
            #ff8c87,
            #d52e28 50%,
            #971611
        );
}

.dot-offline {
    background:
        radial-gradient(
            circle at 35% 30%,
            #e0e4e9,
            #9da7b3 55%,
            #707984
        );
}


/* ============================================================
   UNREAD BADGE
   ============================================================ */

.unread-badge {
    min-width: 17px;

    padding: 2px 5px;

    color: #fff;

    font-size: 9px;
    font-weight: 700;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #f05c56,
            #b51e19
        );

    border: 1px solid #8f1511;
    border-radius: 8px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35);

    animation: badgePop .18s ease-out;
}

@keyframes badgePop {
    from {
        transform: scale(.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ============================================================
   CONTACT SCROLL
   ============================================================ */

.contact-list {
    flex: 1;

    overflow-y: auto;

    padding-bottom: 8px;
}


/* ============================================================
   CHAT PANEL
   ============================================================ */

.chat-panel {
    flex: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        linear-gradient(
            180deg,
            #f6fafd,
            #e6eef7
        );
}


/* ============================================================
   COMPACT CHAT TITLE BAR
   ============================================================ */

.chat-title-bar {
    position: relative;

    min-height: 31px;
    height: 31px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 4px 7px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbff 20%,
            #d9eafa 58%,
            #b7d1e9 100%
        );

    border-top: 1px solid #acd5f6;
    border-bottom: 1px solid #043b78;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30);

    text-shadow:
        0 1px 1px rgba(0,0,0,.55);

    overflow: hidden;
}

.chat-title-bar::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--glass-sheen);

    pointer-events: none;
}

.chat-title-bar > * {
    position: relative;
    z-index: 1;
}

.chat-title-bar small {
    font-size: 9px;
    font-weight: 400;
    opacity: .85;
}

.chat-header-avatar {
    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 12px;

    border: 1px solid rgba(255,255,255,.65);
    border-radius: 3px;

    background: rgba(255,255,255,.18);
}

.chat-title-bar #chatHeaderDot {
    flex-shrink: 0;
}

/* flash when a new message lands while unfocused */
.chat-title-bar.flash {
    animation: titleFlash 1s steps(2, jump-none) infinite;
}

@keyframes titleFlash {
    50% {
        background:
            linear-gradient(
                180deg,
                #fff6cf 0%,
                #ffe28c 40%,
                #f2b93f 100%
            );
    }
}


/* ============================================================
   MOBILE BACK BUTTON
   ============================================================ */

.back-btn {
    display: none;
}

.back-btn.icon-btn {
    color: #073c70;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.08)
        );

    border-color: #073c70;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);
}


/* ============================================================
   NO CHAT
   ============================================================ */

.no-chat-selected {
    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 25px;

    color: #6f8096;

    text-align: center;

    background:
        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            #edf5fc 55%,
            #dce8f4 100%
        );
}

.no-chat-selected .big-icon {
    display: flex;
    justify-content: center;

    margin-bottom: 12px;

    font-size: 46px;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

.no-chat-selected p {
    max-width: 380px;

    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo-big {
    margin-bottom: 7px;

    text-align: center;
}

.logo-big svg {
    filter:
        drop-shadow(0 2px 4px rgba(0,45,100,.28));
}

.logo-emoji {
    display: inline-block;

    font-size: 50px;

    filter:
        drop-shadow(0 2px 4px rgba(0,45,100,.28));
}


/* ============================================================
   MESSAGES
   ============================================================ */

.messages {
    flex: 1;

    overflow-y: auto;

    padding: 12px 14px;

    display: flex;
    flex-direction: column;

    gap: 6px;

    background:
        linear-gradient(
            180deg,
            #fafdff 0%,
            #f0f6fb 48%,
            #e6eef7 100%
        );
}

.loading-msg {
    margin-top: 18px;

    color: #78899e;

    font-size: 11px;

    text-align: center;
}


/* ============================================================
   MESSAGE ROW
   ============================================================ */

.msg-row {
    display: flex;

    animation: msgIn .14s ease-out;
}

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

.msg-row.mine {
    justify-content: flex-end;
}

.msg-row.theirs {
    justify-content: flex-start;
}


/* ============================================================
   RETRO MESSAGE BUBBLES
   ============================================================ */

.msg-bubble {
    max-width: 62%;

    padding: 5px 9px;

    color: #24405f;

    font-size: 12px;
    line-height: 1.45;

    word-wrap: break-word;

    border: 1px solid #9cb4cb;
    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 2px rgba(0,0,0,.10);
}

.msg-row.mine .msg-bubble {
    background:
        linear-gradient(
            180deg,
            #e5f3ff 0%,
            #c9e2f7 100%
        );

    border-color: #82a9cb;
}

.msg-row.theirs .msg-bubble {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9eef4 100%
        );

    border-color: #b5c4d2;
}

.msg-time {
    display: block;

    margin-top: 2px;

    color: #7f90a4;

    font-size: 8px;

    text-align: right;
}

.emoticon {
    color: #075fae;

    font-family: "Courier New", monospace;
    font-weight: 700;
}


/* ============================================================
   TYPING INDICATOR
   ============================================================ */

.typing-bubble {
    display: flex;
    align-items: center;

    gap: 3px;

    padding: 6px 9px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e7edf4
        );

    border: 1px solid #b7c6d6;
    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.10);
}

.typing-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #74879e;

    animation:
        typingBounce 1.1s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: .15s;
}

.typing-dot:nth-child(3) {
    animation-delay: .3s;
}

@keyframes typingBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}


/* ============================================================
   NUDGE — utility class to toss on .app-shell or .chat-panel
   ============================================================ */

.nudge-shake {
    animation: nudgeShake .45s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes nudgeShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}


/* ============================================================
   EMOTICON BAR
   ============================================================ */

.emoticon-bar {
    display: flex;

    gap: 3px;

    padding: 4px 6px;

    overflow-x: auto;

    background:
        linear-gradient(
            180deg,
            #f8fbfe,
            #dce8f4
        );

    border-top: 1px solid #a8bfd6;
    border-bottom: 1px solid #829ebc;

    flex-shrink: 0;
}

.emo-btn {
    flex-shrink: 0;

    padding: 3px 7px;

    color: #174c7e;

    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #edf5fc 45%,
            #cbdfee 100%
        );

    border: 1px solid #83a4c2;
    border-radius: 3px;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.12);

    transition: background .1s ease, border-color .1s ease, transform .06s var(--ease-snap);
}

.emo-btn:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dcefff
        );

    border-color: #5483ae;
}

.emo-btn:active {
    background:
        linear-gradient(
            180deg,
            #bdcfe1,
            #e1edf7
        );

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.22);

    transform: scale(.94);
}


/* ============================================================
   MESSAGE INPUT
   ============================================================ */

.message-form {
    display: flex;

    gap: 5px;

    padding: 6px;

    background:
        linear-gradient(
            180deg,
            #eef5fb,
            #d3e1ee
        );

    border-top: 1px solid #92adc8;

    flex-shrink: 0;

    box-shadow:
        inset 0 1px 0 #fff;
}

.message-form input[type="text"] {
    flex: 1;

    min-width: 0;

    padding: 7px 9px;

    color: #203f60;

    font-family: Tahoma, sans-serif;
    font-size: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f8fc
        );

    border: 1px solid #7798b9;
    border-radius: 3px;

    outline: none;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.12);

    transition: border-color .12s ease;
}

.message-form input[type="text"]:focus {
    background: #fff;

    border-color: #3d73a5;
}


/* ============================================================
   SEND BUTTON
   ============================================================ */

.btn-send {
    min-width: 70px;

    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    color: #073c70;

    font-size: 11px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbff 20%,
            #d9eafa 58%,
            #b7d1e9 100%
        );

    border: 1px solid #5d87af;
    border-radius: 3px;

    box-shadow: var(--bevel);

    text-shadow:
        0 1px 0 #fff;

    transition: transform .06s var(--ease-snap), background .12s ease, border-color .12s ease;
}

.btn-send:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e2f2ff
        );

    border-color: #3c70a0;
}

.btn-send:active {
    background:
        linear-gradient(
            180deg,
            #b7cce0,
            #dceaf7
        );

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.24);

    transform: scale(.96);
}

.btn-send svg {
    width: 14px;
    height: 14px;
}


/* ============================================================
   ============================================================
   AUTH — LOGIN / SIGNUP
   ============================================================
   ============================================================ */

/*
   FIX (full-bleed background): on iOS/Android, elastic overscroll
   at the top/bottom of the page reveals whatever is behind <body>,
   which is <html>. Previously <html> kept the app's default blue
   gradient while <body class="auth-body"> painted a different
   radial gradient, so bounce scrolling exposed a mismatched strip
   of color that read as "the page isn't full height." Matching
   html's background to the auth gradient whenever an auth page is
   showing removes that seam completely, and the explicit height:
   100% chain removes any leftover gap on browsers that don't
   support dvh.
*/
html:has(.auth-body) {
    background:
        radial-gradient(
            ellipse at top,
            #e5f2ff 0%,
            #b7d3ef 43%,
            #7ea9d5 100%
        );
}

.auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px 12px;

    box-sizing: border-box;

    background:
        radial-gradient(
            ellipse at top,
            #e5f2ff 0%,
            #b7d3ef 43%,
            #7ea9d5 100%
        );
}


/* ============================================================
   AUTH WINDOW
   ============================================================ */

.msn-window {
    --title-1: #7bb7ed;
    --title-2: #428bd2;
    --title-3: #08458f;

    width: 100%;
    max-width: 360px;

    overflow: hidden;

    background: #edf5fc;

    border: 1px solid #6285a8;
    border-radius: 5px;

    box-shadow:
        0 8px 26px rgba(0,35,80,.34),
        0 0 0 1px rgba(255,255,255,.55);
}

.msn-window.wide {
    max-width: 460px;
}


/* ============================================================
   AUTH WINDOW CHROME
   ============================================================ */

.msn-window .win-chrome {
    position: relative;

    height: 29px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 4px 5px 4px 7px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            var(--title-1) 0%,
            var(--title-2) 42%,
            var(--title-3) 100%
        );

    border-bottom: 1px solid #043a77;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32);

    text-shadow:
        0 1px 1px rgba(0,0,0,.55);

    overflow: hidden;
}

.msn-window .win-chrome::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--glass-sheen);

    pointer-events: none;
}

.win-chrome-icon {
    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    z-index: 1;
}

.win-chrome-icon svg {
    width: 16px;
    height: 16px;
}

.win-chrome-title {
    flex: 1;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    z-index: 1;
}


/* ============================================================
   AUTH MENU BAR
   ============================================================ */

.win-menu {
    display: flex;

    gap: 13px;

    height: 25px;

    align-items: center;

    padding: 3px 10px;

    overflow-x: auto;

    white-space: nowrap;

    color: #364b65;

    font-size: 10px;

    background:
        linear-gradient(
            180deg,
            #f9fbfd,
            #e2ebf5
        );

    border-bottom: 1px solid #a9bfd5;
}

.win-menu span {
    padding: 2px 3px;

    cursor: default;
}

.win-menu span:hover {
    background: #cfe4f8;
    border-radius: 2px;
}


/* ============================================================
   AUTH BODY
   ============================================================ */

.win-body {
    position: relative;

    padding: 13px 18px 17px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5faff 42%,
            #dcebf9 100%
        );
}


/* ============================================================
   AUTH BRAND
   ============================================================ */

.msn-brand-row {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 5px;

    margin: 1px 0 10px;
}

.msn-brand-dot {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #ff9c4c,
            #df3f34 65%,
            #a82420 100%
        );

    box-shadow:
        0 1px 2px rgba(0,0,0,.25);
}

.msn-wordmark {
    color: #064891;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: .2px;

    text-shadow:
        0 1px 0 #fff;
}

.msn-wordmark-sub {
    color: #37618c;

    font-size: 13px;
    font-weight: 600;
    font-style: italic;
}


/* ============================================================
   AUTH LOGO
   ============================================================ */

.msn-logo-tile {
    width: 112px;
    height: 112px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 4px auto 15px;

    position: relative;
    z-index: 1;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e8f3fc
        );

    border: 1px solid #9bb8d5;
    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 0 0 2px #f5faff,
        0 4px 12px rgba(0,55,110,.20);
}

.msn-logo-tile svg {
    width: 78%;
    height: 78%;
}


/* ============================================================
   AUTH FORM
   ============================================================ */

.win-body form {
    position: relative;
    z-index: 1;
}

.field-label,
form label {
    display: block;

    margin: 10px 0 4px;

    color: #244c76;

    font-size: 11px;
    font-weight: 700;
}

.field-input-row {
    display: flex;
}

.field-input-row input {
    border-radius: 2px 0 0 2px;
}

.field-dropdown-btn {
    width: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #4e6e91;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dce9f5
        );

    border: 1px solid #799abd;
    border-left: none;

    border-radius: 0 2px 2px 0;

    box-shadow:
        inset 0 1px 0 #fff;
}

.field-dropdown-btn svg {
    width: 12px;
    height: 12px;
}


/* ============================================================
   AUTH INPUTS
   ============================================================ */

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"] {
    width: 100%;

    padding: 6px 8px;

    color: #203e60;

    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f8fc
        );

    border: 1px solid #7899b9;
    border-radius: 3px;

    outline: none;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.10);

    transition: border-color .12s ease, box-shadow .12s ease;
}

form input:focus {
    background: #fff;

    border-color: #3974a9;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.10),
        0 0 0 1px rgba(49,116,174,.18);
}


/* ============================================================
   AUTH STATUS
   ============================================================ */

.status-row {
    display: flex;
    align-items: center;

    gap: 7px;

    margin: 11px 0 3px;
}

.status-row .field-label {
    margin: 0;
}

.status-row select {
    padding: 3px 7px;

    color: #244d77;

    font-family: Tahoma, sans-serif;
    font-size: 11px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dfeaf5
        );

    border: 1px solid #7899b8;
    border-radius: 2px;
}


/* ============================================================
   CHECKBOXES
   ============================================================ */

.checkbox-group {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: 10px;
}

.checkbox-line {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 0;

    color: #38546f;

    font-size: 10.5px;
    font-weight: 400;
}

.checkbox-line input {
    width: 14px;
    height: 14px;

    margin: 0;
    flex-shrink: 0;

    accent-color: #1670c5;
}


/* ============================================================
   AUTH PRIMARY BUTTON
   ============================================================ */

.btn-primary {
    position: relative;
    z-index: 1;

    display: block;

    width: 150px;

    margin: 18px auto 3px;

    padding: 7px 10px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #7db8ed 0%,
            #428fd5 38%,
            #1768b9 70%,
            #075099 100%
        );

    border: 1px solid #06417e;
    border-radius: 3px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(0,0,0,.22),
        0 1px 2px rgba(0,0,0,.20);

    text-shadow:
        0 1px 1px rgba(0,0,0,.45);

    transition: transform .06s var(--ease-snap), background .12s ease;
}

.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #91c7f3,
            #559be0 40%,
            #1d70c1 75%,
            #07539c
        );
}

.btn-primary:active {
    background:
        linear-gradient(
            180deg,
            #185f9f,
            #5594cb
        );

    box-shadow:
        inset 1px 1px 3px rgba(0,0,0,.30);

    transform: scale(.98);
}


/* ============================================================
   AUTH SWITCH LINK
   ============================================================ */

.switch-link {
    position: relative;
    z-index: 1;

    margin-top: 11px;

    color: #536d87;

    font-size: 10.5px;

    text-align: center;
}

.switch-link a {
    color: #075eae;
    font-weight: 700;
}


/* ============================================================
   AUTH ALERTS
   ============================================================ */

.alert-box,
.info-box {
    position: relative;
    z-index: 1;

    padding: 8px 10px;

    margin-bottom: 8px;

    border-radius: 3px;

    font-size: 11px;
}

.alert-box {
    color: #8b2924;

    background:
        linear-gradient(
            180deg,
            #fff4f3,
            #f8dddd
        );

    border: 1px solid #dfaaa5;

    box-shadow:
        inset 0 1px 0 #fff;
}

.alert-box ul {
    margin: 0;
    padding-left: 16px;
}

.info-box {
    color: #256331;

    background:
        linear-gradient(
            180deg,
            #f1fff3,
            #d9f0dc
        );

    border: 1px solid #a8d2ad;

    box-shadow:
        inset 0 1px 0 #fff;
}


/* ============================================================
   AUTH FOOTER
   ============================================================ */

.win-footer {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 10px;

    margin-top: 14px;
    padding-top: 9px;

    color: #63758b;

    font-size: 9.5px;

    border-top: 1px solid #aec4da;
}

.win-footer .footer-col {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.win-footer a {
    color: #075baa;
}

.footer-brand {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #607188;

    font-size: 9px;
    font-weight: 700;
}

.footer-brand-badge {
    width: 13px;
    height: 13px;

    flex-shrink: 0;

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            #438fd4,
            #08458f
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45);
}


/* ============================================================
   AUTH WATERMARK
   ============================================================ */

.win-watermark {
    position: absolute;

    right: -16px;
    bottom: -15px;

    width: 115px;
    height: 115px;

    opacity: .22;

    pointer-events: none;
}

.win-watermark svg {
    width: 100%;
    height: 100%;
}


/* ============================================================
   AUTH AVATAR PICKER
   ============================================================ */

/*
   FIX (overlap with the signup button): the grid previously had
   only 2px of margin below it, and the "selected" avatar scales
   up by 15% with a transform, which doesn't reflow layout — so a
   selected option in the bottom row could visually sit on top of
   the primary button just beneath it. Room to breathe (bigger
   bottom margin + an explicit row-gap) fixes the collision, and
   the columns now wrap responsively instead of a hard-coded 15,
   so options never get so cramped that scaling causes overlap in
   the first place.
*/
.msn-window .avatar-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 5px;
    row-gap: 8px;

    margin: 8px 0 20px;

    position: relative;
    z-index: 1;

    overflow: visible;
}

.msn-window .avatar-option {
    width: 100%;
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    font-size: 13px;

    border: 1px solid transparent;
    border-radius: 3px;

    background: transparent !important;

    cursor: pointer;

    transition:
        transform .1s var(--ease-snap),
        box-shadow .1s ease,
        border-color .1s ease;
}

.msn-window .avatar-option:hover {
    border-color: #a9c6e4;
    background: #eef6fe !important;
}

.msn-window .avatar-option input {
    position: absolute;

    opacity: 0;

    width: 0;
    height: 0;
}

.msn-window .avatar-option:has(input:checked) {
    transform: scale(1.12);

    border-color: #2e67a0;

    background: #dcecff !important;

    box-shadow:
        0 0 0 1px #fff,
        0 0 0 2px #2e67a0;
}


/* ============================================================
   APP SCROLLBARS
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: #829fbd #e1eaf3;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: #e1eaf3;

    border-left: 1px solid #c0d1e2;
}

*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            90deg,
            #b0c6dc,
            #7c9dbc
        );

    border: 2px solid #e1eaf3;
    border-radius: 3px;

    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.6);
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            90deg,
            #9bb5ce,
            #668bad
        );
}

*::-webkit-scrollbar-corner {
    background: #e1eaf3;
}


/* ============================================================
   GENERIC STATUS PILLS
   ============================================================ */

.status-pill {
    display: inline-block;

    padding: 2px 6px;

    font-size: 9px;
    font-weight: 700;

    border: 1px solid transparent;
    border-radius: 3px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55);
}

.status-pending {
    color: #745700;

    background:
        linear-gradient(
            #fff5c9,
            #f2d777
        );

    border-color: #d1b344;
}

.status-printed {
    color: #174c87;

    background:
        linear-gradient(
            #e7f3ff,
            #b8d8f5
        );

    border-color: #81a9ce;
}

.status-shipped {
    color: #51317b;

    background:
        linear-gradient(
            #eee2fa,
            #d0b7e9
        );

    border-color: #a88ac1;
}

.status-fulfilled {
    color: #24632e;

    background:
        linear-gradient(
            #e8f9e9,
            #b9dfbf
        );

    border-color: #8eb995;
}

.status-cancelled {
    color: #8d2822;

    background:
        linear-gradient(
            #fff0ef,
            #efc1be
        );

    border-color: #d59a96;
}


/* ============================================================
   STAT BOXES
   ============================================================ */

.stat-row {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 9px;
}

.stat-box {
    flex: 1;
    min-width: 90px;

    padding: 9px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e4eef7
        );

    border: 1px solid #98b1ca;
    border-radius: 3px;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.12);

    transition: box-shadow .15s ease, transform .15s ease;
}

.stat-box strong {
    display: block;

    color: #14579a;

    font-size: 19px;
}

.stat-box span {
    color: #6a7d93;

    font-size: 9px;
}


/* ============================================================
   SCRATCH CARDS — foil texture + shimmer
   ============================================================ */

.card-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(200px, 1fr));

    gap: 10px;

    margin: 10px 0;
}

.scratch-card {
    position: relative;

    padding: 13px;

    color: #1c3655;

    text-align: center;

    background:
        repeating-linear-gradient(
            135deg,
            #c9d5e2 0px,
            #c9d5e2 3px,
            #b7c7d8 3px,
            #b7c7d8 6px
        ),
        linear-gradient(
            160deg,
            #d6e0ea 0%,
            #aabdd1 100%
        );

    border: 1px solid #7189a4;
    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 2px 5px rgba(0,35,80,.18);

    overflow: hidden;

    transition: box-shadow .18s ease, transform .18s ease;
}

.scratch-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 5px 14px rgba(0,35,80,.24);

    transform: translateY(-1px);
}

.scratch-card::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -20%;

    width: 60%;
    height: 220%;

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.55) 48%,
            rgba(255,255,255,0) 100%
        );

    transform: rotate(20deg);

    animation: cardShimmer 3.4s ease-in-out infinite;

    pointer-events: none;
}

@keyframes cardShimmer {
    0% { left: -40%; }
    55%, 100% { left: 120%; }
}

.scratch-card-brand {
    color: #064b91;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.scratch-card-label {
    margin: 4px 0 8px;

    color: #435d78;

    font-size: 10px;
}

.scratch-card-code {
    padding: 8px 5px;

    color: #073e77;

    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: 700;

    letter-spacing: 2px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #edf5fb
        );

    border: 1px dashed #6e96bc;
    border-radius: 3px;
}

.scratch-card-foot {
    margin-top: 7px;

    color: #596d84;

    font-size: 9px;
}


/* ============================================================
   HISTORY TABLE
   ============================================================ */

.history-table {
    width: 100%;

    margin-top: 7px;

    border-collapse: collapse;

    color: #284665;

    font-size: 11px;

    background: #fff;

    border: 1px solid #9bb4cc;
}

.history-table th,
.history-table td {
    padding: 6px;

    text-align: left;

    border-right: 1px solid #d4e0eb;
    border-bottom: 1px solid #d4e0eb;
}

.history-table th {
    color: #254e7b;

    font-size: 9px;

    text-transform: uppercase;

    background:
        linear-gradient(
            180deg,
            #fbfdff,
            #dce9f5
        );
}

.history-table tr:nth-child(even) td {
    background: #f4f8fc;
}

.history-table tr:hover td {
    background: #e6f2fd;
}

.mono {
    font-family: "Courier New", monospace;
    letter-spacing: 1px;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.section-heading {
    margin: 16px 0 8px;

    padding: 4px 6px;

    color: #174f85;

    font-size: 12px;
    font-weight: 700;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dceafa
        );

    border-top: 1px solid #fff;
    border-bottom: 1px solid #a7bed6;

    text-shadow:
        0 1px 0 #fff;
}


/* ============================================================
   YAHOO-STYLE ALT THEME
   apply data-theme="yahoo" on <body> or .app-shell to flip
   the whole chrome from MSN blue to Yahoo purple/violet
   ============================================================ */

[data-theme="yahoo"] {
    --title-1: #b98be0;
    --title-2: #8a4fc4;
    --title-3: #4a1f7a;
}

[data-theme="yahoo"] .title-bar,
[data-theme="yahoo"] .chat-title-bar {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6effd 20%,
            #ddc4f2 58%,
            #b285d9 100%
        );

    border-bottom-color: #3a1360;
}

[data-theme="yahoo"] .title-bar-text,
[data-theme="yahoo"] .win-chrome-title {
    color: #3a1a5c;
}

[data-theme="yahoo"] .btn-primary {
    background:
        linear-gradient(
            180deg,
            #cba3ec 0%,
            #9a5fd6 38%,
            #6f34ab 70%,
            #4a1f7a 100%
        );

    border-color: #3a1360;
}

[data-theme="yahoo"] .dot-online {
    background:
        radial-gradient(
            circle at 35% 30%,
            #d8f08c,
            #8fc11a 50%,
            #5c8500
        );
}

[data-theme="yahoo"] html:has(.auth-body) {
    background:
        radial-gradient(
            ellipse at top,
            #f5eafc 0%,
            #d3b7ea 43%,
            #a97ecf 100%
        );
}


/* ============================================================
   MOBILE — MSN WINDOW / APP
   ============================================================ */

@media (max-width: 760px) {

    .app-shell {
        max-width: 100%;

        border-left: none;
        border-right: none;

        box-shadow: none;
    }

    .contact-panel {
        width: 100%;
        min-width: 0;

        border-right: none;
    }

    .chat-panel {
        display: none;
    }

    .app-shell.chat-open .contact-panel {
        display: none;
    }

    .app-shell.chat-open .chat-panel {
        display: flex;

        width: 100%;
    }

    .back-btn {
        display: inline-flex;
    }

    .msg-bubble {
        max-width: 80%;
    }

    .chat-title-bar {
        height: 32px;
        min-height: 32px;
    }
}


/* ============================================================
   MOBILE AUTH
   ============================================================ */

@media (max-width: 480px) {

    .auth-body {
        align-items: flex-start;

        padding: 0;
    }

    .msn-window {
        width: 100%;
        max-width: 100%;

        min-height: 100vh;
        min-height: 100dvh;

        border-left: none;
        border-right: none;
        border-top: none;

        border-radius: 0;

        box-shadow: none;
    }

    .msn-window.wide {
        max-width: 100%;
    }

    .win-menu {
        display: none;
    }

    .win-body {
        padding:
            12px
            15px
            18px;
    }

    .msn-logo-tile {
        width: 96px;
        height: 96px;

        margin-bottom: 12px;
    }

    .btn-primary {
        width: 100%;

        padding: 10px;

        font-size: 13px;
    }

    .win-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 9px;
    }

    .win-watermark {
        width: 95px;
        height: 95px;
    }

    .msn-window .avatar-picker {
        grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));

        max-width: 100%;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .me-card {
        padding: 7px;
    }

    .me-avatar {
        width: 34px;
        height: 34px;
    }

    .avatar {
        width: 32px;
        height: 32px;
    }

    .messages {
        padding: 9px;
    }

    .msg-bubble {
        max-width: 88%;

        font-size: 12px;
    }

    .btn-send {
        min-width: 55px;

        padding: 0 9px;
    }

    .btn-send span {
        display: none;
    }
}


/* ============================================================
   TOUCH
   ============================================================ */

.messages,
.chat-panel,
.contact-list {
    touch-action: manipulation;
}

button,
a,
.contact-link,
.emo-btn {
    -webkit-tap-highlight-color: rgba(20,100,180,.12);
}


/* ============================================================
   FOCUS
   ============================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #15518a;
    outline-offset: 1px;
    border-radius: 2px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}