// =============================================================================
// Bot Sidebar — components/bot-sidebar.less
// Layer 1 glass surface, section labels, pill badges
// =============================================================================

.bot-sidebar {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-right: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
  transition: all @transition-slow;

  &--collapsed {
    width: @sidebar-width-collapsed;
  }

  &--expanded {
    width: @sidebar-width-expanded;
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: @sp-3;
    border-bottom: 1px solid var(--color-border-primary);
    padding: 0 @sp-4;

    .bot-sidebar--expanded & {
      height: 3.5rem;
    }

    .bot-sidebar--collapsed & {
      flex-direction: column;
      gap: @sp-1;
      padding: @sp-2 0;
      justify-content: center;
    }
  }

  &__gear-menu {
    .context-menu();
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: @sp-1;
    min-width: 11rem;
    z-index: @z-dropdown;

    .bot-sidebar--collapsed & {
      left: 100%;
      top: 0;
      right: auto;
      margin-top: 0;
      margin-left: @sp-1;
    }
  }

  &__bot-avatar {
    .flex-center();
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    border-radius: @radius-lg;
  }

  &__bot-name {
    .truncate();
    min-width: 0;
    flex: 1;
    font-size: @text-sm;
    font-weight: @font-semibold;
    color: var(--color-text-primary);
    margin: 0;
  }

  &__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: @sp-2;
    border-bottom: 1px solid var(--color-border-primary);
    padding: 0.875rem @sp-3;
  }

  &__nav-tooltip {
    pointer-events: none;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: @z-tooltip;
    white-space: nowrap;
    border-radius: @radius-md;
    background: @zinc-800;
    padding: @sp-1 @sp-2;
    font-size: @text-xs;
    font-weight: @font-medium;
    color: white;
    opacity: 0;
    box-shadow: @shadow-lg;
    transition: opacity @transition-fast;

    .group:hover & {
      opacity: 1;
    }
  }

  // Section label — uppercase tracked headers
  &__section-label {
    .section-label();
    padding: @sp-3 @sp-3 @sp-1;
  }

  &__content {
    flex: 1;
    overflow: hidden;
  }
}

// =============================================================================
// Global Search Dialog
// =============================================================================

.global-search {
  &__input-wrap {
    position: relative;
    padding: @sp-4 @sp-5;
    border-bottom: 1px solid var(--color-border-primary);
  }

  &__icon {
    position: absolute;
    left: @sp-5 + @sp-3;
    top: 50%;
    transform: translateY(-50%);
    height: 1.125rem;
    width: 1.125rem;
    color: var(--color-text-tertiary);
    pointer-events: none;
  }

  &__input {
    .input-base();
    height: @height-lg;
    padding-left: @sp-10;
    padding-right: @sp-3;
    font-size: @text-sm;
    border: none;
    background: var(--color-bg-secondary);
  }

  &__body {
    padding: @sp-2;
    max-height: 22rem;
    overflow-y: auto;
    .scrollbar-thin();
  }

  &__group-label {
    .section-label();
    padding: @sp-2 @sp-3 @sp-1;
  }

  &__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: @sp-3;
    padding: @sp-2-5 @sp-3;
    border-radius: @radius-lg;
    border: none;
    background: none;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    .transition-colors();

    &:hover {
      background: var(--color-hover-bg);
    }
  }

  &__item-icon {
    .flex-center();
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    border-radius: @radius-md;

    &--chat {
      background: color-mix(in srgb, @blue-500 12%, transparent);
      color: @blue-400;
    }

    &--room {
      background: color-mix(in srgb, @purple-500 12%, transparent);
      color: @purple-400;
    }

    &--task {
      background: color-mix(in srgb, @green-500 12%, transparent);
      color: @green-400;
    }
  }

  &__item-info {
    min-width: 0;
    flex: 1;
  }

  &__item-name {
    .truncate();
    display: block;
    font-size: @text-sm;
    font-weight: @font-medium;
  }

  &__item-meta {
    .truncate();
    display: block;
    font-size: @text-xs;
    color: var(--color-text-secondary);
    margin-top: 1px;
  }

  &__empty {
    padding: @sp-8 0;
    text-align: center;
    font-size: @text-sm;
    color: var(--color-text-tertiary);
  }

  &__hint {
    padding: @sp-6 0;
    text-align: center;
    font-size: @text-sm;
    color: var(--color-text-tertiary);
  }

  &__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 @sp-1;
    margin: 0 2px;
    border-radius: @radius-sm;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-bg-secondary);
    font-size: 10px;
    font-family: inherit;
    color: var(--color-text-secondary);
  }
}

