/* =========================================================
   Stroon Profile Sidebar (stroon-profile-sidebar)
   - Used on EVERY front-end page (logged-in)
   - PeepSo-based profile + Community + AI Playground + History
   - Version: framed sections, fixed column on desktop
   ========================================================= */

/* Sidebar layout vars */
:root {
  --stroon-sidebar-left: 18px;   /* distance from window left */
  --stroon-sidebar-width: 245px; /* static column width */
  --stroon-sidebar-gap: 0px;     /* free gap between sidebar and content */
}

/* Container on desktop: fixed left panel */
.stroon-profile-sidebar {
  position: fixed;
  top: 86px;                        /* under the header */
  left: var(--stroon-sidebar-left);
  width: var(--stroon-sidebar-width);
  max-height: calc(100vh - 96px);
  z-index: 2200;
  pointer-events: auto;
  overflow: hidden;
  max-width: 100vw;
}

/* Inner panel — vertical scroll only, no horizontal scroll */
.stroon-profile-sidebar .sps-inner {
  background: transparent;          /* no background panel */
  border-radius: 0;
  padding: 10px 0 12px;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  color: #e5e7ff;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;               /* IMPORTANT: no left-right scroll */
}

/* ---------------- HEADER: avatar + meta ---------------- */

.sps-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0;
}

.sps-head .sps-head-row {
  display: flex;
  align-items: center;
  gap: 0px; /* name very close to avatar */
}

/* Avatar: 25% bigger than original (27px → ~34px) */
.sps-head .ava {
  flex: 0 0 34px;
  max-width: 34px;
}

.sps-head .ava img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: block;
}

/* Meta from PeepSo */
.sps-head .meta {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -70px; /* tuning to pull name left */
  padding-left: 0;
}

.sps-head .psw-profile__title {
  margin: 0 0 3px;
}

.sps-head .psw-profile__title a,
.sps-head .ps-profile__title a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 15px;  /* bump to 16–17px if you want a bit bigger */
  color: #f9fafb;
  text-decoration: none;
  white-space: nowrap;
}

.sps-head .psw-profile__title a:hover,
.sps-head .ps-profile__title a:hover {
  text-decoration: underline;
}

/* Hide VIP badges / extra icons in the small header */
.sps-head .psw-profile__title img.ps-vip__icon,
.sps-head .psw-profile__title [class*="vip"],
.sps-head .psw-profile__title [class*="badge"],
.sps-head .ps-profile__title img.ps-vip__icon,
.sps-head .ps-profile__title [class*="vip"],
.sps-head .ps-profile__title [class*="badge"] {
  display: none !important;
}

.sps-head .pso-notifs {
  margin-top: 3px;
}

/* ---------------- NAV GROUPS (My Profile, Community, AI Playground) ---------------- */

.sps-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Group containers — purple-ish panel with subtle frame */
.sps-nav-group {
  border-radius: 10px;
  background: radial-gradient(circle at top left,
    #261148 0,
    #0b061c 55%,
    #04010b 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  padding: 4px 8px 6px;
}

/* Group header: same font size as list, uppercase */
.sps-nav-group .grp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 4px;
  cursor: pointer;
}

.sps-nav-group .grp-head .lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;                  /* one step bigger */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cbd5ff;
}

.sps-nav-group .grp-head .lbl .ico {
  width: 20px;
  text-align: center;
}

/* Section icons (FontAwesome / PeepSo) */
.sps-nav-group .grp-head .lbl i {
  font-size: 14px;
  line-height: 1;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro",
               "FontAwesome", "PeepSoIcons", sans-serif;
  font-weight: 900;
}

.sps-nav-group .grp-head i.chev {
  font-size: 11px;
  opacity: 0.7;
  transition: transform 0.15s;
}

.sps-nav-group.open .grp-head i.chev {
  transform: rotate(90deg);
}

.sps-nav-group ul {
  list-style: none;
  margin: 0;
  padding: 2px 0 2px;
  display: none;
}

.sps-nav-group.open ul {
  display: block;
}

.sps-nav-group li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: #e5e7ff;
  text-decoration: none;
}

/* Subtle hover */
.sps-nav-group li a:hover {
  background: rgba(15, 23, 42, 0.95);
  text-decoration: underline;
}

