/* ─────────────────────────────────────────────────────────
   TwitterScore.io · Vertical sidebar prototype
   ─────────────────────────────────────────────────────────*/
:root {
  --sb-w-expanded: 264px;
  --sb-w-collapsed: 76px;
  --sb-w: var(--sb-w-expanded);
  --sb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sb-dur: 220ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #fff;
  color: var(--ts-fg-1);
  font-family: var(--ts-font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ts-border); border-radius: 999px; }

/* ── App layout ─────────────────────────────────────────── */
.app {
  --pad: 18px;
  min-height: 100vh;
  position: relative;
}

/* The sidebar floats over content (overlay). When the user
   picks "Push content" via tweaks, we add a margin to main. */
.app.layout-push .main { margin-left: var(--sb-w); transition: margin-left var(--sb-dur) var(--sb-ease); }
.app.layout-push.is-collapsed .main { margin-left: var(--sb-w-collapsed); }
.app.layout-overlay .main { margin-left: 0; }

.main {
  min-height: 100vh;
  position: relative;
}

/* ── Sidebar shell ──────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 14px;
  left: 14px;
  bottom: 14px;
  width: var(--sb-w-expanded);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(16, 16, 20, .10), 0 2px 6px rgba(16, 16, 20, .04);
  z-index: 20;
  overflow: hidden;
  font-feature-settings: "tnum";
  transition: width 220ms var(--sb-ease);
}
.sidebar.is-collapsed { width: var(--sb-w-collapsed); }
.sidebar.is-hover-expanded { width: var(--sb-w-expanded); box-shadow: 0 16px 42px rgba(16, 16, 20, .18), 0 2px 6px rgba(16, 16, 20, .04); }

/* Dark theme variant */
.sidebar.theme-dark {
  background: var(--ts-bg-ink);
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
.sidebar.theme-dark .sb-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.78); }
.sidebar.theme-dark .sb-search-label { color: rgba(255,255,255,.55); }
.sidebar.theme-dark .sb-search-kbd { background: rgba(255,255,255,.10); color: rgba(255,255,255,.65); border-color: transparent; }
.sidebar.theme-dark .nav-item { color: rgba(255,255,255,.74); }
.sidebar.theme-dark .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar.theme-dark .nav-item.is-active { background: rgba(5,68,253,.22); color: #fff; }
.sidebar.theme-dark .nav-item.is-active .nav-icon { color: var(--ts-brand-soft); }
.sidebar.theme-dark .sb-nav-divider { color: rgba(255,255,255,.4); }
.sidebar.theme-dark .sb-nav-divider::before { background: rgba(255,255,255,.10); }
.sidebar.theme-dark .sb-brand-lockup { content: url("assets/logo-lockup-white.png"); }
.sidebar.theme-dark .sb-brand-mark-only { content: url("assets/logo-mark-white.png"); }
.sidebar.theme-dark .sb-auth-login { background: rgba(255,255,255,.06); color: #fff; }
.sidebar.theme-dark .sb-auth-login:hover { background: rgba(255,255,255,.10); }
.sidebar.theme-dark .sb-community-label { color: rgba(255,255,255,.55); }
.sidebar.theme-dark .sb-community-icons a { color: rgba(255,255,255,.7); }
.sidebar.theme-dark .sb-community-icons a:hover { color: #fff; }
.sidebar.theme-dark .sb-footer { border-color: rgba(255,255,255,.08); }

/* ── Header (logo lockup, fixed) ────────────────────────── */
.sb-header {
  display: flex;
  align-items: center;
  padding: 18px 18px 14px;
  height: 76px;
  flex-shrink: 0;
  overflow: hidden;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.sb-brand-mark {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
.sb-brand-wordmark {
  font-family: var(--ts-font-brand);
  font-weight: 700;
  font-size: 19px;
  color: var(--ts-fg-1);
  letter-spacing: -.3px;
  white-space: nowrap;
  transition: opacity 160ms var(--sb-ease);
}
.sb-brand-wordmark b { color: var(--ts-brand); font-weight: 700; }
.sb-brand-tld { color: var(--ts-fg-5); font-weight: 400; }
.sidebar.is-collapsed .sb-brand-wordmark { opacity: 0; }

/* Padding stays the same in collapsed so the mark doesn't move */
.sidebar.is-collapsed .sb-header { padding: 18px 18px 14px; }

/* ── Collapse/expand button — bigger, brand-tinted, prominently
   bulges out from the sidebar's right edge so it's obviously
   tappable. Inside the sidebar visually when expanded, sticks
   out further (and turns brand blue) when collapsed. ────────── */
.sb-collapse-floating {
  position: fixed;
  top: 50px;
  left: calc(14px + var(--sb-w-expanded) - 18px);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ts-border);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ts-brand);
  cursor: pointer;
  z-index: 22;
  box-shadow: 0 4px 12px rgba(16, 16, 20, .12), 0 1px 3px rgba(16, 16, 20, .06);
  transition:
    left 220ms var(--sb-ease),
    background var(--sb-dur) var(--sb-ease),
    color var(--sb-dur) var(--sb-ease),
    box-shadow var(--sb-dur) var(--sb-ease),
    transform var(--sb-dur) var(--sb-ease);
}
.sb-collapse-floating:hover {
  background: var(--ts-brand);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(5, 68, 253, .35);
}
.sb-collapse-floating svg { width: 18px; height: 18px; }

/* Collapsed: bulges further out, painted brand blue so it reads as
   "expand me". */
.sb-collapse-floating.is-collapsed {
  left: calc(14px + var(--sb-w-collapsed) - 14px);
  background: var(--ts-brand);
  color: #fff;
  border-color: var(--ts-brand);
  box-shadow: 0 6px 16px rgba(5, 68, 253, .35), 0 0 0 4px rgba(5, 68, 253, .12);
}
.sb-collapse-floating.is-collapsed:hover {
  background: var(--ts-brand-bright);
  border-color: var(--ts-brand-bright);
}

/* Dark theme adjustments */
.sidebar.theme-dark .sb-brand-wordmark { color: #fff; }
.sidebar.theme-dark .sb-brand-tld { color: rgba(255,255,255,.55); }
.sidebar.theme-dark + .sb-collapse-floating,
.sidebar.theme-dark.is-collapsed + .sb-collapse-floating {
  background: var(--ts-bg-ink-2);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.7);
}
.sidebar.theme-dark + .sb-collapse-floating:hover { background: var(--ts-bg-ink-3); color: var(--ts-brand-soft); }

/* ── Search ─────────────────────────────────────────────── */
.sb-search-wrap { padding: 4px 14px 10px; }
.sb-search {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ts-border);
  background: var(--ts-bg-elev);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--ts-fg-4);
  cursor: pointer;
  transition: background var(--sb-dur) var(--sb-ease);
  overflow: hidden;
}
.sb-search:hover { background: #ECEDF1; }
.sb-search-icon { display: grid; place-items: center; flex-shrink: 0; }
.sb-search-icon svg { width: 17px; height: 17px; }
.sb-search-label {
  flex: 1;
  font-size: 13px;
  font-family: var(--ts-font-body);
  color: var(--ts-fg-5);
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  transition: opacity 160ms var(--sb-ease);
}
.sb-search-kbd {
  font-size: 11px;
  font-family: var(--ts-font-mono);
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--ts-fg-5);
  flex-shrink: 0;
  transition: opacity 160ms var(--sb-ease);
}
.sidebar.is-collapsed .sb-search-label,
.sidebar.is-collapsed .sb-search-kbd { opacity: 0; width: 0; padding: 0; border: 0; }
.sidebar.is-collapsed .sb-search { padding: 0; justify-content: center; }

/* ── Nav ────────────────────────────────────────────────── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-nav-group { display: flex; flex-direction: column; gap: 2px; }
.sb-nav-divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ts-fg-5);
  white-space: nowrap;
}
.sb-nav-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ts-border-soft);
}
.sidebar.is-collapsed .sb-nav-divider { padding: 14px 4px 6px; justify-content: center; }
.sidebar.is-collapsed .sb-nav-divider span { display: none; }
.sidebar.is-collapsed .sb-nav-divider::after { flex: 0; width: 24px; }

/* ── Nav item ───────────────────────────────────────────── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-fg-3);
  cursor: pointer;
  transition: background 120ms var(--sb-ease), color 120ms var(--sb-ease);
  min-height: 40px;
  white-space: nowrap;
}
.nav-item:hover { background: var(--ts-bg-elev); color: var(--ts-fg-1); }
.nav-item.is-active {
  background: rgba(5, 68, 253, .08);
  color: var(--ts-brand);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ts-brand);
}
.nav-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: currentColor;
}
.nav-icon svg { width: 20px; height: 20px; }
.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 160ms var(--sb-ease);
}
.nav-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--ts-fg-1);
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.nav-item.is-active .nav-badge { background: var(--ts-brand); }
.nav-badge-dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ts-brand);
  box-shadow: 0 0 0 2px #fff;
}
.sidebar.theme-dark .nav-badge-dot { box-shadow: 0 0 0 2px var(--ts-bg-ink); }

/* Collapsed nav item — icons stay anchored to the same left padding;
   labels and badges fade out smoothly as the sidebar narrows. */
.sidebar.is-collapsed .nav-item .nav-label,
.sidebar.is-collapsed .nav-item .nav-badge {
  opacity: 0;
  pointer-events: none;
}
.nav-item .nav-label,
.nav-item .nav-badge {
  transition: opacity 140ms var(--sb-ease);
}

/* Tooltip when collapsed */
.nav-tooltip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ts-fg-1);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(16,16,20,.18);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 100;
  animation: tooltip-in 140ms var(--sb-ease);
}
.nav-tooltip::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ts-fg-1);
  border-radius: 1px;
}
.nav-tooltip-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--ts-brand);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .06em;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translate(-4px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

/* ── Featured nav item: High Score Community ────────────── */
.sb-community-feature {
  margin: 0 12px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5,68,253,.08), rgba(97,80,241,.10));
  border: 1px solid rgba(5,68,253,.22);
  cursor: pointer;
  position: relative;
  transition: background var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease);
}
.sb-community-feature:hover {
  background: linear-gradient(135deg, rgba(5,68,253,.12), rgba(97,80,241,.16));
  transform: translateY(-1px);
}
.sb-community-feature.is-active {
  background: linear-gradient(135deg, rgba(5,68,253,.16), rgba(97,80,241,.22));
  border-color: rgba(5,68,253,.45);
}
.sb-cf-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ts-brand), var(--ts-purple));
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sb-cf-icon svg { width: 18px; height: 18px; }
.sb-cf-text { display: flex; flex-direction: column; min-width: 0; }
.sb-cf-title {
  font-family: var(--ts-font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: var(--ts-fg-1);
  letter-spacing: -.1px;
}
.sb-cf-sub {
  font-size: 11px;
  line-height: 14px;
  color: var(--ts-brand);
  font-weight: 500;
  margin-top: 2px;
}

/* Dark theme */
.sidebar.theme-dark .sb-community-feature {
  background: linear-gradient(135deg, rgba(5,68,253,.18), rgba(97,80,241,.20));
  border-color: rgba(81,136,255,.30);
}
.sidebar.theme-dark .sb-community-feature:hover {
  background: linear-gradient(135deg, rgba(5,68,253,.28), rgba(97,80,241,.30));
}
.sidebar.theme-dark .sb-cf-title { color: #fff; }
.sidebar.theme-dark .sb-cf-sub { color: var(--ts-brand-soft); }

/* Collapsed: text fades; the gradient icon stays in place. Card shrinks
   to a tidy square so it doesn't look squashed. */
.sidebar.is-collapsed .sb-community-feature .sb-cf-text { opacity: 0; pointer-events: none; display: none; }
.sidebar.is-collapsed .sb-community-feature {
  margin: 0 auto 10px;
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 14px;
}
.sb-community-feature .sb-cf-text { transition: opacity 140ms var(--sb-ease); }
.sb-footer {
  border-top: 1px solid var(--ts-border-soft);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-premium {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0544FD 0%, #1E57FD 55%, #6150F1 100%);
  color: #fff;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms var(--sb-ease), box-shadow 160ms var(--sb-ease);
}
.sb-premium:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(5, 68, 253, .35);
}
.sb-premium-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.35), transparent 50%);
  pointer-events: none;
}
.sb-premium-inner {
  position: relative;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
}
.sb-premium-icon {
  min-width: 42px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ts-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-indent: .12em;            /* compensate trailing letter-spacing */
}
.sb-premium-text { min-width: 0; }
.sb-premium-title {
  font-family: var(--ts-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.sb-premium-sub {
  font-size: 11px;
  line-height: 14px;
  color: rgba(255,255,255,.78);
  margin-top: 1px;
}
.sb-premium-cta {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  background: #fff;
  color: var(--ts-brand);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 0;
  transition: background var(--sb-dur) var(--sb-ease);
}
.sb-premium:hover .sb-premium-cta { background: #F2F3F6; }

.sb-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sb-auth-login, .sb-auth-signup {
  border: none;
  height: 36px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--sb-dur) var(--sb-ease);
}
.sb-auth-login { background: var(--ts-bg-elev); color: var(--ts-fg-1); }
.sb-auth-login:hover { background: #EBEBEB; }
.sb-auth-signup { background: var(--ts-brand); color: #fff; }
.sb-auth-signup:hover { background: var(--ts-brand-bright); }

.sb-community {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
}
.sb-community-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ts-fg-5);
  text-transform: uppercase;
}
.sb-community-icons { display: flex; gap: 6px; }
.sb-community-icons a {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ts-fg-4);
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-community-icons a:hover { background: var(--ts-bg-elev); color: var(--ts-brand); }
.sb-community-icons svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Collapsed footer: text/buttons hide so layout doesn't look squashed.
   PRO pill stays as the only element, community icons sit tidy. */
.sidebar.is-collapsed .sb-premium-text,
.sidebar.is-collapsed .sb-premium-cta,
.sidebar.is-collapsed .sb-community-label { display: none; }

.sidebar.is-collapsed .sb-footer { padding: 10px; gap: 10px; }

/* Premium card collapses to a tidy square gradient button with just the
   PRO pill — no extra padding, perfectly centered. */
.sidebar.is-collapsed .sb-premium {
  border-radius: 14px;
  height: 52px;
}
.sidebar.is-collapsed .sb-premium-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  padding: 0;
  gap: 0;
  height: 100%;
}
.sidebar.is-collapsed .sb-premium-icon {
  min-width: 44px;
  height: 24px;
  font-size: 12px;
}
.sidebar.is-collapsed .sb-community {
  justify-content: center;
  padding: 0;
}
.sidebar.is-collapsed .sb-community-icons {
  gap: 6px;
}
.sidebar.is-collapsed .sb-community-icons a {
  width: 30px;
  height: 30px;
  background: var(--ts-bg-elev);
}
.sidebar.theme-dark.is-collapsed .sb-community-icons a {
  background: rgba(255,255,255,.06);
}