// =============================================================================
// Sidebar Add Button
// =============================================================================

.sidebar-add-btn {
  .flex-center();
  border-radius: @radius-lg;
  background: var(--accent-600);
  color: white;
  cursor: pointer;
  border: none;
  .transition-colors();

  &:hover {
    background: var(--accent-500);
  }

  // Default size
  height: @height-md - 0.125rem;
  width: @height-md - 0.125rem;

  // Larger variant for collapsed state
  &--lg {
    height: @height-md;
    width: @height-md;
  }
}

// =============================================================================
// Sidebar List Container
// =============================================================================

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: @sp-2 @sp-2 @sp-2;
  .scrollbar-thin();

  &__empty {
    padding: @sp-8 0;
    text-align: center;
    font-size: @text-sm;
    color: var(--color-text-tertiary);
  }
}

// =============================================================================
// Chat / Room Item
// =============================================================================

.sidebar-chat-item {
  .sidebar-item();
  width: 100%;
  padding: @sp-2 @sp-3;
  text-align: left;
  border: none;
  background: none;
  border-left: 2px solid transparent;

  &--active {
    background: var(--color-selected-bg);
    color: var(--color-text-primary);
    border-left-color: var(--accent-500);
  }

  &__title-row {
    display: flex;
    align-items: center;
    gap: @sp-2;
    min-width: 0;
  }

  &__name {
    .truncate();
    flex: 1;
    font-size: @text-sm;
    font-weight: @font-medium;
  }

  &__time {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--color-text-tertiary);
    .tabular-nums();
  }

  &__preview {
    .truncate();
    margin-top: 2px;
    font-size: @text-xs;
    color: var(--color-text-secondary);
  }

  &__pin {
    flex-shrink: 0;
    color: var(--accent-500);
  }

  // Context menu trigger
  &__menu-btn {
    .flex-center();
    position: absolute;
    right: @sp-2;
    top: @sp-2;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: @radius-md;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0;
    .transition-colors();

    .group:hover & { opacity: 1; }

    &:hover {
      background: var(--color-hover-bg);
    }

    &--open { opacity: 1; }
  }

  &__icon {
    margin-top: 2px;
    flex-shrink: 0;

    &--telegram {
      color: @blue-400;
    }

    &--discord {
      color: @purple-400;
    }

    &--default {
      color: var(--color-text-tertiary);
    }
  }

  // Platform badge — pill-shaped muted neon tag
  &__platform-badge {
    .tag-neon(@zinc-400);
    padding: 1px @sp-2;
    font-size: 10px;
    text-transform: uppercase;

    &--telegram {
      .tag-neon(@blue-400);
      padding: 1px @sp-2;
      font-size: 10px;
      text-transform: uppercase;
    }

    &--discord {
      .tag-neon(@purple-400);
      padding: 1px @sp-2;
      font-size: 10px;
      text-transform: uppercase;
    }
  }
}

// =============================================================================
// Section Navigation Button (Work/Schedules/Automations/Settings)
// =============================================================================

