/* profile.css */

/* Profile header — avatar has hard min/max size, falls back to round empty box */
.profile-header { display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid #31324480; }

#profile-avatar,
.profile-avatar-empty {
    width:96px; height:96px;          /* fixed size — both min and max */
    min-width:96px; max-width:96px;
    min-height:96px; max-height:96px;
    border-radius:50%;
    object-fit:cover;
    background:#11111B;
    border:2px solid #CBA6F7;
    display:inline-block;
    flex-shrink:0;
}
.profile-avatar-empty {
    background:#313244;
    border-color:#45475980;
}

.profile-meta h2 { margin:0; color:#CBA6F7; font-size:1.4em; }
.profile-handle { color:#A6ADC8; font-size:0.9em; }
.profile-meta p { margin:6px 0; color:#CDD6F4; }
.profile-bio { margin:16px 0; }
.profile-bio summary { cursor:pointer; color:#A6E3A1; font-weight:bold; padding:6px 0; }
#profile-bio { padding:8px; background:#11111B30; border-radius:6px; color:#BAC2DE; font-size:0.92em; white-space:pre-wrap; }

/* Mini avatar — used in lists and search results (10×10 alternative) */
.avatar-mini {
    width:24px; height:24px;
    min-width:24px; max-width:24px;
    min-height:24px; max-height:24px;
    border-radius:50%; object-fit:cover; vertical-align:middle;
    background:#11111B;
    border:1px solid #31324480;
    display:inline-block;
}
.avatar-mini.empty { background:#313244; }

/* Tiny "next-to-name" avatar (10×10 hard) — for compact star lists */
.avatar-xs {
    width:14px; height:14px;
    min-width:14px; max-width:14px;
    min-height:14px; max-height:14px;
    border-radius:50%;
    background:#313244;
    border:1px solid #45475980;
    display:inline-block; vertical-align:middle;
    object-fit:cover;
    margin-right:4px;
}

/* Pager */
.mg-pager {
    display:flex; gap:6px; justify-content:center; align-items:center;
    margin-top:14px; padding:8px;
    flex-wrap:wrap;
}
.mg-pager-top    { margin-top:0; margin-bottom:14px; border-bottom:1px solid #31324480; padding-bottom:10px; }
.mg-pager-bottom { border-top:1px solid #31324480; padding-top:10px; }
.mg-pager button[disabled] { opacity:0.4; cursor:not-allowed; }
.mg-pager button { font-family:inherit; }

/* Shared lightbox modal (used by profile.js, likes.html, gallery date-window) */
.lk-modal {
    position:fixed; inset:0; background:#11111Bcc;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px;
}
.lk-modal-card {
    background:#1E1E2E; border:1px solid #45475980; border-radius:12px;
    padding:18px 22px; width:100%; max-width:760px; max-height:90vh;
    overflow-y:auto; color:#CDD6F4; box-shadow:0 8px 32px #000000aa;
}
.lk-modal-card h3 { margin:0 0 12px; color:#CBA6F7; font-size:1em; word-break:break-all; }
.lk-modal-card h4 { color:#A6E3A1; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 8px; }
.lk-modal-card .lk-close {
    float:right; background:none; border:none; color:#F38BA8;
    font-size:1.4em; cursor:pointer; line-height:1; padding:0 4px;
}
.lk-pivot { padding:8px; background:#181825; border-radius:8px; margin-bottom:12px; }
.lk-pivot img, .lk-pivot video { width:100%; max-height:380px; object-fit:contain;
    background:#11111B; display:block; border-radius:6px; }
.lk-pivot audio { width:100%; }
.lk-meta { font-size:0.85em; color:#A6ADC8; margin-top:8px; word-break:break-all; }
.lk-meta b { color:#CDD6F4; }
.lk-near { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.lk-near .ck { background:#181825; border-radius:6px; overflow:hidden; }
.lk-near .ck img { width:100%; max-height:160px; object-fit:cover; display:block; }
.lk-near .ck .nm { font-size:11px; padding:4px 6px; color:#A6ADC8;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px){ .lk-near { grid-template-columns:1fr; } }

/* YouTube iframe inside lightbox: 16:9 responsive container */
.lk-iframe-wrap {
    position:relative; width:100%; padding-bottom:56.25%;
    background:#11111B; border-radius:6px; overflow:hidden;
}
.lk-iframe-wrap iframe {
    position:absolute; top:0; left:0; width:100%; height:100%;
    border:0;
}

/* Action buttons row inside the lightbox card */
.lk-actions {
    display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 8px;
}
.lk-act {
    background:#1E1E2E; color:#CDD6F4;
    border:1px solid #45475980; border-radius:14px;
    padding:4px 12px; font-size:0.78em; font-family:inherit; cursor:pointer;
    transition: background 0.15s, color 0.15s;
}
.lk-act:hover { background:#313244; border-color:#CBA6F7; }
.lk-act.liked { background:#F38BA8; color:#11111B; border-color:#F38BA8; }
.lk-overlay-label {
    position:absolute; bottom:8px; left:8px;
    background:#11111Bcc; color:#FAB387;
    padding:3px 8px; border-radius:6px; font-size:0.75em; font-weight:600;
}
.lk-pivot { position:relative; }
.lk-pivot a { display:block; }

/* Comment items */
.lk-comment {
    padding:8px; background:#181825; border-radius:8px; margin-bottom:6px;
}
.lk-comment-h { font-size:0.75em; color:#A6ADC8; }
.lk-comment-h a { color:#CBA6F7; text-decoration:none; }
.lk-comment-h a:hover { text-decoration:underline; }
.lk-comment-b { white-space:pre-wrap; margin-top:4px; }
.lk-comment-del {
    background:none; border:1px solid #F38BA880; color:#F38BA8;
    border-radius:8px; padding:0 6px; font-size:0.85em; cursor:pointer; line-height:1;
}
.lk-comment-del:hover { background:#F38BA8; color:#11111B; }

/* Lightbox prev/next nav arrows */
.lk-modal-card { position:relative; }
.lk-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px;
    background:#1E1E2Ecc; color:#CBA6F7;
    border:1px solid #45475980; border-radius:50%;
    font-size:1.6em; line-height:1; cursor:pointer; z-index:5;
    font-family:inherit;
}
.lk-nav:hover:not(:disabled) { background:#CBA6F7; color:#11111B; border-color:#CBA6F7; }
.lk-nav:disabled { opacity:0.25; cursor:not-allowed; }
.lk-prev { left:-50px; }
.lk-next { right:-50px; }
@media (max-width:900px){
    .lk-prev { left:6px; }
    .lk-next { right:6px; }
}

/* Playlist picker mini-modal */
.lk-pp .lk-pp-card {
    background:#1E1E2E; border:1px solid #45475980; border-radius:12px;
    padding:18px 22px; max-width:420px; width:100%;
    color:#CDD6F4; box-shadow:0 8px 32px #000000aa; position:relative;
}
.lk-pp-list { display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; }
.lk-pp-item {
    display:flex; justify-content:space-between; align-items:center;
    background:#11111B; border:1px solid #31324480; border-radius:8px;
    padding:8px 12px; cursor:pointer; color:#CDD6F4;
    font-family:inherit; text-align:left; width:100%;
}
.lk-pp-item:hover { background:#313244; border-color:#CBA6F7; }
.lk-pp-item.lk-pp-added { border-color:#A6E3A1; }
.lk-pp-cnt { color:#7f849c; font-size:0.78em; }
.lk-pp-create { margin-top:12px; display:flex; gap:6px; }
.lk-pp-create input {
    flex:1; background:#11111B; color:#CDD6F4;
    border:1px solid #45475980; border-radius:14px; padding:6px 12px; font-family:inherit;
}
.lk-pp-create button {
    background:#CBA6F7; color:#11111B; border:none; border-radius:14px;
    padding:6px 14px; font-weight:600; cursor:pointer; font-family:inherit;
}

/* Comment textarea: respect padding, no resize horizontal */
.lk-modal-card #lb-cform textarea {
    box-sizing:border-box !important;
    max-width:100% !important;
    resize:vertical !important;
}

/* Avatar variants (mini already in panel.css) */
.avatar-card {
    width:32px; height:32px;
    min-width:32px; max-width:32px;
    min-height:32px; max-height:32px;
    border-radius:50%; object-fit:cover; background:#11111B;
    border:1px solid #31324480; vertical-align:middle;
    display:inline-flex; align-items:center; justify-content:center;
}
.avatar-card.empty { background:#313244; font-size:1em; }
.avatar-big {
    width:64px; height:64px; border-radius:50%; object-fit:cover;
    background:#11111B; border:2px solid #45475980;
    display:inline-flex; align-items:center; justify-content:center; font-size:1.6em;
}
.avatar-big.empty { background:#313244; }

/* Identity row used on welcome / cards */
.sp-id {
    display:inline-flex; align-items:center; gap:8px;
    text-decoration:none; color:#CDD6F4;
    background:transparent;
    padding:2px 6px; border-radius:8px;
}
.sp-id:hover { background:#1E1E2E; }
.sp-id .sp-id-meta { display:flex; flex-direction:column; line-height:1.15em; }
.sp-id .sp-id-name { font-size:1em; color:#CBA6F7; font-weight:600; }
.sp-id .sp-id-handle { font-size:0.78em; color:#7f849c; }

/* Big avatar placeholder shows the 🤷‍♂️ emoji */
.profile-avatar-empty {
    display:none;
    align-items:center; justify-content:center;
    font-size:2.4em;
    color:#7f849c;
}

/* Liked state: red heart + pink background */
.lk-act.lk-liked {
    background:#F38BA833; color:#F38BA8; border-color:#F38BA8;
}

/* HR badge below media */
.lk-hr-tag {
    display:inline-block; margin-top:6px;
    background:#F38BA8; color:#11111B;
    padding:2px 10px; border-radius:10px;
    font-size:0.78em; font-weight:700;
}
.lk-act.lk-hr {
    background:#F38BA8; color:#11111B; border-color:#F38BA8;
    font-weight:700;
}

/* Gallery card: HR badge in corner */
.mg-card .mg-hr-badge {
    position:absolute; bottom:8px; right:8px;
    background:#F38BA8; color:#11111B;
    padding:2px 8px; border-radius:10px;
    font-size:0.7em; font-weight:700;
    pointer-events:none;
}
.mg-card { position:relative; }

/* Liked heart on gallery card */
.mg-card .mg-liked-mark {
    position:absolute; top:8px; right:8px;
    color:#F38BA8;
    font-size:1.4em;
    text-shadow:0 0 4px #11111B, 0 0 4px #11111B;
    pointer-events:none;
}