/* ========== 主布局 ========== */
.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 0;
  gap: 0;
  height: calc(100vh - 34px);
  margin: 16px 20px 18px;
  padding: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(239, 247, 253, 0.26));
  box-shadow: var(--shadow-lg);
  transition: grid-template-columns 220ms ease;
}

.shell.inspection-mode {
  grid-template-columns: 248px minmax(440px, 0.72fr) minmax(360px, 0.9fr);
}

.shell.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr) 0;
}

.shell.sidebar-collapsed.inspection-mode {
  grid-template-columns: 68px minmax(440px, 0.72fr) minmax(360px, 0.9fr);
}

/* ========== 通用面板样式 ========== */
.sidebar,
.chat-panel,
.right-panel {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* 面板内部渐变边框效果 */
.sidebar::before,
.chat-panel::before,
.right-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--glass-sheen);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .sidebar::before,
[data-theme="dark"] .chat-panel::before,
[data-theme="dark"] .right-panel::before {
  background: var(--glass-sheen);
}

.sidebar::after,
.chat-panel::after,
.right-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 34%),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.32), transparent 32%);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}

.sidebar > *,
.chat-panel > *,
.right-panel > * {
  position: relative;
  z-index: 1;
}

.sidebar {
  z-index: 2;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: calc(var(--radius-xl) - 1px);
  box-shadow: 16px 0 34px rgba(46, 72, 100, 0.12), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.chat-panel {
  z-index: 1;
  height: auto;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.inspector-panel {
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--panel-strong) 72%, var(--bg-subtle));
  box-shadow: -18px 0 36px rgba(46, 72, 100, 0.10);
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease;
  overflow: hidden;
}

.shell.inspection-mode .inspector-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.chat-panel::after {
  display: none;
}

.chat-panel::before {
  display: none;
}

[data-theme="dark"] .chat-panel {
  background: rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] .shell {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.42), rgba(15, 23, 42, 0.24));
}

[data-theme="dark"] .sidebar {
  border-right-color: color-mix(in srgb, var(--border) 86%, transparent);
  box-shadow: 16px 0 36px rgba(0, 0, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