.sps-nav-group li .ico {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
}

.sps-nav-group li .ico i {
  font-size: 14px;
  line-height: 1;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro",
               "FontAwesome", "PeepSoIcons", sans-serif;
  font-weight: 900;
}

.sps-nav-group li .lbl {
  flex: 1 1 auto;
}

/* Cup icon for Rool Achievements (SVG forced white) */
.sps-ico-cup {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('https://stroon.uk/wp-content/uploads/2025/06/halloffame.svg') no-repeat center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ---------------- HISTORY ---------------- */

.sps-history {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* HISTORY + Empty button row */
.sps-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}

.sps-history h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfd7ff;
}

/* "Empty" history button – matches JS class .sps-history-clear */
.sps-history-clear {
  border: 0;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 999px;
  padding: 2px 8px 3px;
  font-size: 10px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9ca3ff;
  cursor: pointer;
}

.sps-history-clear i {
  font-size: 10px;
  line-height: 1;
}

.sps-history-clear:hover:not(:disabled) {
  background: rgba(31, 41, 77, 0.9);
  color: #e5e7ff;
}

.sps-history-clear:disabled {
  opacity: 0.4;
  cursor: default;
}

.sps-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
}

/* Row container (anchor) */
.sps-history-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 20px 3px 0; /* space on right for delete button */
  border-radius: 0;
  text-decoration: none;
  color: #e5e7ff;
}

.sps-history-item:hover {
  text-decoration: underline;
  background: transparent;
}

/* Icon/avatar column */
.sps-history-item .ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
}

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

.sps-history-item .ico i {
  font-size: 13px;
  color: #e5e7ff;
  line-height: 1;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro",
               "FontAwesome", "PeepSoIcons", sans-serif;
  font-weight: 900;
}

/* Main meta */
.sps-history-item .meta {
  flex: 1 1 auto;
  min-width: 0;
}

