// =============================================================================
// Chat — components/chat.less
// Chat panel, messages, input, thinking indicator, tool calls, usage
// =============================================================================

// -----------------------------------------------------------------------------
// Chat View — outermost container
// -----------------------------------------------------------------------------

.chat-view {
  .flex-col();
  height: 100%;
  background: var(--color-bg-app);
}

// -----------------------------------------------------------------------------
// Chat Header — bot info bar
// -----------------------------------------------------------------------------

.chat-header {
  .flex-between();
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
  padding: @sp-3 @sp-4;

  &__bot-info {
    display: flex;
    align-items: center;
    gap: @sp-3;
  }

  &__avatar {
    .flex-center();
    height: 2rem;
    width: 2rem;
    border-radius: @radius-full;
  }

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

  &__model {
    .tag-neon(var(--accent-500));
    font-size: 11px;
  }
}

// -----------------------------------------------------------------------------
// Chat Messages — scrollable area
// -----------------------------------------------------------------------------

.chat-messages {
  flex: 1;
  overflow-y: auto;
  .scrollbar-thin();

  &__inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: @sp-4 @sp-3;

    .screen-sm({
      padding: @sp-6 @sp-4;
    });
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: @sp-6;
  }
}

// -----------------------------------------------------------------------------
// Chat Panel
// -----------------------------------------------------------------------------

.chat-panel {
  .flex-col();
  height: 100%;

  &__messages {
    flex: 1;
    overflow-y: auto;
    .scrollbar-thin();
  }

  &__messages-inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: @sp-6 @sp-4;
  }

  &__input-area {
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    padding: @sp-3 @sp-4;

    .screen-sm({
      padding: @sp-4;
    });
  }

  &__input-inner {
    max-width: 48rem;
    margin: 0 auto;
  }

  &__error {
    margin-top: @sp-4;
    border-radius: @radius-lg;
    border: 1px solid @red-200;
    background: @red-50;
    padding: @sp-4;
    font-size: @text-sm;
    color: @red-700;

    .dark & {
      border-color: @red-900;
      background: rgba(@red-900, 0.2);
      color: @red-400;
    }
  }

  &__usage {
    border-top: 1px solid var(--color-border-primary);
  }
}

// -----------------------------------------------------------------------------
// Empty State
// -----------------------------------------------------------------------------

.chat-empty {
  .flex-col();
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: @sp-12 0;
  text-align: center;

  &__icon {
    .flex-center();
    margin-bottom: @sp-6;
    height: 5rem;
    width: 5rem;
    border-radius: @radius-2xl;
    box-shadow: 0 0 40px rgba(var(--accent-600-rgb, 22, 163, 74), 0.15);
  }

  &__title {
    margin-bottom: @sp-2;
    font-size: @text-2xl;
    font-weight: @font-bold;
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  &__description {
    max-width: 28rem;
    margin-bottom: @sp-8;
    font-size: @text-sm;
    color: var(--color-text-secondary);
  }
}

// -----------------------------------------------------------------------------
// Prompt Suggestions — welcome prompt grid
// -----------------------------------------------------------------------------

.chat-prompt-suggestions {
  display: grid;
  gap: @sp-3;

  &__item {
    display: flex;
    align-items: center;
    gap: @sp-3;
    border-radius: @radius-2xl;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    padding: @sp-3 @sp-4;
    text-align: left;
    font-size: @text-sm;
    color: var(--color-text-primary);
    cursor: pointer;
    .card-hover-lift();

    &:hover {
      border-color: var(--accent-500);
      background: color-mix(in srgb, var(--accent-500) 5%, transparent);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-500) 10%, transparent);
    }
  }
}

// -----------------------------------------------------------------------------
// Messages
// -----------------------------------------------------------------------------

