/* =========================================================
   KRUZIFIX UI v0.28 — ACCOUNT UPGRADES + SOCIAL LAYER
   ========================================================= */

@keyframes kruzifix-upgrades-pink-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255,111,174,.35), 0 0 9px rgba(255,111,174,.12); }
    50% { text-shadow: 0 0 6px rgba(255,111,174,.9), 0 0 15px rgba(255,111,174,.35); }
}

/* ---------- ACCOUNT UPGRADES NAV ---------- */
.account-upgrades-link {
    color: #ff6fae !important;
    font-weight: 900 !important;
    letter-spacing: .7px;
    animation: kruzifix-upgrades-pink-glow 2.7s ease-in-out infinite;
}

.account-upgrades-link:hover,
.account-upgrades-link.sidebar-current {
    color: #ff9bc7 !important;
    background-color: #090105 !important;
}

.account-upgrades-heading {
    color: #ff6fae !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px;
    text-shadow: 0 0 5px rgba(255,111,174,.75), 0 0 13px rgba(255,111,174,.24);
    animation: kruzifix-upgrades-pink-glow 2.7s ease-in-out infinite;
}

.upgrade-current-strip,
.group-limit-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(115px,1fr));
    gap: 5px;
    margin: 0 0 10px;
}

.upgrade-current-strip > span,
.group-limit-strip > span {
    padding: 7px 8px;
    border: 1px solid #282828;
    border-left: 2px solid #7d2853;
    background: #020102;
    color: #aaa;
    font-size: 10px;
}

.upgrade-current-strip strong,
.group-limit-strip strong {
    display: block;
    margin-bottom: 2px;
    color: #6a3b53;
    font-size: 8px;
    letter-spacing: .7px;
}

.upgrade-intro {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #2c1b24;
    border-left: 3px solid #a93670;
    background: #050104;
    color: #8f7884;
    font-size: 11px;
    line-height: 1.5;
}

.upgrade-tier-list {
    display: grid;
    gap: 7px;
}

.upgrade-tier {
    padding: 10px 11px;
    border: 1px solid #272727;
    border-left: 3px solid #4a2437;
    background: #010101;
}

.upgrade-tier.upgrade-owned {
    border-left-color: #ff6fae;
    box-shadow: inset 0 0 18px rgba(255,111,174,.035);
}

.upgrade-tier h2 {
    margin: 0 0 5px;
    color: #d05c90;
    font-size: 17px;
    font-weight: 900;
}

.upgrade-tier ul {
    margin: 6px 0 0 20px;
    padding: 0;
    color: #8b8b8b;
    font-size: 11px;
    line-height: 1.55;
}

