@use 'kit-deps' as *;
@use 'tokens' as *;

// ─── App shell ─────────────────────────────────────────────────────────────
$sidebar-width: 380px;

html, body {
  height: 100%;
  // The document itself must never scroll: in a PWA the visual viewport
  // wanders (keyboard, system panels) and a document taller than the screen
  // lets the pull-to-refresh/gesture scroll carry fixed headers away.
  // Everything scrolls inside #app's regions instead.
  overflow: hidden;
  overscroll-behavior: none;
}

// #app is the Vue mount point — full viewport flex container.
// % height (not 100vh/dvh): relative to the layout viewport, which stays
// stable in a standalone PWA where vh/dvh drift with keyboard and system bars.
#app {
  display: flex;
  height: 100%;
  overflow: hidden;
}

// ─── Main content area (sibling of sidebar) ────────────────────────────────
.app-main {
  flex: 1 1 0;       // flex-basis:0 prevents content from dictating height
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: $surface-page;
}

// ─── Sidebar ───────────────────────────────────────────────────────────────
.app-sidebar {
  width: $sidebar-width;
  min-width: $sidebar-width;
  max-width: $sidebar-width;
  display: flex;
  flex-direction: column;
  background: $surface-panel;
  border-right: $border-width-base $border-style-base $border-color-muted;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    width 0.22s ease,
    min-width 0.22s ease,
    max-width 0.22s ease,
    border-color 0.22s ease,
    transform 0.28s ease;

  &.is-hidden-by-artifacts {
    width: 0;
    min-width: 0;
    max-width: 0;
    border-right-color: transparent;
  }

  @media (max-width: $bp-sidebar-drawer) {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: min(#{$sidebar-width}, 92vw) !important;
    min-width: min(#{$sidebar-width}, 92vw) !important;
    transform: translateX(-100%);
    transition: transform 0.28s ease;

    &.is-mobile-open {
      transform: translateX(0);
    }

    &.is-hidden-by-artifacts {
      width: min(#{$sidebar-width}, 92vw) !important;
      min-width: min(#{$sidebar-width}, 92vw) !important;
      max-width: min(#{$sidebar-width}, 92vw) !important;
      border-right-color: $border-color-muted;
    }
  }

  @media (max-width: 980px) {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    &.is-hidden-by-artifacts {
      width: 100vw !important;
      min-width: 100vw !important;
      max-width: 100vw !important;
    }
  }
}

// Logo row: logo first, New Chat aligned into the same line (the old profile
// select was removed — the profile chips above the list own that job now).
.sidebar-header {
  padding: $space-md;
  border-bottom: $border-width-base $border-style-base $border-color-muted;
  display: flex;
  flex-direction: column;
  gap: $space-sm;
}

.sidebar-logo-row {
  display: flex;
  align-items: center;
  gap: $space-sm;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: $space-sm;
  text-decoration: none;
  // Takes the free width so it stays a single row with the New Chat button
  flex: 1;
  min-width: 0;

  img {
    width: 42px;
    height: 42px;
  }

  span {
    font-size: 16px;
    font-weight: 700;
    color: $color-text-light;
  }
}

.sidebar-sessions {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $space-sm $space-md;
  gap: $space-sm;
}

.sessions-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: $color-text-dark;
}

.sessions-refresh-btn {
  font-size: 14px;
  color: $color-text-dark;
  transition: color 0.15s, transform 0.15s;

  &:hover { color: $color-text-light; }
  &.is-spinning i { animation: spin 0.8s linear infinite; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

// ─── Session item ──────────────────────────────────────────────────────────
.session-item {
  display: flex;
  align-items: flex-start;
  gap: $space-sm;
  padding: $space-sm $space-md;
  cursor: pointer;
  border-radius: 0;
  transition: background $motion-fast $motion-ease;
  position: relative;

  &:hover {
    background: $surface-panel-muted;

    .session-actions {
      opacity: 1;
    }
  }

  // Touch devices: always show actions
  @media (hover: none) {
    .session-actions {
      opacity: 1;
    }
  }

  &.is-active {
    background: $surface-panel-strong;
    border-left: $border-width-accent $border-style-base $color-secondary;
    padding-left: calc(#{$space-md} - #{$border-width-accent});
  }

  &.is-pinned {
    background: rgba($color-warning, 0.07);

    .session-name {
      color: $color-warning;
    }
  }

  &.has-recall {
    .session-actions {
      opacity: 1;
    }
  }

  &.is-special {
    opacity: 0.72;

    &:hover {
      opacity: 1;
    }

    .session-name {
      font-weight: 400;
    }
  }
}

.session-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;

  .session-pin-icon,
  .session-recall-icon,
  .session-special-icon {
    color: $color-text-dark;
    font-size: $icon-size-xs;
    opacity: 0;
    transition: opacity $motion-fast $motion-ease;
  }

  .session-pin-icon {
    color: $color-warning;
  }

  .session-recall-icon {
    color: var(--gn-color-secondary);
  }

  .session-special-icon {
    color: var(--gn-color-secondary);
  }
}

.is-pinned .session-icons .session-pin-icon,
.has-recall .session-icons .session-recall-icon,
.is-special .session-icons .session-special-icon {
  opacity: 1;
}

.session-info {
  flex: 1;
  overflow: hidden;
}

.session-name {
  font-size: 13px;
  color: $color-text-light;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.session-time {
  font-size: 11px;
  color: $color-text-dark;
  line-height: 1.4;
  margin-top: 2px;
}

.session-preview {
  font-size: 12px;
  color: $color-text-light;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-top: 3px;
}

.session-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity $motion-fast $motion-ease;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;

  .btn-icon {
    width: 26px;
    height: 26px;
    font-size: $icon-size-xs;
  }
}