:root { 

    --gapz: calc( var(--gap) / 3 );
    --header-height: 80px;
    --avatar-pill-width: 180px;
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;

    margin-bottom: var(--padding);
    
    .input-group-text {
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 0.375rem 0 0 0.375rem;
        
        i {
            font-size: 1rem;
            color: #495057;
        }
    }

    .form-floating {
        position: relative;
        flex: 1 1 auto;
        width: 1%;

        .form-control {
            display: block;
            width: 100%;
            padding: 1rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #212529;
            background-color: var(--header-bg);
            border: 1px solid #ced4da;
            border-left: none;
            border-radius: unset;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

            &:focus {
                color: #212529;
                background-color: var(--header-bg);
                border-color: #86b7fe;
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
                z-index: 3;
            }

            &::placeholder {
                color: transparent;
            }

            &:focus ~ label,
            &:not(:placeholder-shown) ~ label {
                opacity: 0.65;
                transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
            }
        }

        input.form-control {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }

        select.form-select {
            padding-left: 11px;
        }

        textarea.form-control {
            min-height: calc(3.5rem + 2px);
            resize: vertical;
            margin: 0px;
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }

        label {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 1rem 0.75rem;
            pointer-events: none;
            border: 1px solid transparent;
            transform-origin: 0 0;
            transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
            color: #6c757d;
        }
    }
}

.form-check.form-switch {
    
    display: flex;
    align-items: center;

    & label {
        padding: var(--padding);
        background: transparent;
        border-radius: var(--border-radius);

        &:hover {
            background: var(--button);
        }

        &:active,
        &:focus {
            background: var(--button-hover);
        }
    }
}

.btn-group label { padding: var(--padding); }
/*audio.msg-attachment-audio {

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

    &::media-controls-panel,
    &::-webkit-media-controls-panel {
        background-color: var(--box-border);
    }

    &::media-controls-play-button,
    &::-webkit-media-controls-play-button {
        background-color: transparent;
        border-radius: 50%;
    }

    &::media-controls-current-time-display,
    &::-webkit-media-controls-current-time-display {
        color: #333333;
        font-weight: bold;
    }

    &::media-controls-time-remaining-display,
    &::-webkit-media-controls-time-remaining-display {
        color: #666666;
    }

    &::media-controls-timeline,
    &::-webkit-media-controls-timeline {
        background-color: #cccccc;
        border-radius: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    &::media-controls-volume-slider,
    &::-webkit-media-controls-volume-slider {
        background-color: #cccccc;
        border-radius: 10px;
        padding-left: 2px;
        padding-right: 2px;
    }

    &::media-controls-mute-button,
    &::-webkit-media-controls-mute-button {
        transform: scale(1.1);
    }

    &::media-controls-enclosure,
    &::-webkit-media-controls-enclosure {
        border-radius: 8px;
    }
}*/

label.square {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);

    &:hover {
        cursor: pointer;
        transform: scale(0.99) translateY(1px);
    }
}

#primary section {

    min-height: calc( 100vh - calc( var(--gap) * 4.5 ) );
}

/**
 * member.css
 * Styles for the PTY_User profile page, cover image, avatar, modals, and history picker.
 */

/* ── Profile layout ────────────────────────────────────────────────────── */

#member-profile {
    --cover-height: 100% !important;
}

/* ── Cover image ───────────────────────────────────────────────────────── */

.member-cover {
    position: relative;
    width: 100%;
    height: var(--cover-height) !important;
    overflow: hidden;
    background: var(--color-30);
}

#header-cover-image {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}


.hero {

    &:hover .header-edit-actions {
        opacity: 1;
    }

    .header-edit-actions {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 10;
        opacity: 0;
        /*transition: opacity .2s;*/
        backdrop-filter: var(--backdrop-filter);

        & button {
            
            /*border: none;*/
            color: var(--header-bg);
            padding: .4rem .65rem;
            cursor: pointer;
            border-radius: var(--border-radius);
            transition: background .15s;
            background-color: transparent;

            &:hover {
                background: rgba(0,0,0,.8);
            }
        }
    }
}










/* ── Member header ─────────────────────────────────────────────────────── */

.member-header {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    /*padding-bottom: 1rem;*/
    position: absolute;
    z-index: 3;
    bottom: 115px;
    left: 15px;

    & * {
        color: var(--header-bg);
    }
}

.member-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.member-avatar-wrap .avatar {
    width: 110px;
    height: 110px;
    border-radius: var(--border-radius);
    object-fit: cover;
    border: 4px solid var(--card-bg);
    background: var(--color-30);
    display: block;
}

.member-avatar-wrap .badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    border-radius: var(--border-radius);
    border: 2px solid var(--card-bg);
}

.badge.online           { background: #22c55e; }
.badge.recently-online  { background: #f59e0b; }
.badge.offline          { background: var(--color-30); }
.badge.never-logged-in  { background: var(--color-30); }

/* Avatar edit dropdown */
.avatar-edit {
    position: absolute !important;
    top: 0;
    right: 0;
}

.avatar-edit .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--brand);
    border: 2px solid var(--card-bg);
    color: var(--header-bg);
    font-size: .75rem;
    opacity: 0;
    transition: opacity .2s;
}

.member-avatar-wrap:hover .avatar-edit .btn {
    opacity: 1;
}

.member-info {
    flex: 1;
    padding-bottom: .25rem;
    color: var(--header-bg) !important;

    & * { color: var(--header-bg) !important; }
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.member-type {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    /*background: var(--brand);*/

    backdrop-filter: var(--backdrop-filter);
    color: var(--header-bg);
    padding: .15rem .5rem;
    border-radius: var(--border-radius);
    margin: 0 0 .25rem;


}

.member-activity {
    font-size: .8rem;
    opacity: .65;
    margin: 0;
}

.member-bio {
    font-size: .875rem;
    line-height: 1.5;
    margin: .35rem 0 .25rem;
    opacity: .9;
    max-width: 480px;
}

/* ── Social links on profile header ────────────────────────────────────── */

.member-social-links {

    height: auto !important;
    flex-wrap: wrap;
    gap: var(--gap);

    position: absolute;
    bottom: calc(var(--gap) * 4);
    right: var(--gap);
    z-index: 3;

    & .member-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--input-size);
        height: var(--input-size);
        border-radius: var(--border-radius);
        backdrop-filter: var(--backdrop-filter);

        & i { color: var(--header-bg) !important; font-size: 24px; }

        &:hover {
            background: var(--header-bg);
            & i { color: var(--cta) !important; }
        }
    }
}





/* ── Block / unblock button ─────────────────────────────────────────────── */

.js-block-btn,
.js-unblock-btn {
    white-space: nowrap;
}



.member-nav {
    /*border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;*/
}

.member-nav .nav-tabs {
    /*border-bottom: none;
    gap: var(--gap);*/
}

.member-nav .nav-link {
    /*padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--border-radius);
    transition: color .15s, border-color .15s;*/
}

/*.member-nav .nav-link:hover   { color: var(--brand); }
.member-nav .nav-link.active  { color: var(--brand); border-bottom-color: var(--brand); }*/

/* ── Crop overlay ──────────────────────────────────────────────────────── */

.pty-crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pty-crop-modal {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    width: min(90vw, 700px);
    max-height: 90vh;
    overflow-y: auto;
}

.pty-crop-actions {
    margin-top: 1rem;
    display: flex;
    gap: var(--gap);
}

/* ── History picker ────────────────────────────────────────────────────── */

#pty-history-picker {
    position: absolute;
    bottom: 115px;
    right: 15px;
    width: min(90vw, 400px);

    color: var(--header-bg);
    background: var(--glass);
    background: var(--glass);
    -webkit-backdrop-filter: var(--backdrop-filter);
            backdrop-filter: var(--backdrop-filter);

    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    padding: 15px;
    animation: pty-slide-up .2s ease;

    color: var(--header-bg);

    & * { color: var(--header-bg); }
}

@keyframes pty-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pty-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    font-weight: 600;
    font-size: .875rem;
}

.pty-history-header .btn {
    padding: .1rem .4rem;
    font-size: .75rem;
}

.pty-history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.pty-history-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    border: 1px solid var(--border);
    transition: border-color .15s, transform .15s;
}

.pty-history-item:hover    { border: 1px solid var(--header-bg); transform: scale(1.03); }
.pty-history-item.active   { border: 2px solid var(--header-bg); }

.pty-history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pty-history-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--brand);
    color: var(--header-bg);
    padding: 1px 5px;
    border-radius: var(--badge-radius);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    #member-profile {
        --cover-height: 180px;
    }

    .member-header {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -2rem;
        gap: .75rem;
    }

    .member-avatar-wrap .avatar {
        width: 80px;
        height: 80px;
    }
}


/* ── Connections ───────────────────────────────────────────────────────── */

.connections-tabs {
    gap: var(--gap);
    flex-wrap: wrap;
}

.connections-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.connection-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
}

.connection-avatar {
    position: relative;
    flex-shrink: 0;
}

.connection-avatar .avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    object-fit: cover;
    display: block;
}

.connection-avatar .badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius);
    border: 2px solid var(--card-bg);
}

.connection-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.connection-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-name:hover { color: var(--brand); }

.connection-type {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--brand);
}

.connection-activity {
    font-size: .75rem;
    color: var(--text-muted);
}

.connection-actions {
    flex-shrink: 0;
}

/* ── Notifications ─────────────────────────────────────────────────────── */