.upgrade-tier strong { color: #bbb; }
.upgrade-requirement { margin: 0; color: #6d4054; font-size: 9px; font-weight: 900; letter-spacing: .6px; }
.upgrade-vip { border-left-color: #7cdcff; }
.upgrade-vip h2 { color: #a8edff; }
.upgrade-staff-note { border-left-color: #805f19; }

/* ---------- SHARED SOCIAL UI ---------- */
.social-quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 8px;
    padding: 6px 7px;
    border: 1px solid #282828;
    border-left: 3px solid #5a1c41;
    background: #010101;
}

.social-quick-nav a {
    padding: 4px 7px;
    border: 1px solid #252525;
    background: #020202;
    color: #777 !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .55px;
    text-decoration: none !important;
}

.social-quick-nav a:hover { border-color: #7a2858; color: #ccc !important; }

.social-panel {
    margin: 0 0 7px;
    border: 1px solid #282828;
    border-left: 3px solid #393939;
    background: #010101;
}

.social-panel[open] { border-left-color: #792855; }
.social-panel.compact { margin-top: 9px; }

.social-panel > summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 7px 30px 7px 9px;
    list-style: none;
    cursor: pointer;
    background: #020202;
}

.social-panel > summary::-webkit-details-marker { display:none; }
.social-panel > summary::after { content:'+'; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#9b3e6d; font-size:14px; font-weight:900; }
.social-panel[open] > summary::after { content:'−'; }
.social-panel > summary > span { color:#aaa; font-size:10px; font-weight:900; letter-spacing:.7px; }
.social-panel > summary > small { color:#505050; font-size:8px; text-align:right; }
.social-panel-body { padding:8px; border-top:1px solid #242424; }

/* ---------- FRIENDS ---------- */
.friend-list { display:grid; gap:5px; }
.friend-row,
.friend-request-row,
.friend-search-row,
.pm-friend-row,
.group-invite-row {
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 8px;
    border:1px solid #252525;
    background:#010101;
}

.friend-main { flex:1; min-width:0; }
.friend-main p,
.friend-request-row p,
.friend-search-row p,
.pm-friend-row p { margin:0 0 4px; }

.friend-avatar {
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:1px solid #343434;
    background:#000;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-actions { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.friend-actions a,
.friend-actions button,
.pm-friend-message-link { font-size:9px; font-weight:900; }
.friend-actions form { margin:0; }

.friend-presence { margin-left:6px; font-size:8px; font-weight:900; letter-spacing:.55px; }
.friend-presence.online { color:#55bb66; text-shadow:0 0 5px rgba(85,187,102,.28); }
.friend-presence.offline { color:#555; }

.social-search-form,
.group-create-form,
.group-message-compose { display:grid; gap:7px; }
.social-search-form { grid-template-columns:minmax(0,320px) auto; justify-content:start; }

/* ---------- PRIVACY SETTINGS ---------- */
.profile-privacy-controls {
    margin-top:8px;
    padding-top:8px;
    border-top:1px dotted #292929;
}

.privacy-toggle-row { display:flex !important; gap:7px; align-items:flex-start; margin-bottom:10px !important; }
.privacy-toggle-row input { margin-top:2px; }

.message-color-swatches { display:flex; flex-wrap:wrap; gap:5px; }
.message-color-swatches span { padding:3px 6px; border:1px solid #292929; background:#010101; font-size:9px; font-weight:900; }
.swatch-green { color:#55BB66; }
.swatch-blue { color:#5CA9FF; }
.swatch-red { color:#E05A5A; }
.swatch-purple { color:#B071FF; }

/* ---------- PROFILE COMMENTS ---------- */
.profile-comment-form { display:grid; gap:6px; margin-bottom:8px; }
.profile-comment-form textarea { width:100%; box-sizing:border-box; background:#000; color:#aaa; border:1px solid #393939; font-family:"Times New Roman",serif; padding:7px; resize:vertical; }
.profile-comments-list { display:grid; gap:5px; }
.profile-comment { position:relative; padding:7px 8px; border:1px solid #252525; background:#010101; }
.profile-comment header { margin-bottom:5px; font-size:9px; }
.profile-comment header > span:last-child { color:#505050; margin-left:5px; }
.profile-comment-body { font-size:11px; line-height:1.48; }
.profile-comment-delete { margin:5px 0 0; }
.profile-comment-delete button { padding:2px 5px; font-size:8px; }

/* ---------- GROUP CHATS ---------- */
.group-privacy-notice {
    margin:0 0 9px;
    padding:8px 10px;
    border:1px solid #25302c;
    border-left:3px solid #376b59;
    background:#010403;
    color:#76867f;
    font-size:10px;
    line-height:1.48;
}
.group-privacy-notice strong { color:#7fb29d; letter-spacing:.65px; }
.group-privacy-notice p { margin:4px 0 0; }
.group-privacy-notice.compact { padding:6px 8px; }

.group-chat-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:5px;
    padding:7px 8px;
    border:1px solid #252525;
    background:#010101;
    text-decoration:none !important;
}
.group-chat-row strong { color:#aaa; }
.group-chat-row span { color:#555; font-size:9px; text-align:right; }
.group-chat-row:hover { border-color:#6d2850; background:#040103; }

.group-create-form label { display:grid; gap:4px; color:#777; font-size:9px; font-weight:900; }
.group-create-form input,
.group-create-form textarea,
.group-message-compose textarea { box-sizing:border-box; width:100%; background:#000; color:#aaa; border:1px solid #393939; padding:7px; font-family:"Times New Roman",serif; }

.group-chat-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:8px; align-items:start; }
.group-message-log { max-height:62vh; overflow:auto; padding:6px; border:1px solid #292929; background:#000; }
.group-message { margin-bottom:6px; padding:7px 8px; border:1px solid #222; background:#010101; }
.group-message-meta { margin:0 0 4px; font-size:9px; }
.group-message-meta > span:last-child { color:#4f4f4f; margin-left:5px; }
.group-message-body { font-size:11px; line-height:1.5; }
.group-message-compose { margin-top:6px; grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.group-member-column { padding:8px; border:1px solid #292929; background:#010101; }
.group-member-column h2 { margin-top:0; font-size:12px; }
.group-member-row { margin:0 0 5px; padding:5px 6px; border:1px solid #222; background:#000; }
.group-member-row small { display:block; color:#505050; font-size:8px; }
.danger-button { border-color:#6d2222 !important; color:#c45c5c !important; }

/* ---------- MESSAGES / FRIEND TAB ---------- */
.pm-friends-list { display:grid; gap:5px; max-width:680px; }
.pm-friend-row .pm-entry-avatar { flex:0 0 auto; }

@media (max-width:800px) {
    .group-chat-layout { grid-template-columns:1fr; }
    .group-member-column { order:-1; }
    .social-panel > summary { grid-template-columns:1fr; gap:2px; }
    .social-panel > summary > small { text-align:left; }
}

@media (max-width:560px) {
    .social-search-form,
    .group-message-compose { grid-template-columns:1fr; }
    .group-chat-row { flex-direction:column; }
    .group-chat-row span { text-align:left; }
}

/* Keep social directories compact on large accounts. */
.friend-list,
.pm-friends-list {
    max-height: 62vh;
    overflow: auto;
    padding-right: 3px;
}


/* ---------- v0.28.1 LONG INVITATION CODES ---------- */

.invite-code,
.invite-code-value,
.generated-invite-area .invite-code {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    font-size: 10px;
    letter-spacing: .35px;
    line-height: 1.45;
}