/*
 * Application shell — sidebar, header, main, right rail, mobile tab bar and FAB.
 * Contract: specs/002-home-feed/contracts/ui-shell.md. DESIGN.md §4 Navigation, §8.
 * Mobile-first: single column with a fixed bottom tab bar; sidebar appears from 640px.
 */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "main";
  min-height: 100dvh;
  background-color: var(--color-night);
}

/* ---- Sidebar ---- */

.shell__sidebar {
  display: none;
  grid-area: sidebar;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-deep-night);
  border-right: 1px solid var(--color-border-subtle);
}

.shell__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.shell__brand:hover {
  text-decoration: none;
}

.shell__brand-mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.shell__brand-wordmark {
  display: block;
  width: auto;
  height: 22px;
}

.shell__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.shell__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-comment);
  text-decoration: none;
  border-radius: var(--radius-standard);
  transition: background-color 120ms ease, color 120ms ease;
}

.shell__nav-item:hover {
  color: var(--color-foreground);
  background-color: var(--color-card);
  text-decoration: none;
}

.shell__nav-item[aria-current="page"] {
  color: var(--color-foreground);
  font-weight: var(--weight-bold);
  background-color: var(--color-selection);
}

.shell__nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background-color: var(--color-purple);
}

.shell__nav-item .badge {
  margin-left: auto;
}

/* ---- Profile block (bottom of sidebar) ---- */

.profile-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-top: var(--space-4);
  border-radius: var(--radius-standard);
  background-color: var(--color-night);
}

.profile-block__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.profile-block__identity:hover {
  text-decoration: none;
}

.profile-block__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-block__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-block__mood {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-comment);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.profile-block__mood:hover {
  color: var(--color-foreground);
}

.profile-block__mood:focus-visible {
  outline: none;
  border-radius: var(--radius-subtle);
  box-shadow: var(--glow-purple);
}

/* Holds the mood chooser (shared/mood_chooser.css). */
.profile-block__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
}

/* ---- Header ---- */

.shell__header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-night);
  border-bottom: 1px solid var(--color-border-subtle);
}

.shell__header-brand {
  display: flex;
  flex-shrink: 0;
}

.shell__header-brand img {
  width: 32px;
  height: 32px;
}

.shell__search {
  position: relative;
  flex: 1;
  max-width: 560px;
}

.shell__search .icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-comment);
  pointer-events: none;
}

.shell__search .input {
  padding-left: calc(var(--space-3) + 20px + var(--space-2));
  border-radius: var(--radius-pill);
}

.search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-dialog);
}

.search-dropdown__section {
  padding: var(--space-1) var(--space-2);
}

.search-dropdown__heading {
  margin: var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--color-comment);
}

.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-subtle);
}

.search-dropdown__item:hover {
  background-color: var(--color-selection);
  text-decoration: none;
}

.search-dropdown__all {
  display: block;
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-md);
}

/* ---- Main ---- */

.shell__main {
  grid-area: main;
  min-width: 0;
  padding: var(--space-4) var(--space-4) calc(56px + var(--space-8));
}

.shell__feed {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Right rail ---- */

.shell__rail {
  display: none;
  grid-area: rail;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-4);
  background-color: var(--color-deep-night);
  border-left: 1px solid var(--color-border-subtle);
}

.shell__rail-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--color-comment);
}

/* ---- Rail entries (friends, requests) ---- */

.rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rail-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-standard);
  transition: background-color 120ms ease;
}

.rail-entry:hover {
  background-color: var(--color-card);
}

.rail-entry__avatar {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
}

.rail-entry__avatar:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.rail-entry__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.rail-entry__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-entry__name:hover {
  color: var(--color-purple);
  text-decoration: none;
}

/* Chat rows: the name link is stretched over the whole row, so clicking
   anywhere opens the chat. The picture stays above it and opens the profile. */
.rail-entry--chat {
  cursor: pointer;
}

.rail-entry__name--stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rail-entry__name--stretched:focus-visible {
  outline: none;
}

.rail-entry__name--stretched:focus-visible::after {
  box-shadow: var(--glow-purple);
}

.rail-entry--chat .rail-entry__avatar {
  position: relative;
  z-index: 1;
}

.rail-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.rail-entry__actions form {
  display: contents;
}