.notification-item {

    display: flex;
    align-items: center;
    gap: var(--padding);
    padding: var(--padding);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--card-bg);
    margin-bottom: .5rem;
    transition: background .15s;

    &.unread {

        background-color: var(--error-lighter);
        border: 1px solid var(--error-light);

        & * { color: var(--error) !important; }

        & img.avatar {
            filter: sepia(1) saturate(5) hue-rotate(300deg);
        }

        & .notification-actions {

            & button {

                &:hover {

                    background-color: var(--error-light);
                    /*& * { color: var(--header-bg) !important; }*/
                }

                &:active,
                &:focus,
                &:active:focus {
                    
                    background-color: var(--error) !important;
                    & * { color: var(--header-bg) !important; }

                }
            }
        }
        
    }

    &:hover .btn-xs { opacity: 1; }

    & .notification-avatar img {
        width: var(--input-size);
        height: var(--input-size);
        border-radius: var(--border-radius);
        object-fit: cover;
        flex-shrink: 0;
    }

    & .notification-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*gap: var(--padding);*/
        min-width: 0;

        & .notification-label {
            font-size: .875rem;
            font-weight: 500;
            color: var(--text);
            text-decoration: none;

            &:hover { color: var(--brand); }
        }

        & .notification-date {
            font-size: .75rem;
            color: var(--text-muted);
        }
    }

    & .notification-actions {
        display: flex;
        gap: var(--gap);
        flex-shrink: 0;

        & button {
            background-color: transparent;
            opacity: .5;
            transition: opacity .15s;
        }
    }
}















/* ── Toast notifications ───────────────────────────────────────────────── */

#pty-toast-wrap {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    pointer-events: none;
}

.pty-toast {
    pointer-events: all;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 320px;
    transform: translateX( calc( 100% + 2rem ) );
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    cursor: pointer;
    overflow: hidden;
}

.pty-toast.show {
    transform: translateX( 0 );
    opacity: 1;
}

.pty-toast-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
}

.pty-toast-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.pty-toast-body {
    flex: 1;
    min-width: 0;
}

.pty-toast-label {
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pty-toast-date {
    font-size: .7rem;
    color: var(--text-muted);
}

.pty-toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: .25rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: color .15s;
}

.pty-toast-close:hover { color: var(--text); }

/* Progress bar — shows how long until auto-dismiss */
.pty-toast::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--brand);
    animation: pty-toast-progress 5s linear forwards;
}

@keyframes pty-toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Messages ──────────────────────────────────────────────────────────── */




body[data-theme-shape="round"] {

    & .thread-source-badge {
        bottom: -6px !important;
        right: -6px !important;
    }
}





























    












/* ── Settings ──────────────────────────────────────────────────────────── */

.settings-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
}

@media ( max-width: 576px ) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .settings-nav {
        display: flex;
        overflow-x: auto;
    }
    .settings-nav .nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }
}

.settings-nav .nav-link {
    color: var(--text-muted);
    border-radius: var(--border-radius);
    padding: .5rem .75rem;
    font-size: .875rem;
    white-space: nowrap;
}

.settings-nav .nav-link:hover  { color: var(--brand); background: var(--color-30); }
.settings-nav .nav-link.active { color: var(--brand); background: color-mix( in srgb, var(--brand) 10%, var(--card-bg) ); }

.settings-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.settings-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-field {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 1rem;
}

@media ( max-width: 576px ) {
    .settings-field {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

.settings-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.danger-zone .settings-label {
    color: var(--bs-danger);
}

.settings-saved-msg {
    font-size: .875rem;
    color: #22c55e;
}

/* Toggle switch */
.pty-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.pty-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.pty-toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--color-30);
    border-radius: var(--border-radius);
    transition: background .2s;
    position: relative;
    flex-shrink: 0;
}

.pty-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--header-bg);
    border-radius: var(--border-radius);
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.pty-toggle input:checked + .pty-toggle-slider {
    background: var(--brand);
}

.pty-toggle input:checked + .pty-toggle-slider::after {
    transform: translateX( 20px );
}

/* Radio group */
.pty-radio-group {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
}

.pty-radio-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: .875rem;
    transition: border-color .15s, background .15s;
}

.pty-radio-item:has( input:checked ) {
    border-color: var(--brand);
    background: color-mix( in srgb, var(--brand) 8%, var(--card-bg) );
    color: var(--brand);
}

.pty-radio-item input {
    display: none;
}

/* ── Send email form ─────────────────────────────────────────────────────── */

.send-email-form {
    /*max-width: 600px;*/
}

/* ── Invitations ─────────────────────────────────────────────────────────── */

.invitation-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: .5rem;
    transition: background .15s;
}

.invitation-item:hover { background: var(--color-30); }

.invitation-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invitation-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invitation-email {
    font-size: .75rem;
}

.invitation-meta {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-shrink: 0;
}

/* ── Messages — two-panel layout ──────────────────────────────────────── */

#messages-wrap {

    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    height: calc(100vh - 280px);
    min-height: 500px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--header-bg);

    & .messages-sidebar-header,
    & .thread-view-header {
        height: var(--header-height);
        min-height: var(--header-height);
        flex-shrink: 0;
    }

    & .messages-sidebar {

        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--border);
        overflow: hidden;

        & .messages-sidebar-header {

            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;

            & h3 { font-size: 1rem; margin: 0; }
        }

        & .messages-search-bar {

            position: relative;
            padding: .5rem .75rem;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;

            & input {
                background: var(--surface-2, var(--bg-secondary));
                border-color: var(--box-border);
            }

            & #msg-search-results {

                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 200;
                background: var(--surface, var(--bg));
                border: 1px solid var(--border);
                border-radius: var(--border-radius);
                box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.15));
                max-height: 320px;
                overflow-y: auto;

                & .msg-search-result {

                    cursor: pointer;
                    border-bottom: 1px solid var(--box-);
                    transition: background .15s;

                    &:last-child { border-bottom: none; }

                    &:hover {
                        background: var(--surface-hover, var(--brand-tint, rgba(0,0,0,.04)));
                    }

                    & .tiny {
                        font-size: .7rem;
                        margin-top: .15rem;
                    }
                }
            }
        }

        & #thread-list {

            flex: 1;
            overflow-y: auto;
            padding: var(--padding);

            & .thread-row {

                display: flex;
                align-items: center;
                gap: var(--gap);
                padding: var(--padding);
                border-radius: var(--border-radius);
                border: 1px solid var(--border);
                background: var(--header-bg);
                margin-bottom: var(--padding);
                cursor: pointer;
                transition: background .15s;

                &:hover  { background: var(--button); transform: scale(0.99) translateY(1px); }
                
                &.active { 

                    background: var(--cta); 

                    &:hover {

                        cursor: unset;
                        transform: unset;

                    }
                    
                    & * { 

                        color: var(--header-bg) !important; 

                    } 

                    & .thread-avatar-wrap {

                        outline: 3px solid var(--header-bg) !important;
                    }
                }

                & .thread-avatar-wrap {
                    position:    relative;
                    flex-shrink: 0;
                    border-radius: var(--border-radius);

                    outline: 3px solid var(--box-border) !important;
                    border: 1px solid var(--header-bg);

                    & img.thread-avatar {
                        border-radius: var(--border-radius);

                        width: var(--input-size);
                        height: var(--input-size);
                        border-radius: var(--border-radius);
                        object-fit: cover;
                        flex-shrink: 0;
                    }

                    & .thread-source-badge {
                        position:      absolute;
                        bottom:        -11px;
                        right:         -11px;
                        width:         var(--badge-size);
                        height:        var(--badge-size);
                        border-radius: var(--badge-radius);
                        display:       flex;
                        align-items:   center;
                        justify-content: center;
                        font-size:     9px;
                        border:        1px solid var(--header-bg);
                        line-height:   1;
                        color: var(--header-bg);
                        background: var(--cta); 

                        &.source-fb       { background: #1877F2;  }

                        &.source-ig       { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: var(--header-bg); }

                        & i {

                            width:         10px;
                            height:        10px;
                            object-fit:    contain;
                            border-radius: 2px;
                            color: var(--header-bg) !important;

                        }
                    }
                }

                /*&.unread { color: var(--header-bg); background: var(--cta); & * { color: var(--header-bg); } }*/

                /*& .thread-row.unread .thread-recipients { color: var(--brand); }*/

                /*& .thread-row.unread .thread-recipients { color: var(--brand); }*/

                & .thread-body {

                    flex: 1; 
                    min-width: 0;

                    & .thread-top {

                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        gap: var(--gapz);
                        margin-bottom: var(--padding);

                        & .thread-recipients {
                            font-weight: 600;
                            font-size: .9rem;
                            flex: 0 0 140px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        & .thread-time {
                            font-size: .7rem;
                            color: var(--text-muted);
                            flex-shrink: 0;
                        }

                    }

                    & .thread-preview {
                        flex: 1;
                        font-size: .85rem;
                        color: var(--header-text);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    & .thread-meta {
                        display: flex;
                        align-items: center;
                        gap: .4rem;
                        font-size: .75rem;
                        color: var(--text-muted);
                        flex-shrink: 0;
                    }

                    & .thread-unread-dot {
                        width: 8px;
                        height: 8px;
                        border-radius: var(--border-radius);
                        background: var(--brand);
                        display: inline-block;
                    }
                }
            }
        }
    }

    & .messages-main {

        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;

        & #messages-empty-state {

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-muted);
            gap: .75rem;
            font-size: .95rem;

            & i {
                font-size: 2.5rem;
                opacity: .3;
            }
        }

        & #compose-panel {

            height: 100%;

            & .compose-form {
                padding: var(--padding);
                height: 100%;
                overflow-y: scroll;
            }
        }

        
    }
}

#reaction-picker {
    position:      fixed;
    z-index:       9999;
    background:    var(--header-bg);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    padding:       var(--padding);
    display:       flex;
    gap:           var(--padding);
    box-shadow:    var(--box-shadow);

    & .reaction-option {

        background:    none;
        border:        none;
        font-size:     1.3rem;
        cursor:        pointer;
        padding:       var(--padding);
        border-radius: var(--border-radius);
        line-height:   1;
        transition:    transform .12s ease;

        &:hover { transform: scale(1.4); }

        &.active {
            background: color-mix( in srgb, var(--cta) 15%, transparent );
            transform: scale(1.2);
        }
    }
}

