/* ========================= */
/* Profile accordion (mpa)   */
/* ========================= */
.mpa{
    position:absolute;
    left: 100px;
    top:24px;
    z-index:999;
    max-width: 360px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 14px 38px rgba(8,7,30,.45);
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
    overflow: hidden;
}
.mpa-header{
    width:100%; padding: 6px 12px;
    display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,.04);
    border: none; color:#fff; cursor:pointer;
    flex-direction: row-reverse;
    min-width: 169px;
}
.mpa-avatar{
    width:32px; height:32px; border-radius:999px; object-fit:cover;
    outline:2px solid rgba(255,255,255,.18);
}
.mpa-text{ display:flex; flex-direction:column; align-items: flex-start; margin-left: auto; }
.mpa-name{ font-weight:600; font-size:12px; }
.mpa-badge{
    font-size:8px; line-height:1; padding: 2.5px 5px; border-radius:12px; font-weight:700;
    color:#0b1030;
}
.mpa-badge.is-presenter{ color: var(--color-green-teal); background: color-mix(in srgb, var(--color-green-teal) 30%, transparent); }
.mpa-badge.is-task_master{ color: var(--color-blue-mid); background: color-mix(in srgb, var(--color-blue-mid) 30%, transparent); }
.mpa-badge.is-manager{ background: rgba(255,255,255,.22); color:#fff; }
.mpa-badge.is-seller,
.mpa-badge.is-assistant{ color: var(--color-blue-mid); background: color-mix(in srgb, var(--color-blue-mid) 30%, transparent); }

.mpa-caret{ opacity:.9; transition: transform .22s ease; }
.mpa.open .mpa-caret{ transform: rotate(180deg); }

.mpa-panel{
    overflow:hidden;
    max-height: 0;
    transition: max-height .28s ease;
}
.mpa.open .mpa-panel{ max-height: 520px; }
.mpa.open { border-radius: 20px; }

.mpa-panel-inner{ padding: 8px 0; background:#211d3d; }

.mpa-sep{
    height:1px; width:100%;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.18), rgba(255,255,255,.04));
    margin:8px 0;
}

.mpa-item{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    justify-content: flex-start;
    margin: 0 8px;
}
.mpa-item .mpa-ic{ width:26px; height:26px; opacity:.95; }
.mpa-item:hover{ background: rgba(255,255,255,.06); }
.mpa-item.is-disabled{ opacity:.6; cursor: default; pointer-events:none; }
.mpa-logout{ color:#C52222; }
.mpa-logout .mpa-ic{ filter: drop-shadow(0 0 0 currentColor); color:#ff5030; }

@media (max-width:420px){
    .mpa{ max-width: calc(100% - 32px); }
    .mpa-badge{ display:none; }
}