/* Glampfire sidebar: account header, Rooms and Direct messages. Replaces
   Campfire's sidebar.css (search-page rules at the end are kept from it). */
#user_sidebar {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  block-size: 100%;
}

.sidebar__container {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}

.sidebar__header {
  align-items: center;
  border-block-end: 1px solid var(--gf-border);
  display: flex;
  flex: none;
  gap: 10px;
  min-block-size: 60px;
  padding: 10px 10px 10px 18px;
}

.sidebar__account-logo {
  block-size: 28px;
  border-radius: var(--gf-radius-item);
  inline-size: 28px;
  object-fit: cover;
  outline: 1px solid oklch(0% 0 0 / 0.1);
  outline-offset: -1px;
}

.sidebar__account {
  flex: 1;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__scroll {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px 16px;
}

.sidebar__section + .sidebar__section { margin-block-start: 18px; }

.sidebar__section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-block-size: 32px;
  padding-inline: 8px 0;

  h2 {
    color: var(--gf-ink-faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
  }
}

.sidebar__icon-button {
  align-items: center;
  block-size: 30px;
  border-radius: var(--gf-radius-item);
  color: var(--gf-ink-subtle);
  display: inline-flex;
  inline-size: 30px;
  justify-content: center;

  .icon { block-size: 18px; inline-size: 18px; }
  &:hover { background-color: var(--gf-hover); color: var(--gf-ink); }
  &:active { scale: 0.96; }
  &:focus-visible { outline: 2px solid var(--gf-mention); outline-offset: 1px; }
}

/* Rows (rooms and pings share one look) */
.rooms,
.directs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#sidebar :is(.room, .direct) {
  align-items: center;
  background: transparent;
  block-size: 36px;
  border: 0;
  border-radius: var(--gf-radius-item);
  color: var(--gf-ink-subtle);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14.5px;
  gap: 10px;
  inline-size: 100%;
  padding: 0 8px;
  text-align: start;
  text-decoration: none;

  &:hover { background-color: var(--gf-hover); color: var(--gf-ink); }
  &:focus-visible { outline: 2px solid var(--gf-mention); outline-offset: -2px; }

  &[aria-current="page"] {
    background-color: var(--gf-selected);
    color: var(--gf-ink);
    font-weight: 550;
  }

  &.unread {
    color: var(--gf-ink);
    font-weight: 650;
  }
}

.room__icon {
  align-items: center;
  color: var(--gf-ink-faint);
  display: inline-flex;
  flex: none;
  inline-size: 18px;
  justify-content: center;

  .icon { block-size: 16px; inline-size: 16px; }

  [aria-current="page"] > & { color: var(--gf-ink-subtle); }
}

:is(.room__name, .direct__author) {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unread: brand-colored dot at the end of the row */
.room__unread {
  display: none;
  flex: none;

  .unread > & {
    background-color: var(--gf-brand);
    block-size: 8px;
    border-radius: 50%;
    display: block;
    inline-size: 8px;
  }
}

/* Ping avatars */
#sidebar .direct {
  .avatar {
    --avatar-size: 24px;

    flex: none;

    img {
      outline: 1px solid oklch(0% 0 0 / 0.1);
      outline-offset: -1px;
    }
  }

  .avatar__group {
    --avatar-size: 12px;

    block-size: 24px;
    flex: none;
    gap: 0;
    inline-size: 24px;
  }
}

/* People you haven't pinged yet: quieter, below your pings */
#sidebar .direct--placeholder {
  color: var(--gf-ink-faint);

  .avatar { opacity: 0.75; }
  &:hover .avatar { opacity: 1; }
}

#sidebar form.button_to { margin: 0; }

/* New ping (autocomplete) inside the Direct messages section */
.directs--new {
  padding: 4px 0 8px;

  form { align-items: center; gap: 6px; }

  .btn {
    --btn-size: 34px;
    --hover-size: 0;

    flex: none;

    img { block-size: 16px; inline-size: 16px; }
  }

  .btn:not(.btn--reversed) {
    --btn-background: transparent;
    --btn-border-color: transparent;

    &:hover { --btn-background: var(--gf-hover); }
  }

  .autocomplete__container {
    --input-border-color: var(--gf-border-strong);
    --input-border-radius: var(--gf-radius-control);
    --hover-size: 0;

    min-block-size: 34px;
    min-inline-size: 0;

    &:focus-within {
      --input-border-color: var(--gf-ink-faint);

      box-shadow: 0 0 0 3px oklch(var(--lch-black) / 0.06);
    }
  }

  .autocomplete__input { font-size: 14px; padding: 4px 8px; }
}

.sidebar__toggle { display: none !important; }

/* Search page (kept from Campfire's sidebar.css until the search redesign) */
.searches {
  #nav {
    align-items: start;
  }

  .message--formatted .message__room {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: visible;
    white-space: nowrap;

    &::before { content: "→"; }
  }

  .message__actions {
    display: none !important;
    visibility: hidden !important;
  }
}

.searches__recents {
  --mask: linear-gradient(to left, oklch(0% 0 0 / 1) 97%, oklch(0% 0 0 / 0) 99%);

  -webkit-mask-image: var(--mask);
  display: none;
  mask-image: var(--mask);
  position: relative;

  @media (max-width: 100ch) { display: flex; }

  .room {
    max-inline-size: 20ch;

    &:first-child { margin-inline-start: var(--inline-space); }
  }

  .searches__btn { margin-inline-end: var(--inline-space-double); }
}

.searches__query {
  --btn-border-radius: 0.5em;

  min-block-size: var(--btn-size);
}

.searches__input:required:invalid {
  ~ .searches__reset {
    display: none;
    visibility: hidden;
  }
}

.directs--edit {
  display: grid;
  gap: var(--inline-space);
  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
  grid-template-rows: min-content;
  place-items: center;

  .member {
    aspect-ratio: 1;
    block-size: auto;
    inline-size: 100%;
    margin-inline: auto;
    place-content: center;
  }
}