.chat-message {
  display: flex;
  gap: @sp-4;

  &--user {
    flex-direction: row-reverse;
  }

  &--bot {
    flex-direction: row;
  }

  &--system {
    display: block;
    padding: @sp-1 0;
    text-align: center;
    font-size: @text-xs;
    color: var(--color-text-secondary);
  }

  &__header {
    display: flex;
    align-items: baseline;
    gap: @sp-2;
  }

  &__sender {
    font-size: @text-sm;
    font-weight: @font-semibold;

    &--user {
      color: @blue-600;

      .dark & {
        color: @blue-400;
      }
    }

    &--bot {
      color: var(--accent-600);

      .dark & {
        color: var(--accent-400);
      }
    }
  }

  &__avatar {
    .flex-center();
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    border-radius: @radius-full;
    box-shadow: 0 0 0 2px var(--color-bg-app);

    &--user {
      color: white;
    }

    &--bot {
      background: var(--color-bg-primary);

      .dark & {
        background: var(--color-bg-secondary);
      }
    }
  }

  &__content {
    display: flex;
    max-width: 80%;
    min-width: 0;
    flex-direction: column;
    gap: @sp-1;

    &--user {
      align-items: flex-end;
    }

    &--bot {
      align-items: flex-start;
    }
  }

  &__bubble {
    border-radius: @radius-3xl;
    padding: @sp-3 @sp-4;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;

    &--user {
      color: white;
      border-radius: @radius-3xl @radius-3xl @radius-lg @radius-3xl;
    }

    &--bot {
      background: var(--chat-bubble-bot-bg);
      color: var(--chat-bubble-bot-text);
      border: 1px solid var(--chat-bubble-bot-border);
      border-radius: @radius-3xl @radius-3xl @radius-3xl @radius-lg;
    }
  }

  &__time {
    margin-top: @sp-1;
    font-size: @text-xs;
    color: @zinc-400;
  }

  &__code-block {
    overflow-x: auto;
    border-radius: @radius-lg;
    background: @zinc-900;
    padding: @sp-3;
    font-size: @text-xs;
    color: @zinc-100;
    white-space: pre-wrap;
    word-break: break-word;
  }

  &__inline-code {
    border-radius: @radius-md;
    background: var(--code-bg);
    padding: 2px @sp-1-5;
    font-size: @text-xs;
    color: var(--code-text);
  }

  // Tools panel — expanded tool calls below bubble
  &__tools-panel {
    display: flex;
    flex-direction: column;
    gap: @sp-1-5;
    margin-top: @sp-2;
  }

  // Action bar — hover actions under each message
  &__actions {
    display: flex;
    align-items: center;
    gap: @sp-2;
    opacity: 0;
    transition: opacity 200ms ease 100ms;

    .chat-message:hover & {
      opacity: 1;
      transition-delay: 0ms;
    }

    // When reaction bar has active reactions, always show actions row
    .reaction-bar:not(:empty) ~ * {
      // handled by parent opacity
    }
  }

  // Keep actions visible when reactions exist
  &__actions:has(.reaction-bar .reaction-bar__pill) {
    opacity: 1;
  }

  &__action-btn {
    display: flex;
    height: 1.5rem;
    align-items: center;
    gap: @sp-1;
    border-radius: @radius-sm;
    padding: 0 @sp-2;
    font-size: @text-xs;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    .transition-colors();

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

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

  // Info panel — metadata popover
  &__info-panel {
    margin-top: @sp-3;
    border-radius: @radius-lg;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-bg-primary);
    padding: @sp-3;
    font-size: @text-xs;
  }

  &__info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: @sp-2 @sp-4;
    color: var(--color-text-secondary);
  }

  &__info-value {
    color: var(--color-text-primary);
  }
}

// Highlight animation for scrolling to replied messages
.reply-highlight {
  background: color-mix(in srgb, var(--accent-500) 10%, transparent);
  border-radius: @radius-lg;
}

// -----------------------------------------------------------------------------
// Reply Preview — citation in message bubble
// -----------------------------------------------------------------------------

