/* =========================
   DASHBOARD SUMMARY
========================= */

.profile-avatar-placeholder{
    width:128px;
    height:128px;
    flex:0 0 128px;
    font-size:2rem;
}

.profile-avatar-placeholder-sm{
    width:72px;
    height:72px;
    flex-basis:72px;
    font-size:1rem;
}

.profile-avatar-button{
    flex:0 0 128px;
    width:128px;
    height:128px;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:zoom-in;
    transition:transform .18s ease, box-shadow .18s ease;
}

.profile-avatar-button:hover{
    transform:scale(1.04);
    box-shadow:0 0 0 4px rgba(13,110,253,.18);
}

.profile-avatar-button:focus-visible{
    outline:3px solid var(--bs-primary);
    outline-offset:4px;
}

.profile-avatar-button img{
    display:block;
    width:100%;
    height:100%;
}

.profile-avatar-modal .modal-content{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:1rem;
    background:var(--card-bg);
    color:var(--text);
    box-shadow:0 1.5rem 4rem rgba(0,0,0,.3);
}

.profile-avatar-modal .modal-header{
    border-bottom-color:var(--border);
}

.profile-avatar-modal .modal-body{
    padding:clamp(1rem, 4vw, 2rem);
}

.profile-avatar-large{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:72vh;
    margin:0 auto;
    border-radius:.75rem;
    object-fit:contain;
}

.profile-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 155px), 1fr));
    gap:.85rem;
    padding:0 clamp(1.25rem, 3vw, 2.5rem) 1.5rem;
}

.profile-stat{
    display:flex;
    min-height:102px;
    flex-direction:column;
    justify-content:center;
    gap:.45rem;
    padding:1rem 1.1rem;
    border:1px solid var(--border);
    border-radius:.85rem;
    background:var(--bg);
}

.profile-stat-label{
    color:var(--text-muted);
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.025em;
}

.profile-stat-value{
    font-size:clamp(1rem, 1.7vw, 1.3rem);
    font-weight:700;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.profile-page{
    overflow:hidden;
    color:var(--text);
}

.profile-page:hover{
    transform:none;
}

.profile-back-link{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1rem;
    color:var(--text-muted);
    font-size:.92rem;
    font-weight:600;
    text-decoration:none;
}

.profile-back-link:hover{
    color:var(--primary);
}

.profile-hero{
    display:flex;
    align-items:center;
    gap:1.5rem;
    padding:clamp(1.5rem, 4vw, 2.5rem);
    border-bottom:1px solid var(--border);
    background:linear-gradient(115deg, rgba(59,130,246,.11), transparent 68%);
}

.profile-identity{
    min-width:0;
    flex:1;
}

.profile-eyebrow,
.profile-section-kicker{
    display:block;
    margin-bottom:.35rem;
    color:var(--text-muted);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.profile-name{
    margin:0;
    font-size:clamp(1.8rem, 4vw, 2.5rem);
    font-weight:750;
    letter-spacing:-.035em;
    line-height:1.1;
}

.profile-handle{
    margin:.4rem 0 0;
    color:var(--text-muted);
    font-size:1rem;
}

.profile-actions{
    flex:0 0 auto;
}

.profile-actions .btn{
    padding:.65rem 1rem;
    font-weight:600;
}

.profile-content{
    display:grid;
    gap:1.5rem;
    padding:0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.profile-section{
    padding-top:1.4rem;
    border-top:1px solid var(--border);
}

.profile-section-heading{
    margin-bottom:1rem;
}

.profile-section-heading h2{
    margin:0;
    font-size:1.15rem;
    font-weight:700;
}

.profile-info-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.75rem;
}

.profile-info-item{
    min-width:0;
    padding:1rem 1.1rem;
    border:1px solid var(--border);
    border-radius:.75rem;
    background:var(--bg);
}

.profile-info-item-wide{
    grid-column:1 / -1;
}

.profile-info-label{
    display:block;
    margin-bottom:.35rem;
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:600;
}

.profile-info-item p{
    margin:0;
    overflow-wrap:anywhere;
}

.profile-gear-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.65rem;
    margin:0;
}

.profile-gear-item{
    display:flex;
    min-width:0;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 1rem;
    border:1px solid var(--border);
    border-radius:.75rem;
    background:var(--bg);
}

.profile-gear-item dt{
    flex:0 0 auto;
    color:var(--text-muted);
    font-size:.9rem;
    font-weight:600;
}

.profile-gear-item dd{
    margin:0;
    text-align:right;
    overflow-wrap:anywhere;
}

.profile-social-links{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
}

.profile-social-links .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-weight:600;
}