.rail-entry__actions .btn {
  width: auto;
}

.rail-entry--request {
  flex-wrap: wrap;
}

.rail-entry--request .rail-entry__actions {
  width: 100%;
  padding-left: calc(32px + var(--space-2));
}

.rail-requests {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rail-requests__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rail-empty {
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-md);
  color: var(--color-comment);
}

/* ---- Bottom tab bar (Mobile) ---- */

.shell__tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--color-deep-night);
  border-top: 1px solid var(--color-border-subtle);
}

.shell__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-comment);
  text-decoration: none;
}

/* The unread notice count sits on the bell's top-right corner. */
.shell__tab .notification-count,
.shell__tab .meet-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 4px);
}

.shell__tab:hover {
  text-decoration: none;
}

.shell__tab[aria-current="page"] {
  color: var(--color-purple);
}

/* ---- Friends FAB (Mobile/Tablet) ---- */

.shell__friends-fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(56px + var(--space-4) + env(safe-area-inset-bottom));
  z-index: 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--color-night);
  background-color: var(--color-purple);
  border: 0;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.shell__friends-fab .badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* ---- Tablet: icon-only sidebar ---- */

@media (min-width: 640px) {
  .shell {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
  }

  .shell__sidebar {
    display: flex;
    padding: var(--space-4) var(--space-2);
    align-items: stretch;
  }

  .shell__header-brand {
    display: none;
  }

  .shell__brand span,
  .shell__nav-item span:not(.icon):not(.badge),
  .profile-block__text {
    display: none;
  }

  .shell__brand,
  .shell__nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Icon only: the unread count pins to the icon's corner. */
  .shell__nav-item .notification-count,
  .shell__nav-item .meet-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    margin: 0;
  }

  .profile-block {
    justify-content: center;
    padding: var(--space-1);
  }

  .profile-block__mood {
    display: none;
  }

  .shell__tabbar {
    display: none;
  }

  .shell__main {
    padding-bottom: var(--space-8);
  }

  .shell__friends-fab {
    bottom: var(--space-6);
  }
}

/* ---- Desktop: full sidebar ---- */

@media (min-width: 1024px) {
  .shell {
    grid-template-columns: 260px 1fr;
  }

  .shell__sidebar {
    padding: var(--space-4) var(--space-3);
  }

  .shell__brand span,
  .shell__nav-item span:not(.icon):not(.badge),
  .profile-block__text {
    display: initial;
  }

  .profile-block__text {
    display: flex;
  }

  .shell__brand,
  .shell__nav-item {
    justify-content: flex-start;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* Full sidebar: back at the end of the row (see .shell__nav-item .badge). */
  .shell__nav-item .notification-count,
  .shell__nav-item .meet-badge {
    position: static;
    margin-left: auto;
  }

  .profile-block {
    justify-content: flex-start;
    padding: var(--space-2);
  }

  .profile-block__mood {
    display: inline-flex;
  }
}

/* ---- Large: right rail on pages that provide one ---- */

@media (min-width: 1200px) {
  .shell--with-rail {
    grid-template-columns: 260px 1fr 300px;
    grid-template-areas:
      "sidebar header rail"
      "sidebar main rail";
  }

  .shell--with-rail .shell__rail {
    display: block;
  }

  .shell--with-rail .shell__friends-fab {
    display: none;
  }
}

/* ---- Compact: icon-only sidebar at every width (the tablet rules above,
   declared last so they win over the desktop ones) ----
   Pages that need the room opt in with `content_for :compact_sidebar`; the
   sidebar then stays 72px wide on desktop too (Calendar). */

@media (min-width: 1024px) {
  .shell--compact {
    grid-template-columns: 72px 1fr;
  }

  .shell--compact .shell__sidebar {
    padding: var(--space-4) var(--space-2);
  }

  .shell--compact .shell__brand span,
  .shell--compact .shell__nav-item span:not(.icon):not(.badge),
  .shell--compact .profile-block__text,
  .shell--compact .profile-block__mood {
    display: none;
  }

  .shell--compact .shell__brand,
  .shell--compact .shell__nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .shell--compact .shell__nav-item .notification-count,
  .shell--compact .shell__nav-item .meet-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    margin: 0;
  }

  .shell--compact .profile-block {
    justify-content: center;
    padding: var(--space-1);
  }
}