.composer-emoji-picker {

    display:          flex;
    flex-wrap:        wrap;
    gap:              var(--gapz);
    width:            calc( var(--input-size) * 9 );
    padding:          var(--padding) !important;

    & .emoji-insert-btn {
        background:    none;
        border:        none;
        cursor:        pointer;
        font-size:     1.25rem;
        width:         var(--input-size);
        height:        var(--input-size);
        border-radius: var(--border-radius);
        display:       inline-flex;
        align-items:   center;
        justify-content: center;
        transition:    background .1s, transform .1s;
        line-height:   1;

        &:hover {
            background:  var(--button-hover);
            transform:   scale(1.2);
        }
    }
}

@media ( max-width: 768px ) {
    #messages-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: 280px 1fr;
        height: auto;
        min-height: 600px;
    }

    .messages-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    #thread-list { max-height: 200px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Messaging additions — paste at the bottom of member.css
   Covers: reactions, read receipts, typing indicator, attachment UI
   ───────────────────────────────────────────────────────────────────────── */

/* ── Reply box legacy — superseded by rich composer above ─────────────── */



.msg-attachment-img {
    max-width:    220px;
    max-height:   220px;
    border-radius: var(--border-radius);
    display:      block;
    margin-top:   .4rem;
    object-fit:   contain;
    cursor:       zoom-in;
}