.chat-reply-preview {
  display: flex;
  align-items: flex-start;
  gap: @sp-2;
  margin-bottom: @sp-1;
  border-radius: @radius-lg;
  border-left: 2px solid var(--accent-500);
  background: color-mix(in srgb, var(--color-bg-primary) 40%, transparent);
  padding: @sp-1-5 @sp-3;
  text-align: left;
  cursor: pointer;
  border-top: none;
  border-right: none;
  border-bottom: none;
  .transition-colors();

  &:hover {
    background: color-mix(in srgb, var(--color-bg-primary) 60%, transparent);
  }

  &__icon {
    margin-top: @sp-0-5;
    height: 0.75rem;
    width: 0.75rem;
    flex-shrink: 0;
    color: var(--accent-500);
  }

  &__author {
    font-size: 0.625rem;
    font-weight: @font-semibold;
    color: var(--accent-400);
  }

  &__text {
    .truncate();
    font-size: @text-xs;
    color: var(--color-text-secondary);
  }
}

// -----------------------------------------------------------------------------
// Reply Bar — reply composer above input
// -----------------------------------------------------------------------------

.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: @sp-2;
  margin-bottom: @sp-2;
  border-radius: @radius-xl;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
  padding: @sp-2 @sp-3;

  &__icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    color: var(--accent-500);
  }

  &__content {
    min-width: 0;
    flex: 1;
  }

  &__label {
    font-size: @text-xs;
    font-weight: @font-medium;
    color: var(--color-text-secondary);
  }

  &__text {
    .truncate();
    font-size: @text-xs;
    color: var(--color-text-tertiary);

    .dark & {
      color: var(--color-text-primary);
    }
  }

  &__close {
    .flex-center();
    flex-shrink: 0;
    border-radius: @radius-sm;
    padding: @sp-1;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    .transition-colors();

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

// -----------------------------------------------------------------------------
// Command Menu — slash command autocomplete
// -----------------------------------------------------------------------------

.chat-command-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: @sp-2;
  overflow: hidden;
  border-radius: @radius-xl;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  box-shadow: @shadow-xl;

  .dark & {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
  }

  &__header {
    padding: @sp-2 @sp-3;
    font-size: @text-xs;
    font-weight: @font-medium;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-primary);

    .dark & {
      border-bottom-color: var(--color-border-secondary);
    }
  }

  &__list {
    max-height: 12rem;
    overflow-y: auto;
  }

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

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

    &--selected {
      background: color-mix(in srgb, var(--accent-600) 20%, transparent);
    }
  }
}

// -----------------------------------------------------------------------------
// Input Container — flex row: textarea grows, buttons stay right
// -----------------------------------------------------------------------------

.chat-input-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: @sp-2;
  min-height: 3.25rem;
  border-radius: 1.5rem;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  padding-right: @sp-2-5;
  .transition-colors();

  &:focus-within {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 12%, transparent);
  }
}

// -----------------------------------------------------------------------------
// Textarea
// -----------------------------------------------------------------------------

.chat-textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  background: transparent;
  padding: @sp-3 @sp-0 @sp-3 @sp-4;
  line-height: @leading-normal;
  color: var(--color-text-primary);
  outline: none;
  font-family: @font-sans;
  font-size: @text-sm;
  border: none;

  &::placeholder {
    color: var(--input-placeholder);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// -----------------------------------------------------------------------------
// Input Buttons — sits inside the flex row, right side
// -----------------------------------------------------------------------------

.chat-input-btns {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding-right: 0.375rem;
}

.chat-input-btn {
  .flex-center();
  height: 2rem;
  width: 2rem;
  border-radius: @radius-full;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color @transition-fast, color @transition-fast,
              transform @transition-fast, box-shadow @transition-fast;

  &--attach {
    background: transparent;
    color: var(--color-text-tertiary);

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

    &:disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover { background: transparent; color: var(--color-text-tertiary); }
    }
  }

  &--send {
    background: var(--accent-600);
    color: white;

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

    &:active {
      transform: scale(0.95);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.35;
      &:hover { transform: none; }
    }
  }

  &--stop {
    background: @red-600;
    color: white;

    &:hover {
      background: @red-500;
      transform: scale(1.06);
    }

    &:active {
      transform: scale(0.95);
    }
  }
}

