/* Optimized transitions - only on interactive/visual elements, not layout */
button, input, select, textarea, a, .button, .session-item, .tool-item, .skill-item,
.modal, .modal-content, .message, .collapsible-content {
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base);
}

/* Theme transition - slower for panels */
.sidebar, .chat-panel, .right-panel, .topbar, .composer {
  transition: background-color var(--transition-theme),
              border-color var(--transition-theme),
              box-shadow var(--transition-theme);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg) var(--bg-pattern);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(118deg, transparent 0 19%, rgba(84, 117, 151, 0.17) 19% calc(19% + 1px), transparent calc(19% + 1px) 100%),
    linear-gradient(28deg, transparent 0 26%, rgba(84, 117, 151, 0.12) 26% calc(26% + 1px), transparent calc(26% + 1px) 100%),
    radial-gradient(circle at 18% 22%, rgba(61, 92, 130, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(61, 92, 130, 0.30) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 64%, rgba(61, 92, 130, 0.26) 0 2px, transparent 3px);
  background-size: 240px 180px, 220px 170px, 190px 150px, 260px 190px, 210px 180px;
  opacity: 0.52;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.10) 38%, rgba(147, 177, 207, 0.22)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.36), transparent 28%, rgba(255, 255, 255, 0.24));
  opacity: 0.78;
  pointer-events: none;
}

[data-theme="dark"] body::before {
  background:
    linear-gradient(118deg, transparent 0 19%, rgba(148, 163, 184, 0.12) 19% calc(19% + 1px), transparent calc(19% + 1px) 100%),
    linear-gradient(28deg, transparent 0 26%, rgba(148, 163, 184, 0.09) 26% calc(26% + 1px), transparent calc(26% + 1px) 100%),
    radial-gradient(circle at 18% 22%, rgba(148, 163, 184, 0.20) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(148, 163, 184, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 64%, rgba(148, 163, 184, 0.16) 0 2px, transparent 3px);
  background-size: 240px 180px, 220px 170px, 190px 150px, 260px 190px, 210px 180px;
  opacity: 0.30;
}

[data-theme="dark"] body::after {
  opacity: 0.22;
}

.global-knowledge-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100vw - 28px));
  padding: 12px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--accent-soft));
  box-shadow: var(--shadow-xl);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.global-knowledge-toast[hidden] {
  display: none;
}

.global-knowledge-toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.global-knowledge-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: indexing-spin 900ms linear infinite;
}

.global-knowledge-copy {
  flex: 1;
  min-width: 0;
}

.global-knowledge-title {
  font-size: 13px;
  font-weight: 700;
}

.global-knowledge-desc {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.global-knowledge-progress {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--border-subtle));
}

.global-knowledge-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.35);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