.msg-attachment-file {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--gapz);
    margin-top:      .4rem;
    font-size:       .85rem;
    background:      var(--color-03, #f5f5f5);
    border:          1px solid var(--color-08, #e0e0e0);
    border-radius:   var(--border-radius);
    padding:         .3rem .6rem;
    text-decoration: none;
    color:           inherit;
}


@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

/* ── Emoji reactions ─────────────────────────────────────────────────────── */









.reaction-trigger:hover,
.message-bubble:hover .reaction-trigger { 
    opacity: 1;
    transform: scale(1.15);
    color: var(--brand, #1274e0);
}







.gif-picker-panel {
       background: var(--bs-body-bg);
       border: 1px solid var(--bs-border-color);
       border-radius: 8px;
       padding: 8px;
       max-height: 320px;
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   .gif-results-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 4px;
       overflow-y: auto;
       flex: 1;
   }
   .gif-results-grid .gif-item {
       border: none;
       padding: 0;
       background: none;
       cursor: pointer;
       border-radius: 4px;
       overflow: hidden;
       height: auto !important;
       min-height: auto !important;
   }
   .gif-results-grid .gif-item img {
       width: 100%;
       height: 80px;
       object-fit: cover;
       display: block;
   }
   .gif-powered-by {
       font-size: 11px;
       color: var(--bs-secondary-color);
       text-align: right;
       margin: 0;
   }



   /* ============================================================
   messaging-additions.css
   Paste at the bottom of user.css.
   Covers: reply-to, edit, mute, group compose, pin, forward,
           link preview, voice note, GIF picker (Tenor + Giphy).
   All variables match those already used in user.css.
   ============================================================ */


/* ── Reply-to strip ────────────────────────────────────────────────────── */

.reply-to-strip {
    display:        flex;
    align-items:    center;
    gap:            var(--gapz);
    padding:        .35rem 1rem;
    margin-bottom:  var(--gapz);
    background:     var(--color-30);
    border-left:    3px solid var(--brand, #1274E0);
    border-radius:  0 var(--border-radius) var(--border-radius) 0;
    font-size:      .8rem;

    & .reply-to-content {
        flex:        1;
        min-width:   0;
        display:     flex;
        flex-direction: column;
        gap:         .1rem;
    }

    & .reply-to-name {
        font-weight: 600;
        color:       var(--brand, #1274E0);
        white-space: nowrap;
        overflow:    hidden;
        text-overflow: ellipsis;
    }

    & .reply-to-preview {
        color:       var(--text-muted);
        white-space: nowrap;
        overflow:    hidden;
        text-overflow: ellipsis;
    }
}


/* ── Reply quote block (inside message bubble) ─────────────────────────── */

.reply-quote {
    background:     color-mix(in srgb, var(--brand, #1274E0) 8%, transparent);
    border-left:    3px solid var(--brand, #1274E0);
    border-radius:  0 var(--border-radius) var(--border-radius) 0;
    padding:        .3rem .6rem;
    margin-bottom:  .4rem;
    font-size:      .8rem;
    cursor:         pointer;
    transition:     background .15s;

    &:hover {
        background: color-mix(in srgb, var(--brand, #1274E0) 14%, transparent);
    }

    & .reply-quote-name {
        font-weight:   600;
        color:         var(--brand, #1274E0);
        display:       block;
        margin-bottom: .1rem;
    }

    & .reply-quote-text {
        color:         var(--text-muted);
        display:       block;
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
    }
}


/* ── Forwarded label ───────────────────────────────────────────────────── */

.forwarded-label {
    font-size:    .72rem;
    color:        var(--text-muted);
    font-style:   italic;
    margin-bottom: .25rem;
    display:      flex;
    align-items:  center;
    gap:          .25rem;

    & i { font-size: .7rem; opacity: .7; }
}


/* ── Edited tag ────────────────────────────────────────────────────────── */

.edited-tag {
    font-size:  .68rem;
    color:      var(--text-muted);
    font-style: italic;
    margin-left: .2rem;
    opacity:    .75;
}


/* ── Pinned tag (in-bubble icon) ───────────────────────────────────────── */

.pinned-tag {
    position:   absolute;
    top:        .35rem;
    right:      .5rem;
    font-size:  .65rem;
    color:      var(--brand, #1274E0);
    opacity:    .7;
    transform:  rotate(45deg);
}


/* ── Pinned banner (top of thread view) ────────────────────────────────── */

.pinned-banner {
    display:        flex;
    align-items:    center;
    gap:            .6rem;
    padding:        .4rem 1rem;
    background:     color-mix(in srgb, var(--brand, #1274E0) 8%, transparent);
    border-bottom:  1px solid color-mix(in srgb, var(--brand, #1274E0) 20%, transparent);
    cursor:         pointer;
    flex-shrink:    0;
    transition:     background .15s;

    &:hover {
        background: color-mix(in srgb, var(--brand, #1274E0) 14%, transparent);
    }

    & .pinned-banner-icon {
        font-size:  .8rem;
        color:      var(--brand, #1274E0);
        transform:  rotate(45deg);
        flex-shrink: 0;
    }

    & .pinned-banner-text {
        flex:       1;
        min-width:  0;
        display:    flex;
        flex-direction: column;
        gap:        .05rem;
    }

    & .pinned-banner-label {
        font-size:   .72rem;
        font-weight: 600;
        color:       var(--brand, #1274E0);
    }

    & .pinned-banner-preview {
        font-size:     .8rem;
        color:         var(--text-muted);
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
    }

    & .pinned-banner-unpin {
        flex-shrink: 0;
        opacity:     .5;
        font-size:   .8rem;
        padding:     .2rem;
        transition:  opacity .15s;

        &:hover { opacity: 1; }
    }
}


/* ── Message action buttons (hover reveal) ─────────────────────────────── */

.message-item {
    position: relative;

    & .message-actions {
        display:     flex;
        align-items: center;
        gap:         2px;
        opacity:     0;
        transition:  opacity .15s;
        flex-shrink: 0;
        align-self:  flex-end;
        padding-bottom: .2rem;

        & button {

            background-color: transparent;

            &:hover {
                background-color: var(--box-border);
            }
        }

        
        & .dropdown-menu {
            overflow: hidden;
            box-shadow: var(--box-shadow);

        }
    }

    &:hover .message-actions,
    &:focus-within .message-actions {
        opacity: 1;
    }

    /* Editing highlight */
    &.editing .message-bubble {
        outline:        2px solid var(--brand, #1274E0);
        outline-offset: 2px;
    }

    /* Pinned message subtle bg */
    &.is-pinned .message-bubble {
        background: color-mix(in srgb, var(--brand, #1274E0) 6%, var(--box-border));
    }

    /* Scroll-to highlight flash */
    &.highlight .message-bubble {
        animation: msgHighlight .8s ease-out;
    }
}

.msg-action-btn {
    background:    none;
    border:        none;
    padding:       .2rem .3rem;
    font-size:     .75rem;
    color:         var(--text-muted);
    border-radius: var(--border-radius);
    cursor:        pointer;
    line-height:   1;
    transition:    color .12s, background .12s, transform .1s;

    &:hover {
        color:       var(--brand, #1274E0);
        background:  var(--color-30);
        transform:   scale(1.15);
    }
}

@keyframes msgHighlight {
    0%   { background: color-mix(in srgb, var(--brand, #1274E0) 30%, transparent); }
    100% { background: transparent; }
}


/* ── Audio attachment ──────────────────────────────────────────────────── */

.msg-attachment-audio {
    display:    block;
    margin-top: .4rem;
    max-width:  260px;
    width:      100%;
    height:     var(--input-size);
    border-radius: var(--border-radius);

    /* Slim native audio controls in Blink / WebKit */
    
}


/* ── Voice note button + timer ─────────────────────────────────────────── */

#msg-voice-btn {

    transition: color .15s, background .15s;

    &.recording {
        color:      #e53935;
        background: color-mix(in srgb, #e53935 12%, transparent);
        animation:  voicePulse 1.2s infinite ease-in-out;
    }
}

.voice-timer {
    font-size:   .72rem;
    font-weight: 600;
    color:       #e53935;
    font-variant-numeric: tabular-nums;
    min-width:   2.8ch;
}

@keyframes voicePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}


/* ── Mute button active state ──────────────────────────────────────────── */

#msg-mute-btn {

    transition: color .15s, background .15s;

    &.active {
        color:       var(--text-muted);
        background:  var(--color-30);
    }
}


/* ── Group compose — recipient pills ───────────────────────────────────── */

.compose-recipients-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--gapz);
    margin-bottom: var(--gapz);
    min-height: 0;
}

.compose-recipient-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    background:    color-mix(in srgb, var(--brand, #1274E0) 12%, transparent);
    color:         var(--brand, #1274E0);
    border:        1px solid color-mix(in srgb, var(--brand, #1274E0) 25%, transparent);
    border-radius: var(--border-radius);
    padding:       .15rem .5rem .15rem .6rem;
    font-size:     .8rem;
    font-weight:   500;

    & .pill-remove {
        background:  none;
        border:      none;
        color:       inherit;
        opacity:     .6;
        cursor:      pointer;
        padding:     0 .1rem;
        font-size:   .9rem;
        line-height: 1;
        transition:  opacity .12s;

        &:hover { opacity: 1; }
    }
}

/* Group avatar stack in thread header */
.thread-header-avatars.group {

    & .thread-header-avatar {

        &:not(:first-child) {
            margin-left: -8px;
            border: 2px solid var(--card-bg, var(--header-bg));
        }
    }
}


/* ── Link preview card ─────────────────────────────────────────────────── */

.link-preview-card {
    display:        flex;
    align-items:    flex-start;
    gap:            .6rem;
    padding:        .5rem .75rem;
    margin-bottom:  var(--gapz);
    background:     var(--color-30);
    border:         1px solid var(--border);
    border-left:    3px solid var(--brand, #1274E0);
    border-radius:  0 var(--border-radius) var(--border-radius) 0;
    font-size:      .8rem;

    & .link-preview-img {
        width:        64px;
        height:       48px;
        object-fit:   cover;
        border-radius: calc(var(--border-radius) * .6);
        flex-shrink:  0;
    }

    & .link-preview-text {
        flex:      1;
        min-width: 0;
        display:   flex;
        flex-direction: column;
        gap:       .15rem;
    }

    & .link-preview-title {
        font-weight:   600;
        color:         var(--header-text);
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
    }

    & .link-preview-desc {
        color:         var(--text-muted);
        font-size:     .75rem;
        display:       -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow:      hidden;
    }

    /* dismiss X button — reuses .btn-bare from your theme */
    & > .btn-bare {
        flex-shrink: 0;
        opacity:     .5;
        font-size:   .8rem;
        padding:     .1rem;
        align-self:  flex-start;
        transition:  opacity .15s;

        &:hover { opacity: 1; }
    }
}


/* ── Forward modal ─────────────────────────────────────────────────────── */

.forward-modal {
    position:      fixed;
    inset:         0;
    z-index:       9000;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    rgba(0, 0, 0, .45);
    padding:       1rem;
}

.forward-modal-inner {
    background:    var(--header-bg);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    padding:       1.25rem;
    width:         100%;
    max-width:     400px;
    max-height:    80vh;
    overflow-y:    auto;
    display:       flex;
    flex-direction: column;
    gap:           var(--gapz);
    box-shadow:    0 8px 32px rgba(0,0,0,.18);
}

.forward-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--gapz);

    & strong { font-size: .95rem; }

    & .btn-bare {
        opacity:    .55;
        font-size:  .9rem;
        transition: opacity .12s;

        &:hover { opacity: 1; }
    }
}

#forward-search-results {

    & .fwd-user-result {
        border-radius: var(--border-radius);
        padding:       .4rem .6rem;
        transition:    background .12s;

        &:hover {
            background: var(--color-30);
        }

        & img { flex-shrink: 0; }
    }
}

.forward-selected-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--gapz);
    min-height: 0;
}


/* ── GIF picker panel ──────────────────────────────────────────────────── */

.gif-picker-panel {
    /* Positioned absolute relative to .reply-box (which has position:relative) */
    position:        absolute;
    bottom:          100%;
    left:            0;
    right:           0;
    z-index:         200;
    background:      var(--header-bg);
    border:          1px solid var(--border);
    border-bottom:   none;
    border-radius:   var(--border-radius) var(--border-radius) 0 0;
    display:         flex;
    flex-direction:  column;
    max-height:      340px;
    box-shadow:      0 -4px 16px rgba(0,0,0,.10);
}

.gif-picker-header {
    display:     flex;
    align-items: center;
    gap:         var(--gapz);
    padding:     .5rem .75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;

    & input {
        flex:        1;
        min-width:   0;
        font-size:   .85rem;
        background:  var(--color-30);
    }

    & .btn-bare {
        flex-shrink: 0;
        opacity:     .55;
        font-size:   .8rem;
        padding:     .15rem;
        transition:  opacity .12s;

        &:hover { opacity: 1; }
    }
}

.gif-picker-tabs {
    display: flex;
    gap:     0;

    & .gif-tab {
        background:    none;
        border:        none;
        border-bottom: 2px solid transparent;
        padding:       .3rem .7rem;
        font-size:     .8rem;
        font-weight:   500;
        color:         var(--text-muted);
        cursor:        pointer;
        transition:    color .12s, border-color .12s;

        &:hover { color: var(--header-text); }

        &.active {
            color:        var(--brand, #1274E0);
            border-color: var(--brand, #1274E0);
        }
    }
}

.gif-provider-label {
    font-size:   .75rem;
    font-weight: 600;
    color:       var(--text-muted);
    letter-spacing: .03em;
}

.gif-results-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
    overflow-y:            auto;
    flex:                  1;
    padding:               3px;

    & .gif-item {
        border:        none;
        padding:       0;
        background:    var(--color-30);
        cursor:        pointer;
        border-radius: calc(var(--border-radius) * .5);
        overflow:      hidden;
        aspect-ratio:  16 / 9;
        transition:    transform .12s, opacity .12s;

        &:hover {
            transform: scale(1.03);
            opacity:   .9;
        }

        & img {
            width:      100%;
            height:     100%;
            object-fit: cover;
            display:    block;
        }
    }
}

.gif-powered-by {
    font-size:  .68rem;
    color:      var(--text-muted);
    text-align: right;
    padding:    .25rem .6rem;
    margin:     0;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

.gif-loading,
.gif-empty,
.gif-error {
    grid-column: 1 / -1;
    padding:     1.5rem;
    text-align:  center;
    font-size:   .85rem;
    color:       var(--text-muted);
}

.gif-error { color: var(--color-danger, #c0392b); }


/* ── Responsive adjustments ────────────────────────────────────────────── */

@media ( max-width: 768px ) {

    .gif-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forward-modal-inner {
        max-width: 100%;
        max-height: 90vh;
    }

    .link-preview-card .link-preview-img {
        width:  48px;
        height: var(--input-size);
    }
}








/* ============================================================
   discovery-additions.css
   Paste at the bottom of user.css.
   Covers: PYMK widget, member directory, profile completeness
           bar, verification badges, report modal, mutual friends.
   All variables match those already in user.css.
   ============================================================ */


/* ── Verification badge overlays (inside avatar wrap) ──────────────────── */

.verification-badge-stack {
    position:    absolute;
    bottom:      -4px;
    right:       -4px;
    display:     flex;
    flex-direction: column-reverse;
    gap:         2px;
    pointer-events: none;
}

.verification-badge {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    border-radius:   var(--border-radius);
    background:      var(--card-bg, var(--header-bg));
    border:          1.5px solid var(--box-border);
    font-size:       .65rem;
    line-height:     1;
    pointer-events:  auto;
    cursor:          help;
    transition:      transform .12s;

    &:hover { transform: scale( 1.2 ); }
}

/* Name-level badge icons inside .member-name */
.member-name-badge {
    font-size:    .8em;
    margin-left:  .3rem;
    vertical-align: middle;
    cursor:       help;
}

/* Mutual friends line in member header */
.member-mutual-friends {
    font-size:   .82rem;
    color:       var(--text-muted);
    margin:      .2rem 0;

    & .mutual-names { font-size: .78rem; }
}


/* ── Report button (profile header) ────────────────────────────────────── */

.member-report-btn {
    margin-top:  .6rem;
    font-size:   .78rem;
    color:       var(--text-muted);
    opacity:     .6;
    transition:  opacity .15s, color .15s;
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;

    &:hover {
        opacity: 1;
        color:   #e53935;
    }
}


/* ── Report modal ──────────────────────────────────────────────────────── */

.report-modal {
    position:      fixed;
    inset:         0;
    z-index:       9500;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    rgba( 0, 0, 0, .45 );
    padding:       1rem;
}

.report-modal-inner {
    background:    var(--header-bg);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    padding:       1.25rem;
    width:         100%;
    max-width:     380px;
    box-shadow:    0 8px 32px rgba( 0, 0, 0, .18 );
}

.report-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .75rem;

    & strong { font-size: .95rem; }

    & .btn-bare {
        opacity:    .55;
        transition: opacity .12s;
        &:hover { opacity: 1; }
    }
}


/* ── Profile completeness bar ──────────────────────────────────────────── */

.completeness-bar-wrap {
    display: none;
    background:    var(--color-30);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    padding:       .85rem 1rem;
    margin:        .75rem 0 .25rem;
}

.completeness-bar-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .4rem;
}

.completeness-bar-label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--header-text);
}

.completeness-dismiss {
    opacity:    .45;
    font-size:  .8rem;
    padding:    .1rem;
    transition: opacity .12s;
    &:hover { opacity: 1; }
}

.completeness-bar-track {
    height:        6px;
    background:    var(--box-border);
    border-radius: var(--border-radius);
    overflow:      hidden;
    margin-bottom: .65rem;
}

.completeness-bar-fill {
    height:           100%;
    background:       var(--brand, #1274E0);
    border-radius:    var(--border-radius);
    transition:       width .6s ease;
}

.completeness-tips {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-direction: column;
    gap:         .3rem;

    & li {
        display:     flex;
        align-items: center;
        gap:         .5rem;
        font-size:   .8rem;
        color:       var(--text-muted);

        & i { color: var(--brand, #1274E0); flex-shrink: 0; }
    }
}

.completeness-action {
    margin-left:     auto;
    font-size:       .75rem;
    font-weight:     600;
    color:           var(--brand, #1274E0);
    text-decoration: none;
    white-space:     nowrap;

    &:hover { text-decoration: underline; }
}


/* ── PYMK Widget ───────────────────────────────────────────────────────── */

.pymk-widget {
    background:    var(--header-bg);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    overflow:      hidden;
    margin-top:    1rem;
}

.pymk-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .65rem 1rem;
    border-bottom:   1px solid var(--border);
}

.pymk-title {
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--header-text);
}

.pymk-refresh {
    font-size:  .8rem;
    color:      var(--text-muted);
    opacity:    .55;
    padding:    .2rem;
    transition: opacity .12s, transform .3s;
    &:hover { opacity: 1; transform: rotate( 180deg ); }
}

.pymk-cards {
    display:    flex;
    overflow-x: auto;
    gap:        .75rem;
    padding:    .85rem 1rem;
    scrollbar-width: thin;

    /* Snap for mobile swipe feel */
    scroll-snap-type: x mandatory;

    &::-webkit-scrollbar       { height: 4px; }
    &::-webkit-scrollbar-track { background: var(--color-30); }
    &::-webkit-scrollbar-thumb { background: var(--box-border); border-radius: 2px; }
}

.pymk-card {
    flex-shrink:    0;
    width:          128px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .3rem;
    padding:        .75rem .5rem;
    background:     var(--color-30);
    border:         1px solid var(--border);
    border-radius:  var(--border-radius);
    text-align:     center;
    scroll-snap-align: start;
    transition:     border-color .15s;

    &:hover { border-color: var(--brand, #1274E0); }
}

.pymk-avatar-link {
    position:   relative;
    display:    block;
    flex-shrink: 0;
}

.pymk-avatar {
    width:         56px;
    height:        56px;
    border-radius: var(--border-radius);
    object-fit:    cover;
    display:       block;

    /* Online status ring */
    &.online         { outline: 2px solid #4caf50; outline-offset: 2px; }
    &.recently-online { outline: 2px solid #ff9800; outline-offset: 2px; }
}

.pymk-name {
    font-size:       .82rem;
    font-weight:     600;
    color:           var(--header-text);
    text-decoration: none;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;
    line-height:     1.3;

    &:hover { color: var(--brand, #1274E0); }
}

.pymk-type,
.pymk-city,
.pymk-mutual {
    font-size: .72rem;
    color:     var(--text-muted);
}

.pymk-city i,
.pymk-mutual i { font-size: .68rem; }

.pymk-actions {
    display:         flex;
    gap:             .3rem;
    margin-top:      .25rem;
    justify-content: center;
    width:           100%;

    & .btn { flex: 1; font-size: .72rem; padding: .2rem .4rem; }
}

.pymk-badge {
    position:      absolute;
    bottom:        -3px;
    right:         -3px;
    width:         14px;
    height:        14px;
    border-radius: var(--border-radius);
    background:    var(--card-bg);
    border:        1px solid var(--border);
    display:       block;
}


/* ── Member directory ──────────────────────────────────────────────────── */

.member-directory {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.member-directory-filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .6rem;
    align-items: center;

    & .form-control,
    & .form-select {
        max-width: 200px;
        flex:      1 1 140px;
    }
}

.member-dir-online-label {
    font-size:   .85rem;
    color:       var(--header-text);
    flex-shrink: 0;
    cursor:      pointer;
}

.member-directory-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
    gap:                   .75rem;
}

.member-directory-pagination {
    display:     flex;
    align-items: center;
    gap:         1rem;
    justify-content: center;
    padding-top: .5rem;
}

/* Directory member card */
.dir-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            .4rem;
    padding:        1rem .75rem;
    background:     var(--card-bg);
    border:         1px solid var(--border);
    border-radius:  var(--border-radius);
    transition:     border-color .15s, transform .12s;

    &:hover {
        border-color: var(--brand, #1274E0);
        transform:    translateY( -1px );
    }
}

.dir-card-avatar-link { display: block; flex-shrink: 0; }

.dir-card-avatar {
    width:         64px;
    height:        64px;
    border-radius: var(--border-radius);
    object-fit:    cover;
    display:       block;
    margin:        0 auto;

    &.online          { outline: 2px solid #4caf50; outline-offset: 2px; }
    &.recently-online { outline: 2px solid #ff9800; outline-offset: 2px; }
}

.dir-card-body {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
    width:          100%;
}

.dir-card-name {
    font-size:       .875rem;
    font-weight:     600;
    color:           var(--header-text);
    text-decoration: none;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;

    &:hover { color: var(--brand, #1274E0); }
}

.dir-card-badge-icon {
    font-size:  .72em;
    margin-left: .25rem;
    vertical-align: middle;
}

.dir-card-type,
.dir-card-city,
.dir-card-mutual {
    font-size: .76rem;
    color:     var(--text-muted);
}

.dir-card-city i,
.dir-card-mutual i { font-size: .72rem; }

.dir-card-actions {
    margin-top: .35rem;
    width:      100%;

    & .btn { width: 100%; font-size: .78rem; }
}


/* ── Responsive ────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {

    .member-directory-filters {
        & .form-control,
        & .form-select { max-width: 100%; }
    }

    .member-directory-grid {
        grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    }

    .pymk-card { width: 110px; }
}






/* ============================================================
   notifications-additions.css
   Paste at the bottom of user.css.
   Covers: sound mute toggle button, notification preference
           section grouping headers in settings, digest
           frequency field, and the preferences REST-driven UI.
   All variables match those already in user.css.
   ============================================================ */


/* ── Sound mute toggle in nav bell dropdown ────────────────────────────── */

.notif-sound-toggle {
    display:       flex;
    align-items:   center;
    justify-content: flex-end;
    gap:           .35rem;
    width:         100%;
    padding:       .35rem 1rem;
    background:    none;
    border:        none;
    border-bottom: 1px solid var(--border);
    font-size:     .78rem;
    color:         var(--text-muted);
    cursor:        pointer;
    transition:    color .15s, background .15s;

    &:hover {
        background: var(--color-30);
        color:      var(--header-text);
    }

    &.muted {
        color: var(--brand, #1274E0);

        & i { color: var(--brand, #1274E0); }
    }

    & i { font-size: .85rem; }
}

/* Same toggle when rendered on the full notifications page */
.notifications-sound-control {
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .5rem 0;
    margin-bottom:   .5rem;
    border-bottom:   1px solid var(--border);

    & .notif-sound-label {
        flex:       1;
        font-size:  .85rem;
        color:      var(--header-text);
        font-weight: 500;
    }

    & .js-notif-sound-toggle {
        padding:    .25rem .6rem;
        border:     1px solid var(--border);
        border-radius: var(--border-radius);
        background: none;
        font-size:  .8rem;
        cursor:     pointer;
        color:      var(--text-muted);
        transition: color .12s, border-color .12s, background .12s;

        &:hover, &.muted {
            color:        var(--brand, #1274E0);
            border-color: var(--brand, #1274E0);
            background:   color-mix(in srgb, var(--brand, #1274E0) 8%, transparent);
        }
    }
}


/* ── Settings page: notification section sub-headings ──────────────────── */
/*    The settings renderer iterates the flat fields list. We use CSS to     */
/*    add visual section breaks using data-* attributes on rendered rows.    */

.settings-field[data-key="notifInAppMessages"] .settings-field-label::before {
    content:      'In-App Notifications';
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:        var(--text-muted);
    margin-bottom: .35rem;
    padding-bottom: .25rem;
    border-bottom:  1px solid var(--border);
}

.settings-field[data-key="inAppSoundMuted"] .settings-field-label::before {
    content:      'Sound';
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:        var(--text-muted);
    margin-bottom: .35rem;
    padding-top:   .5rem;
    padding-bottom: .25rem;
    border-bottom:  1px solid var(--border);
}

.settings-field[data-key="emailFriendRequest"] .settings-field-label::before {
    content:      'Email Notifications';
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:        var(--text-muted);
    margin-bottom: .35rem;
    padding-top:   .5rem;
    padding-bottom: .25rem;
    border-bottom:  1px solid var(--border);
}

.settings-field[data-key="emailDigestFrequency"] .settings-field-label::before {
    content:      'Email Digest';
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:        var(--text-muted);
    margin-bottom: .35rem;
    padding-top:   .5rem;
    padding-bottom: .25rem;
    border-bottom:  1px solid var(--border);
}

.settings-field[data-key="pushFriendRequest"] .settings-field-label::before {
    content:      'Push Notifications';
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:        var(--text-muted);
    margin-bottom: .35rem;
    padding-top:   .5rem;
    padding-bottom: .25rem;
    border-bottom:  1px solid var(--border);
}


/* ── Digest frequency select field helper text ─────────────────────────── */
/*    Rendered by the settings engine as a <select>. Show a hint beneath.   */

.settings-field[data-key="emailDigestFrequency"] .settings-field-control::after {
    content:    'When digest is enabled, individual event emails are suppressed and bundled into one.';
    display:    block;
    font-size:  .75rem;
    color:      var(--text-muted);
    margin-top: .3rem;
    line-height: 1.4;
}

/* ============================================================
   security-additions.css
   Paste at the bottom of user.css.
   Covers: Settings → Security tab layout, TOTP setup panel,
           login activity log, backup codes, OAuth sign-in button.
   All variables match those already in user.css.
   ============================================================ */


/* ── Security section blocks ───────────────────────────────────────────── */

.security-section {
    padding:        1rem 0;
    border-bottom:  1px solid var(--border);

    &:last-child { border-bottom: none; }
}

.security-section-title {
    font-size:     .9rem;
    font-weight:   600;
    margin-bottom: .75rem;
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    color:         var(--header-text);

    & i { color: var(--brand, #1274E0); font-size: .95rem; }
}


/* ── Status banners ────────────────────────────────────────────────────── */

.security-status {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    padding:       .5rem .75rem;
    border-radius: var(--border-radius);
    font-size:     .85rem;
    line-height:   1.4;

    & i { flex-shrink: 0; font-size: .95rem; }
}

.security-status--on {
    background: color-mix(in srgb, #2e7d32 10%, transparent);
    color:      #2e7d32;
    border:     1px solid color-mix(in srgb, #2e7d32 25%, transparent);
}

.security-status--off {
    background: color-mix(in srgb, #f57c00 10%, transparent);
    color:      #e65100;
    border:     1px solid color-mix(in srgb, #f57c00 25%, transparent);
}


/* ── TOTP setup panel ──────────────────────────────────────────────────── */

.totp-setup-panel {
    margin-top:    1rem;
    padding:       1rem;
    background:    var(--color-30);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
}

.totp-qr-block {
    display:     flex;
    align-items: flex-start;
    gap:         1.25rem;
    flex-wrap:   wrap;
}

.totp-qr-img {
    width:         160px;
    height:        160px;
    border:        4px solid var(--card-bg, var(--header-bg));
    border-radius: var(--border-radius);
    flex-shrink:   0;
    image-rendering: pixelated; /* keep QR crisp */
}

.totp-manual-key {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
    justify-content: center;
}

.totp-secret {
    font-size:     .9rem;
    letter-spacing: .12em;
    background:    var(--card-bg, var(--header-bg));
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    padding:       .4rem .7rem;
    word-break:    break-all;
    user-select:   all;
    cursor:        text;
}

.totp-copy-btn {
    font-size:  .8rem;
    color:      var(--text-muted);
    padding:    .2rem .4rem;
    transition: color .12s;
    align-self: flex-start;

    &:hover { color: var(--brand, #1274E0); }
}


/* ── Backup codes ──────────────────────────────────────────────────────── */

.backup-codes-wrap {
    margin-top:    1rem;
    padding:       .85rem 1rem;
    background:    var(--color-30);
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
}

.backup-codes-warning {
    font-size:   .82rem;
    color:       #e65100;
    font-weight: 500;
    margin-bottom: .65rem;
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;

    & i { flex-shrink: 0; margin-top: .1rem; }
}

.backup-codes-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
    gap:                   .4rem;
    margin-bottom:         .75rem;
}

.backup-code {
    display:       block;
    text-align:    center;
    font-family:   monospace;
    font-size:     .9rem;
    letter-spacing: .1em;
    padding:       .4rem .5rem;
    background:    var(--card-bg, var(--header-bg));
    border:        1px solid var(--border);
    border-radius: var(--border-radius);
    user-select:   all;
    cursor:        text;
}

.backup-codes-actions {
    display:  flex;
    gap:      .5rem;
    flex-wrap: wrap;
}


/* ── Login activity log ────────────────────────────────────────────────── */

.login-log-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .82rem;

    & th {
        text-align:    left;
        padding:       .4rem .6rem;
        font-weight:   600;
        color:         var(--text-muted);
        font-size:     .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 2px solid var(--box-border);
    }

    & td {
        padding:       .5rem .6rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        color:         var(--header-text);
    }

    & tr:last-child td { border-bottom: none; }

    & tr.login-log-fail td { background: color-mix(in srgb, #e53935 4%, transparent); }
}

.login-log-ip {
    font-family: monospace;
    font-size:   .8rem;
    color:       var(--text-muted);
}

.login-log-ok {
    color:       #2e7d32;
    font-size:   .8rem;
    display:     inline-flex;
    align-items: center;
    gap:         .25rem;
}

.login-log-failed {
    color:       #e53935;
    font-size:   .8rem;
    display:     inline-flex;
    align-items: center;
    gap:         .25rem;
}


/* ── OAuth sign-in buttons ─────────────────────────────────────────────── */

.btn-oauth {
    display:         inline-flex;
    align-items:     center;
    gap:             .65rem;
    padding:         .55rem 1.1rem;
    border-radius:   var(--border-radius);
    font-size:       .9rem;
    font-weight:     500;
    text-decoration: none;
    border:          1px solid var(--border);
    background:      var(--card-bg, var(--header-bg));
    color:           var(--header-text);
    transition:      background .15s, border-color .15s, box-shadow .15s;
    white-space:     nowrap;

    &:hover {
        background:   var(--color-30);
        border-color: var(--brand, #1274E0);
        box-shadow:   0 1px 6px rgba(0,0,0,.08);
    }

    & svg { flex-shrink: 0; }
}

.btn-oauth--google {
    /* Google brand colours are handled by the inline SVG paths */
}


/* ── 2FA challenge page (standalone) ──────────────────────────────────── */

/* The challenge page uses WP's get_header/get_footer, so it inherits your
   theme. These rules just make the form look centred and clean.           */

.pty-2fa-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      60vh;
}


/* ── Responsive ────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {

    .totp-qr-block {
        flex-direction: column;
        align-items:    center;
    }

    .backup-codes-grid {
        grid-template-columns: repeat( 2, 1fr );
    }

    .login-log-table th:nth-child(3),
    .login-log-table td:nth-child(3) {
        display: none; /* hide IP column on small screens */
    }
}

.activity-composer,
/*.activity-item,*/
.notification-item {
    padding: var(--padding);
    margin-bottom: var(--padding);
    background-color: var(--header-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.completeness-bar-wrap {

    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 3;

}

/*#thread-typing-indicator {
    padding: 8px 16px;
    min-height: 36px;
}
 
.typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bs-secondary-bg, #f0f0f0);
    border-radius: 18px;
    padding: 8px 14px;
}
 
.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
 
.typing-dots span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #888;
    animation: pty-typing-bounce 1.2s infinite ease-in-out;
}
 
.typing-dots span:nth-child(1) { animation-delay: 0s;    }
.typing-dots span:nth-child(2) { animation-delay: 0.2s;  }
.typing-dots span:nth-child(3) { animation-delay: 0.4s;  }
 
@keyframes pty-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1;   }
}
 
.typing-name {
    font-size: 12px;
    color: #666;
}*/

/* ── Bot / system message ──────────────────────────────────────────────── */





.square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}




.msg-attach-preview {
    padding: 8px 8px 0;
}

.msg-attach-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.msg-attach-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    overflow: visible;
}

.msg-attach-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

.msg-attach-file-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    background: var(--box-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted-text);
    padding: 4px;
    text-align: center;
    overflow: hidden;
}

.msg-attach-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-20);
    color: var(--header-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 2;
    padding: 0;
}

.msg-bot-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-20);
    color: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--surface);
}

.message-bubble {
    position: relative; /* needed for absolute badge positioning */
}







.pty-modal {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: modal-fade-in 0.15s ease-out;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Lightbox variant — just the image fullscreen */
.pty-modal.is-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    cursor: default;
}

/* Dialog variant — content box */
.pty-modal.is-dialog {
    cursor: default;
}

.pty-modal-box {
    background: var(--header-bg);
    border-radius: var(--border-radius);
    padding: var(--padding);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.pty-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--padding);
}

.pty-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}


.msg-lightbox {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /*cursor: zoom-out;*/
}

.msg-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius);
}

.pty-modal.is-carousel {
    align-items: stretch;
    padding: 0;
}





.pty-carousel {

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;

    & .pty-carousel-close {
        padding: var(--padding);
        margin: 0;
        width: auto;
        height: auto;
        min-width: var(--input-size);
        min-height: var(--input-size);

        position: absolute;
        top: var(--gap);
        right: var(--gap);
        z-index: 10;
        background: transparent;
        border-radius: var(--border-radius);
        
        opacity: .5;

        &:hover {
            background: var(--overlay);
            opacity: 1;
        }

        & * {
            padding: 0;
            margin: 0;
            color: var(--header-bg);
            font-size: 44px; 
        }
    }

    & .pty-carousel-counter {
        position: absolute;
        top: var(--gap);
        left: 50%;
        transform: translateX(-50%);
        color: var(--header-bg);
        font-size: 24px;
        background: var(--overlay);
        padding: var(--padding);
        border-radius: var(--border-radius);
        z-index: 10;
    }

    & .pty-carousel-main {

        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;

        & img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: var(--border-radius);
        }

        & .pty-carousel-nav {
            padding: var(--padding);
            margin: 0;
            width: auto;
            height: auto;
            min-width: var(--input-size);
            min-height: var(--input-size);

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            color: var(--header-bg);
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: background 0.15s;
            opacity: .5;

            &:hover {
                background: var(--overlay);
                opacity: 1;
            }

            & * { 
                padding: 0;
                margin: 0;
                color: var(--header-bg);
                font-size: 44px; 
            }

            &.prev { left: var(--gap); }
            &.next { right: var(--gap); }

        }
    }

    & .pty-carousel-thumbs {
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 4px;
        padding: 8px;
        overflow-x: auto;
        background: var(--overlay);
        flex-shrink: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;

        & .pty-carousel-thumb {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: var(--border-radius);
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            padding: 0;
            background: none;
            opacity: 0.6;
            transition: opacity 0.15s, border-color 0.15s;

            &:hover {
                opacity: .8;
            }

            &.active {
                /*border-color: var(--header-bg);*/
                opacity: 1;
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}


















#thread-list {

    flex: 1;
    overflow-y: auto;
    padding: var(--padding);

    & .thread-row {

        display: flex;
        align-items: center;
        gap: var(--gap);
        padding: var(--padding);
        border-radius: var(--border-radius);
        border: 1px solid var(--border);
        background: var(--header-bg);
        margin-bottom: var(--padding);
        cursor: pointer;
        transition: background .15s;

        &:hover  { background: var(--button); transform: scale(0.99) translateY(1px); }
        
        &.active { 

            background: var(--cta); 

            &:hover {

                cursor: unset;
                transform: unset;

            }
            
            & * { 

                color: var(--header-bg) !important; 

            } 

            & .thread-avatar-wrap {

                outline: 3px solid var(--header-bg) !important;
            }
        }

        & .thread-avatar-wrap {
            position:    relative;
            flex-shrink: 0;
            border-radius: var(--border-radius);

            outline: 3px solid var(--box-border) !important;
            border: 1px solid var(--header-bg);

            & img.thread-avatar {
                border-radius: var(--border-radius);

                width: var(--input-size);
                height: var(--input-size);
                border-radius: var(--border-radius);
                object-fit: cover;
                flex-shrink: 0;
            }

            & .thread-source-badge {
                position:      absolute;
                bottom:        -11px;
                right:         -11px;
                width:         var(--badge-size);
                height:        var(--badge-size);
                border-radius: var(--badge-radius);
                display:       flex;
                align-items:   center;
                justify-content: center;
                font-size:     9px;
                border:        1px solid var(--header-bg);
                line-height:   1;
                color: var(--header-bg);
                background: var(--cta); 

                &.source-fb       { background: #1877F2;  }

                &.source-ig       { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: var(--header-bg); }

                & i {

                    width:         10px;
                    height:        10px;
                    object-fit:    contain;
                    border-radius: 2px;
                    color: var(--header-bg) !important;

                }
            }
        }

        /*&.unread { color: var(--header-bg); background: var(--cta); & * { color: var(--header-bg); } }*/

        /*& .thread-row.unread .thread-recipients { color: var(--brand); }*/

        /*& .thread-row.unread .thread-recipients { color: var(--brand); }*/

        & .thread-body {

            flex: 1; 
            min-width: 0;

            & .thread-top {

                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: var(--gapz);
                margin-bottom: var(--padding);

                & .thread-recipients {
                    font-weight: 600;
                    font-size: .9rem;
                    flex: 0 0 140px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                & .thread-time {
                    font-size: .7rem;
                    color: var(--text-muted);
                    flex-shrink: 0;
                }

            }

            & .thread-preview {
                flex: 1;
                font-size: .85rem;
                color: var(--header-text);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            & .thread-meta {
                display: flex;
                align-items: center;
                gap: .4rem;
                font-size: .75rem;
                color: var(--text-muted);
                flex-shrink: 0;
            }

            & .thread-unread-dot {
                width: 8px;
                height: 8px;
                border-radius: var(--border-radius);
                background: var(--brand);
                display: inline-block;
            }
        }
    }
}


.pty-chat-window {
    width: 500px !important;
}

.pty-thread-view {

    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    & .thread-view-header {

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .85rem 1.25rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;

        & .thread-header-identity {

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--padding);

            & .thread-header-avatars {
                display: flex;
                gap: -.25rem;

                & .thread-header-avatar {
                    width: var(--input-size);
                    height: var(--input-size);
                    border-radius: var(--border-radius);
                    object-fit: cover;
                    border: 2px solid var(--card-bg);
                }

                & .thread-header-name {
                    font-weight: 600;
                    font-size: .95rem;
                }
            }
        }

        & .thread-header-actions {

            display: flex;
        }
    }

    & #pinned-banner {

    }

    & .thread-messages {

        flex: 1;
        overflow-y: auto;
        padding: var(--gap) var(--padding);
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        max-height: none;
        overflow-x: hidden;

        & .message-item {

            position: relative;
            display: flex;
            align-items: flex-end;
            gap: var(--gapz);

            & .message-avatar {
                
                width: calc(var(--input-size) / 1.25);
                height: calc(var(--input-size) / 1.25);
                border-radius: var(--border-radius);
                object-fit: cover;
                flex-shrink: 0;
                z-index: 1;
                position: relative;
                bottom: -10px;
                border: 5px solid var(--header-bg);

            }

            & .message-bubble {

                max-width: 70%;
                padding: var(--padding);
                border-radius: var(--border-radius);
                background: var(--box-border);
                font-size: 16px;
                line-height: 24px;
                position: relative;

                & * { color: var(--header-text); }

                & p { 

                    margin: 0 0 var(--padding); 

                }

                & audio { min-width: 350px; margin-bottom: var(--padding); 

                    &::-webkit-media-controls-panel {
                        background: var(--box-border);
                    }

                }

                &:has(> audio:first-child) {

                    padding: 0;
                    & > audio:first-child {
                        padding: 0;
                        margin: 0;

                        &::-webkit-media-controls-panel {
                            border-bottom-left-radius: 0 !important;
                            border-bottom-right-radius: 0 !important;
                        }
                        
                    }
                    & p, & audio {
                        padding-left: var(--padding);
                        padding-right: var(--padding);
                        padding-bottom: var(--padding);
                        margin-top: var(--padding);
                    }

                    & .message-meta {

                        padding: var(--padding);
                    }
                }


                & img { margin-bottom: var(--padding); }

                &:has(> img:first-child) {

                    padding: 0;
                    border: 1px solid var(--border);

                    
                    & > img:first-child {
                        padding: 0;
                        margin: 0;
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }

                    & p, & audio {
                        padding-left: var(--padding);
                        padding-right: var(--padding);
                        padding-bottom: var(--padding);
                        margin-top: var(--padding);
                    }

                    & .message-meta {

                        padding: var(--padding);
                    }
                }

                &:has(> :not(img):first-child):has(img) {
                    padding: 0;
                    border: 1px solid var(--border);

                    & img {
                        min-width: 100%;
                        margin: 0;
                        padding: 0;
                        border-radius: 0; 
                    }

                    & > :first-child {
                        padding: var(--padding);
                        margin-bottom: 0;
                    }

                    & .message-meta {
                        padding: var(--padding);
                    }
                }

                & .message-meta {

                    display:     flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap:         var(--gapz);

                    & .message-time { 
                        font-size: .72rem;
                    }

                    & .read-receipt {

                        font-size:    .72rem;
                        margin-left:  .3rem;
                        opacity:      .6;
                        user-select:  none;

                        &.read { 
                            opacity: 1; 
                        }

                        &.sent { }
                    }
                }

                & .message-reactions {

                    top: -16px;
                    z-index: 2;
                    position: absolute;

                    & .reaction-chip {

                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        animation: reaction-pop 0.2s ease-out forwards;

                        width: var(--gap);
                        min-width: var(--gap);
                        max-width: var(--gap);

                        height: var(--gap);
                        min-height: var(--gap);
                        max-height: var(--gap);

                        &::before,
                        &::after {
                            content: '';
                            position: absolute;
                            border-radius: 50%;
                        }

                        &::before {
                            width: 10px;
                            height: 10px;
                        }

                        &::after {
                            width: 6px;
                            height: 6px;
                        }
                    }
                }
            }

            &.deleted .message-bubble {
                background: var(--error);
                color: var(--text-muted);
                font-style: italic;
            }

            &.mine { 
                flex-direction: row-reverse; 
                & .message-bubble {
                    background: var(--cta);
                    & * { color: var(--header-bg) !important; }
                    & .message-reactions {
                        left: -13px;
                        & .reaction-chip {
                            background: var(--box-border);
                            &::before {
                                background: var(--box-border);
                                left: -4px;
                                bottom: 2px;
                            }
                            &::after {
                                background: var(--box-border);
                                left: -8px;
                                bottom: 0px;
                            }
                        }
                    }
                }
                & .message-actions { flex-direction: row-reverse !important; }
            }

            &.theirs {
                & .message-bubble {

                    left: -27px;

                    & audio { margin-bottom: var(--padding); 

                        &::-webkit-media-controls-panel {
                            background: var(--cta);
                        }
                    }

                    & .message-meta {
                        justify-content: flex-start;
                    }

                    & .message-reactions {
                        right: -13px;
                        & .reaction-chip {
                            background: var(--cta);
                            &::before {
                                background: var(--cta);
                                right: -4px;
                                bottom: 2px;
                                
                            }
                            &::after {
                                background: var(--cta);
                                right: -8px;
                                bottom: 0px;
                            }
                        }
                    }
                }
            }
        }
    }

    & .typing-indicator {

        display:     flex;
        align-items: center;
        gap:         .5rem;
        padding:     .3rem .75rem;
        font-size:   .8rem;
        color:       var(--color-30, #888);
        font-style:  italic;

        & .typing-dots {
        
            display: inline-flex;
            gap:     3px;

            min-height: var(--input-size);
            background-color: var(--box-border);
            padding: 15px;
            margin-left: 15px;
            border-radius: var(--border-radius);

            & span {
                width:            6px;
                height:           6px;
                background:       var(--color-30, #aaa);
                border-radius:    var(--border-radius);
                display:          inline-block;
                animation:        typingBounce 1.2s infinite ease-in-out;

                &:nth-child(2) { animation-delay: .2s; }
                &:nth-child(3) { animation-delay: .4s; }

            }
        }
    }

    & .reply-box {

        padding: var(--padding);
        border-top:     1px solid var(--border);
        flex-shrink:    0;
        display:        flex;
        flex-direction: column;
        background:     var(--body-bg, var(--header-bg));

        & .reply-editor {

            & .reply-input-content {

                min-height:  44px;
                max-height:  160px;
                overflow-y:  auto;
                outline:     none;
                font-size:   .9rem;
                line-height: 1.5;
                word-break:  break-word;
                color:       var(--header-text);

                padding:     .75rem 1rem .5rem;
                border: 1px solid var(--border);
                border-radius: var(--border-radius);

                &:empty::before {
                    content:        attr(data-placeholder);
                    color:          var(--color-30, #aaa);
                    pointer-events: none;
                }
            }
        }

        & .reply-formatting-bar {

            display:        flex;
            flex-wrap:      wrap;
            flex-direction: row-reverse;
            gap:            var(--gapz);
            margin-bottom:  var(--padding);

        }

        & .attach-preview {

            display:     flex;
            align-items: center;
            justify-content: space-between;
            padding:     .35rem 1rem;
            background:  var(--color-30, #f8f9fa);
            border-top:  1px solid var(--border);
            font-size:   .8rem;
            gap:         .5rem;

            & .attach-preview-inner {
                display:     flex;
                align-items: center;
                gap:         var(--gapz);
                color:       var(--color-30, #555);
                min-width:   0;
                overflow:    hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        & .reply-toolbar {

            display:         flex;
            align-items:     center;
            justify-content: space-between;
            gap:             var(--gapz);

            & .reply-toolbar-media,
            & .reply-toolbar-actions {
                display:     flex;
                align-items: center;
                gap:         var(--gapz);
            }

            & .reply-toolbar-media {

                & .gif-label {
                    font-weight: 700;
                    font-size:   .7rem;
                    letter-spacing: .5px;
                    font-family: var(--font-sans, sans-serif);
                }

            }

            & .reply-toolbar-actions {

            }
        }
    }
}

.pty-composer {

    display: flex;
    padding: calc(var(--padding)/2);
    align-items: center;
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 1;

    &.focused {
        & .composer-left-btns {
            max-width: 0;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
        }

        & .composer-input-wrapper {
            max-width: 100%;
        }
    }

    & .composer-avatar-row {
        padding: var(--padding) var(--padding) 0;
        display: flex;
        align-items: center;
        gap: var(--padding);
    }

    & .composer-avatar {
        width: var(--input-size);
        height: var(--input-size);
        border-radius: var(--border-radius);
        object-fit: cover;
        flex-shrink: 0;
        margin-right: var(--padding);
    }

    & .composer-editor {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(var(--padding)/2);
        width: 100%;

        & .square,
        & .composer-attach-label,
        & .composer-media-label {
            flex-shrink: 0;
            width: var(--input-size);
            overflow: hidden;
            transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease;
        }

        & .gif-label {
            white-space: nowrap;
        }
    }

    & .composer-left-btns {
        display: flex;
        align-items: flex-end;
        gap: calc(var(--padding)/2);
        overflow: hidden;
        flex-shrink: 0;
        transition: max-width 0.25s ease, opacity 0.25s ease;

        & label,
        & button {

            background-color: transparent;

            &:hover {
                background-color: var(--button);
            }
            &:active {
                background-color: var(--button-hover);
            }
        }
    }

    & .composer-input-wrapper {

        flex: 1;
        min-width: 0;
        display: flex;
        align-items: flex-end;
        position: relative;
        transition: flex 0.25s ease;

        & .composer-input {
            flex: 1;
            min-width: 0;
            min-height: var(--input-size);
            max-height: 120px;
            overflow-y: auto;
            word-break: break-word;
            outline: none;
            font-size: .9rem;
            line-height: 1.5;
            padding: 6px 60px 6px 10px;
            border: 1px solid var(--border);
            border-radius: var(--border-radius);
            background: var(--input-bg, var(--header-bg));
            color: var(--header-text);

            display: flex;
            align-items: center;

            &:empty::before {
                content: attr(data-placeholder);
                color: var(--text-muted);
                pointer-events: none;
            }

            & .composer-input-attachment {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0px;
                margin-top: 6px;
                /*background: var(--color-30);*/
                border-radius: var(--border-radius);
                position: relative;
            }

            & .composer-input-attachment-img {
                /*max-width: var(--input-size);*/
                max-height: var(--input-size);
                border-radius: var(--border-radius);
                object-fit: cover;
                display: block;
                aspect-ratio: 16 / 9;
            }

            & .composer-input-attachment-audio {
                /*width: 100%;*/
                height: 36px;
            }

            & .composer-input-attachment-file {
                font-size: .85rem;
                color: var(--text-muted);
            }

            & .composer-input-attachment-remove {
                position: absolute;
                top: -13px;
                right: -4px;
                background: var(--header-bg);
                border-radius: var(--badge-radius);
                width: var(--badge-size);
                height: var(--badge-size);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                border: none;
                cursor: pointer;
            }

            & .composer-input-attachment {
                margin: 0px;

                &:last-child {
                    margin-right: var(--padding);
                }
            }
        }
    }

    & .composer-emoji-container {
        position: absolute;
        right: 0px;
        bottom: 0px;
        overflow: visible;

        transform: scale(.8);

        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        & .composer-emoji-btn {

            border: none;
            
            cursor: pointer;
            color: #65676b;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;

            min-height:auto;

            &:hover {
                background-color: #f2f2f2
            }

            & * {

                color: var(--header-text); 
                font-size: 44px;

            }
        }
    }

    & .composer-send-btn {
        flex-shrink: 0;
        color: var(--text-muted);
        transition: color 0.15s;

        &:not([disabled]) {
            color: #0084ff;
            cursor: pointer;
        }

        &[disabled] {
            opacity: 0.4;
            cursor: not-allowed;
        }
    }

    & .composer-reply-strip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: var(--color-30);
        border-top: 1px solid var(--border);
        font-size: .82rem;

        & .composer-reply-name {
            font-weight: 600;
        }

        & .composer-reply-preview {
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    & .composer-attach-preview {
        padding: 0 8px 8px;
    }
}








#pty-chat-popup {

    position        : fixed;
    bottom          : 30px;
    right           : 45px;
    z-index         : 9998;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-end;
    gap             : var(--padding);

    & #pty-chat-avatars {
        display         : flex;
        flex-direction  : column;
        align-items     : flex-end;
        gap             : var(--padding);
        margin-bottom: 100px;

        & .pty-chat-avatar-btn {

            display         : flex;
            flex-direction  : row-reverse;
            align-items     : center;
            background      : #fff;
            border          : none;
            border-radius   : 26px;
            height          : var(--input-size);
            width           : var(--input-size);
            overflow        : hidden;
            cursor          : pointer;
            padding         : 0;
            box-shadow      : var(--box-shadow);
            transition      : width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                              box-shadow 0.2s ease;

            &:hover {
                width     : calc( var(--input-size) + var(--avatar-pill-width) );
                box-shadow: var(--box-shadow);
            }

            &:hover .pty-avatar-pill-body {    /* ← move this here */
                width   : var(--avatar-pill-width);
                opacity : 1;
            }

            &.has-unread .pty-avatar-pill-name {
                color : #0084ff;
            }

            & .pty-avatar-circle {
                width       : var(--input-size);
                height      : var(--input-size);
                flex-shrink : 0;
                position    : relative;

                & img {
                    width         : var(--input-size);
                    height        : var(--input-size);
                    border-radius : var(--border-radius);
                    object-fit    : cover;
                    display       : block;
                }

                & .pty-avatar-fallback {
                    width           : var(--input-size);
                    height          : var(--input-size);
                    border-radius   : var(--border-radius);
                    background      : #e4e6eb;
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                    color           : #65676b;
                    font-size       : 20px;
                }

                & .thread-source-badge {
                    position        : absolute;
                    bottom          : 0;
                    right           : 0;
                    width           : 18px;
                    height          : 18px;
                    border-radius   : var(--border-radius);
                    font-size       : 10px;
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                    border          : 2px solid #fff;
                }

                & .pty-chat-avatar-badge {
                    position        : absolute;
                    top             : 2px;
                    right           : 2px;
                    width           : 12px;
                    height          : 12px;
                    background      : #f02849;
                    border-radius   : var(--border-radius);
                    border          : 2px solid #fff;
                }
            }

            & .pty-avatar-pill-body {

                width       : 0;
                opacity     : 0;
                overflow    : hidden;
                flex-shrink : 0;
                transition  : width  0.26s cubic-bezier(0.4, 0, 0.2, 1),
                                  opacity 0.18s ease 0.08s;

                & .pty-avatar-pill-inner {
                    width           : var(--avatar-pill-width);
                    padding         : 0 14px 0 18px;
                    display         : flex;
                    flex-direction  : column;
                    justify-content : center;
                    white-space     : nowrap;

                    & .pty-avatar-pill-name {
                        font-size     : 13px;
                        font-weight   : 600;
                        color         : #050505;
                        overflow      : hidden;
                        text-overflow : ellipsis;
                    }

                    & .pty-avatar-pill-preview {
                        font-size     : 11px;
                        color         : #65676b;
                        overflow      : hidden;
                        text-overflow : ellipsis;
                        margin-top    : 1px;
                    }
                }
            }
        }
    }

    /*& #pty-chat-trigger {
        width           : var(--input-size);
        height          : var(--input-size);
        border-radius   : var(--border-radius);
        background      : var(--button);
        color           : var(--header-text);
        border          : none;
        cursor          : pointer;
        font-size       : 22px;
        box-shadow      : var(--box-shadow);
        position        : relative;
        flex-shrink     : 0;
        transition      : var(--transition);

        &:hover  { transform: scale(1.06); }

        &.active,
        &:active  { background: #0073e6; }

        & #pty-chat-badge {
            position        : absolute;
            top             : -4px;
            right           : -4px;
            background      : #f02849;
            color           : #fff;
            font-size       : 11px;
            font-weight     : 700;
            min-width       : 18px;
            height          : 18px;
            border-radius   : 9px;
            display         : flex;
            align-items     : center;
            justify-content : center;
            border          : 2px solid #fff;
            padding         : 0 3px;
            pointer-events  : none;
        }
    }*/
}

.message-item.bot-system-message {
    opacity: .92;

    .message-bubble {
        background:    color-mix(in srgb, var(--color-20, #1274E0) 8%, var(--surface));
        border:        1px solid color-mix(in srgb, var(--color-20, #1274E0) 22%, transparent);
        border-radius: var(--radius-lg, 1rem);
        font-size:     .875rem;

        p { margin: 0; line-height: 1.5; }

        a {
            color:           var(--color-20, #1274E0);
            text-decoration: underline;
            font-weight:     500;
        }

        .message-time {
            color:       var(--color-20, #1274E0);
            font-weight: 600;
            font-size:   .75rem;
        }
    }

    /* Robot icon avatar */
    .bot-avatar {
        width:            var(--input-size);
        height:           var(--input-size);
        border-radius:    50%;
        background:       color-mix(in srgb, var(--color-20, #1274E0) 15%, var(--surface));
        border:           1px solid color-mix(in srgb, var(--color-20, #1274E0) 30%, transparent);
        display:          flex;
        align-items:      center;
        justify-content:  center;
        flex-shrink:      0;
        align-self:       flex-end;
        color:            var(--color-20, #1274E0);
        font-size:        .9rem;
    }
}

@keyframes reaction-pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}