/* ================================================================
   TROOLLA — Global Custom CSS v5.1
   Deploy: COPY custom_v5.1.css /app/build/static/custom.css
   Alt:    docker volume: ./custom.css:/app/build/static/custom.css:ro
   
   v5.1 "Executive Advisory Experience" — Token-Aligned with artifact.css v6.2 — OWUI v0.8.12 Native
   Platform: Tailwind CSS v3 (confirmed) + Svelte 5 + TipTap v3
   
   ┌────────────────────────────────────────────────────────────┐
   │  CLEAN REBUILD: v4.3 base + v4.4 + v4.5 → deduplicated   │
   │  Removed 31→15 blockquote rules (eliminated conflicts)    │
   │                                                            │
   │  Architecture:                                             │
   │    §0-§4:   Core tokens + typography + sidebar + input     │
   │    §5-§6:   ★ Artifact card redesign + HTML nuclear hide  │
   │    §7-§13:  Code + buttons + tables + scroll + responsive  │
   │    §14-§18: Alerts + tooltips + modals + tool groups       │
   │    §19-§26: Writing + checkbox + admin + terminal + a11y   │
   │    v4.4:    17 production UI fixes (settings/workspace)    │
   │    v4.5:    9 production UI fixes + artifact card rebuild  │
   │                                                            │
   
   │  v5.1 TOKEN ALIGNMENT with artifact.css v6.2:             │
   │    --up-fg: #1C1B19 (was #1C1C1A)                        │
   │    --up-muted-fg: #706D66 (was #6B6A65, WCAG 4.5:1)      │
   │    --up-muted: #F0EDE6 (was #EDEAE2)                      │
   │    Dark --up-fg: #EDEBE6 (was #EEEEEB)                    │
   │    Dark --up-fg-secondary: #9B998F (was #9A9893)           │
   │    Dark --up-card: #2A2926 (was #2C2B27)                   │
   │    Dark --up-muted: #302F2B (was #2C2B27)                  │
   │                                                            │
   │  Total: 26 UI issues fixed · 186 rule blocks · 1552 lines │
   │  Test: 96% pass (44/46) · 2 architectural known limits    │
   │  China-safe · No @import · Backward-compat v4.0+          │
   └────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §0: DESIGN TOKENS — DUAL-LAYER ARCHITECTURE               ║
   ║  Layer A: Override OWUI native --color-gray-* [FIX W-01]   ║
   ║  Layer B: Troolla --up-* custom tokens (our CSS rules)      ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
  /* ── Layer A: OWUI Tailwind Gray Override — warm-shifted [FIX W-01] ──
     [FIX A-03] v4.3: Removed !important from :root (Light mode).
     Tailwind v3 var(--color-gray-*, fallback) propagates without it.
     !important retained ONLY in .dark block (needed to beat OLED
     inline style from document.documentElement.style.setProperty). ── */
  --color-gray-50:  #FAF8F4;  /* was #f9f9f9 (neutral) */
  --color-gray-100: #F0EDE6;  /* was #ececec */
  --color-gray-200: #E5E2DA;  /* was #e3e3e3 */
  --color-gray-300: #D2CFC6;  /* was #cdcdcd */
  --color-gray-400: #B5B2A9;  /* was #b4b4b4 */
  --color-gray-500: #9A9790;  /* was #9b9b9b */
  --color-gray-600: #6E6B64;  /* was #676767 */
  --color-gray-700: #504E48;  /* was #4e4e4e */
  --color-gray-800: #38362F;  /* was #333333 */
  --color-gray-850: #2C2A24;  /* was #262626 — OWUI's custom shade */
  --color-gray-900: #1E1D18;  /* was #171717 */
  --color-gray-950: #14130F;  /* was #0d0d0d */

  /* ── Layer B: Upskill custom tokens ── */
  --up-primary: #3b82f6; --up-primary-light: #60a5fa; --up-primary-dark: #2563eb;
  --up-secondary: #10b981; --up-accent: #f59e0b; --up-danger: #ef4444;
  --up-surface-sidebar: #F6F4EE; --up-surface-chat: #EAE6DD;  /* soft off-white card vs deeper sand canvas — clear separation (§3.5) */
  --up-surface-input: #FFFFFF; --up-surface-card: #FFFFFF;
  --up-user-bubble: #E2DED4; --up-bg: #F5F3EE;
  --up-fg: #1C1B19;/* aligned w/ artifact.css v6.2 */ --up-fg-secondary: #706D66; --up-muted-fg: #706D66;/* WCAG 4.5:1 aligned w/ artifact v6.2 */
  --up-card: #FFFFFF; --up-muted: #F0EDE6;/* aligned w/ artifact --muted */
  --up-border: rgba(0,0,0,0.08); --up-border-strong: rgba(0,0,0,0.14);
  --up-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
  --up-gradient-subtle: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(96,165,250,0.03));
  --up-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --up-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  --up-shadow-lg: 0 10px 20px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03);
  --up-shadow-accent: 0 4px 14px rgba(59,130,246,0.15);
  --up-shadow-accent-lg: 0 8px 24px rgba(59,130,246,0.2);
  --up-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --up-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --up-radius-sm: 8px; --up-radius-md: 12px; --up-radius-lg: 16px;
  --up-radius-xl: 20px; --up-radius-full: 9999px;
  --up-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --up-duration: 200ms; --up-duration-slow: 400ms;
}

.dark {
  /* ── Layer A: Dark mode gray override — warm darks [FIX W-01] ── */
  --color-gray-50:  #FAF8F4 !important;
  --color-gray-100: #E8E5DD !important;
  --color-gray-200: #D2CFC6 !important;
  --color-gray-300: #A5A29A !important;
  --color-gray-400: #8A877F !important;
  --color-gray-500: #706D66 !important;
  --color-gray-600: #585550 !important;
  --color-gray-700: #3E3C37 !important;
  --color-gray-800: #302E29 !important;
  --color-gray-850: #2A2825 !important;  /* OWUI's most-used dark surface */
  --color-gray-900: #222019 !important;
  --color-gray-950: #181610 !important;

  /* ── Layer B: Upskill dark tokens ── */
  --up-primary: #60a5fa; --up-primary-light: #93c5fd; --up-primary-dark: #3b82f6;
  --up-secondary: #34d399; --up-accent: #fbbf24; --up-danger: #f87171;
  --up-surface-sidebar: #2E2C27; --up-surface-chat: #252420;  /* card lighter than backdrop, mirroring light mode (§3.5) */
  --up-surface-input: #1F1E1B; --up-surface-card: #2A2926;
  --up-user-bubble: #3A3935; --up-bg: #252420;
  --up-fg: #EDEBE6; --up-fg-secondary: #9B998F; --up-muted-fg: #9B998F;/* aligned w/ artifact v6.2 */
  --up-card: #2A2926; --up-muted: #302F2B;/* aligned w/ artifact v6.2 */
  --up-border: rgba(255,255,255,0.08); --up-border-strong: rgba(255,255,255,0.14);
  --up-gradient: linear-gradient(135deg, #60a5fa, #93c5fd);
  --up-gradient-subtle: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(147,197,253,0.03));
  --up-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --up-shadow-md: 0 4px 6px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  --up-shadow-lg: 0 10px 20px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.15);
  --up-shadow-accent: 0 4px 14px rgba(96,165,250,0.2);
  --up-shadow-accent-lg: 0 8px 24px rgba(96,165,250,0.25);
}

/* ── [FIX W-04 + FIX A-01] OLED Dark warm re-override ──
   v4.3: Loosened selector — matches any inline --color-gray-900 value,
   regardless of whitespace serialization. Safer across browsers.
   OWUI sets via document.documentElement.style.setProperty(). ── */
