/* ALY sidebar: brand, Space switcher, the fixed nav (Projects | Builds, New
   Chat), the Recent list in its own scroll area, and the Settings / About foot.
   Collapsed on desktop it is a 76px rail of same-size icons with hover labels
   (aly-sidebar-rail.js). Colours come from the --aly-nav-* atmosphere tokens
   (aly-theme.css), never the generic --glass the OS host sheet also defines. */

/* --- Frame ---------------------------------------------------------------- */
.aly-sidebar {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--hair);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 18px 16px calc(14px + max(env(safe-area-inset-bottom, 0px), var(--alyssiun-safe-bottom, 0px)));
  gap: 14px;
}
.aly-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.aly-brand { display: inline-flex; align-items: center; min-width: 0; }
.aly-brand:hover { text-decoration: none; }
.aly-wordmark { width: 150px; height: auto; display: block; }
:root[data-alyssiun-atmosphere="neo"] .aly-wordmark,
:root[data-atmosphere="void"] .aly-wordmark {
  content: url("https://assets.lozanocorp.com/alyssiun/png/alyssiun-name-ffffff.png");
}

/* One icon size everywhere in the menu. */
.aly-nav-svg {
  width: 18px; height: 18px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* The collapse control: a bordered square that reads as a button. */
.aly-rail-toggle {
  flex: none; display: none; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--aly-nav-line); border-radius: 10px;
  background: var(--aly-nav-bg); color: var(--aly-nav-muted); cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.aly-rail-toggle:hover, .aly-rail-toggle:focus-visible {
  color: var(--aly-nav-text); background: var(--aly-nav-bg-hover); border-color: var(--aly-nav-line-strong);
}
.aly-rail-toggle-chevron { transition: transform .26s ease; transform-origin: 14.5px 12px; }
.aly-shell.is-menu-collapsed .aly-rail-toggle-chevron { transform: scaleX(-1); }
@media (min-width: 901px) { .aly-rail-toggle { display: inline-grid; } }

/* --- Space switcher ------------------------------------------------------- */
.aly-space-switcher { display: flex; }
.aly-space-button {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 46px; cursor: pointer; text-align: left;
  border: 1px solid var(--surface-line); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit;
}
.aly-space-button:hover, .aly-space-button:focus-visible { border-color: var(--text); }
.aly-space-button-guest { text-decoration: none; }
.aly-space-button-guest .aly-space-role { color: var(--text); }
.aly-space-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--surface-line);
  font-size: 12px; font-weight: 700;
}
.aly-space-text { flex: 1; min-width: 0; display: grid; }
.aly-space-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aly-space-role { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.aly-space-caret { flex: none; color: var(--muted); font-size: 13px; }

/* --- Fixed nav: full-width rows, one treatment ----------------------------- */
.aly-sidebar-nav { display: grid; gap: 6px; flex: none; }
.aly-nav-item, .aly-about-link {
  position: relative; width: 100%; min-height: 42px; margin: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0 12px; border: 1px solid var(--aly-nav-line); border-radius: 10px;
  background: var(--aly-nav-bg); color: var(--aly-nav-text);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; cursor: pointer; appearance: none; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.aly-nav-item:hover, .aly-nav-item:focus-visible,
.aly-about-link:hover, .aly-about-link:focus-visible {
  background: var(--aly-nav-bg-hover); border-color: var(--aly-nav-line-strong); text-decoration: none;
}
.aly-nav-item:focus-visible, .aly-about-link:focus-visible { outline: 2px solid var(--aly-nav-accent); outline-offset: 2px; }
.aly-nav-item.is-active, .aly-about-link.is-active {
  background: var(--aly-nav-active-bg); border-color: var(--aly-nav-accent);
}
.aly-nav-item.is-active .aly-nav-svg, .aly-about-link.is-active .aly-nav-svg { color: var(--aly-nav-accent); }
.aly-nav-text, .aly-about-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aly-rail-only { display: none; }
/* aly-projects.css centres this link and pulls it up; in the nav it is a row. */
.aly-sidebar-nav .aly-projects-link { justify-content: flex-start; margin-top: 0; }

/* --- Recent: label fixed, the list is the bounded scroll area -------------- */
.aly-recents {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  margin-right: -16px;              /* the scrollbar sits at the sidebar's edge */
}
.aly-recents-label { margin: 4px 0 0; flex: none; }
.aly-conversation-list {
  list-style: none; margin: 0; padding: 0 10px 8px 0;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: var(--aly-nav-line-strong) transparent; scrollbar-gutter: stable;
  display: flex; flex-direction: column; gap: 1px;
  border-top: 1px solid transparent; transition: border-color .16s ease;
}
.aly-conversation-list.is-scrolled { border-top-color: var(--aly-nav-line); }
.aly-conversation-list::-webkit-scrollbar { width: 6px; }
.aly-conversation-list::-webkit-scrollbar-thumb { background: var(--aly-nav-line-strong); border-radius: 3px; }
.aly-recents-empty { font-size: 13px; margin: 4px 0 0; }

/* Group headings (Today, Yesterday, Previous 7 days, Earlier, Shared). */
.aly-recents-group { margin: 10px 0 2px; padding: 0 10px; }
.aly-recents-group:first-child { margin-top: 2px; }
.aly-recents-group-title {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aly-nav-muted);
}

/* A row is a link PLUS its own ⋯ menu, a sibling: a button inside an anchor is
   not reliably operable by keyboard. */
.aly-conversation-row { position: relative; display: flex; align-items: center; border-radius: 8px; }
.aly-conversation-row > a {
  flex: 1; min-width: 0; display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--aly-nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aly-conversation-row:hover { background: var(--aly-nav-bg); }
.aly-conversation-row > a:hover { color: var(--aly-nav-text); text-decoration: none; }
.aly-conversation-row.is-active { background: var(--aly-nav-active-bg); }
.aly-conversation-row.is-active > a { color: var(--aly-nav-text); font-weight: 600; }
.aly-conversation-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aly-conversation-author {
  display: block; font-size: 11px; color: var(--aly-nav-muted); margin-top: 1px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Always visible: a control you have to hover to discover does not exist on touch. */
.aly-conversation-menu-trigger {
  flex: none; border: none; background: none; cursor: pointer; color: var(--aly-nav-muted);
  font: inherit; line-height: 1; padding: 0 8px; border-radius: 6px; min-width: 32px; min-height: 32px;
}
.aly-conversation-menu-trigger:hover,
.aly-conversation-menu-trigger:focus-visible,
.aly-conversation-menu-trigger[aria-expanded="true"] { color: var(--aly-nav-text); background: var(--aly-nav-bg-hover); }
@media (hover: none) { .aly-conversation-menu-trigger { min-width: 42px; min-height: 42px; } }
.aly-conversation-menu {
  position: absolute; z-index: 40; top: calc(100% - 4px); right: 4px;
  min-width: 148px; padding: 5px; display: grid; gap: 2px;
  border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
}
.aly-conversation-menu-item {
  border: none; background: none; cursor: pointer; font: inherit; font-size: 13px;
  text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); min-height: 36px;
}
.aly-conversation-menu-item:hover, .aly-conversation-menu-item:focus-visible { background: var(--glass-2); }
.aly-conversation-menu-item.is-danger { color: var(--danger); }

/* --- Foot: Settings, then About ALY --------------------------------------- */
.aly-sidebar-foot { flex: none; border-top: 1px solid var(--aly-nav-line); padding-top: 12px; display: grid; gap: 6px; }
.aly-account { display: grid; gap: 6px; }
.aly-about-link { font-size: 11px; letter-spacing: .14em; }
.aly-about-icon { display: inline-flex; color: var(--aly-nav-accent); }

/* --- Rail tooltip (a body-level node; see aly-sidebar-rail.js) ------------ */
.aly-rail-tip {
  position: fixed; z-index: 200; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--aly-nav-tip-bg); color: var(--aly-nav-tip-text);
  font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.aly-rail-tip[hidden] { display: none; }

/* --- Phone drawer ---------------------------------------------------------- */
@media (max-width: 900px) {
  /* A drawer over the chat must be opaque (aly-composer.css says so, but this
     sheet loads later and its base `--glass` would win). */
  .aly-sidebar { background: var(--void); }
  /* Reading the list downward slides the Space switcher and the foot away
     (aly-sidebar.js `has-scrolled-recents`); scrolling up brings them back. */
  .aly-space-switcher, .aly-sidebar-foot {
    max-height: 360px; overflow: hidden;
    transition: max-height .26s ease, opacity .16s ease, margin .26s ease, padding .26s ease, border-width .26s ease;
  }
  .aly-sidebar.has-scrolled-recents .aly-space-switcher,
  .aly-sidebar.has-scrolled-recents .aly-sidebar-foot {
    max-height: 0; opacity: 0; padding-block: 0; border-width: 0; pointer-events: none;
  }
  .aly-sidebar.has-scrolled-recents .aly-space-switcher { margin-block: -4px; }
  .aly-sidebar.has-scrolled-recents .aly-sidebar-foot { margin-block: -14px; }
  .aly-nav-item, .aly-about-link { min-height: 44px; }
  @media (prefers-reduced-motion: reduce) { .aly-space-switcher, .aly-sidebar-foot { transition: none; } }
}

/* --- The rail (desktop only; on a phone the drawer has its own ✕) ---------- */
@media (min-width: 901px) {
  /* Animated collapse — but never on first paint (is-menu-ready, rail.js). */
  .aly-shell.is-menu-ready { transition: grid-template-columns .26s ease; }
  @media (prefers-reduced-motion: reduce) { .aly-shell.is-menu-ready { transition: none; } }

  /* `:not(.is-project-focus)` is load-bearing: aly.css's project-focus rule has
     equal specificity and loads earlier, so without it a collapsed rail put a
     76px track back and squeezed the whole Project workspace into it. */
  .aly-shell.is-menu-collapsed:not(.is-project-focus) { grid-template-columns: 76px minmax(0, 1fr); }
  .aly-shell.is-menu-collapsed .aly-sidebar { padding-left: 16px; padding-right: 16px; }
  .aly-shell.is-menu-collapsed .aly-nav-text,
  .aly-shell.is-menu-collapsed .aly-space-text,
  .aly-shell.is-menu-collapsed .aly-space-caret,
  .aly-shell.is-menu-collapsed .aly-about-text,
  .aly-shell.is-menu-collapsed .aly-recents { display: none; }
  .aly-shell.is-menu-collapsed .aly-rail-only { display: flex; }
  .aly-shell.is-menu-collapsed .aly-sidebar-head { flex-direction: column; gap: 12px; }
  /* The wordmark swaps to the square mark (same light/dark swap as above). */
  .aly-shell.is-menu-collapsed .aly-wordmark {
    width: 26px; height: 26px;
    content: url("https://assets.lozanocorp.com/alyssiun/png/alyssiun-icon-000000.png");
  }
  :root[data-alyssiun-atmosphere="neo"] .aly-shell.is-menu-collapsed .aly-wordmark,
  :root[data-atmosphere="void"] .aly-shell.is-menu-collapsed .aly-wordmark {
    content: url("https://assets.lozanocorp.com/alyssiun/png/alyssiun-icon-ffffff.png");
  }
  /* Every rail target is the same 44px square with an 18px glyph, centred. */
  .aly-shell.is-menu-collapsed .aly-space-button { justify-content: center; padding: 0; min-height: 44px; }
  .aly-shell.is-menu-collapsed .aly-nav-item,
  .aly-shell.is-menu-collapsed .aly-about-link,
  .aly-shell.is-menu-collapsed .aly-rail-toggle { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .aly-shell.is-menu-collapsed .aly-sidebar-nav,
  .aly-shell.is-menu-collapsed .aly-account { justify-items: center; }
  .aly-shell.is-menu-collapsed .aly-sidebar-nav { gap: 8px; }
  .aly-shell.is-menu-collapsed .aly-sidebar-foot { justify-items: center; margin-top: auto; }
  /* Active on the rail: the accent bar on the rail's left edge, plus the tint. */
  .aly-shell.is-menu-collapsed .aly-nav-item.is-active::before,
  .aly-shell.is-menu-collapsed .aly-about-link.is-active::before {
    content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--aly-nav-accent);
  }
}