/* ═══════════════════════════════════════════════════════════════
   DPS AI主板 v2.5 — 弹性响应式系统
   核心原则: 不用固定断点, 用 min/max/clamp 连续适配所有尺寸
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ 核心色板 ═══ */
  --bg: #0f0f0f;
  --bg-elevated: #161616;
  --card: #1a1a1a;
  --border: #2a2a2a;
  --border-hover: #3a3a3a;
  --primary: #4f7cff;
  --primary-hover: #3b5fd9;
  --primary-glow: rgba(79,124,255,0.15);
  --text: #d4d4d4;
  --dim: #777;
  --bright: #fff;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #ff4d5a;

  /* ═══ 扩展色板 ═══ */
  --accent: #a78bfa;
  --info: #60a5fa;
  --orange: #f97316;

  /* ═══ 字体 ═══ */
  --font-main: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ═══ 字体层级 ═══ */
  --fs-xs: clamp(9px, 1.1vw, 10px);
  --fs-sm: clamp(11px, 1.3vw, 12px);
  --fs-base: clamp(13px, 1.6vw, 14px);
  --fs-md: clamp(14px, 1.8vw, 16px);
  --fs-lg: clamp(17px, 2.2vw, 20px);
  --fs-xl: clamp(20px, 2.6vw, 24px);

  /* ═══ 侧边栏宽度 (弹性) ═══ */
  --sidebar-w: min(240px, 22vw);

  /* ═══ 圆角体系 ═══ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* ═══ 阴影体系 ═══ */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 24px rgba(79,124,255,0.12);
  --shadow-input-focus: 0 0 0 3px rgba(79,124,255,0.3);

  /* ═══ 间距体系 ═══ */
  --gap-xs: clamp(2px, 0.5vw, 4px);
  --gap-sm: clamp(4px, 1vw, 8px);
  --gap: clamp(6px, 1.5vw, 12px);
  --gap-md: clamp(8px, 2vw, 16px);
  --gap-lg: clamp(12px, 3vw, 24px);

  /* ═══ 触控目标 ═══ */
  --touch-min: 44px;

  /* ═══ 过渡 ═══ */
  --ease: 0.2s ease;
  --ease-out: 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══ 渐变 ═══ */
  --gradient-primary: linear-gradient(135deg, #4f7cff 0%, #7c5cfc 100%);
  --gradient-page: radial-gradient(ellipse at 50% 0%, rgba(79,124,255,0.04) 0%, transparent 55%);
}

/* ═══════════ 全局基础 ═══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-main);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* 填满视口但不溢出 */
  max-width:100vw;
  overflow-x:hidden;
}

/* ═══════════ 全局防溢出 ═══════════ */
img,svg,video,canvas,iframe,table{max-width:100%;height:auto}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

/* ═══════════ 弹性侧边栏 (所有页面通用) ═══════════ */
.sidebar{
  width:var(--sidebar-w) !important;
  flex-shrink:0;
}

/* ═══════════ 窄屏：侧边栏变overlay (<=780px) ═══════════ */
@media(max-width: 780px){
  .sidebar:not(.keep-sidebar){
    position:fixed !important;
    left:calc(var(--sidebar-w) * -1 - 20px) !important;
    top:0 !important; bottom:0 !important;
    z-index:200 !important;
    width:min(280px, 85vw) !important;
    transition:left 0.25s ease !important;
  }
  .sidebar.open,.sidebar.sb-open{
    left:0 !important;
    box-shadow:4px 0 30px rgba(0,0,0,0.6) !important;
  }
  .sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199}
  .sb-backdrop.show,.sb-backdrop.open{display:block}
  .sb-hamburger{display:inline-flex !important;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text);font-size:18px;cursor:pointer;padding:8px 12px;
    min-width:var(--touch-min);min-height:var(--touch-min)}
  .sb-hamburger:hover{border-color:var(--primary)}
  .main,.main-panel{width:100% !important}
}

/* ═══════════ 卡片 ═══════════ */
.app-card{
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-card) !important;
  transition:transform var(--ease-out),box-shadow var(--ease-out),border-color var(--ease-out) !important;
  padding:clamp(12px, 2.5vw, 20px) !important;
  border:1px solid transparent;
}
.app-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card-hover),var(--shadow-glow) !important;
  border-color:rgba(79,124,255,0.15);
}

/* ═══════════ 弹性卡片网格 ═══════════ */
.app-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}

/* ═══════════ 按钮 ═══════════ */
button,.ib-btn,.ib-send-btn,.ib-toggle-chip{
  border-radius:var(--radius-sm) !important;
  transition:all var(--ease-out) !important;
  cursor:pointer;font-family:inherit;
}
button:hover{filter:brightness(1.15)}
button:active{transform:scale(0.96)}

.btn-primary,button.primary,.bar button:not(.stop){
  background:var(--gradient-primary) !important;
  border:none !important;color:#fff !important;
  font-weight:600;box-shadow:0 2px 8px rgba(79,124,255,0.3);
}
.btn-primary:hover,button.primary:hover{
  box-shadow:0 4px 16px rgba(79,124,255,0.4);transform:translateY(-1px);
}

/* ═══════════ 输入框 ═══════════ */
input[type="text"],input[type="password"],input[type="search"],input[type="email"],textarea,select{
  border-radius:var(--radius-sm) !important;
  transition:border-color var(--ease),box-shadow var(--ease) !important;
  font-family:inherit;max-width:100%;
}
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:var(--primary) !important;
  box-shadow:var(--shadow-input-focus) !important;
}

/* ═══════════ 消息气泡 ═══════════ */
.msg{
  border-radius:var(--radius-lg) !important;
  padding:clamp(8px, 1.5vw, 16px) !important;
  max-width:min(85%, 600px);
}
.msg.user{
  background:var(--gradient-primary) !important;
  color:#fff !important;
  border-bottom-right-radius:var(--radius-xs) !important;
}
.msg.ai{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-bottom-left-radius:var(--radius-xs) !important;
}

/* ═══════════ 毛玻璃 ═══════════ */
.topbar,.sidebar-header,.sidebar-footer{
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* ═══════════ 滚动条 ═══════════ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}

/* ═══════════ 触控优化 (所有屏幕) ═══════════ */
@media(pointer:coarse){
  button,select,.ib-btn,.ib-send-btn,.ib-toggle-chip,
  input[type="text"],input[type="password"],textarea,
  .conv-item,.app-card{
    min-height:var(--touch-min);min-width:var(--touch-min);
  }
  body{font-size:max(14px, var(--fs-base))}
}