html.dark[style*="--color-gray-900"] {
  --color-gray-800: #1A1815 !important;
  --color-gray-850: #100E0B !important;
  --color-gray-900: #080704 !important;
  --color-gray-950: #040300 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §1: WARM SURFACE LAYERING                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

body, main, [class*="flex"][class*="h-screen"] {
  background-color: var(--up-surface-chat) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §2: EXECUTIVE TYPOGRAPHY  [FIX W-02: +.markdown-prose]    ║
   ╚══════════════════════════════════════════════════════════════╝ */

body {
  font-family: var(--up-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
pre, code, pre *, code *, .hljs, .hljs *, [class*="code-editor"] * {
  font-family: var(--up-font-mono) !important;
}
/* [FIX W-02] Dual selector: .prose + .markdown-prose */
.prose,
.markdown-prose {
  font-family: var(--up-font) !important;
  font-size: 16px !important; /* [FIX] match artifact body (fixed 16px), was fluid clamp(15-17px) -> chat looked bigger than artifact */
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  color: var(--up-fg) !important;
  max-width: 72ch !important;
}

/* [FIX W-02] Role containers */
.chat-assistant { font-family: var(--up-font) !important; }
.chat-user { font-family: var(--up-font) !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §2A: RESPONSE VISUAL HIERARCHY  [FIX W-02]                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.prose p, .markdown-prose p { margin: 10px 0 !important; }
.prose strong, .markdown-prose strong { font-weight: 700 !important; color: var(--up-fg) !important; }

.prose h1, .prose h2, .prose h3, .prose h4,
.markdown-prose h1, .markdown-prose h2, .markdown-prose h3, .markdown-prose h4 {
  letter-spacing: -0.02em !important; color: var(--up-fg) !important;
}
.prose h1, .markdown-prose h1 { font-size: 1.5em !important; font-weight: 700 !important; margin: 1.6em 0 0.6em !important; line-height: 1.25 !important; }
.prose h2, .markdown-prose h2 { font-size: 1.3em !important; font-weight: 600 !important; margin: 1.5em 0 0.5em !important; line-height: 1.3 !important; padding-bottom: 0.3em !important; border-bottom: 1px solid var(--up-border) !important; }
.prose h3, .markdown-prose h3 { font-size: 1.12em !important; font-weight: 600 !important; margin: 1.3em 0 0.4em !important; line-height: 1.35 !important; }
.prose > h1:first-child, .prose > h2:first-child, .prose > h3:first-child,
.markdown-prose > h1:first-child, .markdown-prose > h2:first-child, .markdown-prose > h3:first-child { margin-top: 0 !important; }

.prose ul, .prose ol, .markdown-prose ul, .markdown-prose ol { margin: 10px 0 !important; padding-left: 1.5em !important; }
.prose li, .markdown-prose li { margin: 5px 0 !important; line-height: 1.6 !important; }
.prose li::marker, .markdown-prose li::marker { color: var(--up-primary) !important; font-weight: 600 !important; }

.prose code:not(pre code), .markdown-prose code:not(pre code) {
  background-color: rgba(0,0,0,0.05) !important; padding: 0.15em 0.4em !important;
  border-radius: 5px !important; font-size: 0.88em !important; font-weight: 500 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.dark .prose code:not(pre code), .dark .markdown-prose code:not(pre code) {
  background-color: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.06) !important;
}
.prose hr, .markdown-prose hr { border: none !important; border-top: 1px solid var(--up-border) !important; margin: 1.5em 0 !important; }

/* §2B: CJK Typography */
:lang(zh), :lang(zh-CN), :lang(zh-Hans), [lang="zh"], [lang="zh-CN"] { line-height: 1.75 !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §3: SIDEBAR                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Sidebar root surface. The previous `[id*="sidebar"]` substring matcher
   leaked onto every descendant with "sidebar" in its id (e.g.
   id="sidebar-chat-item-menu", "sidebar-home-button", etc), giving each
   one the cream bg + a vertical border-right. Use `#sidebar` only — the
   `nav[class*="sidebar"]` keeps the OWUI v0.7 fallback. */
#sidebar, nav[class*="sidebar"] {
  background-color: var(--up-surface-sidebar) !important;
  border-right: 1px solid var(--up-border) !important;
}
/* Active item — broadened selectors for v0.8.x.
   Use ~= (whole-token) so that Tailwind variant classes like
   `hover:bg-gray-100` or `dark:hover:bg-gray-900` don't false-trigger
   this rule on every sidebar nav anchor. */
#sidebar a[class~="bg-gray-100"],
#sidebar a[class~="bg-gray-200"],
#sidebar a[class~="bg-gray-800"],
#sidebar a[class~="bg-gray-850"],
#sidebar a[class~="bg-gray-900"],
#sidebar a[aria-current="page"],
nav [class~="bg-gray-100"] a[class~="active"],
nav [class~="bg-gray-200"] a[class~="active"],
nav a[aria-current="page"] {
  border-left: 3px solid var(--up-primary) !important;
  background: var(--up-gradient-subtle) !important;
  border-radius: 0 var(--up-radius-sm) var(--up-radius-sm) 0 !important;
}
/* New Chat button */
[id*="sidebar"] button[aria-label*="new"],
[id*="sidebar"] button[aria-label*="New"],
button[id*="new-chat"] {
  background: var(--up-gradient) !important; color: white !important;
  border: none !important; border-radius: var(--up-radius-md) !important;
  box-shadow: var(--up-shadow-accent) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
[id*="sidebar"] button[aria-label*="new"]:hover,
[id*="sidebar"] button[aria-label*="New"]:hover,
button[id*="new-chat"]:hover {
  box-shadow: var(--up-shadow-accent-lg) !important;
  transform: translateY(-1px) !important; filter: brightness(1.08) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §3.5: FLOATING CARD LAYOUT  [sidemenu/chat separation]    ║
   ║                                                              ║
   ║  Goal: stop the sidemenu reading as the same surface as the  ║
   ║  conversation. The CONVERSATION stays full-bleed; the SIDE   ║
   ║  MENU floats on it as a rounded, bordered card. The app-shell ║
   ║  backdrop keeps the chat tint (§1), so the gaps around the   ║
   ║  sidebar card read as one continuous surface with the chat,  ║
   ║  and the darker sidebar tint + shadow lift the menu off it.  ║
   ║  Tokens drive the color, so dark mode inherits the same       ║
   ║  relationship (sidebar tint is darker than chat tint).       ║
   ║                                                              ║
   ║  Scoped to md+ : on mobile the sidebar is an overlay drawer, ║
   ║  so it stays full-bleed (no inset card).                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (min-width: 768px) {
  /* Side menu → floating card. The expanded sidebar is position:fixed,
     top/left:0, with min-h-screen + h-screen, so the height trio must all
     be overridden and the element inset with margin. [data-state="true"]
     scopes this to the EXPANDED sidebar only — the collapsed rail (a
     separate #sidebar with no data-state attr) is left untouched. */
  #sidebar[data-state="true"] {
    height: calc(100dvh - 1rem) !important;
    min-height: calc(100dvh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    margin: 0.5rem !important;
    border: 1px solid var(--up-border) !important;
    border-right: 1px solid var(--up-border) !important;  /* override §3 */
    border-radius: var(--up-radius-lg) !important;
    box-shadow: var(--up-shadow-md) !important;
    overflow: hidden !important;  /* clip content to the rounded corners */
  }
  /* The inner content wrapper is itself h-screen (100vh); shrink it to the
     card so the bottom (account / help) isn't clipped by the 1rem inset. */
  #sidebar[data-state="true"] > div[class*="justify-between"] {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    /* The content column is offset by the full --sidebar-width, but the card
       has an 8px left margin, so a full-width card overflows ~10px INTO the
       content column — leaving the middle-panel title only ~8px from the
       card. Shrink the card content to fit within its column (minus the
       card's L+R margins, plus breathing room) so a real gap opens before
       the title. Content position is untouched, so this fixes every page. */
    width: calc(var(--sidebar-width) - 1.5rem) !important;
  }
  /* CRITICAL: §1's broad `[class*="flex"][class*="h-screen"]` rule also
     matches the sidebar's inner content wrapper (it has both `flex` and
     `h-screen`), so it paints that wrapper the CHAT color with !important —
     hiding the white card surface and making the menu look identical to the
     conversation. Force the sidebar's flex/h-screen descendants transparent
     so the #sidebar card background (--up-surface-sidebar) shows through. */
  #sidebar [class*="flex"][class*="h-screen"] {
    background-color: transparent !important;
  }
  /* Collapsed icon rail = a SEPARATE #sidebar element with NO data-state
     attr. Float it too so both states share the card language. It's an
     in-flow, h-full flex child (not fixed), so an explicit height + margin
     is enough; its content fills via flex-1, so no inner override needed. */
  #sidebar:not([data-state]) {
    height: calc(100dvh - 1rem) !important;
    margin: 0.5rem !important;
    border: 1px solid var(--up-border) !important;
    border-radius: var(--up-radius-lg) !important;
    box-shadow: var(--up-shadow-md) !important;
    overflow: hidden !important;  /* clip content to the rounded corners */
  }
  /* The resize separator draws a vertical border-l hairline at the sidebar's
     right edge — it reads as a line between the menu card and the chat.
     Remove the visible border; drag still works via the inner -left-1.5/
     -right-1.5 transparent hit area. */
  #sidebar-resizer {
    border-left: none !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §3.6: NAVBAR TOP-FADE CONSISTENCY                          ║
   ║                                                              ║
   ║  The chat navbar's top gradient (#navbar-bg-gradient-to-b)   ║
   ║  fades from WHITE (`from-white/90 … to-transparent`), which   ║
   ║  reads as a white band over the sand canvas. Recolor it to   ║
   ║  fade from the canvas tint instead, so the scroll-fade still  ║
   ║  masks messages under the model selector but is visually      ║
   ║  seamless. var(--up-surface-chat) resolves per-theme          ║
   ║  (light sand / dark canvas), so one rule covers both.        ║
   ╚══════════════════════════════════════════════════════════════╝ */
#navbar-bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    var(--up-surface-chat) 0%,
    var(--up-surface-chat) 40%,
    transparent 97%
  ) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §4: CHAT INPUT  [FIX W-05: +TipTap v3]                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Outer chatbox chrome (OWUI's #message-input-container already provides
   shadow-lg + rounded-3xl + border via Tailwind). We don't add a second
   set of border/shadow here — that produced visible nested boxes.
   Background is forced white so the white input surface shows even on
   themes where the parent might be tinted. */
#message-input-container {
  background-color: var(--up-surface-input) !important;
}
/* Inner editor wrapper: strip any inherited chrome so only the outer
   container's rounded border + shadow are visible. Padding stays as-is. */
#chat-input-container {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Focus — textarea + TipTap contenteditable [FIX W-05].
   The inner contenteditable used to grow a 3px blue box-shadow ring on
   focus, which appears INSIDE the chatbox (because the contenteditable
   sits inside #message-input-container). Move the focus indicator to
   the outer container via `:focus-within` instead — a subtle blue
   border tint, accessible without painting a ring inside the box. */
textarea:focus,
[contenteditable="true"]:focus,
.tiptap.ProseMirror:focus {
  outline: none !important;
  box-shadow: none !important;
}
#message-input-container:focus-within {
  border-color: var(--up-primary) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
/* TipTap editor warm styling [FIX W-05] */
.input-prose,
.tiptap.ProseMirror {
  font-family: var(--up-font) !important;
  color: var(--up-fg) !important;
  caret-color: var(--up-primary) !important;
}
.tiptap.ProseMirror p.is-editor-empty:first-child::before {
  color: var(--up-muted-fg) !important;
}
/* Send button */
button[type="submit"], button[aria-label*="Send"],
button[aria-label*="send"], #send-message-button {
  background: var(--up-gradient) !important; border: none !important;
  border-radius: var(--up-radius-md) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
button[type="submit"]:hover, button[aria-label*="Send"]:hover,
#send-message-button:hover {
  box-shadow: var(--up-shadow-accent) !important;
  transform: translateY(-1px) !important;
}
button[type="submit"]:active, button[aria-label*="Send"]:active { transform: scale(0.97) !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §7: CODE BLOCKS  [FIX W-02]                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

.prose pre:not(:has(> code.language-html)):not(:has(> code.hljs.language-html)),
.markdown-prose pre:not(:has(> code.language-html)):not(:has(> code.hljs.language-html)) {
  background-color: #1E1E1E !important; border-radius: var(--up-radius-md) !important;
  border: 1px solid var(--up-border) !important; box-shadow: var(--up-shadow-sm) !important;
  padding: 1rem !important;
}
.prose pre:not(:has(> code.language-html)) code,
.markdown-prose pre:not(:has(> code.language-html)) code {
  font-size: 13.5px !important; line-height: 1.5 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §8: BUTTONS & INTERACTIVE                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible {
  outline: 2px solid var(--up-primary) !important; outline-offset: 2px !important;
}
/* Model selector search input opts out of the global focus-ring — the
   dropdown autofocuses it on open, which was painting a primary-blue
   outline inside the panel that read as an "inner shadow" frame.
   Upstream (Selector.svelte) already declares `outline-hidden`. */
#model-search-input:focus,
#model-search-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
button { transition: all var(--up-duration) var(--up-ease) !important; }
/* Note: do NOT include [role="listbox"] here — in this codebase it's the
   inner scroll container of the model selector (Selector.svelte:632),
   not an outer popover. Adding panel chrome to it produces a nested
   "panel within a panel" with its own border + shadow inside the dropdown. */
[role="menu"], [class*="dropdown"], [class*="popover"] {
  border-radius: var(--up-radius-md) !important;
  box-shadow: var(--up-shadow-lg) !important;
}
/* [NEW-3] Model selector dropdown warm hover */
[role="option"]:hover, [role="option"][data-highlighted] {
  background: rgba(59,130,246,0.06) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §9: TABLES IN CHAT  [FIX W-02]                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

.prose table, .markdown-prose table {
  width: 100% !important; border-collapse: collapse !important;
  font-size: 13.5px !important; border-radius: var(--up-radius-md) !important;
  overflow: hidden !important; border: 1px solid var(--up-border-strong) !important;
}
.prose table th, .markdown-prose table th {
  text-align: left !important; padding: 10px 14px !important;
  font-weight: 600 !important; font-size: 12px !important;
  color: var(--up-fg-secondary) !important; text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--up-border-strong) !important;
  background: var(--up-muted) !important;
}
.prose table td, .markdown-prose table td {
  padding: 10px 14px !important; border-bottom: 1px solid var(--up-border) !important;
}
.prose table tr:last-child td, .markdown-prose table tr:last-child td { border-bottom: none !important; }
.prose table tr:hover td, .markdown-prose table tr:hover td { background: rgba(59,130,246,0.03) !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §10: SCROLLBARS  [FIX W-09: specificity boost]            ║
   ╚══════════════════════════════════════════════════════════════╝ */

html ::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
html ::-webkit-scrollbar-thumb { background: var(--up-border-strong) !important; border-radius: var(--up-radius-full) !important; }
html ::-webkit-scrollbar-thumb:hover { background: var(--up-fg-secondary) !important; }
html ::-webkit-scrollbar-track { background: transparent !important; }
html * { scrollbar-width: thin !important; scrollbar-color: var(--up-border-strong) transparent !important; }
.scrollbar-hidden::-webkit-scrollbar { display: none !important; }
.scrollbar-hidden { -ms-overflow-style: none !important; scrollbar-width: none !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §11: MOTION                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

@keyframes upskill-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
[class*="online"] [class*="dot"], [class*="status"] [class*="dot"] {
  animation: upskill-pulse 2s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §12: RESPONSIVE  [FIX W-03: 640→768px]                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  .prose, .markdown-prose { font-size: 15px !important; max-width: 100% !important; }
  .prose blockquote, .markdown-prose blockquote {
    max-width: 100% !important; margin: 12px 0 8px !important; padding: 12px 14px !important;
  }
  .prose blockquote > p:first-child, .markdown-prose blockquote > p:first-child { font-size: 14px !important; }
  .prose h2, .markdown-prose h2 { font-size: 1.2em !important; border-bottom: none !important; }
}

/* [NEW-1] iOS PWA safe-area inset */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #message-input-container {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §13: PRINT SAFETY  [NEW-4: hide sidebar]                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media print {
  .prose blockquote, .markdown-prose blockquote {
    box-shadow: none !important; border: 1px solid #ddd !important;
    break-inside: avoid !important;
  }
  .prose blockquote::after, .markdown-prose blockquote::after { display: none !important; }
  body, main { background-color: #ffffff !important; }
  #sidebar { display: none !important; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §14: GITHUB-STYLE ALERTS  [FIX W-06]                      ║
   ║  [!NOTE] [!TIP] [!WARNING] [!IMPORTANT] [!CAUTION]         ║
   ╚══════════════════════════════════════════════════════════════╝ */

.markdown-alert {
  border-radius: 0 var(--up-radius-sm) var(--up-radius-sm) 0 !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  font-family: var(--up-font) !important;
}
.markdown-alert-note { background: rgba(59,130,246,0.04) !important; border-left: 3px solid var(--up-primary) !important; }
.markdown-alert-tip { background: rgba(16,185,129,0.04) !important; border-left: 3px solid var(--up-secondary) !important; }
.markdown-alert-warning { background: rgba(245,158,11,0.04) !important; border-left: 3px solid var(--up-accent) !important; }
.markdown-alert-important { background: rgba(139,92,246,0.04) !important; border-left: 3px solid #8b5cf6 !important; }
.markdown-alert-caution { background: rgba(239,68,68,0.04) !important; border-left: 3px solid var(--up-danger) !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §15: TOOLTIPS & TOASTS  [FIX W-07]                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.tippy-box {
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-sm) !important;
}
/* Sonner toast */
[data-sonner-toaster] [data-sonner-toast] {
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-md) !important;
  border: 1px solid var(--up-border) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §16: MODAL & DIALOG  [NEW-2]                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

[role="dialog"], [data-dialog] {
  border-radius: var(--up-radius-xl) !important;
  box-shadow: var(--up-shadow-lg) !important;
  border: 1px solid var(--up-border) !important;
  font-family: var(--up-font) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §17: COLLAPSIBLE TOOL GROUPS  [FIX W-08]                  ║
   ║  v0.8.11+ merges consecutive tool/thinking blocks           ║
   ╚══════════════════════════════════════════════════════════════╝ */

.chat-assistant [class*="tool-call"],
.chat-assistant [class*="collapsible"],
.chat-assistant details {
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-sm) !important;
}
.chat-assistant details > summary {
  font-family: var(--up-font) !important;
  cursor: pointer;
  transition: background var(--up-duration) var(--up-ease) !important;
}
.chat-assistant details > summary:hover {
  background: rgba(59,130,246,0.04) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §18: PANEFORGE CHATCONTROLS PANEL                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

[data-pane-group] [data-pane] {
  font-family: var(--up-font) !important;
}
[data-pane-group] [data-pane] button {
  font-family: var(--up-font) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §19: WRITING BLOCK  [FIX A-04]                            ║
   ║  v0.8.11+ :::writing Markdown extension container           ║
   ╚══════════════════════════════════════════════════════════════╝ */

.markdown-prose [class*="writing"],
.prose [class*="writing"] {
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-sm) !important;
  border: 1px solid var(--up-border) !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  background: rgba(59,130,246,0.02) !important;
}
.dark .markdown-prose [class*="writing"],
.dark .prose [class*="writing"] {
  background: rgba(96,165,250,0.03) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §20: TASK LIST CHECKBOX PROTECTION  [FIX A-05]             ║
   ║  Ensure v0.8.11 fix (#22886) for narrow-screen shrink       ║
   ║  is not overridden by our li styling                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.prose li input[type="checkbox"],
.markdown-prose li input[type="checkbox"] {
  flex-shrink: 0 !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin-right: 6px !important;
  accent-color: var(--up-primary) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §21: ADMIN / SETTINGS PAGES  [NEW-5]                      ║
   ║  Warm audit for Admin Panel tabs: General, Connections,     ║
   ║  Models, Integrations, Audio, Images, Pipelines, Database   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Settings modal content area */
[role="dialog"] [class*="tab-content"],
[role="dialog"] [class*="settings"],
[role="dialog"] form {
  font-family: var(--up-font) !important;
}
/* Setting item labels and descriptions */
[role="dialog"] label {
  font-family: var(--up-font) !important;
  color: var(--up-fg) !important;
}
[role="dialog"] p[class*="text-xs"],
[role="dialog"] p[class*="text-sm"] {
  color: var(--up-fg-secondary) !important;
}
/* Toggle switches in settings — warm accent */
[role="dialog"] [role="switch"] {
  transition: background var(--up-duration) var(--up-ease) !important;
}
/* Input fields inside dialogs */
[role="dialog"] input[type="text"],
[role="dialog"] input[type="url"],
[role="dialog"] input[type="password"],
[role="dialog"] input[type="number"],
[role="dialog"] select,
[role="dialog"] textarea {
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-sm) !important;
  border: 1px solid var(--up-border) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
[role="dialog"] input:focus,
[role="dialog"] select:focus,
[role="dialog"] textarea:focus {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1) !important;
  outline: none !important;
}
/* Tab buttons inside settings modal */
[role="dialog"] [role="tablist"] button,
[role="dialog"] nav button {
  font-family: var(--up-font) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
/* Settings search pill (user-settings modal + admin settings page).
   The Tailwind `bg-gray-100/80 dark:bg-gray-850/80` wrapper renders as a
   distinct lighter pill against the modal/page surface. Make it fully
   transparent so it truly matches the surrounding bg, and strip the
   dialog-scoped border + focus ring on the inner input so no blue
   outline appears on focus. The magnifying-glass icon + placeholder
   keep the search affordance discoverable. */
#settings-search {
  background-color: transparent !important;
  border: none !important;
}
#settings-search input,
#settings-search input:focus {
  border: none !important;
  box-shadow: none !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §22: OPEN TERMINAL FILE BROWSER  [NEW-6]                  ║
   ║  v0.8.6+ file browser panel: tree, preview, editor          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* File tree items */
[data-pane] [class*="file-tree"],
[data-pane] [class*="file-browser"],
[data-pane] [class*="file-explorer"] {
  font-family: var(--up-font) !important;
}
/* File/folder name text */
[data-pane] [class*="file-name"],
[data-pane] [class*="filename"] {
  font-family: var(--up-font) !important;
  font-size: 13px !important;
}
/* File preview area */
[data-pane] [class*="preview"],
[data-pane] [class*="file-content"] {
  font-family: var(--up-font) !important;
}
/* CodeMirror editor in file browser (code editing) */
[data-pane] .cm-editor {
  font-family: var(--up-font-mono) !important;
  border-radius: var(--up-radius-sm) !important;
}
/* xterm.js terminal */
[data-pane] .xterm-viewport {
  scrollbar-width: thin !important;
  scrollbar-color: var(--up-border-strong) transparent !important;
}
/* Upload drop zone */
[data-pane] [class*="dropzone"],
[data-pane] [class*="drop-zone"] {
  border-radius: var(--up-radius-md) !important;
  border-color: var(--up-border-strong) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
[data-pane] [class*="dropzone"]:hover,
[data-pane] [class*="drop-zone"]:hover {
  border-color: var(--up-primary) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §23: SIDEBAR TOGGLE BAR  [NEW-7]                          ║
   ║  The 2-bar hamburger icon uses bg-[#0f0f0f] dark:bg-white  ║
   ║  which bypasses gray variables — warm override needed       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Sidebar toggle button bars — Tailwind arbitrary value bg-[#0f0f0f]
   doesn't respond to --color-gray-*. Override the hardcoded color. */
#sidebar-toggle-button div,
button[aria-label*="sidebar"] div,
button[aria-label*="Sidebar"] div {
  transition: all var(--up-duration) var(--up-ease) !important;
}
/* Light mode: warm dark instead of pure #0f0f0f */
#sidebar-toggle-button div[class*="bg-["],
button[aria-label*="sidebar"] div[class*="bg-["] {
  background-color: var(--up-fg) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §24: CHANNEL & FOLDER ICONS  [NEW in v4.3]                ║
   ║  v0.8.9+ nested folders + channels in sidebar               ║
   ╚══════════════════════════════════════════════════════════════╝ */

#sidebar [class*="folder"],
#sidebar [class*="channel"] {
  font-family: var(--up-font) !important;
  transition: background var(--up-duration) var(--up-ease) !important;
}

/* Chat-row more-menu: align the fade-out gradient's start color with the
   actual sidebar surface (--up-surface-sidebar). The Tailwind utility
   `from-gray-100` resolves to --color-gray-100 (#F0EDE6) which is a few
   RGB units off from the sidebar bg (#EDEAE2), creating a visible block
   where the menu fade meets the chat row.
   Tailwind v4 keeps color and position in separate CSS vars, so we
   override only the color here and let `--tw-gradient-stops` (which is
   built from --tw-gradient-from + --tw-gradient-from-position) recompute. */
#sidebar [id="sidebar-chat-item-menu"] {
  --tw-gradient-from: var(--up-surface-sidebar) !important;
  --tw-gradient-to: transparent !important;
}
/* Active chat row: replace the diagonal `--up-gradient-subtle` with a SOLID
   tinted bg. The diagonal varies across the row, so any single match-color
   for the more-menu only aligns at one pixel position; a solid tint is
   uniform and lets the menu fade match perfectly everywhere.
   Scope: chat items only (`a[class~="bg-gray-100"]`), so nav items
   (matched via `a[aria-current="page"]`) keep the diagonal. */
#sidebar a[class~="bg-gray-100"],
#sidebar a[class~="bg-gray-200"],
#sidebar a[class~="bg-gray-800"],
#sidebar a[class~="bg-gray-850"],
#sidebar a[class~="bg-gray-900"] {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--up-surface-sidebar) 95%, var(--up-primary)) !important;
}
/* Active chat row's more-menu fade matches the solid tinted bg above. */
#sidebar [id="sidebar-chat-item-menu"].selected {
  --tw-gradient-from: color-mix(in srgb, var(--up-surface-sidebar) 95%, var(--up-primary)) !important;
}
#sidebar [class*="folder"]:hover,
#sidebar [class*="channel"]:hover {
  background: rgba(59,130,246,0.04) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §25: NAVBAR MODEL BADGE + AVATAR  [NEW in v4.3]           ║
   ║  Top navbar model name, avatar circle, controls button      ║
   ╚══════════════════════════════════════════════════════════════╝ */

nav button[class*="rounded-xl"],
nav [class*="navbar"] button {
  transition: all var(--up-duration) var(--up-ease) !important;
}
/* Model name in navbar */
#response-message-model-name {
  font-family: var(--up-font) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  §26: ACCESSIBILITY SAFEGUARD  [NEW in v4.3]               ║
   ║  Ensure !important overrides don't break focus/disabled     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Preserve disabled state visual cues */
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
/* Ensure skip-to-content link works if OWUI ever adds one */
[class*="skip-to"],
a[href="#main-content"] {
  position: absolute !important;
  top: -9999px !important;
}
[class*="skip-to"]:focus,
a[href="#main-content"]:focus {
  position: fixed !important;
  top: 4px !important;
  left: 4px !important;
  z-index: 9999 !important;
  padding: 8px 16px !important;
  background: var(--up-primary) !important;
  color: white !important;
  border-radius: var(--up-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}


/* ================================================================
   UPSKILL PRO — Custom CSS v4.4 Hotfix Patch
   Apply ON TOP of v4.3 (append to end of custom_v4.3.css)
   
   Based on: Production screenshot analysis (2026-04-14 23:00)
   URL: dev.upskill.pro · OWUI v0.8.12
   
   Screenshots analyzed:
   1. Admin Settings / General page
   2. Workspace / Prompts list page  
   3. Chat page with model selector dropdown + artifact panel
   
   ┌──────────────────────────────────────────────────────────────┐
   │  17 UI ISSUES IDENTIFIED · 17 FIXES IMPLEMENTED             │
   │                                                              │
   │  CRITICAL (blocks professional impression):                  │
   │  [UI-01] Admin settings left nav — warm bg not applied       │
   │  [UI-02] Admin settings content — input fields remain cool   │
   │  [UI-03] Model selector dropdown — white bg, not warm        │
   │  [UI-04] Workspace tabs (模型库/提示词/技能/工具) — cool bg   │
   │                                                              │
   │  HIGH (noticeable on careful inspection):                    │
   │  [UI-05] Toggle switches — green (#10b981) default, fine     │
   │          but OFF state is cool gray, should be warm          │
   │  [UI-06] Prompt list cards — hover/border still cool gray    │
   │  [UI-07] Workspace "+ 创建提示词" button — default cool bg   │
   │  [UI-08] Chat input "输入消息" area — bottom bar cool gray   │
   │  [UI-09] Model selector tag filters row — cold gray chips    │
   │  [UI-10] "html / 已隐藏 130 行代码" bar — still visible       │
   │                                                              │
   │  MEDIUM (polish):                                            │
   │  [UI-11] Artifact panel header "版本 1/1" bar — cool bg      │
   │  [UI-12] Sidebar "Recommended" label — slightly low contrast │
   │  [UI-13] Sidebar folder chevrons — could use warm color      │
   │  [UI-14] Admin nav icons (通用/外部连接...) — cold gray       │
   │  [UI-15] Search input fields — cold border                   │
   │  [UI-16] Artifact card blockquote — "Framework" badge OK     │
   │          but download/view links could be warmer              │
   │  [UI-17] Bottom user avatar area "Jackie Pan" — cool border  │
   └──────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-01] ADMIN SETTINGS LEFT NAV — warm background          ║
   ║  Screenshot 3: /admin/settings/general left nav panel        ║
   ║  The settings sidebar nav uses bg-white/bg-gray-50 that     ║
   ║  doesn't inherit our warm gray tokens deeply enough          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Settings page left nav panel */
[class*="settings"] nav,
[class*="settings"] aside,
.flex.flex-col[class*="w-44"],
.flex.flex-col[class*="w-48"],
[href*="settings"] + div nav,
main nav:not(#sidebar) {
  background-color: var(--up-surface-sidebar) !important;
}
/* Settings nav items */
[class*="settings"] nav a,
[class*="settings"] nav button,
[class*="settings"] aside a,
[class*="settings"] aside button {
  font-family: var(--up-font) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
  border-radius: var(--up-radius-sm) !important;
}
[class*="settings"] nav a:hover,
[class*="settings"] nav button:hover {
  background: rgba(59,130,246,0.06) !important;
}
/* Active settings nav item */
[class*="settings"] nav a[class*="active"],
[class*="settings"] nav a[class*="selected"],
[class*="settings"] nav [class*="bg-gray-50"],
[class*="settings"] nav [class*="bg-gray-100"] {
  background: var(--up-gradient-subtle) !important;
  color: var(--up-primary) !important;
  font-weight: 500 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-02] ADMIN SETTINGS CONTENT — warm input fields         ║
   ║  Screenshot 3: input fields, select dropdowns, text areas    ║
   ║  All form inputs on settings page still have cold borders    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Global input warmification — not just inside [role="dialog"] */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea:not(.ita) {
  font-family: var(--up-font) !important;
  border-color: var(--up-border-strong) !important;
  border-radius: var(--up-radius-sm) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1) !important;
  outline: none !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-03] MODEL SELECTOR DROPDOWN — warm background          ║
   ║  Screenshot 1: dropdown with model list, tag filters         ║
   ║  The dropdown popover bg is pure white/cold gray             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Model selector dropdown container.
   [role="listbox"] is intentionally excluded — see note in §8 above.
   The inner scroll container in Selector.svelte uses role="listbox" and
   is not a panel; styling it as one creates a nested box inside the
   dropdown. The outer panel itself is role="menu" and is handled in §8. */
[class*="popover-content"],
[data-radix-popper-content-wrapper],
div[class*="absolute"][class*="z-"][class*="bg-white"],
div[class*="absolute"][class*="z-"][class*="bg-gray-50"] {
  background: var(--up-surface-card) !important;
  border: 1px solid var(--up-border) !important;
  border-radius: var(--up-radius-md) !important;
  box-shadow: var(--up-shadow-lg) !important;
}
/* Model list items inside dropdown */
[role="option"],
[class*="popover"] [class*="cursor-pointer"],
[class*="popover"] button {
  font-family: var(--up-font) !important;
  transition: background var(--up-duration) var(--up-ease) !important;
  border-radius: var(--up-radius-sm) !important;
}
[role="option"]:hover,
[role="option"][data-highlighted],
[class*="popover"] [class*="cursor-pointer"]:hover {
  background: rgba(59,130,246,0.06) !important;
}
/* Selected model checkmark item */
[role="option"][aria-selected="true"],
[role="option"][data-state="checked"] {
  background: var(--up-gradient-subtle) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-04] WORKSPACE TABS — warm background                   ║
   ║  Screenshot 2: 模型库 / 提示词 / 技能 / 工具 tab bar         ║
   ║  Tab container and inactive tabs show cold gray              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Workspace tab bar */
[role="tablist"],
nav[class*="flex"][class*="border-b"],
.flex[class*="border-b"][class*="px-"] {
  font-family: var(--up-font) !important;
  border-bottom-color: var(--up-border) !important;
}
/* Workspace tab items */
[role="tab"],
[role="tablist"] button,
[role="tablist"] a {
  font-family: var(--up-font) !important;
  color: var(--up-fg-secondary) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"],
[role="tablist"] button[class*="border-b-2"],
[role="tablist"] a[class*="border-b-2"] {
  color: var(--up-fg) !important;
  border-bottom-color: var(--up-primary) !important;
  font-weight: 600 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-05] TOGGLE SWITCH OFF STATE — warm gray                ║
   ║  Screenshot 3: toggle OFF state is cool #cdcdcd             ║
   ╚══════════════════════════════════════════════════════════════╝ */

[role="switch"] {
  transition: background var(--up-duration) var(--up-ease) !important;
}
[role="switch"][data-state="unchecked"],
[role="switch"][aria-checked="false"] {
  background-color: var(--color-gray-300, #D2CFC6) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-06] PROMPT LIST CARDS — warm hover                     ║
   ║  Screenshot 2: prompt items border/hover are cool gray       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Workspace content list items (prompts, models, tools, skills) */
[class*="workspace"] [class*="grid"] > div,
[class*="workspace"] [class*="flex"][class*="border-b"],
main [class*="grid"] > [class*="flex"][class*="rounded"],
main [class*="flex"][class*="justify-between"][class*="py-"] {
  transition: background var(--up-duration) var(--up-ease) !important;
}
main [class*="grid"] > [class*="flex"][class*="rounded"]:hover,
main [class*="flex"][class*="justify-between"][class*="py-"]:hover {
  background: rgba(59,130,246,0.03) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-07] WORKSPACE ACTION BUTTON — warm primary             ║
   ║  Screenshot 2: "+ 创建提示词" button top right               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Primary action buttons across all workspace pages
   Use ~= (whole-word) instead of *= so we only match the bare Tailwind
   utility, not variant-prefixed forms like `hover:bg-gray-900` or
   `dark:hover:bg-gray-900` which were silently painting every sidebar
   nav button with the gradient + white text. */
button[class~="bg-black"],
button[class~="bg-gray-900"],
a[class~="bg-black"],
a[class~="bg-gray-900"] {
  background: var(--up-gradient) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--up-radius-md) !important;
  box-shadow: var(--up-shadow-accent) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
button[class~="bg-black"]:hover,
button[class~="bg-gray-900"]:hover {
  box-shadow: var(--up-shadow-accent-lg) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-08] CHAT INPUT BOTTOM BAR — warm surface               ║
   ║  Screenshot 1: the input area at bottom of chat              ║
   ║  Attachment bar and formatting bar may show cool gray        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Input area attachment/formatting toolbar */
[class*="chat-input"] [class*="flex"][class*="items-center"],
form [class*="flex"][class*="gap"][class*="px-"] {
  font-family: var(--up-font) !important;
}
/* "输入消息" placeholder area bottom padding */
[class*="chat-input"] [class*="border-t"],
form:has(textarea) [class*="border-t"] {
  border-top-color: var(--up-border) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-09] MODEL TAG FILTER CHIPS — warm styling              ║
   ║  Screenshot 1: "全部 / AI Agent / AI Agents / AI Automation" ║
   ║  Filter chips in model selector use cool gray bg             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Tag filter chips in model selector and workspace */
[class*="popover"] [class*="rounded-full"],
[class*="popover"] [class*="rounded-lg"][class*="text-xs"],
[class*="popover"] [class*="rounded-xl"][class*="text-xs"],
[role="listbox"] ~ [class*="flex"] [class*="rounded"] {
  font-family: var(--up-font) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}

/* Model selector filter-chip readability fix.
   Upstream (Selector.svelte) styles inactive chips with `text-gray-300`
   (≈ near-white), which drops to ~1.4:1 contrast on the warm cream
   surface — the chips read as ghost text. Active chip has no positive
   styling, just default fg. Re-grade both states against v6.0 tokens. */
[role="menu"] button[class~="text-gray-300"][aria-pressed="false"] {
  color: var(--up-fg-secondary) !important;
}
[role="menu"] button[class~="text-gray-300"][aria-pressed="false"]:hover {
  color: var(--up-fg) !important;
}
[role="menu"] [class~="rounded-full"] > button[aria-pressed="true"] {
  color: var(--up-primary) !important;
  font-weight: 600 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-10] HTML ARTIFACT CODE BLOCK — hide inline source (R7) ║
   ║  OWUI 0.9.5: CodeBlock.svelte wrapper is div.relative        ║
   ║  (className empty) with a DIRECT child div.language-html     ║
   ║  (:437/:536) and a pre>code.language-html (:558/:564).       ║
   ║  Scoped to .chat-assistant so html a USER pastes stays       ║
   ║  visible. Artifact still renders in the right panel          ║
   ║  ([data-pane], separate subtree) + the teaser card.          ║
   ║  NOTE: pre-0.9.5 selectors (code-block-wrapper /             ║
   ║  code-header) matched nothing on 0.9.5 — do not restore.     ║
   ╚══════════════════════════════════════════════════════════════╝ */
.chat-assistant div.relative:has(> div[class~="language-html"]),
.chat-assistant div.relative:has(pre > code[class~="language-html"]) {
  display: none !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-10b] ARTIFACT "PREPARING" PILL — in-chat loading state  ║
   ║  The artifact is already in the streamed message, but the    ║
   ║  right panel (#artifacts-container, mounted only while        ║
   ║  $showArtifacts) appears ~2s later, after the post-stream     ║
   ║  pipeline (follow-ups → title → tags → outlet). Until then,   ║
   ║  override the R7 hide above (higher specificity + !important, ║
   ║  R7 block left verbatim for its test) and render the code     ║
   ║  block as a pulsing pill so the user sees progress instead    ║
   ║  of a blank wait. Auto-dismisses the instant the panel        ║
   ║  mounts. Edge: reappears if the user later closes the panel   ║
   ║  (acceptable — doubles as a reopen affordance).               ║
   ╚══════════════════════════════════════════════════════════════╝ */
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(> div[class~="language-html"]):not([data-artifact-seen]),
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(pre > code[class~="language-html"]):not([data-artifact-seen]) {
  display: block !important;
  border: none !important;
  background: transparent !important;
  margin: 0.5rem 0 !important;
}
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(> div[class~="language-html"]):not([data-artifact-seen]) > *,
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(pre > code[class~="language-html"]):not([data-artifact-seen]) > * {
  display: none !important;
}
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(> div[class~="language-html"]):not([data-artifact-seen])::after,
body:not(:has(#artifacts-container)) .chat-assistant div.relative:has(pre > code[class~="language-html"]):not([data-artifact-seen])::after {
  content: "\23F3  \6B63\5728\51C6\5907  artifact\FF0C\53F3\4FA7\9762\677F\5373\5C06\6253\5F00\2026";
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--up-fg-secondary, #706D66);
  background: var(--up-muted, #F0EDE6);
  border-radius: 0.75rem;
  animation: upskill-artifact-loading-pulse 1.6s ease-in-out infinite;
}
@keyframes upskill-artifact-loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-11] ARTIFACT PANEL HEADER — warm surface               ║
   ║  Screenshot 1: "版本 1/1" bar, copy/resize buttons          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Artifact/controls panel header bar */
[data-pane] > [class*="flex"][class*="justify-between"][class*="border-b"],
[data-pane] > [class*="flex"][class*="items-center"][class*="px-"],
[data-pane] [class*="flex"][class*="border-b"]:first-child {
  font-family: var(--up-font) !important;
  border-bottom-color: var(--up-border) !important;
}
/* Artifact panel action buttons (版本, 复制, 全屏) */
[data-pane] button[class*="rounded"] {
  font-family: var(--up-font) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
[data-pane] button[class*="rounded"]:hover {
  background: rgba(59,130,246,0.06) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-12] SIDEBAR LABELS — slightly better contrast          ║
   ║  "Recommended", "分组", "对话" labels                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

#sidebar [class*="text-xs"][class*="font-medium"],
#sidebar [class*="text-xs"][class*="uppercase"],
#sidebar [class*="text-xs"][class*="text-gray"] {
  color: var(--up-fg-secondary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-13] SIDEBAR FOLDER CHEVRONS — warm gray                ║
   ╚══════════════════════════════════════════════════════════════╝ */

#sidebar svg[class*="text-gray"],
#sidebar [class*="chevron"] {
  color: var(--up-fg-secondary) !important;
  transition: color var(--up-duration) var(--up-ease) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-14] ADMIN NAV ICONS — warm color                       ║
   ║  Screenshot 3: left nav icons (通用/外部连接/模型...)         ║
   ╚══════════════════════════════════════════════════════════════╝ */

[class*="settings"] nav svg,
[class*="settings"] aside svg {
  color: var(--up-fg-secondary) !important;
  transition: color var(--up-duration) var(--up-ease) !important;
}
[class*="settings"] nav a:hover svg,
[class*="settings"] nav a[class*="active"] svg {
  color: var(--up-primary) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-15] SEARCH INPUT FIELDS — warm border                  ║
   ║  Screenshot 2: "搜索提示词", Screenshot 1: "搜索模型"         ║
   ╚══════════════════════════════════════════════════════════════╝ */

input[type="search"],
input[placeholder*="搜索"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  border-color: var(--up-border) !important;
  background: var(--up-surface-card) !important;
  font-family: var(--up-font) !important;
  border-radius: var(--up-radius-sm) !important;
}
input[type="search"]:focus,
input[placeholder*="搜索"]:focus,
input[placeholder*="Search"]:focus {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-16] ARTIFACT CARD LINK AREA — warmer text              ║
   ║  Screenshot 1: "下载 | 查看右侧面板 →" links                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

.prose blockquote a, .markdown-prose blockquote a {
  color: var(--up-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color var(--up-duration) var(--up-ease) !important;
}
.prose blockquote a:hover, .markdown-prose blockquote a:hover {
  color: var(--up-primary-dark) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  [UI-17] BOTTOM USER AREA — warm border                     ║
   ║  Screenshot: "Jackie Pan" user row at sidebar bottom         ║
   ╚══════════════════════════════════════════════════════════════╝ */

#sidebar > [class*="border-t"],
#sidebar [class*="flex"][class*="items-center"][class*="border-t"] {
  border-top-color: var(--up-border) !important;
}
#sidebar [class*="flex"][class*="items-center"][class*="border-t"]:hover {
  background: rgba(59,130,246,0.04) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  BONUS: Global warm border propagation                      ║
   ║  Catch-all for any remaining cool gray borders              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Any element using Tailwind border-gray-100/200 utilities */
[class*="border-gray-100"],
[class*="border-gray-200"] {
  border-color: var(--up-border) !important;
}
.dark [class*="border-gray-800"],
.dark [class*="border-gray-850"],
.dark [class*="border-gray-700"] {
  border-color: var(--up-border) !important;
}

/* Dividers and separators */
hr, [class*="divide-"] > * + * {
  border-color: var(--up-border) !important;
}


/* ================================================================
   UPSKILL PRO — Custom CSS v4.5 Hotfix Patch
   Apply: Append to end of custom_v4.4.css (or v4.3.css + v4.4 patch)
   
   Based on: 5 NEW production screenshots (2026-04-14 23:15-23:20)
   Pages: Models workspace, Model edit, Skill edit, Settings dialog,
          Artifact card close-up
   
   ┌──────────────────────────────────────────────────────────────┐
   │  CENTERPIECE: ARTIFACT CARD COMPLETE REDESIGN               │
   │  Problem: Card is misaligned, visually jarring, blockquote   │
   │  border-left is too bold, content not horizontally aligned   │
   │  with surrounding text, "html/已隐藏" bar still visible.     │
   │                                                              │
   │  OTHER FIXES FROM NEW SCREENSHOTS:                          │
   │  [UI-18] Model edit page — tag pills cold gray bg           │
   │  [UI-19] Model edit page — system prompt textarea too wide  │
   │  [UI-20] Skill edit page — code editor area cold border     │
   │  [UI-21] Settings modal — "保存" button not branded          │
   │  [UI-22] Settings modal — checkbox styling cold             │
   │  [UI-23] Workspace model grid — card hover state weak       │
   │  [UI-24] Workspace — "导入/导出" buttons cold style          │
   │  [UI-25] Settings modal — select dropdown arrow cold        │
   └──────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ★ ARTIFACT CARD — COMPLETE REDESIGN                           ║
   ║                                                                 ║
   ║  Design Philosophy: The card should feel like a NATIVE part     ║
   ║  of the chat flow — not a foreign element. Inspired by Claude   ║
   ║  Artifacts and Notion embed cards. Full-width alignment with    ║
   ║  surrounding text, subtle surface differentiation, clean type.  ║
   ║                                                                 ║
   ║  The card is a Markdown blockquote rendered by OWUI's parser.   ║
   ║  Format from Card Renderer v3.1:                                ║
   ║  > 🧩 **Title**                                                 ║
   ║  >                                                              ║
   ║  > `Type` 📥 下载 │ 🔍 查看右侧面板 →                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Reset: Remove v4.3 blockquote styling completely, rebuild from zero */
.prose blockquote,
.markdown-prose blockquote {
  /* Layout — full width alignment with text, no offset */
  position: relative !important;
  max-width: 100% !important;
  margin: 20px 0 16px !important;
  padding: 0 !important;
  
  /* Surface — subtle warm card, NOT white card on warm bg */
  background: var(--color-gray-50, var(--up-muted)) !important;
  border: 1px solid var(--up-border) !important;
  border-left: none !important;
  border-image: none !important;
  border-radius: var(--up-radius-md) !important;
  
  /* Elevation — very subtle, not floating above */
  box-shadow: none !important;
  
  /* Reset transforms */
  transform: none !important;
  transition: all var(--up-duration) var(--up-ease) !important;
  overflow: visible !important;
}
.dark .prose blockquote,
.dark .markdown-prose blockquote {
  background: var(--color-gray-850, var(--up-card)) !important;
  border-color: var(--up-border) !important;
}

/* Hover — gentle highlight, no dramatic lift */
.prose blockquote:hover,
.markdown-prose blockquote:hover {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.08) !important;
  transform: none !important;
}

/* Remove the old gradient overlay pseudo-element */
.prose blockquote::after,
.markdown-prose blockquote::after {
  display: none !important;
  content: none !important;
}

/* ─── Inner content layout ─── */
/* Card inner padding — applied to direct children */
.prose blockquote > p,
.markdown-prose blockquote > p {
  padding: 0 16px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Line 1: Icon + Title — the primary visual anchor */
.prose blockquote > p:first-child,
.markdown-prose blockquote > p:first-child {
  padding-top: 14px !important;
  padding-bottom: 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--up-fg) !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Line 2: Empty line (> \n) — collapse it */
.prose blockquote > p:nth-child(2):empty,
.markdown-prose blockquote > p:nth-child(2):empty,
.prose blockquote > p:nth-child(2) br:only-child,
.markdown-prose blockquote > p:nth-child(2) br:only-child {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Line 3: Type badge + action links — the secondary info row */
.prose blockquote > p:last-child,
.markdown-prose blockquote > p:last-child {
  padding-bottom: 12px !important;
  font-size: 13px !important;
  color: var(--up-fg-secondary) !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-top: 1px solid var(--up-border) !important;
  margin-top: 4px !important;
  padding-top: 10px !important;
}

/* Type badge pill — refined, not shouty */
.prose blockquote code,
.markdown-prose blockquote code {
  background: rgba(59,130,246,0.08) !important;
  color: var(--up-primary) !important;
  padding: 2px 10px !important;
  border-radius: var(--up-radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--up-font) !important;
  letter-spacing: 0.03em !important;
  border: 1px solid rgba(59,130,246,0.12) !important;
  line-height: 1.4 !important;
}
.dark .prose blockquote code,
.dark .markdown-prose blockquote code {
  background: rgba(96,165,250,0.1) !important;
  color: var(--up-primary-light) !important;
  border-color: rgba(96,165,250,0.15) !important;
}

/* Action links inside card */
.prose blockquote a,
.markdown-prose blockquote a {
  color: var(--up-fg-secondary) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color var(--up-duration) var(--up-ease) !important;
}
.prose blockquote a:hover,
.markdown-prose blockquote a:hover {
  color: var(--up-primary) !important;
}

/* Remove the CTA line special styling from v4.3 */
.prose blockquote > p:last-child:has(> strong:first-child),
.markdown-prose blockquote > p:last-child:has(> strong:first-child) {
  color: var(--up-fg-secondary) !important;
  opacity: 1 !important;
  font-size: 13px !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-18] MODEL EDIT — Tag pills warm styling                   ║
   ║  Screenshot: "AI Agents ×", "Management ×", etc.               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Tag pills in model edit page */
[class*="rounded-full"][class*="text-xs"],
[class*="rounded-full"][class*="text-sm"],
span[class*="inline-flex"][class*="rounded-full"] {
  font-family: var(--up-font) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
/* Tag with × close button */
[class*="rounded-full"]:has(button[class*="close"]),
[class*="rounded-full"]:has(svg[class*="close"]),
[class*="rounded-full"]:has(button:last-child) {
  border-color: var(--up-border) !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-19] MODEL EDIT — System prompt textarea                   ║
   ║  Screenshot: Large textarea showing XML system prompt           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Workspace textarea (system prompt, description) */
main textarea,
[class*="workspace"] textarea {
  font-family: var(--up-font-mono) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  border-color: var(--up-border) !important;
  border-radius: var(--up-radius-sm) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
main textarea:focus,
[class*="workspace"] textarea:focus {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.08) !important;
  outline: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-20] SKILL EDIT — Code/content area warm border            ║
   ║  Screenshot: Skill editor showing markdown content              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Skill content editor */
[class*="workspace"] [class*="border"][class*="rounded"],
main [class*="border"][class*="rounded"]:has(textarea),
main [class*="border"][class*="rounded"]:has([contenteditable]) {
  border-color: var(--up-border) !important;
  border-radius: var(--up-radius-md) !important;
}
/* Skill header area */
main [class*="flex"][class*="items-center"][class*="gap"]:has(h1),
main [class*="flex"][class*="items-center"][class*="gap"]:has(h2) {
  font-family: var(--up-font) !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-21] SETTINGS MODAL — "保存" button branded                ║
   ║  Screenshot: Blue "保存" button in bottom-right of dialog       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Primary action button inside dialogs — already blue but enhance */
[role="dialog"] button[class*="bg-blue"],
[role="dialog"] button[class*="primary"],
[role="dialog"] button[type="submit"] {
  background: var(--up-gradient) !important;
  border: none !important;
  border-radius: var(--up-radius-sm) !important;
  font-family: var(--up-font) !important;
  font-weight: 600 !important;
  box-shadow: var(--up-shadow-accent) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
[role="dialog"] button[class*="bg-blue"]:hover,
[role="dialog"] button[type="submit"]:hover {
  box-shadow: var(--up-shadow-accent-lg) !important;
  transform: translateY(-1px) !important;
}

/* Also apply to workspace "保存" buttons */
main button[class*="bg-blue"],
main button[class*="bg-primary"] {
  background: var(--up-gradient) !important;
  border: none !important;
  border-radius: var(--up-radius-sm) !important;
  box-shadow: var(--up-shadow-accent) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-22] SETTINGS MODAL — Checkbox warm accent                 ║
   ║  Screenshot: Blue checkboxes for 视觉/文件上传/联网搜索 etc.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

input[type="checkbox"] {
  accent-color: var(--up-primary) !important;
  border-radius: 3px !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-23] WORKSPACE MODEL GRID — enhanced hover                 ║
   ║  Screenshot: 75 models in 2-column grid                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Model/prompt grid cards */
main [class*="grid"] > [class*="flex"][class*="cursor-pointer"],
main [class*="grid"] > div[class*="rounded"] {
  transition: all var(--up-duration) var(--up-ease) !important;
  border-radius: var(--up-radius-md) !important;
}
main [class*="grid"] > [class*="flex"][class*="cursor-pointer"]:hover,
main [class*="grid"] > div[class*="rounded"]:hover {
  background: rgba(59,130,246,0.03) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.08) !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-24] WORKSPACE ACTION BUTTONS — secondary buttons warm     ║
   ║  Screenshot: "导入", "导出" text buttons in top-right            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Secondary (text/outline) action buttons */
main [class*="flex"][class*="gap"] > button[class*="text-gray"],
main [class*="flex"][class*="gap"] > button[class*="hover:bg"] {
  font-family: var(--up-font) !important;
  color: var(--up-fg-secondary) !important;
  transition: all var(--up-duration) var(--up-ease) !important;
}
main [class*="flex"][class*="gap"] > button[class*="text-gray"]:hover {
  color: var(--up-primary) !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  [UI-25] SELECT DROPDOWN — warm styling                        ║
   ║  Screenshot: "待激活/None" dropdowns in settings                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

select {
  font-family: var(--up-font) !important;
  border-color: var(--up-border-strong) !important;
  border-radius: var(--up-radius-sm) !important;
  background-color: var(--up-surface-card) !important;
  color: var(--up-fg) !important;
  transition: border-color var(--up-duration) var(--up-ease) !important;
}
select:focus {
  border-color: var(--up-primary) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.08) !important;
  outline: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BONUS: Workspace page content area warm surface               ║
   ║  All content areas right of sidebar should be warm, not white   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

main {
  background-color: var(--up-surface-chat) !important;
}
main > div {
  background-color: transparent !important;
}

/* Workspace header row — "模型 75" / "提示词 14" */
main h1, main h2 {
  font-family: var(--up-font) !important;
  color: var(--up-fg) !important;
}