/* ════════════════════════════════════════════════════════════════
   profile.css — shared by home, about and play.
   The full "ALAA" sidebar: draggable letter blocks + reset button,
   bio, credit line, and numbered Sections/Links nav.
   ════════════════════════════════════════════════════════════════ */

.sidebar-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  height: 28px;
}
.sidebar-name svg {
  height: 28px;
  width: auto;
  display: block;
}

/* ── Draggable ALAA blocks — pick up and place anywhere on the
   page. Each starts inline (reading "ALAA"); on first grab it
   detaches to position:fixed so it can be dropped anywhere,
   independent of page scroll/layout. ── */
.alaa-letter {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 150ms, transform 150ms;
}
/* Resting layout: the blocks step up like a staircase, so they read as
   loose pieces you can pick up rather than a fixed logo. Offsets use
   relative positioning, which the drag script replaces with
   position:fixed while a letter is moved (and clears on reset). */
.alaa-letter { position: relative; }
.alaa-letter[data-letter="l"]  { left: 2px;   top: -9px; }
.alaa-letter[data-letter="a2"] { left: -5px;  top: -22px; }
.alaa-letter[data-letter="a3"] { left: -12px; top: -40px; }
/* After a reset the staircase is dropped: letters sit in a plain row. */
.sidebar-name.is-flat .alaa-letter { left: 0; top: 0; }
.alaa-letter.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
  transform: scale(1.08) rotate(-3deg);
  z-index: 9999;
}

/* Always visible (light grey) so it's clear the letters can be moved
   and put back. Click straightens them into a plain "ALAA" row. */
.alaa-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-left: auto;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #c8c8c8;
  transition: color 150ms, transform 300ms;
}
.alaa-reset:hover { color: var(--text-muted); }
.alaa-reset:active { transform: rotate(-90deg); }
.sidebar-bio {
  font-family: "Geist Sans", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.sidebar-bio + .sidebar-credit {
  margin-top: 5px;
  margin-bottom: 28px;
}
.sidebar-divider { margin: 12px 0 20px; }
.sidebar-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  margin: 0 -10px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 150ms, color 150ms;
}
.sidebar-nav-item:hover {
  background: var(--ink);
  color: var(--paper);
}
.sidebar-nav-num {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 10px;
  transition: color 150ms;
}
.sidebar-nav-item:hover .sidebar-nav-num {
  color: var(--paper);
  opacity: 0.7;
}
.sidebar-nav-item span.label { flex: 1; }
.sidebar-nav-item svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 150ms;
}
.sidebar-nav-item:hover svg { opacity: 1; }

/* Desktop: credit sits under the chat avatar at the bottom of the
   sidebar. Mobile: the avatar floats bottom-right, so the credit
   stays under the bio instead (see the 900px media query). */
.sidebar-credit--bio { display: none; }
.sidebar-footer .chat-trigger-wrap {
  margin-bottom: 0;
  display: flex;
}
.sidebar-credit--footer {
  margin-top: 10px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .sidebar-footer { margin-top: 24px; }
  .sidebar-credit--bio { display: block; }
  .sidebar-credit--footer { display: none; }
}