/**
 * @license
 * Copyright 2025 Qwen Team
 * SPDX-License-Identifier: Apache-2.0
 *
 * Styles extracted from Claude Code extension (v2.0.43)
 * Path: /Users/jinjing/Downloads/Anthropic.claude-code-2.0.43/extension/webview/index.css
 */

/* Import component styles */
@import './components/SaveSessionDialog.css';
@import './components/SessionManager.css';
@import './components/MessageContent.css';
@import './components/EmptyState.css';
@import './components/CompletionMenu.css';
@import './components/ContextPills.css';
@import './components/PermissionDrawer.css';
@import './components/PlanDisplay.css';
@import './components/Timeline.css';
@import './components/shared/FileLink.css';
@import './components/toolcalls/shared/DiffDisplay.css';

/* ===========================
   Header Styles (from Claude Code .he)
   =========================== */
.chat-header {
  display: flex;
  border-bottom: 1px solid var(--app-primary-border-color);
  padding: 6px 10px;
  gap: 4px;
  background-color: var(--app-header-background);
  justify-content: flex-start;
  user-select: none;
}

/* ===========================
   Session Selector Button (from Claude Code .E)
   =========================== */
.session-selector-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  min-width: 0;
  max-width: 300px;
  overflow: hidden;
  font-size: var(--vscode-chat-font-size, 13px);
  font-family: var(--vscode-chat-font-family);
}

.session-selector-button:focus,
.session-selector-button:hover {
  background: var(--app-ghost-button-hover-background);
}

/* Session Selector Button Internal Elements */
.session-selector-button-content {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 300px;
  overflow: hidden;
}

.session-selector-button-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.session-selector-button-icon {
  flex-shrink: 0;
}

.session-selector-button-icon svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

/* ===========================
   Icon Button (from Claude Code .j)
   =========================== */
.icon-button {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  width: 24px;
  height: 24px;
}

.icon-button:focus,
.icon-button:hover {
  background: var(--app-ghost-button-hover-background);
}

/* ===========================
   Session Dropdown (from Claude Code .St/.Wt)
   =========================== */
.session-dropdown {
  position: fixed;
  background: var(--app-menu-background);
  border: 1px solid var(--app-menu-border);
  border-radius: var(--corner-radius-small);
  width: min(400px, calc(100vw - 32px));
  max-height: min(500px, 50vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  outline: none;
  font-size: var(--vscode-chat-font-size, 13px);
  font-family: var(--vscode-chat-font-family);
}

/* ===========================
   Search Box Container (from Claude Code .Lt)
   =========================== */
.session-search {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--app-menu-border);
}

.session-search svg,
.session-search-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  flex-shrink: 0;
  color: var(--app-primary-foreground);
}

/* Search Input (from Claude Code .U) */
.session-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--app-menu-foreground);
  font-size: var(--vscode-chat-font-size, 13px);
  font-family: var(--vscode-chat-font-family);
  padding: 0;
}

.session-search-input::placeholder {
  color: var(--app-input-placeholder-foreground);
  opacity: 0.6;
}

/* Session List Content Area (from Claude Code .jt/.It) */
.session-list-content {
  overflow-y: auto;
  flex: 1;
  user-select: none;
  padding: 8px;
}

/* Group Label (from Claude Code .ae) */
.session-group-label {
  padding: 4px 8px;
  color: var(--app-primary-foreground);
  opacity: 0.5;
  font-size: 0.9em;
  font-weight: 500;
}

.session-group-label:not(:first-child) {
  margin-top: 8px;
}

/* Session Group Container (from Claude Code .At) */
.session-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Session Item Button (from Claude Code .s) */
.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: var(--vscode-chat-font-size, 13px);
  font-family: var(--vscode-chat-font-family);
  color: var(--app-primary-foreground);
  transition: background 0.1s ease;
}

.session-item:hover {
  background: var(--app-list-hover-background);
}

/* Active Session (from Claude Code .N) */
.session-item.active {
  background: var(--app-list-active-background);
  color: var(--app-list-active-foreground);
  font-weight: 600;
}

/* Session Title (from Claude Code .ce) */
.session-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Session Time (from Claude Code .Dt) */
.session-item-time {
  opacity: 0.6;
  font-size: 0.9em;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Backdrop for dropdown */
.session-selector-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}

/* ===========================
   CSS Variables (from Claude Code root styles)
   =========================== */