.sps-history-item .ttl {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sps-history-item .url {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-item delete button (small X at right) */
.sps-history-item .sps-history-del {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0 2px;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  color: #9ca3ff;
  cursor: pointer;
}

.sps-history-item .sps-history-del:hover {
  color: #fca5a5;
}

/* Empty state */
.sps-history-empty {
  font-size: 12px;
  opacity: 0.75;
  padding: 4px 2px 0;
}

/* Load more button */
.sps-history-more {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 11px;
  color: #9ca3ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sps-history-more i {
  font-size: 10px;
  line-height: 1;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro",
               "FontAwesome", "PeepSoIcons", sans-serif;
  font-weight: 900;
}

.sps-history-more:hover {
  background: transparent;
  color: #c4ccff;
}

/* ---------------- FANCY CONFIRM POPUP FOR HISTORY DELETE / CLEAR ---------------- */

.sps-hist-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
}

.sps-hist-confirm-backdrop.show {
  display: flex;
}

.sps-hist-confirm {
  background: radial-gradient(circle at top left, #111827 0, #020617 65%);
  border-radius: 14px;
  padding: 12px 14px 10px;
  border: 1px solid rgba(148, 163, 255, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  max-width: 280px;
  width: 90%;
  color: #e5e7ff;
  font-size: 13px;
}

.sps-hist-confirm-text {
  margin: 2px 0 8px;
}

.sps-hist-confirm-buttons {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sps-hist-btn {
  border-radius: 999px;
  padding: 3px 10px 4px;
  border: 0;
  font-size: 11px;
  cursor: pointer;
}

.sps-hist-btn-cancel {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7ff;
}

.sps-hist-btn-cancel:hover {
  background: rgba(30, 64, 175, 0.75);
}

.sps-hist-btn-danger {
  background: #b91c1c;
  color: #f9fafb;
}

.sps-hist-btn-danger:hover {
  background: #dc2626;
}

/* Slight shrink between 1550 and 1381 */
@media (max-width: 1550px) and (min-width: 1381px) {
  :root {
    --stroon-sidebar-width: 220px; /* was 245px */
  }
}

@media (max-width: 1550px) and (min-width: 1381px) {
  .sps-head .psw-profile__title a,
  .sps-head .ps-profile__title a {
    font-size: 13px;
    gap:16px;
  }
}

/* Super-thin icons-only sidebar between 1380 and 1121 */
@media (max-width: 1380px) and (min-width: 1121px) {
  :root {
    --stroon-sidebar-width: 140px; /* thin column */
  }

  /* Hide top meta (name + surname) so only avatar shows */
  .sps-head .meta {
    display: none;
  }
}


/* ---------------- DESKTOP: treat sidebar as a real column ---------------- */

@media (min-width: 1120px) {
  /* Default: all logged-in pages (e.g. Image Tools, Achievements, etc.) */
  body.logged-in {
    padding-left: calc(
      var(--stroon-sidebar-left) + var(--stroon-sidebar-width) + var(--stroon-sidebar-gap)
    );
  }

  /* PeepSo / Gecko activity & profile pages: medium gap */
  body.logged-in[class*="peepso"],
  body.logged-in[class*="ps-page--stream"],
  body.logged-in[class*="ps-page--profile"] {
    padding-left: 140px;
  }
}

/* Between 1550 and 1120: shrink sidebar a bit with text */
@media (max-width: 1550px) and (min-width: 1121px) {
  :root {
    --stroon-sidebar-left: 12px;
    --stroon-sidebar-width: 220px;
  }

  .sps-nav-group .grp-head .lbl {
    font-size: 13px;
  }

  .sps-nav-group li a {
    font-size: 13px;
  }
}

/* Between 1380 and 1120: SUPER-thin, icons-only (nav + history) */
@media (max-width: 1380px) and (min-width: 1121px) {
  :root {
    --stroon-sidebar-left: 8px;
    --stroon-sidebar-width: 140px;  /* thinner sidebar */
  }

  /* NAV: hide text labels, keep icons only */
  .sps-nav-group .grp-head .lbl span:last-child,
  .sps-nav-group li .lbl {
    display: none;
  }

  .sps-nav-group .grp-head .lbl {
    gap: 0;
    justify-content: flex-start;
  }

  .sps-nav-group {
    padding: 3px 6px 4px;
    margin: 0 2px;
  }

  /* HISTORY: icons-only (avatars), aligned left under the icon column */

  .sps-history-header h4 {
    display: none;
  }

  .sps-history-clear span {
    display: none;
  }

  .sps-history-clear {
    padding: 2px;
    min-width: auto;
  }

  .sps-history-item {
    justify-content: flex-start;
    padding: 3px 4px;
    gap: 4px;
  }

  .sps-history-item .meta {
    display: none;
  }

  .sps-history-item .sps-history-del {
    display: none;
  }

  .sps-history-list {
    align-items: flex-start;
  }

  .sps-history-more span {
    display: none;
  }

  .sps-history-more {
    padding: 2px 4px;
  }
}


/* ---------------- MOBILE / TABLET: sidebar drawer ---------------- */

@media (max-width: 1120px) {
  .stroon-profile-sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    max-height: 100vh;

    /* dark, slightly transparent background + subtle shadow and border */
    background: radial-gradient(circle at top left,
      rgba(32, 23, 60, 0.97) 0,
      rgba(15, 23, 42, 0.96) 55%,
      rgba(3, 4, 12, 0.94) 100%);
    border-right: 1px solid rgba(148, 163, 255, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);

    padding: 12px 16px 16px;
    display: none;                    /* hidden until body.sps-open */
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.sps-open .stroon-profile-sidebar {
    display: block;
  }

  /* Dark overlay behind so the central content becomes dimmer */
  body.sps-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2190;
  }

  /* On mobile we do not push the whole page to the right */
  body.logged-in {
    padding-left: 0;
  }
}

/* ---------------- HIDE ORIGINAL PEEPSO LEFT SIDEBAR ---------------- */

/* We no longer want the built-in Gecko/PeepSo left column at all. */

.psw-sidebar.psw-sidebar--left,
.psw-layout__sidebar--left,
.ps-container__sidebar--left,
.ps-sidebar--left,
.psw-sidebar-left {
  display: none !important;
}

/* Hide original Gecko / PeepSo left sidebar.
   We still use its HTML internally in the Stroon profile module. */
#sidebar-left,
.sidebar.sidebar--left {
  display: none !important;
}