// -----------------------------------------------------------------------------
// Status Bar — connection/model info
// -----------------------------------------------------------------------------

.chat-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: @sp-2;
  font-size: @text-xs;
  color: var(--color-text-secondary);

  &__left {
    display: flex;
    align-items: center;
    gap: @sp-2;

    .screen-sm({
      gap: @sp-4;
    });
  }

  &__indicator {
    display: inline-flex;
    align-items: center;
    gap: @sp-2;
    border-radius: @radius-full;
    padding: @sp-0-5 @sp-2-5 @sp-0-5 @sp-2;
    background: var(--color-bg-secondary);

    .dark & {
      background: var(--card-bg);
    }
  }

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: @radius-full;
    flex-shrink: 0;

    &--connected {
      background: @green-500;
      box-shadow: 0 0 6px rgba(@green-500, 0.4);
    }

    &--disconnected {
      background: @red-500;
      box-shadow: 0 0 6px rgba(@red-500, 0.4);
    }
  }

  &__label {
    display: none;

    .screen-sm({
      display: inline;
    });
  }

  &__model {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;

    .screen-sm({
      max-width: none;
    });
  }

  &__hint {
    display: none;

    .screen-sm({
      display: inline;
    });
  }
}

// -----------------------------------------------------------------------------
// Creation Flow — bot creation progress indicator
// -----------------------------------------------------------------------------

.chat-creation-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: @sp-2;
  margin-top: @sp-2;
  border-radius: @radius-lg;
  background: color-mix(in srgb, var(--accent-900, @green-900) 30%, transparent);
  padding: @sp-1-5 @sp-3;
  font-size: @text-xs;
  color: var(--accent-400);
}

// -----------------------------------------------------------------------------
// Tool Call (Active/streaming)
// -----------------------------------------------------------------------------

.chat-tool-call {
  overflow: hidden;
  border-radius: @radius-xl;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  min-width: 0;

  // Status-colored border variants
  &--running {
    border-color: color-mix(in srgb, @blue-500 25%, transparent);
  }
  &--success {
    border-color: color-mix(in srgb, @green-500 20%, transparent);
  }
  &--error {
    border-color: color-mix(in srgb, @red-500 20%, transparent);
  }

  &__header {
    display: flex;
    width: 100%;
    align-items: center;
    gap: @sp-3;
    padding: @sp-3 @sp-4;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 0;
  }

  &__name {
    flex: 1;
    min-width: 0;
    .truncate();
    font-family: @font-mono;
    font-size: @text-sm;
    color: var(--color-text-primary);
  }

  &__model {
    flex-shrink: 0;
    border-radius: @radius-sm;
    background: var(--color-bg-secondary);
    padding: @sp-0-5 @sp-2;
    font-family: @font-mono;
    font-size: @text-xs;
    color: var(--color-text-secondary);
  }

  &__body {
    border-top: 1px solid var(--color-border-primary);
    background: color-mix(in srgb, var(--color-bg-app) 50%, transparent);
    padding: @sp-4;
    min-width: 0;
  }

  &__code {
    margin-top: @sp-1;
    overflow-x: auto;
    border-radius: @radius-sm;
    background: var(--color-bg-primary);
    padding: @sp-2;
    font-family: @font-mono;
    font-size: @text-xs;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
  }
}

// -----------------------------------------------------------------------------
// Message Tool Call (Compact inline for completed messages)
// -----------------------------------------------------------------------------