.profile-empty-state{
    padding:1.2rem;
    border:1px dashed var(--border);
    border-radius:.75rem;
    color:var(--text-muted);
    text-align:center;
}

.messages-layout{
    display:grid;
    grid-template-columns:minmax(240px, 320px) minmax(0, 1fr);
    gap:1rem;
    align-items:stretch;
}

.messages-sidebar,
.messages-thread{
    min-width:0;
}

.messages-conversation-list{
    display:grid;
    gap:.5rem;
}

.messages-conversation{
    display:grid;
    gap:.25rem;
    padding:.75rem;
    border:1px solid var(--border);
    border-radius:.65rem;
    color:var(--text);
    text-decoration:none;
}

.messages-conversation:hover,
.messages-conversation.is-active{
    border-color:var(--bs-primary);
    background:rgba(13,110,253,.08);
    color:var(--text);
}

.messages-conversation-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
}

.messages-conversation-preview{
    overflow:hidden;
    color:var(--text-muted);
    font-size:.85rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-thread{
    min-height:420px;
}

.messages-thread-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.messages-thread-body{
    display:flex;
    min-height:240px;
    flex-direction:column;
    justify-content:flex-end;
    overflow-y:auto;
}

.messages-list{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.message-bubble{
    max-width:min(85%, 680px);
    align-self:flex-start;
    padding:.75rem 1rem;
    border:1px solid var(--border);
    border-radius:1rem 1rem 1rem .25rem;
    overflow-wrap:anywhere;
    background:var(--card-bg);
}

.message-bubble.is-own{
    align-self:flex-end;
    border-color:rgba(13,110,253,.25);
    border-radius:1rem 1rem .25rem 1rem;
    background:rgba(13,110,253,.1);
}

.message-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.5rem;
    margin-bottom:.35rem;
    font-size:.8rem;
}

.message-meta time{
    color:var(--text-muted);
}

.app-summary{
    color:var(--text-muted);
    font-size:.95rem;
    margin-bottom:20px;
}

/* =========================
   ACTIVITIES LIST
========================= */

.activity-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* =========================
   ACTIVITY ROW
========================= */

.activity-row{
    display:grid;
    grid-template-columns:
        140px
        minmax(260px,1fr)
        120px
        120px
        160px
        160px
        120px;

    align-items:center;

    background:var(--card-bg);

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

    border-radius:10px;

    padding:16px 20px;

    color:var(--text);

    text-decoration:none;

    transition:.15s ease;
}

.activity-row:hover{
    color:var(--text);
    transform:translateY(-1px);
    box-shadow:var(--shadow);
}

/* =========================
   DATE
========================= */

.activity-date{
    font-weight:700;
    white-space:nowrap;
}

/* =========================
   ACTIVITY NAME
========================= */

.activity-name{
    font-weight:500;
}

/* =========================
   STATS
========================= */

.activity-stat{
    text-align:center;
}

.activity-value{
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
}

.activity-label{
    margin-top:2px;
    font-size:.70rem;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.4px;

    line-height:1.1;
}

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

@media(max-width:1200px){

    .activity-row{

        grid-template-columns:1fr;

        gap:8px;

        text-align:left;
    }

    .activity-stat{
        text-align:left;
    }

}

@media(max-width:767.98px){
    .profile-hero{
        flex-wrap:wrap;
        gap:1rem;
    }

    .profile-hero .profile-avatar-button,
    .profile-hero .profile-avatar-placeholder{
        width:96px;
        height:96px;
        flex-basis:96px;
    }

    .profile-actions{
        width:100%;
    }

    .profile-actions .btn{
        width:100%;
    }

    .profile-stats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .profile-stat{
        min-height:90px;
        padding:.85rem;
    }

    .profile-info-grid,
    .profile-gear-list{
        grid-template-columns:1fr;
    }

    .profile-info-item-wide{
        grid-column:auto;
    }

    .messages-layout{
        grid-template-columns:1fr;
    }

    .messages-thread{
        min-height:360px;
    }

    .message-bubble{
        max-width:94%;
    }
}

/* =========================
   EXTRA COMPACT MODE
========================= */

@media(min-width:1201px){

    .activity-row{

        min-height:72px;
    }

}