:root {
  /* Colors */
  --app-primary-foreground: var(--vscode-foreground);
  --app-secondary-foreground: var(--vscode-descriptionForeground);
  --app-primary-border-color: var(--vscode-panel-border);
  --app-input-placeholder-foreground: var(--vscode-input-placeholderForeground);

  /* Buttons */
  --app-ghost-button-hover-background: var(--vscode-toolbar-hoverBackground);

  /* Border Radius */
  --corner-radius-small: 6px;

  /* Header */
  --app-header-background: var(--vscode-sideBar-background);

  /* List Styles */
  --app-list-padding: 0px;
  --app-list-item-padding: 4px 8px;
  --app-list-border-color: transparent;
  --app-list-border-radius: 4px;
  --app-list-hover-background: var(--vscode-list-hoverBackground);
  --app-list-active-background: var(--vscode-list-activeSelectionBackground);
  --app-list-active-foreground: var(--vscode-list-activeSelectionForeground);
  --app-list-gap: 2px;

  /* Menu Styles */
  --app-menu-background: var(--vscode-menu-background);
  --app-menu-border: var(--vscode-menu-border);
  --app-menu-foreground: var(--vscode-menu-foreground);
  --app-menu-selection-background: var(--vscode-menu-selectionBackground);
  --app-menu-selection-foreground: var(--vscode-menu-selectionForeground);

  /* Tool Call Styles */
  --app-tool-background: var(--vscode-editor-background);
  --app-code-background: var(--vscode-textCodeBlock-background);

  /* Warning/Error Styles */
  --app-warning-background: var(--vscode-editorWarning-background, rgba(255, 204, 0, 0.1));
  --app-warning-border: var(--vscode-editorWarning-foreground, #ffcc00);
  --app-warning-foreground: var(--vscode-editorWarning-foreground, #ffcc00);
}

/* ===========================
   Tool Call Card (from Claude Code .Ne)
   =========================== */
.tool-call-card {
  border: 0.5px solid var(--app-input-border);
  border-radius: 5px;
  background: var(--app-tool-background);
  margin: 8px 0;
  max-width: 100%;
  font-size: 1em;
  align-items: start;
}

/* Tool Call Grid Layout (from Claude Code .Ke) */
.tool-call-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
}

/* Tool Call Row (from Claude Code .no) */
.tool-call-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 0.5px solid var(--app-input-border);
  padding: 4px;
}

.tool-call-row:first-child {
  border-top: none;
}

/* Tool Call Label (from Claude Code .Je) */
.tool-call-label {
  grid-column: 1;
  color: var(--app-secondary-foreground);
  text-align: left;
  opacity: 0.5;
  padding: 4px 8px 4px 4px;
  font-family: var(--app-monospace-font-family);
  font-size: 0.85em;
}

/* Tool Call Value (from Claude Code .m) */
.tool-call-value {
  grid-column: 2;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 4px;
}

.tool-call-value:not(.expanded) {
  max-height: 60px;
  mask-image: linear-gradient(to bottom, var(--app-primary-background) 40px, transparent 60px);
  overflow: hidden;
}

.tool-call-value pre {
  margin-block: 0;
  overflow: hidden;
  font-family: var(--app-monospace-font-family);
  font-size: 0.85em;
}

.tool-call-value code {
  margin: 0;
  padding: 0;
  font-family: var(--app-monospace-font-family);
  font-size: 0.85em;
}

/* Tool Call Icon (from Claude Code .to) */
.tool-call-icon {
  margin: 8px;
  opacity: 0.5;
}

/* Code Block (from Claude Code ._e) */
.code-block {
  background-color: var(--app-code-background);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px;
  font-family: var(--app-monospace-font-family);
  font-size: 0.85em;
}

/* Code content wrapper for better scrolling */
.code-content {
  max-height: 300px;
  overflow-y: auto;
  display: block;
}

/* Diff display container */
.diff-display-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--app-primary-border-color);
}

.diff-file-path {
  font-weight: 500;
  color: var(--app-secondary-foreground);
}

.open-diff-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--app-ghost-button-hover-background);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  color: var(--app-secondary-foreground);
}

.open-diff-button:hover {
  background: var(--vscode-button-hoverBackground);
  color: var(--vscode-button-foreground);
}

.diff-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diff-label {
  font-weight: 500;
  color: var(--app-secondary-foreground);
  font-size: 0.85em;
}

/* Status indicators for tool calls */
.tool-call-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-call-status-indicator::before {
  content: "●";
  font-size: 10px;
}

.tool-call-status-indicator.pending::before {
  color: var(--app-secondary-foreground);
}

.tool-call-status-indicator.in-progress::before {
  color: #e1c08d;
  animation: blink 1s linear infinite;
}

.tool-call-status-indicator.completed::before {
  color: #74c991;
}

.tool-call-status-indicator.failed::before {
  color: #c74e39;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}