.chat-msg-tool-call {
  border-radius: @radius-lg;
  border: 1px solid var(--color-border-secondary);
  background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
  min-width: 0;

  &__header {
    display: flex;
    width: 100%;
    align-items: center;
    gap: @sp-2;
    padding: @sp-1-5 @sp-3;
    text-align: left;
    font-size: @text-xs;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 0;
  }

  &__name {
    flex: 1;
    min-width: 0;
    font-family: @font-mono;
    color: var(--color-text-primary);
    .truncate();
  }

  &__model {
    flex-shrink: 0;
    border-radius: @radius-sm;
    background: var(--color-bg-secondary);
    padding: @sp-0-5 @sp-1-5;
    font-family: @font-mono;
    color: var(--color-text-secondary);
    .truncate();
    max-width: 8.75rem;
  }

  &__body {
    border-top: 1px solid var(--color-border-secondary);
    padding: @sp-2 @sp-3;
    min-width: 0;
  }

  &__code {
    margin-top: @sp-1;
    overflow-x: auto;
    border-radius: @radius-sm;
    background: var(--color-bg-app);
    padding: @sp-1-5;
    font-family: @font-mono;
    font-size: @text-xs;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
  }
}

// -----------------------------------------------------------------------------
// Message Thinking (Persisted thinking in message bubble)
// -----------------------------------------------------------------------------

.chat-msg-thinking {
  margin-top: @sp-2;
  border-radius: @radius-lg;
  border: 1px solid color-mix(in srgb, @purple-500 20%, transparent);
  background: color-mix(in srgb, @purple-500 6%, transparent);
  min-width: 0;

  &__header {
    display: flex;
    align-items: center;
    gap: @sp-2;
    padding: @sp-1-5 @sp-3;
    font-size: @text-xs;
    font-weight: @font-medium;
    color: @purple-600;

    .dark & {
      color: @purple-400;
    }
  }

  &__content {
    padding: 0 @sp-3 @sp-2;
    max-height: 12rem;
    overflow-y: auto;
    .scrollbar-thin();
    font-size: @text-sm;
    font-style: italic;
    color: @purple-500;
    white-space: pre-wrap;
    word-break: break-word;

    .dark & {
      color: @purple-300;
    }
  }
}

// -----------------------------------------------------------------------------
// Tool Toggle — "N tool actions" button
// -----------------------------------------------------------------------------