.sidebar-section-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: @sp-3;
  border-radius: @radius-xl;
  padding: @sp-3;
  text-align: left;
  .transition-colors();
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-text-secondary);

  &:hover {
    background: var(--color-hover-bg);
    color: var(--color-text-primary);
  }

  .label {
    flex: 1;
    font-size: @text-sm;
  }

  &--active {
    // Base active — use accent by default
  }

  // Color schemes — muted neon treatment
  &--accent,
  &--accent.sidebar-section-btn--active {
    background: color-mix(in srgb, var(--accent-500) 12%, transparent);
    color: var(--accent-500);
  }

  &--blue,
  &--blue.sidebar-section-btn--active {
    background: color-mix(in srgb, @blue-500 12%, transparent);
    color: @blue-400;
  }

  &--purple,
  &--purple.sidebar-section-btn--active {
    background: color-mix(in srgb, @purple-500 12%, transparent);
    color: @purple-400;
  }

  &--danger {
    color: color-mix(in srgb, @red-400 70%, transparent);

    &:hover {
      background: color-mix(in srgb, @red-500 10%, transparent);
      color: @red-400;
    }

    &.sidebar-section-btn--active {
      background: color-mix(in srgb, @red-500 10%, transparent);
      color: @red-400;
    }
  }

  &__count {
    .tag-neon(var(--color-text-tertiary));
    padding: 1px @sp-2;
  }
}

// Collapsed section button
.sidebar-section-btn-icon {
  .flex-center();
  height: @height-md;
  width: @height-md;
  border-radius: @radius-xl;
  .transition-colors();
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-text-secondary);

  &:hover {
    background: var(--color-hover-bg);
  }

  &--active {
    // active color set by color modifier
  }
}

// =============================================================================
// Task Item
// =============================================================================

.sidebar-task-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: @sp-3;
  border-radius: @radius-xl;
  border: 1px solid;
  padding: @sp-3;
  text-align: left;
  .transition-colors();
  cursor: pointer;
  background: none;

  &--todo {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-primary);
  }

  &--in_progress {
    border-color: color-mix(in srgb, @blue-500 30%, transparent);
    background: color-mix(in srgb, @blue-500 8%, transparent);
  }

  &--done {
    border-color: color-mix(in srgb, @green-500 30%, transparent);
    background: color-mix(in srgb, @green-500 8%, transparent);
  }

  &--blocked {
    border-color: color-mix(in srgb, @red-500 30%, transparent);
    background: color-mix(in srgb, @red-500 8%, transparent);
  }

  &__checkbox {
    .flex-center();
    margin-top: 2px;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border-radius: @radius-sm;
    border: 1px solid var(--color-border-secondary);
    .transition-colors();
    cursor: pointer;
    background: none;
    font-size: @text-xs;
    color: transparent;
    padding: 0;

    &:hover {
      border-color: var(--accent-500);
    }

    &--done {
      border-color: @green-500;
      background: @green-500;
      color: white;

      .dark & {
        box-shadow: 0 0 4px color-mix(in srgb, @green-500 30%, transparent);
      }
    }
  }
}

// =============================================================================
// Tool Item
// =============================================================================

.sidebar-tool-item {
  display: flex;
  align-items: center;
  gap: @sp-3;
  border-radius: @radius-xl;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  padding: @sp-3;
}

// =============================================================================
// Create Picker (Chat / Room chooser dialog)
// =============================================================================

.create-picker {
  &__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: @sp-3;
  }

  &__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: @sp-2;
    padding: @sp-5 @sp-4;
    border-radius: @radius-xl;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    cursor: pointer;
    text-align: center;
    .transition-colors();

    &:hover {
      border-color: var(--accent-500);
      background: color-mix(in srgb, var(--accent-500) 6%, var(--color-bg-secondary));
    }
  }

  &__icon {
    .flex-center();
    height: 2.75rem;
    width: 2.75rem;
    border-radius: @radius-xl;

    &--chat {
      background: color-mix(in srgb, @blue-500 15%, transparent);
      color: @blue-400;
    }

    &--room {
      background: color-mix(in srgb, @purple-500 15%, transparent);
      color: @purple-400;
    }
  }

  &__label {
    font-size: @text-sm;
    font-weight: @font-semibold;
    color: var(--color-text-primary);
  }

  &__desc {
    font-size: @text-xs;
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin: 0;
  }
}