.chat-tool-toggle {
  display: flex;
  align-items: center;
  gap: @sp-2;
  font-size: @text-xs;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  .transition-colors();

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

// -----------------------------------------------------------------------------
// Media Previews — container for inline media
// -----------------------------------------------------------------------------

.chat-media-previews {
  display: flex;
  flex-wrap: wrap;
  gap: @sp-2;
  margin-top: @sp-2;
}

// -----------------------------------------------------------------------------
// Media Thumbnail — image preview
// -----------------------------------------------------------------------------

.chat-media-thumb {
  position: relative;
  overflow: hidden;
  border-radius: @radius-lg;
  border: 1px solid var(--color-border-secondary);
  background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
  cursor: pointer;
  .transition-colors();

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

  &__img {
    height: 6rem;
    width: 6rem;
    object-fit: cover;

    .screen-sm({
      height: 8rem;
      width: 8rem;
    });
  }

  &__overlay {
    position: absolute;
    inset: 0;
    .flex-center();
    background: transparent;
    .transition-colors();

    .chat-media-thumb:hover & {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  &__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    padding: @sp-1 @sp-2;
    font-size: 0.625rem;
    color: var(--color-text-primary);
    .line-clamp(1);
  }
}

// -----------------------------------------------------------------------------
// Media Audio — audio player
// -----------------------------------------------------------------------------

.chat-media-audio {
  display: flex;
  width: 100%;
  max-width: 20rem;
  align-items: center;
  gap: @sp-3;
  border-radius: @radius-lg;
  border: 1px solid var(--color-border-secondary);
  background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
  padding: @sp-2 @sp-3;

  &__icon {
    .flex-center();
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    border-radius: @radius-full;
    background: color-mix(in srgb, var(--accent-600) 20%, transparent);
  }

  &__player {
    height: 2rem;
    width: 100%;
    min-width: 0;
    flex: 1;
  }

  &__caption {
    margin-top: @sp-0-5;
    .truncate();
    font-size: 0.625rem;
    color: var(--color-text-secondary);
  }
}

// -----------------------------------------------------------------------------
// Lightbox — fullscreen image viewer
// -----------------------------------------------------------------------------

.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: @z-modal;
  .flex-center();
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);

  &__close {
    position: absolute;
    right: @sp-4;
    top: @sp-4;
    .flex-center();
    height: 2.5rem;
    width: 2.5rem;
    border-radius: @radius-full;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: none;
    cursor: pointer;
    .transition-colors();

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

  &__image {
    max-height: 90vh;
    max-width: 90vw;
    border-radius: @radius-lg;
    object-fit: contain;
  }
}

// -----------------------------------------------------------------------------
// Typing Indicator — dots animation
// -----------------------------------------------------------------------------

.chat-typing {
  display: flex;
  align-items: flex-start;
  gap: @sp-4;

  &__icon {
    .flex-center();
    height: 2.25rem;
    width: 2.25rem;
    border-radius: @radius-full;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  &__body {
    flex: 1;
    border-radius: @radius-3xl;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    padding: @sp-3 @sp-4;
  }

  &__text {
    display: flex;
    align-items: center;
    gap: @sp-2;
    font-size: @text-sm;
    color: var(--color-text-secondary);
  }

  &__dots {
    display: flex;
    gap: @sp-1;
  }
}

// -----------------------------------------------------------------------------
// Typing Dots — bouncing dots inside message bubble
// -----------------------------------------------------------------------------

.chat-typing-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: @sp-1 @sp-0-5;

  &__dot {
    width: 7px;
    height: 7px;
    border-radius: @radius-full;
    background: var(--color-text-secondary);
    opacity: 0.4;
    animation: typing-bounce 1.4s ease-in-out infinite;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

// Existing input enrichment classes -------

.chat-input-wrap {
  position: relative;
}

.chat-input-actions {
  position: absolute;
  bottom: @sp-2;
  right: @sp-2;
  display: flex;
  align-items: center;
  gap: @sp-1;
}

.chat-input-help {
  margin-top: @sp-2;
  text-align: center;
  font-size: @text-xs;
  color: @zinc-400;
}

.chat-input-kbd {
  border-radius: @radius-sm;
  background: var(--color-hover-bg);
  padding: 2px @sp-1-5;
}

// @mention autocomplete popup (rooms)
.chat-input-mention-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: @z-dropdown;
  margin-bottom: @sp-2;
  border-radius: @radius-xl;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  padding: @sp-1 0;
  box-shadow: @shadow-xl;

  .dark & {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
  }
}

.chat-input-mention-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: @sp-2;
  padding: @sp-1-5 @sp-3;
  text-align: left;
  font-size: @text-sm;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  .transition-colors();

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

// -----------------------------------------------------------------------------
// Thinking Indicator
// -----------------------------------------------------------------------------

.chat-thinking {
  display: flex;
  align-items: flex-start;
  gap: @sp-4;

  &__icon {
    .flex-center();
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: @radius-full;
    background: color-mix(in srgb, @purple-500 12%, transparent);
    color: @purple-500;
    animation: thinking 1.5s ease-in-out infinite;

    .dark & {
      color: @purple-400;
    }
  }

  &__body {
    flex: 1;
    border-radius: @radius-3xl;
    background: color-mix(in srgb, @purple-500 6%, transparent);
    padding: @sp-3 @sp-4;
  }

  &__label {
    margin-bottom: @sp-1;
    font-size: @text-xs;
    font-weight: @font-medium;
    color: @purple-600;

    .dark & {
      color: @purple-400;
    }
  }

  &__content {
    font-size: @text-sm;
    font-style: italic;
    color: @purple-500;

    .dark & {
      color: @purple-300;
    }
  }
}

// -----------------------------------------------------------------------------
// Tool Calls (old shared classes — kept for backwards compat)
// -----------------------------------------------------------------------------

.tool-call {
  border-radius: @radius-lg;
  border: 1px solid;
  padding: @sp-3;

  &--success {
    border-color: var(--accent-200, @green-200);
    background: var(--accent-50, rgba(34, 197, 94, 0.05));

    .dark & {
      border-color: var(--accent-900, @green-900);
      background: rgba(var(--accent-500-rgb, 34, 197, 94), 0.1);
    }
  }

  &--error {
    border-color: @red-200;
    background: @red-50;

    .dark & {
      border-color: @red-900;
      background: rgba(@red-900, 0.2);
    }
  }

  &--loading {
    border-color: @zinc-200;
    background: @zinc-50;

    .dark & {
      border-color: @zinc-700;
      background: rgba(@zinc-800, 0.5);
    }
  }

  &__header {
    display: flex;
    align-items: center;
    gap: @sp-2;
  }

  &__status-icon {
    .flex-center();
    height: 1.5rem;
    width: 1.5rem;
    border-radius: @radius-full;

    &--success {
      background: var(--accent-200, @green-200);
      color: var(--accent-700, @green-700);

      .dark & {
        background: var(--accent-800, @green-800);
        color: var(--accent-300, @green-300);
      }
    }

    &--error {
      background: @red-200;
      color: @red-700;

      .dark & {
        background: @red-800;
        color: @red-300;
      }
    }

    &--loading {
      background: @zinc-200;
      color: @zinc-700;

      .dark & {
        background: @zinc-700;
        color: @zinc-300;
      }
    }
  }

  &__name {
    display: flex;
    align-items: center;
    gap: @sp-1-5;
    font-size: @text-sm;
    font-weight: @font-medium;
  }

  &__duration {
    margin-left: auto;
    font-size: @text-xs;
    color: @zinc-500;
  }

  &__args {
    margin-top: @sp-2;
    overflow-x: auto;
    font-size: @text-xs;
    color: @zinc-600;

    .dark & {
      color: @zinc-400;
    }
  }

  &__result {
    margin-top: @sp-2;
    overflow-x: auto;
    border-top: 1px solid @zinc-200;
    padding-top: @sp-2;
    font-size: @text-xs;
    color: @zinc-600;

    .dark & {
      border-top-color: @zinc-700;
      color: @zinc-400;
    }
  }

  &__instruction {
    margin-top: @sp-2;
    max-height: 8rem;
    overflow-y: auto;
    .scrollbar-thin();

    pre {
      font-family: @font-mono;
      font-size: @text-xs;
      color: var(--color-text-secondary);
      white-space: pre-wrap;
      word-break: break-word;
    }
  }

  &__media {
    margin-top: @sp-2;
    border-top: 1px solid @zinc-200;
    padding-top: @sp-2;

    .dark & {
      border-top-color: @zinc-700;
    }

    img {
      max-width: 100%;
      border-radius: @radius-md;
    }

    audio {
      width: 100%;
    }

    .meta {
      margin-top: @sp-1;
      font-size: @text-xs;
      font-style: italic;
      color: @zinc-500;

      .dark & {
        color: @zinc-400;
      }
    }
  }
}

// -----------------------------------------------------------------------------
// Usage Display
// -----------------------------------------------------------------------------

.chat-usage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: @sp-4;
  font-size: @text-xs;
  color: @zinc-500;

  .dark & {
    color: @zinc-400;
  }

  &__stat {
    display: flex;
    align-items: center;
    gap: @sp-1-5;
  }
}
