/**
 * Chatpod — Open WebUI chrome tweaks.
 *
 * 1) 单一事实源：ui-labs/open-webui-custom.{css,js}。
 * 2) 改动后升 index.html ?v=。
 * 3) Chrome 按 Apple HIG：44pt 热区、20/17pt 符号、描边 1.5、UI Regular、
 *    发丝边分层。正文 17 / 辅助 13–15 / Caption2 11。
 */

:root {
  --cp-hit: 44px;
  --cp-hit-touch: 44px;
  --cp-icon: 18px;
  --cp-icon-dense: 16px;
  --cp-hit-nav: 36px;
  --cp-stroke: 1.5;
  --cp-type-ui: 14px;
  --cp-type-body: 16px;
  --cp-type-caption: 13px;
  --cp-type-caption2: 11px;
  --cp-type-title: 28px;
  --cp-bg: #ffffff;
  --cp-ink: #0d0d0d;
  --cp-secondary: #5d5d5d;
  --cp-tertiary: #8f8f8f;
  --cp-hover: rgba(0, 0, 0, 0.05);
  --cp-hover-strong: rgba(0, 0, 0, 0.08);
  --cp-hairline: rgba(0, 0, 0, 0.08);
  --cp-elev: 1px solid var(--cp-hairline);
  --cp-elev-dark: 1px solid rgba(255, 255, 255, 0.12);
  --cp-focus: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.28);
  --cp-radius-nav: 10px;
  --cp-control-height: var(--cp-hit-nav);
  --cp-radius-control: var(--cp-radius-nav);
  --cp-radius-card: 12px;
  --cp-radius-dialog: 20px;
  --cp-radius-pill: 22px;
  --cp-radius-tooltip: 8px;
  --cp-toolbar-gap: 4px;
  /* Chat sticky header: equal L/R inset + same-class icon gap (工作台 ↔ Controls). */
  --cp-chrome-edge-inset: 8px;
  --cp-chrome-icon-gap: 8px;
  --cp-space-unit: 4px;
  --cp-motion-fast: 120ms;
  --cp-motion-standard: 180ms;
  --cp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* semantic aliases — shared with chatpod-ui.css / ASUI embed */
  --surface-0: var(--cp-bg);
  --surface-1: var(--cp-bg);
  --surface-2: color-mix(in srgb, var(--cp-ink) 6%, var(--cp-bg));
  --text-primary: var(--cp-ink);
  --text-secondary: var(--cp-secondary);
  --text-tertiary: var(--cp-tertiary);
  --border-default: var(--cp-hairline);
  --radius-control: var(--cp-radius-control);
  --radius-card: var(--cp-radius-card);
  --radius-dialog: var(--cp-radius-dialog);
  --radius-pill: var(--cp-radius-pill);
  --control-height: var(--cp-control-height);
  --icon-size: var(--cp-icon);
  --icon-size-dense: var(--cp-icon-dense);
  --spacing: var(--cp-space-unit);
  --motion-fast: var(--cp-motion-fast);
  --motion-standard: var(--cp-motion-standard);
  --ease-standard: var(--cp-ease);
  color-scheme: light;
}

html.dark {
  --cp-bg: #000000;
  --cp-ink: #fafafa;
  --cp-secondary: #a1a1aa;
  --cp-tertiary: #71717a;
  --cp-hover: rgba(255, 255, 255, 0.08);
  --cp-hover-strong: rgba(255, 255, 255, 0.12);
  --cp-hairline: rgba(255, 255, 255, 0.12);
  --cp-elev: 1px solid var(--cp-hairline);
  --cp-focus: 0 0 0 2px #000, 0 0 0 4px rgba(255, 255, 255, 0.45);
  color-scheme: dark;
}

/* Hold the legacy shell until branding and model labels are normalized. */
body:not(.cp-ui-ready) {
  visibility: hidden !important;
}

/*
 * Reload blank: body is visibility:hidden until .cp-ui-ready.
 * html::before is not a body descendant, so it stays visible (centered logo-01).
 * Skip /auth and policy so the mark does not sit on top of #cp-auth.
 */
html:not(.cp-auth-route):not(:has(#cp-auth)):not(:has(#cp-policy-page)):not(:has(body.cp-ui-ready)) {
  background-color: #fff;
}

html.dark:not(.cp-auth-route):not(:has(#cp-auth)):not(:has(#cp-policy-page)):not(:has(body.cp-ui-ready)) {
  background-color: #000;
}

html:not(.cp-auth-route) #cp-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
}

html.dark:not(.cp-auth-route) #cp-boot-splash {
  background: #000;
}

/* Quiet hairline arc — not the brand mark (heavy logo spin feels sluggish). */
#cp-boot-splash .cp-boot-splash__mark,
#cp-boot-splash .cp-boot-splash__spinner {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-top-color: #0d0d0d;
  border-radius: 50%;
  background: none;
  filter: none;
  transform-origin: center;
  animation: cp-splash-spin 0.7s linear infinite;
}

html.dark #cp-boot-splash .cp-boot-splash__mark,
html.dark #cp-boot-splash .cp-boot-splash__spinner {
  filter: none;
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: #fafafa;
}

@keyframes cp-splash-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cp-boot-splash .cp-boot-splash__mark,
  #cp-boot-splash .cp-boot-splash__spinner {
    animation: none;
    opacity: 0.55;
    border-top-color: inherit;
  }
}

html.cp-auth-route #cp-boot-splash,
html:has(#cp-auth) #cp-boot-splash,
html:has(#cp-policy-page) #cp-boot-splash,
body.cp-ui-ready #cp-boot-splash {
  display: none !important;
}

html.cp-auth-route body,
body:has(#cp-auth),
body:has(#cp-policy-page) {
  visibility: visible !important;
}

#cp-auth,
#cp-policy-page {
  visibility: visible !important;
}

html.cp-auth-route:has(#cp-auth) body > *:not(#cp-auth):not(#cp-policy-page):not(#cp-workspace-choice):not(style):not(script),
body:has(#cp-auth) > *:not(#cp-auth):not(#cp-policy-page):not(#cp-workspace-choice):not(style):not(script) {
  display: none !important;
}

html.cp-auth-route a[href="#main-content"],
body:has(#cp-auth) a[href="#main-content"] {
  display: none !important;
}

/* Upstream splash, onboarding video, and native auth copy (Open WebUI / 欢迎来到您的 AI 主页). */
#splash-screen,
#auth-page,
#auth-container,
div:has(> video[src*="welcome.mp4"]),
div:has(> video[poster*="welcome.webp"]) {
  display: none !important;
}

body.cp-ui-ready {
  visibility: visible !important;
}

/* The legacy landing footer exposes the upstream product/version string. */
body footer,
.cp-auth-footer,
[data-cp-version-hidden="1"],
[data-cp-greeting-hidden="1"],
[data-cp-hero-icon-hidden="1"],
[data-cp-hero-model-hidden="1"] {
  display: none !important;
}

/*
 * Empty-chat hero (HEAD CSS — must hide on first paint, before custom.js).
 * Built JS still renders the OI/favicon model tile + 「你好，{name}」.
 * Do not wait for a wordmark swap; sidebar already has logo-02.
 */
html body .m-auto.max-w-\[58rem\] .flex.flex-row.justify-center.w-fit.max-w-xl,
html body .m-auto.max-w-\[58rem\] .flex.flex-row.justify-center:has(img.rounded-2xl),
html body .m-auto.max-w-\[58rem\] div.text-2xl.line-clamp-1,
html body .m-auto.max-w-\[58rem\] img.rounded-2xl:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] img.size-9:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] img.size-10:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] img[src*="/models/model/profile/image"]:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] img[src*="favicon"]:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] button[aria-label*="信息"] img:not(.cp-hero-mark),
html body .m-auto.max-w-\[58rem\] button[aria-label*="information" i] img:not(.cp-hero-mark),
html body div.text-2xl.line-clamp-1.flex.items-center:not(#sidebar *):not(#message-input-container *):not(nav *),
html body img.size-9.rounded-2xl:not(#sidebar *):not(#message-input-container *):not(#model-selector-model-button *):not(.cp-hero-mark),
html body img.size-10.rounded-2xl:not(#sidebar *):not(#message-input-container *):not(#model-selector-model-button *):not(.cp-hero-mark),
html body img.size-\[2\.7rem\].rounded-full:not(#sidebar *):not(#message-input-container *):not(.cp-hero-mark),
html body .text-3xl .capitalize.line-clamp-1,
html body .m-auto.max-w-\[58rem\] .self-start.text-gray-600,
html body .self-start.text-gray-600.dark\:text-gray-400 {
  display: none !important;
}

html body #notes-container img.size-9,
html body #notes-container img.size-10,
html body #notes-container img.rounded-2xl,
html body #notes-container div.text-2xl.line-clamp-1 {
  display: unset !important;
  visibility: visible !important;
  width: unset !important;
  height: unset !important;
  max-width: none !important;
}
.m-auto.w-full.max-w-\[58rem\] .flex.flex-row.justify-center.w-fit,
.m-auto.w-full.max-w-\[58rem\] img.rounded-2xl:not(.cp-hero-mark),
.m-auto.w-full.max-w-\[58rem\] img.size-\[2\.7rem\]:not(.cp-hero-mark),
.m-auto.w-full.max-w-\[58rem\] .text-2xl.line-clamp-1.flex.items-center {
  display: none !important;
}

/* Empty-chat wordmark + composer share one column; logo stays visible, composer clickable. */
html body .m-auto.w-full.max-w-\[58rem\] {
  overflow: visible !important;
  position: relative !important;
  z-index: 0 !important;
}

html body .m-auto.w-full.max-w-\[58rem\] .w-full.flex.flex-col.justify-center.items-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Empty chat only (.py-24): wordmark + composer hug as one group.
   Parent Chat.svelte `flex items-center h-full` centers that group in the pane.
   Do not stretch to 100dvh (strands a tiny mark in a black field). */
html body .m-auto.w-full.max-w-\[58rem\].py-24 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0.5rem !important;
  transform: none !important;
  translate: 0 !important;
  --tw-translate-y: 0px !important;
}

html body .m-auto.w-full.max-w-\[58rem\].py-24 > .w-full.text-3xl {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body .m-auto.w-full.max-w-\[58rem\].py-24 .w-full.flex.flex-col.justify-center.items-center {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 0.25rem !important;
  padding-top: 0 !important;
  width: 100% !important;
}

html body .m-auto.w-full.max-w-\[58rem\].py-24 .flex.mt-1.mb-2 {
  display: none !important;
}

html body .m-auto.w-full.max-w-\[58rem\].py-24 .text-base.font-normal.w-full.py-3 {
  padding-top: 0.25rem !important;
  padding-bottom: 0 !important;
}

.cp-hero-mark {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: 2.25rem !important;
  max-height: 2.5rem !important;
  max-width: 13.75rem !important;
  margin: 0 auto 16px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

html body #message-input-container {
  position: relative !important;
  z-index: 2 !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar:has(.cp-sidebar-wordmark) > a:first-of-type {
  width: auto !important;
  height: 1.875rem !important;
  min-width: 0 !important;
  max-width: 9rem !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding-inline: 0.25rem !important;
  background: transparent !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar:has(.cp-sidebar-wordmark) > a:first-of-type:hover {
  background: transparent !important;
}

#sidebar[data-state]:not([data-state="false"]) #logo.cp-sidebar-wordmark,
#sidebar[data-state]:not([data-state="false"]) img.cp-sidebar-wordmark {
  display: block !important;
  width: auto !important;
  height: 1.375rem !important;
  max-height: 1.5rem !important;
  max-width: 8.75rem !important;
  object-fit: contain !important;
  object-position: left center !important;
  visibility: visible !important;
}

/*
 * Brand marks are black SVGs. Invert only when the page theme is dark
 * (`html.dark` / `.dark` on html). Do not key off Tailwind `bg-gray-950`
 * on the sidebar — that class is present in light mode too (gray-50 paint).
 * Do not invert avatars, model tiles, or other images.
 */
html.dark img[src*="chatpod-logo"],
html.dark .cp-sidebar-wordmark,
html.dark .cp-hero-mark,
html.dark .cp-auth-logo,
html.dark .cp-auth-mark img,
.dark img[src*="chatpod-logo"],
.dark .cp-sidebar-wordmark,
.dark .cp-hero-mark,
.dark .cp-auth-logo,
.dark .cp-auth-mark img {
  filter: invert(1);
}

html.dark div.rounded-full.bg-cover.bg-center[style*="profile/image"][style*="voice=true"],
html.dark div.rounded-full.bg-cover.bg-center[style*="favicon"],
.dark div.rounded-full.bg-cover.bg-center[style*="profile/image"][style*="voice=true"],
.dark div.rounded-full.bg-cover.bg-center[style*="favicon"] {
  filter: invert(1);
}

/*
 * Dark canvas: true black, not charcoal gray-900/950 slabs.
 * Beats OWUI General.svelte inline --color-gray-* for the default “dark” theme.
 * Light theme tokens are untouched.
 */
html.dark {
  --color-gray-900: #0a0a0a !important;
  --color-gray-950: #000000 !important;
  background-color: #000 !important;
}
html.dark body {
  background-color: #000 !important;
}
html.dark #sidebar,
html.dark #sidebar .bg-gray-950,
html.dark #sidebar .dark\:bg-gray-950,
html.dark .sidebar-bg-gradient-to-b,
html.dark .sidebar-bg-gradient-to-t {
  background-color: #000 !important;
}
html.dark .sidebar-bg-gradient-to-b {
  --tw-gradient-from: #000 !important;
}
html.dark .sidebar-bg-gradient-to-t {
  --tw-gradient-from: #000 !important;
}

#logo:not(.cp-sidebar-wordmark) {
  visibility: hidden !important;
}

/* Wordmark already includes “Chatpod”; hide mark-only icon, name label, extra heading.
   Scope to the *header* `.sidebar.sticky.top-0` only — the footer also uses `.sidebar`
   and holds the user avatar (`/users/.../profile/image`). */
#sidebar #sidebar-webui-name,
#sidebar .sidebar > a:has(#sidebar-webui-name),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 img:not(.cp-sidebar-wordmark),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 img.sidebar-new-chat-icon:not(.cp-sidebar-wordmark),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 img[src*="chatpod-logo-01"]:not(.cp-sidebar-wordmark),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 img[src*="favicon"]:not(.cp-sidebar-wordmark),
#logo + *,
#logo ~ span,
#logo ~ div:not(.sidebar-bg-gradient-to-b),
[data-cp-sidebar-mark-hidden="1"]:not([src*="/users/"]),
#sidebar[data-state="false"] .sidebar.sticky.top-0 img,
#sidebar:not([data-state]) img.cp-sidebar-wordmark,
#sidebar:not([data-state]) img#logo,
#sidebar:not([data-state]) img[src*="favicon"],
#sidebar:not([data-state]) img.sidebar-new-chat-icon ~ img {
  display: none !important;
}

/*
 * Collapsed rail: ChatPod mark at rest; Sidebar glyph on hover/focus (cross/swap).
 * Never force display:block without a matching hover hide — that stacks mark + toggle.
 */
#sidebar:not([data-state]) img.cp-sidebar-collapsed-mark {
  display: block !important;
  visibility: visible !important;
  width: var(--cp-icon) !important;
  height: var(--cp-icon) !important;
  max-width: var(--cp-icon) !important;
  max-height: var(--cp-icon) !important;
  object-fit: contain !important;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

#sidebar:not([data-state]) .group:hover img.cp-sidebar-collapsed-mark,
#sidebar:not([data-state]) .group:focus-within img.cp-sidebar-collapsed-mark,
#sidebar:not([data-state]) .group:focus-visible img.cp-sidebar-collapsed-mark {
  display: none !important;
}

#sidebar:not([data-state]) > button > .pb-1 {
  padding-bottom: 2px !important;
}

/* Collapsed rail wells: 36px hit, 10px radius (match --cp-hit-nav). */
#sidebar:not([data-state]) .flex.size-\[calc\(30px\*var\(--app-text-scale\,1\)\)\] {
  width: var(--cp-hit-nav) !important;
  height: var(--cp-hit-nav) !important;
  min-width: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
  border-radius: var(--cp-radius-nav) !important;
}

#sidebar:not([data-state]) button.size-8\.5,
#sidebar:not([data-state]) a.size-8,
#sidebar:not([data-state]) button.size-8 {
  width: var(--cp-hit-nav) !important;
  height: var(--cp-hit-nav) !important;
  min-width: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
  margin-inline: auto !important;
}

/*
 * Closed OWUI drawer stays mounted at width:0 under the rail. Hide it from paint/a11y
 * so its logo/toggle cannot stack with the collapsed-rail mark.
 * IMPORTANT: children with `visibility:visible` (e.g. #logo.cp-sidebar-wordmark) escape
 * a parent `visibility:hidden` — force descendants off too.
 */
div.h-screen[data-state="false"][aria-hidden="true"],
div.h-screen[data-state="false"].pointer-events-none {
  visibility: hidden !important;
}

div.h-screen[data-state="false"] img,
div.h-screen[data-state="false"] svg,
div.h-screen[data-state="false"] a,
div.h-screen[data-state="false"] button,
div.h-screen[data-state="false"] .cp-sidebar-wordmark,
div.h-screen[data-state="false"] #logo {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sidebar img[src*="/users/"][src*="/profile/image"] {
  display: inline-block !important;
  visibility: visible !important;
}

/* Message hover actions: 17pt glyphs, transparent 44pt hit (no gray slab). */
[id^="message-"] button svg.w-4,
[id^="message-"] button svg.h-4,
[id^="message-"] button svg.size-3\.5,
[id^="message-"] button svg.size-4,
[id^="message-"] .buttons button svg {
  width: var(--cp-icon-dense) !important;
  height: var(--cp-icon-dense) !important;
  stroke-width: var(--cp-stroke) !important;
}

[id^="message-"] .buttons {
  gap: var(--cp-toolbar-gap) !important;
  column-gap: var(--cp-toolbar-gap) !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}

[id^="message-"] .buttons > *:has(button.cp-hide-action),
[id^="message-"] .buttons > *:has(button[aria-label="Read Aloud"]),
[id^="message-"] .buttons > *:has(button[aria-label="朗读"]),
[id^="message-"] .buttons > *:has(button[aria-label="Continue Response"]),
[id^="message-"] .buttons > *:has(button[id^="continue-response-button"]),
[id^="message-"] .buttons > *:has(button[aria-label="Share"]),
[id^="message-"] .buttons > *:has(button[aria-label="分享"]),
[id^="message-"] .buttons > *:has(button[id^="info-"]),
[id^="message-"] .buttons > *:has(button[aria-label="Good Response"]),
[id^="message-"] .buttons > *:has(button[aria-label="Bad Response"]),
[id^="message-"] .buttons > *:has(button[aria-label*="点赞"]),
[id^="message-"] .buttons > *:has(button[aria-label*="点踩"]),
[id^="message-"] .buttons > *:has(button[aria-label="Fork chat"]),
[id^="message-"] .buttons > *:has(button[aria-label="Fork"]) {
  display: none !important;
}

[id^="message-"] .buttons button,
[id^="message-"] .buttons button.copy-response-button {
  min-width: var(--cp-control-height);
  min-height: var(--cp-control-height);
  width: var(--cp-control-height);
  height: var(--cp-control-height);
  margin-inline: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 8px;
}

[id^="message-"] .buttons button:hover,
[id^="message-"] .buttons button.copy-response-button:hover {
  background: transparent !important;
  background-color: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
  [id^="message-"] .buttons {
    opacity: 0;
    transition: opacity var(--cp-motion-fast) var(--cp-ease);
  }
  [id^="message-"]:hover .buttons,
  [id^="message-"]:focus-within .buttons {
    opacity: 1;
  }
}

[id^="message-"] .buttons button:focus-visible,
[id^="message-"] textarea:focus-visible,
[id^="message-"] [contenteditable="true"]:focus-visible {
  outline: none !important;
  box-shadow: var(--cp-focus) !important;
  border-radius: var(--cp-radius-nav);
}

img.user-message-profile-image,
img.assistant-message-profile-image {
  width: 32px !important;
  height: 32px !important;
}

/* Raise / compress chat composer (less empty air above the toolbar) */
#message-input-container {
  padding-bottom: 0.15rem !important;
}

#chat-input-container {
  min-height: 2.75rem !important;
  max-height: min(40vh, 12rem) !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.15rem !important;
}

#chat-input-container .ProseMirror,
#chat-input-container [contenteditable="true"],
#chat-input {
  min-height: 1.5rem !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  background: transparent !important;
}

/* Composer: kill glass/shadow; keep a hairline so the field reads on white. */
html body #message-input-container.shadow-lg,
html body #message-input-container.bg-white\/5 {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#chat-input-container,
#chat-input-container > div,
#chat-input-container .ProseMirror,
#chat-input-container [contenteditable="true"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Placeholder 「有什么我能帮您的吗？」: native line-clamp paints a white chip. */
#chat-input-container .ProseMirror p.is-editor-empty:first-child::before,
#chat-input-container .ProseMirror p.is-empty:first-child::before,
#chat-input-container .ProseMirror [data-placeholder]::before {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
  display: inline !important;
  position: absolute !important;
  color: #9aa1ac !important;
  content: "有什么我能帮您的吗？" !important;
}

/* Four-diamond Integrations control is the upstream logo mark. Keep + menu. */
#integration-menu-button {
  display: none !important;
}

/* Composer + toolbar: hide the 1px rule immediately right of the plus. */
html body #message-input-container div.flex.self-center.w-\[0\.0625rem\].h-4,
html body #message-input-container #input-menu-button ~ div.w-\[0\.0625rem\] {
  display: none !important;
}

/*
 * Composer Call / Send: upstream uses rounded-full + p-[0.3125rem] on a non-square
 * box (Voice size-5 + padding), so the black control reads as a slight oval.
 */
html body #message-input-container button.bg-black.rounded-full,
html body #message-input-container button[aria-label="Voice mode"],
html body #message-input-container button[aria-label="语音模式"],
html body #message-input-container button[aria-label="Stop"],
html body #message-input-container button[aria-label="停止"],
html body #message-input-container #send-message-button,
html body #message-input-container #input-menu-button,
html body #message-input-container #chat-variables-button {
  width: var(--cp-control-height) !important;
  height: var(--cp-control-height) !important;
  min-width: var(--cp-control-height) !important;
  min-height: var(--cp-control-height) !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

html body #message-input-container #input-menu-button,
html body #message-input-container #chat-variables-button {
  border-radius: var(--cp-radius-nav) !important;
}

html body #message-input-container #input-menu-button svg,
html body #message-input-container #chat-variables-button svg {
  width: var(--cp-icon) !important;
  height: var(--cp-icon) !important;
  flex-shrink: 0 !important;
  stroke-width: var(--cp-stroke) !important;
}

html body #message-input-container button.bg-black.rounded-full svg,
html body #message-input-container button[aria-label="Voice mode"] svg,
html body #message-input-container button[aria-label="语音模式"] svg,
html body #message-input-container button[aria-label="Stop"] svg,
html body #message-input-container button[aria-label="停止"] svg,
html body #message-input-container #send-message-button svg {
  width: var(--cp-icon-dense) !important;
  height: var(--cp-icon-dense) !important;
  flex-shrink: 0 !important;
  stroke-width: var(--cp-stroke) !important;
}

html body #message-input-container #input-menu-button:focus-visible,
html body #message-input-container #send-message-button:focus-visible,
html body #message-input-container button.bg-black.rounded-full:focus-visible,
html body #message-input-container button[aria-label="Voice mode"]:focus-visible,
html body #message-input-container button[aria-label="语音模式"]:focus-visible,
html body #message-input-container #chat-variables-button:focus-visible,
html body #message-input-container #voice-input-button:focus-visible {
  outline: none !important;
  box-shadow: var(--cp-focus) !important;
}

html body #message-input-container #voice-input-button {
  display: none !important;
}

/*
 * Hug-content action clusters (class A). The composer shell stays Fill (class B).
 * Upstream put flex-1 on the left tool group, so [+] and chips sat in a 700px+ well.
 * Tools hug left; model/send hug right; leftover space is the composer gutter.
 */
html body #message-input-container div.flex.justify-between.max-w-full > div.flex.items-center.flex-1.min-w-0 {
  flex: 0 1 auto !important;
  width: fit-content !important;
  max-width: calc(100% - 8.75rem) !important;
}

html body #message-input-container div.flex.justify-between.max-w-full .flex.flex-1.items-center.min-w-0.overflow-x-auto {
  flex: 0 1 auto !important;
  width: max-content !important;
  max-width: 100% !important;
}

html body #message-input-container div.flex.justify-between.max-w-full > div.self-end.flex {
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: min(100%, 16rem) !important;
}

html body #message-input-container #model-selector-model-button {
  height: var(--cp-control-height) !important;
  min-height: var(--cp-control-height) !important;
}

/* Title + ellipsis hug inside the Fill header (title still truncates). */
html body nav .flex-1.overflow-hidden > .flex.max-w-full.min-w-0.items-center {
  width: fit-content !important;
  max-width: 100% !important;
}

/* Same-class chat header chrome: identical 36×36 hit + 16px dense glyphs. */
html body nav #chat-context-menu-button,
html body nav #temporary-chat-button,
html body nav #save-temporary-chat-button,
html body nav #sidebar-toggle-button,
html body nav button[aria-label="Controls"],
html body button[aria-label="展开侧边栏"],
html body button[aria-label="收起侧边栏"],
html body button[aria-label="Open Sidebar"],
html body button[aria-label="Close Sidebar"],
html body .sidebar button[aria-label="展开侧边栏"],
html body .sidebar button[aria-label="收起侧边栏"],
html body nav .cp-find-trigger,
html body nav .cp-workspace-back__btn {
  box-sizing: border-box !important;
  width: var(--cp-control-height) !important;
  height: var(--cp-control-height) !important;
  min-width: var(--cp-control-height) !important;
  min-height: var(--cp-control-height) !important;
  max-width: var(--cp-control-height) !important;
  max-height: var(--cp-control-height) !important;
  padding: 0 !important;
  border-radius: var(--cp-radius-nav) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body nav #chat-context-menu-button svg,
html body nav #temporary-chat-button svg,
html body nav #save-temporary-chat-button svg,
html body nav #sidebar-toggle-button svg,
html body nav button[aria-label="Controls"] svg,
html body button[aria-label="展开侧边栏"] svg,
html body button[aria-label="收起侧边栏"] svg,
html body button[aria-label="Open Sidebar"] svg,
html body button[aria-label="Close Sidebar"] svg,
html body .sidebar button[aria-label="展开侧边栏"] svg,
html body .sidebar button[aria-label="收起侧边栏"] svg,
html body nav .cp-find-trigger svg,
html body nav .cp-workspace-back__icon {
  width: var(--cp-icon-dense) !important;
  height: var(--cp-icon-dense) !important;
  min-width: var(--cp-icon-dense) !important;
  min-height: var(--cp-icon-dense) !important;
  max-width: var(--cp-icon-dense) !important;
  max-height: var(--cp-icon-dense) !important;
  stroke-width: var(--cp-stroke) !important;
}

/*
 * ChatBubbleDotted ink bbox is ~20/24 of the viewBox vs ~16/24 for search/knobs.
 * Scale glyph so optical weight matches same-class peers inside the 36 hit.
 */
html body nav #temporary-chat-button svg,
html body nav #save-temporary-chat-button svg {
  width: calc(var(--cp-icon-dense) * 0.8) !important;
  height: calc(var(--cp-icon-dense) * 0.8) !important;
  min-width: calc(var(--cp-icon-dense) * 0.8) !important;
  min-height: calc(var(--cp-icon-dense) * 0.8) !important;
  max-width: calc(var(--cp-icon-dense) * 0.8) !important;
  max-height: calc(var(--cp-icon-dense) * 0.8) !important;
}

/* Find is a gap-2 flex sibling — no extra margin (was +0.5rem and broke right gaps). */
html body nav .cp-find-trigger {
  margin: 0 !important;
}

/* Equal L/R edge padding on chat sticky header row (was pl-1.5 / pr-1 / px-2.5). */
html body nav.sticky > div.flex.items-center.w-full {
  padding-left: var(--cp-chrome-edge-inset) !important;
  padding-right: var(--cp-chrome-edge-inset) !important;
  padding-inline: var(--cp-chrome-edge-inset) !important;
  box-sizing: border-box !important;
}

/* True icon row (inside mx-auto): consistent 8px between 工作台 / toggle / title / right. */
html body nav.sticky > div.flex.items-center.w-full div.flex.items-center.w-full.max-w-full {
  gap: var(--cp-chrome-icon-gap, 8px) !important;
  column-gap: var(--cp-chrome-icon-gap, 8px) !important;
}

/* Mobile sidebar toggle wrapper uses mr-1 — kill so left gap === right gap-2. */
html body nav.sticky div.mr-1:has(#sidebar-toggle-button),
html body nav.sticky div.flex.flex-none.items-center.self-center:has(#sidebar-toggle-button) {
  margin: 0 !important;
  margin-inline: 0 !important;
  margin-right: 0 !important;
}

/* Right cluster: gap-2 (8px) already; kill lg:mr-1 so Controls matches left inset. */
html body nav.sticky .flex.flex-none.items-center.gap-2.self-center {
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
  gap: var(--cp-chrome-icon-gap, 8px) !important;
  column-gap: var(--cp-chrome-icon-gap, 8px) !important;
}

/* Expanded drawer header: brand at rest; collapse control cross-replaces in the
   *same* left slot on hover/focus — never pack wordmark + ← side-by-side. */
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 {
  position: relative !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: calc(var(--cp-hit-nav) + 8px) !important;
  overflow: visible !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 > a:first-of-type:has(.cp-sidebar-wordmark) {
  position: relative !important;
  z-index: 1;
  width: auto !important;
  min-width: var(--cp-hit-nav) !important;
  max-width: 9rem !important;
  height: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
  justify-content: flex-start !important;
  padding-inline: 0.25rem !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  transition: opacity var(--cp-motion-fast) var(--cp-ease);
}

#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 .cp-sidebar-collapse-wrap {
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--cp-hit-nav) !important;
  height: var(--cp-hit-nav) !important;
  min-width: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--cp-motion-fast) var(--cp-ease);
}

/* Child can still receive keyboard focus while wrap is pe:none (not inherited). */
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 .cp-sidebar-collapse-wrap > button.cp-sidebar-collapse {
  pointer-events: auto !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 .cp-sidebar-collapse-wrap > button,
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 button.cp-sidebar-collapse {
  width: var(--cp-hit-nav) !important;
  height: var(--cp-hit-nav) !important;
  min-width: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
  border-radius: var(--cp-radius-nav) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot:hover > a:first-of-type:has(.cp-sidebar-wordmark),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot:focus-within > a:first-of-type:has(.cp-sidebar-wordmark),
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot.cp-brand-slot-active > a:first-of-type:has(.cp-sidebar-wordmark) {
  opacity: 0 !important;
  pointer-events: none !important;
}

#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot:hover .cp-sidebar-collapse-wrap,
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot:focus-within .cp-sidebar-collapse-wrap,
#sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0.cp-sidebar-brand-slot.cp-brand-slot-active .cp-sidebar-collapse-wrap {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Prefer-reduced-motion: keep swap instant, no fade. */
@media (prefers-reduced-motion: reduce) {
  #sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 > a:first-of-type:has(.cp-sidebar-wordmark),
  #sidebar[data-state]:not([data-state="false"]) .sidebar.sticky.top-0 .cp-sidebar-collapse-wrap {
    transition: none !important;
  }
}

@media (max-width: 639px) {
  html body #message-input-container div.flex.justify-between.max-w-full > div.flex.items-center.flex-1.min-w-0 {
    max-width: calc(100% - 7.25rem) !important;
  }
}

html body #message-input-container #voice-input-button svg {
  width: var(--cp-icon) !important;
  height: var(--cp-icon) !important;
  stroke-width: var(--cp-stroke) !important;
}

/* owui30 / owui69: composer Stop rim spinner while generating. Dots stay in transcript. */
html body #message-input-container button[aria-label="Stop"],
html body #message-input-container button[aria-label="停止"],
html body #message-input-container button[aria-label="停止生成"] {
  position: relative !important;
}

html body #message-input-container button[aria-label="Stop"]::after,
html body #message-input-container button[aria-label="停止"]::after,
html body #message-input-container button[aria-label="停止生成"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid rgb(0 0 0 / 12%);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: cp-send-spin 0.75s linear infinite;
  pointer-events: none;
  box-sizing: border-box;
}

html.dark body #message-input-container button[aria-label="Stop"]::after,
html.dark body #message-input-container button[aria-label="停止"]::after,
html.dark body #message-input-container button[aria-label="停止生成"]::after {
  border-color: rgb(255 255 255 / 18%);
  border-top-color: currentColor;
}

@keyframes cp-send-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #message-input-container button[aria-label="Stop"]::after,
  html body #message-input-container button[aria-label="停止"]::after,
  html body #message-input-container button[aria-label="停止生成"]::after {
    animation: none;
    opacity: 0.45;
  }
}

/* Voice / call overlay: model profile/image?voice=true falls back to OI favicon. */
html body div.rounded-full.bg-cover.bg-center[style*="profile/image"][style*="voice=true"],
html body div.rounded-full.bg-cover.bg-center[style*="favicon"] {
  background-image: url("/static/chatpod-logo-01.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Empty-chat hero: ChatPod mark (logo-01) replaces the circular model icon. */
.cp-hero-wordmark {
  display: none !important;
}

/* Composer turn stats — under input (图2 below), never in the transcript */
#cp-composer-stats {
  display: none;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.75rem 0.55rem;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

#cp-composer-stats.is-visible {
  display: flex !important;
}

#cp-composer-stats .cp-composer-stats__text {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--color-gray-500, #6b7280) 92%, transparent);
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.dark #cp-composer-stats .cp-composer-stats__text {
  color: color-mix(in oklab, var(--color-gray-400, #9ca3af) 88%, transparent);
}

/* Hide leaked cache-hit chrome and marker text in messages */
.cp-msg-cache {
  display: none !important;
}

.cp-turn-stats-marker,
p:has(> .cp-turn-stats-marker),
[data-cp-turn-stats="1"] {
  display: none !important;
}

/*
 * Hide OWUI「追问」follow-ups on first paint (FollowUps.svelte under assistant
 * messages). Do not wait for overlay JS to add .cp-hide-followups — that flashes
 * on refresh. Keep official FollowUps markup; this is display:none only.
 *
 * Compiled root: <div class="mt-4"><div class="text-sm font-normal">…</div>
 *   <div class="flex flex-col text-left gap-1 mt-1.5">buttons</div></div>
 * Wrapper in ResponseMessage: <div class="my-2.5">
 */
[id^="message-"] .mt-4:has(> .text-sm.font-normal):has(> .flex.flex-col.text-left.gap-1),
[id^="message-"] .my-2\.5:has(> .mt-4 > .text-sm.font-normal):has(.flex.flex-col.text-left.gap-1),
[id^="message-"] .my-2\.5:has(.mt-4 > .text-sm.font-normal):has(button[aria-label*="追问"]),
[id^="message-"] .my-2\.5:has(.mt-4 > .text-sm.font-normal):has(button[aria-label*="Follow up" i]),
[id^="message-"] .mt-4:has(> .text-sm.font-normal):has(> .flex.flex-col.text-left):has(button[aria-label*="追问"]),
[id^="message-"] .mt-4:has(> .text-sm.font-normal):has(> .flex.flex-col.text-left):has(button[aria-label*="Follow up" i]),
[id^="message-"] .mt-4.cp-owui-followups,
[id^="message-"] .my-2\.5:has(.cp-owui-followups),
[id^="message-"] button[aria-label^="追问"],
[id^="message-"] button[aria-label^="Follow up" i],
[id^="message-"] button[aria-label^="Follow Up"],
.cp-owui-followups,
.cp-hide-followups {
  display: none !important;
}

/*
 * Message actions — keep: 复制 / 重新生成 / 编辑 (and share if present elsewhere).
 * Hide: TTS · Continue/Play · Share · Info/stats · thumbs · Fork chat.
 * Official ResponseMessage markup kept; display:none only (no upstream delete).
 */
[id^="message-"] button[aria-label="Read Aloud"],
[id^="message-"] button[aria-label*="Read Aloud" i],
[id^="message-"] button[aria-label*="朗读"],
[id^="message-"] button[aria-label*="朗读消息"],
[id^="message-"] button[aria-label="Continue Response"],
[id^="message-"] button[aria-label*="Continue" i],
[id^="message-"] button[aria-label*="继续生成"],
[id^="message-"] button[aria-label*="继续回复"],
[id^="message-"] button[id^="info-"],
[id^="message-"] button[aria-label="Info"],
[id^="message-"] button[aria-label*="Info" i],
[id^="message-"] button[aria-label*="信息"],
[id^="message-"] button[aria-label*="详细信息"],
[id^="message-"] button[aria-label="Good Response"],
[id^="message-"] button[aria-label*="Good Response" i],
[id^="message-"] button[aria-label="Bad Response"],
[id^="message-"] button[aria-label*="Bad Response" i],
[id^="message-"] button[aria-label*="点赞"],
[id^="message-"] button[aria-label*="点踩"],
[id^="message-"] button[aria-label*="有帮助"],
[id^="message-"] button[aria-label*="没帮助"],
[id^="message-"] button[aria-label="Fork chat"],
[id^="message-"] button[aria-label*="Fork chat" i],
[id^="message-"] button[aria-label="Fork"],
[id^="message-"] button[aria-label*="分支"],
[id^="message-"] button.cp-hide-action {
  display: none !important;
}

/* Generated images — Chatpod msg-gen-image look + hover download */
.cp-gen-image {
  --cp-gen-image-tool-inset: 10px;
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: min(380px, 82vw);
  align-self: flex-start;
  justify-self: start;
  line-height: 0;
  margin: 6px 8px 10px 0;
  overflow: hidden;
  border-radius: 16px;
  vertical-align: top;
}

.cp-gen-image__hit {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
  border-radius: 16px;
  min-width: 0 !important;
  min-height: 0 !important;
  width: max-content !important;
  max-width: 100%;
  height: auto !important;
}

.cp-gen-image__img,
.markdown-prose img[alt*="生成"],
.prose img[alt*="生成"],
[id^="message-"] img[src*="/api/image/asset"] {
  display: block !important;
  max-width: min(380px, 82vw) !important;
  max-height: min(420px, 58vh) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: var(--color-gray-50, #f9fafb);
  box-shadow: none !important;
  border: var(--cp-elev) !important;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.cp-gen-image__img.is-ready,
.markdown-prose img[alt*="生成"].is-ready {
  opacity: 1;
}

.dark .cp-gen-image__img,
.dark .markdown-prose img[alt*="生成"],
.dark [id^="message-"] img[src*="/api/image/asset"] {
  background: rgb(24 24 27 / 80%);
  box-shadow: none !important;
  border: var(--cp-elev-dark) !important;
}

.cp-gen-image__tools {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cp-motion-fast) var(--cp-ease);
}

.cp-gen-image:hover .cp-gen-image__tools,
.cp-gen-image:focus-within .cp-gen-image__tools {
  opacity: 1;
  pointer-events: auto;
}

/* Shared 8080/3001 media fab: dark glass circle, white glyph. */
.cp-gen-image__tool {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: rgb(28 28 30 / 48%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
}

.cp-gen-image__tool--zoom {
  top: var(--cp-gen-image-tool-inset);
  right: var(--cp-gen-image-tool-inset);
  bottom: auto;
  left: auto;
}

.cp-gen-image__tool--dl {
  top: auto;
  left: auto;
  right: var(--cp-gen-image-tool-inset);
  bottom: var(--cp-gen-image-tool-inset);
}

.cp-gen-image__tool:hover,
.cp-gen-image__tool:focus-visible {
  background: rgb(28 28 30 / 68%);
  outline: none;
}

.cp-gen-image__tool::before {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #f4f4f5;
  color: #3f3f46;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
  opacity: 0;
  pointer-events: none;
}

.cp-gen-image__tool:hover::before,
.cp-gen-image__tool:focus-visible::before {
  opacity: 1;
}

.dark .cp-gen-image__tool {
  background: rgb(0 0 0 / 46%);
  color: #fff;
  box-shadow: none;
}

.dark .cp-gen-image__tool:hover,
.dark .cp-gen-image__tool:focus-visible {
  background: rgb(0 0 0 / 64%);
}

.dark .cp-gen-image__tool::before {
  background: #27272a;
  color: #e4e4e7;
}

/* Image pending skeleton (Chatpod ImageGenerationStatus) */
.cp-img-pending {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 6px 8px 10px;
  width: min(320px, 78vw);
  height: auto;
  aspect-ratio: 2 / 3;
  max-height: min(58vh, 480px);
  border-radius: 16px;
  background: #f3f4f6;
  border: var(--cp-elev);
  box-shadow: none;
}

.cp-img-pending .cp-thinking__dots {
  position: relative;
  z-index: 1;
}

.cp-img-pending .cp-thinking__dots span {
  background: #a1a1aa;
}

.dark .cp-img-pending {
  background: rgb(24 24 27 / 80%);
}

.dark .cp-img-pending .cp-thinking__dots span {
  background: #71717a;
}

@media (prefers-reduced-motion: reduce) {
  .cp-gen-image__img {
    animation: none;
    opacity: 1;
    transition: none;
  }
}

/* ChatPod authentication, inspired by the supplied reference but using ChatPod assets. */
#cp-auth { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; justify-items: center; width: 100%; overflow: auto; background: #fff; color: #12141a; font-family: var(--cp-font); }
html.dark #cp-auth,
.dark #cp-auth {
  background: #000;
  color: #fafafa;
}
.cp-auth-mark { display: none; }
.cp-auth-mark img { width: 100%; height: 100%; object-fit: contain; }
.cp-auth-card { width: min(100% - 40px, 336px); margin-inline: auto; justify-self: center; padding: 0 0 64px; }

html.cp-not-found,
html.cp-not-found body {
  background: #fff;
  color: #0d0d0d;
}
html.dark.cp-not-found,
html.dark.cp-not-found body,
.dark.cp-not-found body {
  background: #000;
  color: #fafafa;
}
html.cp-not-found body > *:not(#cp-not-found):not(style):not(script) {
  display: none !important;
}
#cp-not-found {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  justify-items: center;
  padding: 24px;
  font-family: var(--cp-font);
}
.cp-not-found__card {
  width: min(100%, 336px);
  text-align: center;
}
.cp-not-found__mark {
  display: block;
  width: min(172px, 52vw);
  height: 39px;
  margin: 0 auto 28px;
  object-fit: contain;
}
html.dark .cp-not-found__mark,
.dark .cp-not-found__mark {
  filter: invert(1);
}
.cp-not-found__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cp-not-found__copy {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--cp-secondary, #a1a1aa);
  line-height: 1.45;
}
.cp-not-found__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
html.dark .cp-not-found__home,
.dark .cp-not-found__home {
  border-color: rgba(255,255,255,.12);
}
.cp-not-found__home:hover {
  background: var(--cp-hover, rgba(255,255,255,.08));
}
.cp-auth-logo { display: block; width: min(172px, 52vw); height: 39px; margin: 0 auto 72px; object-fit: contain; transform: none; }
.cp-auth-panel { display: grid; gap: 10px; position: relative; }
.cp-auth-panel [data-pane], .cp-auth-panel [data-register-pane], .cp-auth-panel [data-reset-pane] { display: grid; gap: 10px; }
#cp-auth [hidden] {
  display: none !important;
}
.cp-auth-panel [data-pane] .cp-auth-primary, .cp-auth-panel [data-register-pane] .cp-auth-primary, .cp-auth-panel [data-reset-pane] .cp-auth-primary { margin-top: 2px; }
.cp-auth-panel h1 { margin: 0 0 16px; text-align: center; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.cp-auth-sub { margin: 0 0 12px; text-align: center; color: var(--cp-secondary); font-size: var(--cp-type-caption); font-weight: 400; line-height: 1.4; }
.cp-auth-panel label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cp-auth-panel input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: var(--cp-hit);
  border: var(--cp-elev);
  border-radius: 22px;
  padding: 0 20px;
  outline: none !important;
  outline-offset: 0;
  background: #fff;
  color: var(--cp-ink);
  font-size: 16px;
  font-weight: 400;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: border-color .16s;
}
.cp-auth-panel input::placeholder { color: var(--cp-tertiary); font-weight: 400; }
.cp-auth-panel input:focus,
.cp-auth-panel input:focus-visible {
  border-color: #8f949b;
  background: #fff;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.cp-auth-phone, .cp-auth-code {
  display: flex;
  align-items: center;
  height: var(--cp-hit);
  border: var(--cp-elev);
  border-radius: 22px;
  background: #fff;
  overflow: visible;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: border-color .12s ease, background-color .12s ease;
}
.cp-auth-phone:focus-within, .cp-auth-code:focus-within {
  border-color: #8f949b;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.cp-auth-phone span { flex: 0 0 auto; padding: 0 0 0 20px; color: var(--cp-secondary); font-size: var(--cp-type-ui); font-weight: 400; }
.cp-auth-phone input, .cp-auth-code input {
  height: 42px;
  border: 0 !important;
  outline: none !important;
  background: transparent;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.cp-auth-phone input:focus,
.cp-auth-phone input:focus-visible,
.cp-auth-code input:focus,
.cp-auth-code input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.cp-auth-passwrap {
  position: relative;
  border: 0;
  outline: none;
  box-shadow: none;
}
.cp-auth-passwrap input { padding-right: var(--cp-hit); }
.cp-auth-eye { display: grid; place-items: center; position: absolute; top: 50%; right: 2px; z-index: 1; transform: translateY(-50%); width: var(--cp-hit); height: var(--cp-hit); padding: 0; border: 0; background: transparent; color: var(--cp-ink); cursor: pointer; border-radius: 50%; }
.cp-auth-eye svg { display: block; width: var(--cp-icon); height: var(--cp-icon); stroke-width: var(--cp-stroke); }
.cp-auth-eye .cp-eye-close { display: none; }
.cp-auth-eye.is-shown .cp-eye-open { display: none; }
.cp-auth-eye.is-shown .cp-eye-close { display: block; }
.cp-auth-eye:hover { color: #000; }
.cp-auth-code button { flex: 0 0 auto; margin-right: 8px; min-height: var(--cp-hit); padding: 0 12px 0 13px; border: 0; border-left: var(--cp-elev); background: transparent; color: #171717; font-size: var(--cp-type-caption); font-weight: 400; cursor: pointer; }
.cp-auth-card button, .cp-auth-card a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.cp-auth-tabs { display: flex; justify-content: center; gap: 22px; margin: -40px 0 4px; }
.cp-auth-tabs button {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: var(--cp-hit) !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 4px;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #747982;
  font-size: var(--cp-type-ui);
  font-weight: 400;
  line-height: 1.35 !important;
  cursor: pointer;
}
.cp-auth-tabs button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  color: #171717;
}
.cp-auth-links button, .cp-auth-text { border: 0; min-height: var(--cp-hit); padding: 12px 0; background: transparent; color: #494e56; font-size: var(--cp-type-caption); font-weight: 400; cursor: pointer; }
.cp-auth-tabs button.is-active {
  color: #171717;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #8f949b !important;
  box-shadow: none !important;
}
.cp-auth-primary { display: block !important; width: 100% !important; height: var(--cp-hit) !important; min-height: var(--cp-hit) !important; margin-top: 14px; border: 0; border-radius: 22px; background: var(--cp-ink); color: var(--cp-bg); font-size: var(--cp-type-ui); font-weight: 600; cursor: pointer; box-shadow: none !important; }
.cp-auth-primary:focus-visible { outline: none !important; box-shadow: none !important; border: 1px solid #171717; }
.cp-auth-agree { margin: 14px 0 0; color: var(--cp-secondary); font-size: var(--cp-type-caption2); line-height: 1.45; text-align: center; font-weight: 400; }.cp-auth-agree a { color: #4f535b; text-decoration: underline; text-underline-offset: 2px; font-weight: 400; }
.cp-auth-links { display: flex; justify-content: space-between; margin-top: 5px; }.cp-auth-links button, .cp-auth-text { color: #3e4248; text-decoration: underline; text-underline-offset: 3px; }.cp-auth-text { margin: 6px auto 0; }
.cp-auth-notice { min-height: 18px; margin: 12px 0 0; color: #4a4f57; text-align: center; font-size: var(--cp-type-caption); line-height: 1.4; font-weight: 400; }
.cp-auth-notice.is-error { color: #b42318; }
[data-cp-onboarding-hidden="1"] {
  display: none !important;
}

html.cp-auth-route [data-sonner-toaster],
html.cp-auth-route [data-sonner-toast],
html.cp-auth-route [data-sonner-toaster] *,
html:has(#cp-auth) [data-sonner-toaster],
html:has(#cp-auth) [data-sonner-toast],
body:has(#cp-auth) [data-sonner-toaster],
body:has(#cp-auth) [data-sonner-toast] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Failed-turn toasts must not sit on the composer and eat send clicks. */
html:not(.cp-auth-route) body [data-sonner-toaster] {
  pointer-events: none !important;
}
html:not(.cp-auth-route) body [data-sonner-toast] {
  pointer-events: auto;
}
html body #message-input-container,
html body #send-message-button,
html body #chat-input-container {
  pointer-events: auto !important;
}
.cp-auth-footer { position: fixed !important; display: block !important; bottom: 26px; left: 0; width: 100%; color: var(--cp-tertiary); text-align: center; font-size: var(--cp-type-caption2); font-weight: 400; letter-spacing: 0; }
.cp-auth-tabs button, .cp-auth-code button, .cp-auth-links button, .cp-auth-text, .cp-auth-eye, .cp-auth-primary { transition: transform .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease, border-color .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .cp-auth-tabs button,
  .cp-auth-code button,
  .cp-auth-links button,
  .cp-auth-text,
  .cp-auth-eye,
  .cp-auth-primary,
  .cp-auth-panel input,
  .cp-auth-phone,
  .cp-auth-code {
    transition: none !important;
  }
  .cp-auth-primary:active,
  .cp-auth-tabs button:active,
  .cp-auth-links button:active,
  .cp-auth-text:active,
  .cp-auth-code button:active {
    transform: none !important;
  }
}
.cp-auth-primary:hover { filter: brightness(1.08); }
.cp-auth-primary:active { transform: translateY(1px); filter: brightness(0.94); }
.cp-auth-tabs button:hover, .cp-auth-links button:hover, .cp-auth-text:hover, .cp-auth-code button:hover { color: #171717; }
.cp-auth-tabs button:active, .cp-auth-links button:active, .cp-auth-text:active, .cp-auth-code button:active { transform: translateY(1px); opacity: .82; }
.cp-auth-eye:active { opacity: .82; color: #171717; }
/* Keep the compact, centered proportions at every viewport size.  The prior
   mobile top padding was from the first auth mock and made the current form
   sit visibly too low on portrait screens. */
@media (max-width: 640px) {
  .cp-auth-card { padding: 0 0 64px; }
  .cp-auth-logo { margin-bottom: 72px; }
  .cp-auth-panel h1 { font-size: 27px; }
  .cp-auth-panel input, .cp-auth-panel input::placeholder, .cp-auth-phone span { font-size: 16px; }
}

html.dark #cp-auth .cp-auth-panel input,
html.dark #cp-auth .cp-auth-phone,
html.dark #cp-auth .cp-auth-code,
.dark #cp-auth .cp-auth-panel input,
.dark #cp-auth .cp-auth-phone,
.dark #cp-auth .cp-auth-code {
  background: #000;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fafafa;
}
html.dark #cp-auth .cp-auth-phone input,
html.dark #cp-auth .cp-auth-code input,
.dark #cp-auth .cp-auth-phone input,
.dark #cp-auth .cp-auth-code input {
  background: transparent;
  border-color: transparent;
}
html.dark #cp-auth .cp-auth-panel input:focus,
html.dark #cp-auth .cp-auth-panel input:focus-visible,
.dark #cp-auth .cp-auth-panel input:focus,
.dark #cp-auth .cp-auth-panel input:focus-visible {
  background: #000;
  border-color: rgba(255, 255, 255, 0.55);
  outline: none !important;
  box-shadow: none !important;
}
html.dark #cp-auth .cp-auth-phone:focus-within,
html.dark #cp-auth .cp-auth-code:focus-within,
.dark #cp-auth .cp-auth-phone:focus-within,
.dark #cp-auth .cp-auth-code:focus-within {
  background: #000;
  border-color: rgba(255, 255, 255, 0.55);
  outline: none !important;
  box-shadow: none !important;
}
html.dark #cp-auth .cp-auth-panel input::placeholder,
.dark #cp-auth .cp-auth-panel input::placeholder {
  color: #737373;
}
html.dark #cp-auth .cp-auth-code button,
.dark #cp-auth .cp-auth-code button {
  border-left-color: rgba(255, 255, 255, 0.28);
  color: #fafafa;
}
html.dark #cp-auth .cp-auth-phone span,
html.dark #cp-auth .cp-auth-sub,
html.dark #cp-auth .cp-auth-agree,
html.dark #cp-auth .cp-auth-footer,
.dark #cp-auth .cp-auth-phone span,
.dark #cp-auth .cp-auth-sub,
.dark #cp-auth .cp-auth-agree,
.dark #cp-auth .cp-auth-footer {
  color: #a3a3a3;
}
html.dark #cp-auth .cp-auth-agree a,
.dark #cp-auth .cp-auth-agree a {
  color: #d4d4d4;
}
html.dark #cp-auth .cp-auth-primary,
.dark #cp-auth .cp-auth-primary {
  background: var(--cp-ink);
  color: var(--cp-bg);
  border: 0;
  box-shadow: none !important;
}
html.dark #cp-auth .cp-auth-primary:focus-visible,
.dark #cp-auth .cp-auth-primary:focus-visible {
  border: 1px solid #fff;
  box-shadow: none !important;
}
html.dark #cp-auth .cp-auth-primary:hover,
.dark #cp-auth .cp-auth-primary:hover {
  filter: brightness(0.94);
}
html.dark #cp-auth .cp-auth-primary:active,
.dark #cp-auth .cp-auth-primary:active {
  filter: brightness(0.88);
}
html.dark #cp-auth .cp-auth-tabs button,
html.dark #cp-auth .cp-auth-links button,
html.dark #cp-auth .cp-auth-text,
html.dark #cp-auth .cp-auth-eye,
.dark #cp-auth .cp-auth-tabs button,
.dark #cp-auth .cp-auth-links button,
.dark #cp-auth .cp-auth-text,
.dark #cp-auth .cp-auth-eye {
  color: #a3a3a3;
}
html.dark #cp-auth .cp-auth-tabs button:focus-visible,
.dark #cp-auth .cp-auth-tabs button:focus-visible {
  color: #fff;
  box-shadow: none !important;
}
html.dark #cp-auth .cp-auth-tabs button.is-active,
.dark #cp-auth .cp-auth-tabs button.is-active {
  color: #fff;
  border-bottom-color: #fff !important;
}
html.dark #cp-auth .cp-auth-tabs button:hover,
html.dark #cp-auth .cp-auth-links button:hover,
html.dark #cp-auth .cp-auth-text:hover,
html.dark #cp-auth .cp-auth-code button:hover,
.dark #cp-auth .cp-auth-tabs button:hover,
.dark #cp-auth .cp-auth-links button:hover,
.dark #cp-auth .cp-auth-text:hover,
.dark #cp-auth .cp-auth-code button:hover {
  color: #fff;
}
html.dark #cp-policy-page,
.dark #cp-policy-page {
  background: #000;
  color: #fafafa;
}
html.dark #cp-policy-page .cp-policy-page__back,
.dark #cp-policy-page .cp-policy-page__back {
  color: #a3a3a3;
}
html.dark #cp-policy-page .cp-policy-page__back:hover,
.dark #cp-policy-page .cp-policy-page__back:hover {
  color: #fff;
}
html.dark #cp-policy-page .cp-policy-page__card h1,
html.dark #cp-policy-page .cp-policy-page__card h2,
.dark #cp-policy-page .cp-policy-page__card h1,
.dark #cp-policy-page .cp-policy-page__card h2 {
  color: #fafafa;
}
html.dark #cp-policy-page .cp-policy-page__card p,
.dark #cp-policy-page .cp-policy-page__card p {
  color: #d4d4d4;
}
html.dark #cp-policy-page .cp-policy-page__card .cp-policy-page__meta,
html.dark #cp-policy-page footer,
.dark #cp-policy-page .cp-policy-page__card .cp-policy-page__meta,
.dark #cp-policy-page footer {
  color: #a3a3a3;
}
html.dark .cp-policy-page__logo,
.dark .cp-policy-page__logo {
  filter: invert(1);
}

/* Standalone policy pages — intentionally quiet and readable, not a modal. */
#cp-policy-page { position: fixed; inset: 0; z-index: 9999; overflow: auto; background: #fff; color: #22252a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.cp-policy-page__card { box-sizing: border-box; width: min(100% - 40px, 680px); margin: 58px auto 92px; }
.cp-policy-page__back { display: inline-block; margin-bottom: 40px; color: #656b74; font-size: 13px; text-decoration: none; }
.cp-policy-page__back:hover { color: #17191e; }
.cp-policy-page__logo { display: block; width: 146px; height: 34px; margin: 0 auto 42px; object-fit: contain; }
.cp-policy-page__card article { max-width: 620px; margin: 0 auto; }
.cp-policy-page__card h1 { margin: 0 0 8px; color: #17191e; font-size: 27px; font-weight: 600; letter-spacing: -.03em; }
.cp-policy-page__card h2 { margin: 28px 0 8px; color: #24272c; font-size: 16px; font-weight: 600; }
.cp-policy-page__card p { margin: 0; color: #626873; font-size: 14px; line-height: 1.9; }
.cp-policy-page__card .cp-policy-page__meta { margin-bottom: 26px; color: #9aa0a9; font-size: 12px; }
#cp-policy-page footer { padding: 24px; color: #a2a8b3; text-align: center; font-size: 12px; }
@media (max-width: 640px) { .cp-policy-page__card { width: min(100% - 36px, 680px); margin-top: 30px; }.cp-policy-page__back { margin-bottom: 28px; }.cp-policy-page__logo { margin-bottom: 30px; }.cp-policy-page__card h1 { font-size: 23px; }.cp-policy-page__card p { font-size: 13px; } }

/* Kill OWUI ImagePreview (black bars, X top-left, single download). Use .cp-lightbox. */
html body > .modal.fixed.top-0.bg-black.text-white.min-h-screen {
  display: none !important;
  pointer-events: none !important;
}
.cp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cp-lightbox__toolbar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cp-lightbox__dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.cp-lightbox__dl:hover:not(:disabled) {
  background: rgb(255 255 255 / 22%);
}

.cp-lightbox__dl:disabled {
  opacity: 0.55;
  cursor: wait;
}

.cp-lightbox__dl svg {
  width: 14px;
  height: 14px;
}

.cp-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cp-lightbox__close:hover {
  background: rgb(255 255 255 / 22%);
}

.cp-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(96vw, 1600px);
  max-height: 90vh;
  min-width: min(72vw, 280px);
  min-height: min(40vh, 200px);
}

.cp-lightbox__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  pointer-events: none;
}

.cp-lightbox__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 999px;
  animation: cp-img-spin 0.7s linear infinite;
}

.cp-lightbox__frame {
  max-width: min(96vw, 1600px);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cp-lightbox__frame.is-ready {
  opacity: 1;
}

.cp-lightbox__img {
  display: block;
  max-width: min(96vw, 1600px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* File cards — match reference: bold name, regular meta, plain download icon */
.cp-file-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 10px;
  max-width: min(100%, 28rem);
}

.cp-file-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px;
  min-height: 64px;
  padding: 10px 14px 10px 14px;
  border: 1px solid #e8e8ea !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: inherit !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background var(--cp-motion-fast) var(--cp-ease), border-color var(--cp-motion-fast) var(--cp-ease);
}

.cp-file-card:hover {
  background: #f3f4f6 !important;
  border-color: #e8e8ea !important;
}

.dark .cp-file-card {
  background: rgb(24 24 27 / 92%) !important;
  border-color: rgb(63 63 70 / 80%) !important;
  color: #f4f4f5 !important;
}

.dark .cp-file-card:hover {
  background: rgb(39 39 42 / 92%) !important;
}

.cp-file-card__open {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

.cp-file-card__icon {
  display: inline-flex !important;
  flex-shrink: 0;
  width: 36px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.cp-file-card__icon svg {
  width: 36px;
  height: 40px;
  display: block;
}

.cp-file-card__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.cp-file-card__name,
.cp-file-card__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-file-card__name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: #111111 !important;
}

.dark .cp-file-card__name {
  color: #f4f4f5 !important;
}

.cp-file-card__meta {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.25;
  color: #8a8a8a !important;
}

.dark .cp-file-card__meta {
  color: #a1a1aa !important;
}

.cp-file-card__meta-hover {
  display: none;
}

.cp-file-card:hover .cp-file-card__meta-idle {
  display: none;
}

.cp-file-card:hover .cp-file-card__meta-hover {
  display: inline;
}

.cp-file-card__dl {
  display: inline-flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5f5f5f !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cp-motion-fast) var(--cp-ease), color var(--cp-motion-fast) var(--cp-ease);
}

.cp-file-card:hover .cp-file-card__dl {
  opacity: 1;
  pointer-events: auto;
}

.cp-file-card__dl:hover {
  background: transparent !important;
  color: #111 !important;
}

.dark .cp-file-card__dl {
  color: #a1a1aa !important;
}

.dark .cp-file-card__dl:hover {
  color: #f4f4f5 !important;
}

@media (hover: none) {
  .cp-file-card__dl,
  .cp-gen-image__tools {
    opacity: 1;
    pointer-events: auto;
  }
  .cp-file-card__meta-idle {
    display: none;
  }
  .cp-file-card__meta-hover {
    display: inline;
  }
}

.cp-inline-error .cp-error-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.cp-inline-error .cp-error-retry:hover {
  background: rgba(0, 0, 0, 0.05);
}

.cp-inline-error .cp-error-retry:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dark .cp-inline-error .cp-error-retry {
  border-color: rgba(255, 255, 255, 0.12);
}

.dark .cp-inline-error .cp-error-retry:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Thinking / pipeline status — high-level only (no private CoT). */
.cp-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 8px;
  padding: 0;
  user-select: none;
  max-width: 100%;
}

/* Hide OWUI 0.11.3 stream caret (empty span.w-[0.125rem].h-3.5) while dots show. */
.cp-has-thinking [data-cp-caret-hidden],
[id^="message-"]:has(#cp-thinking) .cursor,
[id^="message-"]:has(#cp-thinking) .blinking-cursor,
[id^="message-"].cp-generating #response-content-container span.inline-block.animate-pulse[class*="w-[0.125rem]"],
[id^="message-"]:has(#cp-thinking) #response-content-container span.inline-block.animate-pulse[class*="w-[0.125rem]"],
.cp-has-thinking span.inline-block.animate-pulse[class*="w-[0.125rem]"] {
  display: none !important;
}

.cp-thinking__wait {
  margin-left: 8px;
  font-size: var(--cp-type-caption, 13px);
  font-weight: 400;
  color: var(--cp-secondary, #5d5d5d);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(70vw, 28rem);
}

.dark .cp-thinking__wait {
  color: var(--cp-secondary, #a1a1aa);
}

.cp-connect-wait {
  display: none !important;
}

.cp-connect-wait[hidden] {
  display: none !important;
}

.dark .cp-connect-wait {
  display: none !important;
}

/* Find-in-conversation (Batch 3) */
.cp-find-bar {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #0d0d0d;
  box-shadow: none;
}

.cp-find-bar[hidden] {
  display: none !important;
}

.dark .cp-find-bar {
  background: #000;
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.12);
}

.cp-find-bar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cp-find-bar__input {
  width: min(42vw, 220px);
  height: 28px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: inherit;
}

.cp-find-bar__count {
  min-width: 3.5em;
  font-size: 12px;
  color: #5d5d5d;
  text-align: right;
  white-space: nowrap;
}

.dark .cp-find-bar__count {
  color: #a1a1aa;
}

.cp-find-bar__btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.cp-find-bar__btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark .cp-find-bar__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cp-find-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.cp-find-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark .cp-find-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

[id^="message-"].cp-find-match {
  outline: 1px solid rgba(0, 0, 0, 0.12);
  outline-offset: 4px;
  border-radius: 8px;
}

.dark [id^="message-"].cp-find-match {
  outline-color: rgba(255, 255, 255, 0.18);
}

[id^="message-"].cp-find-current {
  outline: 1.5px solid currentColor;
  outline-offset: 4px;
}

.cp-version-pager {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  opacity: 1 !important;
  visibility: visible !important;
}

.cp-version-label {
  font-size: 12px;
  color: #5d5d5d;
  margin-right: 2px;
  user-select: none;
}

.dark .cp-version-label {
  color: #a1a1aa;
}

.cp-thinking__dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cp-thinking__dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3f3f46;
  animation: cp-think 1.05s ease-in-out infinite;
}

.cp-thinking__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.cp-thinking__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes cp-think {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0) scale(0.92);
  }
  40% {
    opacity: 1;
    transform: translateY(-3.5px) scale(1);
  }
}

@keyframes cp-avatar-breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

[id^="message-"].cp-generating img.assistant-message-profile-image {
  animation: cp-avatar-breathe 1.35s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .cp-thinking__dots span,
  [id^="message-"].cp-generating img.assistant-message-profile-image {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
}

.dark .cp-thinking {
  color: #a1a1aa;
}

.dark .cp-thinking__dots span {
  background: #e4e4e7;
}

/* Controls right drawer — preview tab replaces useless Overview.
   Light: gray-50 / white canvas. Dark: true black + hairline, no gray slabs. */
.cp-preview-pane,
.cp-terminal-pane {
  --cp-wb-canvas: var(--cp-bg);
  --cp-wb-stage: var(--cp-bg);
  --cp-wb-border: var(--cp-hairline);
  --cp-wb-text: var(--cp-ink);
  --cp-wb-text-muted: var(--cp-secondary);
  --cp-wb-input-bg: var(--cp-bg);
  --cp-wb-btn-bg: var(--cp-hover);
  --cp-wb-btn-hover: var(--cp-hover-strong);
  --cp-wb-btn-text: var(--cp-ink);
  --cp-wb-term-bg: var(--cp-bg);
}

html.dark .cp-preview-pane,
html.dark .cp-terminal-pane,
.dark .cp-preview-pane,
.dark .cp-terminal-pane {
  --cp-wb-canvas: var(--cp-bg);
  --cp-wb-stage: var(--cp-bg);
  --cp-wb-border: var(--cp-hairline);
  --cp-wb-text: var(--cp-ink);
  --cp-wb-text-muted: var(--cp-secondary);
  --cp-wb-input-bg: transparent;
  --cp-wb-btn-bg: transparent;
  --cp-wb-btn-hover: var(--cp-hover);
  --cp-wb-btn-text: var(--cp-ink);
  --cp-wb-term-bg: var(--cp-bg);
}

.cp-preview-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 4px 0 8px;
  color: var(--cp-wb-text);
  background: transparent;
}

.cp-preview-pane[hidden] {
  display: none !important;
}

.cp-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cp-preview-url {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--cp-wb-border);
  border-radius: 8px;
  background: var(--cp-wb-input-bg);
  color: var(--cp-wb-text);
  font-size: 13px;
  font-weight: 400;
  outline: none;
}

.cp-preview-url::placeholder {
  color: var(--cp-wb-text-muted);
}

.cp-preview-url:focus {
  border-color: color-mix(in srgb, var(--cp-wb-text) 28%, var(--cp-wb-border));
}

/* Unified with fig.3 tab chips: theme-aware pills, not forced white */
.cp-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--cp-wb-btn-bg);
  color: var(--cp-wb-btn-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.cp-preview-btn:hover {
  background: var(--cp-wb-btn-hover);
  color: var(--cp-wb-text);
}

a.cp-preview-btn {
  color: var(--cp-wb-btn-text) !important;
}

.cp-preview-stage {
  position: relative;
  flex: 1;
  min-height: 240px;
  border: 1px solid var(--cp-wb-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cp-wb-stage);
}

.cp-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--cp-wb-stage);
}

.cp-preview-source {
  margin: 0;
  padding: 10px 12px;
  height: 100%;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cp-wb-text);
  background: var(--cp-wb-stage);
}

.cp-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--cp-wb-text-muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

/* When previewing: hide native settings / overview graph body */
.cp-controls-previewing .space-y-1,
body.cp-controls-previewing .svelte-flow,
body.cp-controls-previewing .overview {
  display: none !important;
}

/* Soften the endless advanced-params wall on settings tab */
.cp-hide-adv-noise .py-0\.5.flex.w-full.justify-between {
  /* no-op fallback; targeted via JS class on root if needed */
}

html.dark .cp-preview-btn,
html.dark a.cp-preview-btn,
.dark .cp-preview-btn,
.dark a.cp-preview-btn {
  color: var(--cp-wb-btn-text) !important;
}

/* Hide native Controls / Overview tabs */
.cp-native-tab-hidden {
  display: none !important;
}

.cp-terminal-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--cp-wb-text);
  background: transparent;
}

.cp-terminal-pane[hidden] {
  display: none !important;
}

.cp-term-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
  flex-shrink: 0;
}

.cp-term-title {
  flex: 1;
  min-width: 0;
  color: var(--cp-wb-text-muted);
  font-size: 13px;
  font-weight: 400;
}

.cp-term-body {
  flex: 1;
  min-height: 200px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--cp-wb-border);
  border-radius: 10px;
  background: var(--cp-wb-term-bg);
  color: var(--cp-wb-text);
}

.cp-term-line {
  line-height: 1.45;
  word-break: break-word;
}

.cp-term-comment,
.cp-term-muted {
  color: var(--cp-wb-text-muted);
}

.cp-term-prompt {
  color: #16a34a;
  font-weight: 500;
}

.cp-term-tool {
  color: #2563eb;
}

.cp-term-ok {
  color: #16a34a;
}

.cp-term-fail {
  color: #dc2626;
}

.cp-term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--cp-wb-border);
  border-radius: 8px;
  background: var(--cp-wb-input-bg);
}

.cp-term-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cp-wb-text);
  font: inherit;
  outline: none;
}

.cp-term-input::placeholder {
  color: var(--cp-wb-text-muted);
}

/* Hide native OWUI empty-state suggestions (replaced by daily AI news) */
/* Native empty-chat suggestion chips (Suggestions.svelte). Keep markup; hide only. */
html body .mx-auto.max-w-2xl.mt-2:has(button.waterfall),
html body button.waterfall {
  display: none !important;
}

.cp-hide-native-suggestions {
  display: none !important;
}

/* Empty chat already centers via .py-24 flex; do not extra-translate the column. */
body:has(.cp-daily-ai-news) .m-auto.w-full.max-w-\[58rem\].py-24,
body:has(.cp-daily-ai-news) .m-auto.w-full.py-24 {
  transform: none;
}

.cp-daily-ai-news-host {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* Wide editorial card, aligned with the empty-state composer. */
  max-width: min(82vw, 42rem);
  margin: 0.35rem auto 0.15rem;
  padding: 0;
  box-sizing: border-box;
}

.cp-daily-ai-news-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  color: #6b7280;
}

.dark .cp-daily-ai-news-label {
  color: #9ca3af;
}

/* Empty-chat hero: ChatPod wordmark (injected .cp-hero-mark). */
.cp-empty-greeting {
  text-transform: none !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Daily AI news — ported from Chatpod Agents home */
.daily-ai-news {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: auto;
  min-height: 8.25rem;
  padding: 1rem 1.1rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  border: var(--cp-elev);
  box-shadow: none;
  color: inherit;
  text-align: left;
  touch-action: pan-y;
  box-sizing: border-box;
  overflow: hidden;
}
.dark .daily-ai-news {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.daily-ai-news--pager {
  position: relative;
}
.daily-ai-news__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
}
.daily-ai-news__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #7c8189;
  line-height: 1.2;
  min-width: 0;
}
.dark .daily-ai-news__eyebrow {
  color: #a1a1aa;
}
.daily-ai-news__pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.daily-ai-news__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #9b9b9f;
  margin-right: 0;
}
.daily-ai-news__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: inherit;
  border-radius: 10px;
  outline-offset: 2px;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.daily-ai-news__content.is-out {
  opacity: 0;
  transform: translateY(4px);
}
.daily-ai-news__content.is-in {
  opacity: 1;
  transform: translateY(0);
}
.daily-ai-news__content:focus-visible {
  outline: 2px solid color-mix(in srgb, #0071e3 70%, transparent);
}
.daily-ai-news__title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.28;
  color: #111114;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dark .daily-ai-news__title {
  color: #f5f5f7;
}
.daily-ai-news__body {
  max-width: min(100%, 45rem);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #7f828a;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dark .daily-ai-news__body {
  color: #a1a1aa;
}
.daily-ai-news__cta {
  margin-top: 1px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1677ee;
  text-decoration: none;
}
.daily-ai-news__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-top: auto;
}
.daily-ai-news__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}
.daily-ai-news__dot {
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #1d1d1f 16%, transparent);
  cursor: pointer;
}
.daily-ai-news__dot.is-active {
  width: 12px;
  background: color-mix(in srgb, #1d1d1f 40%, transparent);
}
.dark .daily-ai-news__dot {
  background: color-mix(in srgb, #fff 20%, transparent);
}
.dark .daily-ai-news__dot.is-active {
  background: color-mix(in srgb, #fff 52%, transparent);
}
.daily-ai-news__region {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, #0d0d0d 4%, transparent);
}
.dark .daily-ai-news__region {
  background: color-mix(in srgb, #fff 8%, transparent);
}
.daily-ai-news__region-btn {
  border: 0;
  border-radius: 999px;
  min-width: 3.15rem;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #8f8f8f;
  background: transparent;
  cursor: pointer;
}
.daily-ai-news__region-btn:hover {
  color: #0d0d0d;
}
.dark .daily-ai-news__region-btn:hover {
  color: #f5f5f7;
}
.daily-ai-news__region-btn.is-active {
  color: #0d0d0d;
  background: #fff;
  box-shadow: none;
  border: var(--cp-elev);
}
.dark .daily-ai-news__region-btn.is-active {
  color: #0d0d0d;
  background: #f5f5f7;
}
.daily-ai-news__region-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, #0071e3 70%, transparent);
  outline-offset: 1px;
}
.daily-ai-news--skeleton {
  pointer-events: none;
  min-height: 7.5rem;
  gap: 6px;
}
.daily-ai-news--skeleton .daily-ai-news__eyebrow,
.daily-ai-news--skeleton .daily-ai-news__title-skel,
.daily-ai-news--skeleton .daily-ai-news__body-skel {
  display: block;
  border-radius: 6px;
  background: color-mix(in srgb, #1d1d1f 8%, transparent);
}
.dark .daily-ai-news--skeleton .daily-ai-news__eyebrow,
.dark .daily-ai-news--skeleton .daily-ai-news__title-skel,
.dark .daily-ai-news--skeleton .daily-ai-news__body-skel {
  background: color-mix(in srgb, #fff 12%, transparent);
}
.daily-ai-news--skeleton .daily-ai-news__eyebrow {
  width: 3.5rem;
  height: 0.7rem;
}
.daily-ai-news--skeleton .daily-ai-news__title-skel {
  width: 72%;
  height: 1.05rem;
}
.daily-ai-news--skeleton .daily-ai-news__body-skel {
  width: 92%;
  height: 2.2rem;
}
@media (max-width: 640px) {
  .cp-daily-ai-news-host {
    max-width: calc(100vw - 1.5rem);
    margin-top: 0.75rem;
  }
  body:has(.cp-daily-ai-news) .m-auto.w-full.max-w-\[58rem\].py-24,
  body:has(.cp-daily-ai-news) .m-auto.w-full.py-24 {
    transform: none;
  }
  .daily-ai-news {
    min-height: 7.5rem;
    padding: 0.8rem 0.9rem 0.75rem;
    border-radius: 16px;
  }
  .daily-ai-news__title {
    font-size: 0.95rem;
  }
  .daily-ai-news__eyebrow,
  .daily-ai-news__count { font-size: 0.7rem; }
  .daily-ai-news__body { font-size: 0.76rem; }
  .daily-ai-news__cta { font-size: 0.76rem; }
  .daily-ai-news__region-btn { min-width: 3rem; padding: 4px 7px; font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .daily-ai-news__content {
    transition: none;
  }
  .daily-ai-news__content.is-out,
  .daily-ai-news__content.is-in {
    transform: none;
  }
}

/*
 * Composer model dropdown (Selector.svelte, portaled to body).
 * Hide search, TagSelector 「全部」/All connection filter, 设为默认,
 * row logos, tag/link/info, check, overflow menu. Keep name text clickable.
 * Do not target message copy/like/regenerate.
 */
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) #model-search-input,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) input[aria-label="Search In Models"],
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) input[aria-label="搜索模型"],
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) div.my-0\.5.flex:has(#model-search-input),
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) div.flex.shrink-0.items-center.justify-end.px-2.py-1.leading-none,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) button.text-\[0\.65rem\].underline-offset-2,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] img,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] img.size-4,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] .flex.items-center.min-w-fit:has(img),
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] .flex.shrink-0.items-center.gap-1\.5,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] > .ml-auto.flex.shrink-0,
html body .model-selector-child-menu {
  display: none !important;
}

/*
 * owui95: native Selector portal is w-[20rem] + gray-850. After chrome is
 * hidden, that leftover well sits on the composer as a second "Kimi K3" bar.
 * Hug the option; true black / white; 36px / 10px; hover veil only.
 * Compact trigger remains #model-selector-model-button.
 */
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) {
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(16rem, calc(100vw - 1rem)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 4px !important;
  border-radius: var(--cp-radius-nav) !important;
  border: var(--cp-elev) !important;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

html.dark body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) {
  border: var(--cp-elev-dark) !important;
  background: #000 !important;
  background-color: #000 !important;
}

html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="listbox"] {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"] {
  height: var(--cp-control-height) !important;
  min-height: var(--cp-control-height) !important;
  width: auto !important;
  min-width: 6.5rem !important;
  border-radius: var(--cp-radius-nav) !important;
  background: transparent !important;
  font-size: var(--cp-type-ui, 14px) !important;
  font-weight: 400 !important;
}

html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"]:hover,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"]:focus-visible,
html body div.z-40.rounded-xl.border.shadow-lg:has(#model-search-input) [role="option"][aria-selected="true"] {
  background: var(--cp-hover) !important;
}

/* Empty-chat model description (e.g. 「浮点跃迁 K3」). */
html body .mt-0\.5.text-base.font-normal.text-gray-500.line-clamp-3.markdown,
html body .mt-0\.5.text-sm.font-normal.text-gray-400,
html body [data-cp-qwen-hidden="1"] {
  display: none !important;
}

/*
 * Apple HIG chrome pass (owui29): 44pt hit, 20/17 icons, hairline, Regular.
 */
html body #message-input-container {
  overflow: visible !important;
  border: var(--cp-elev) !important;
  background: #fff !important;
  background-color: #fff !important;
}

html.dark body #message-input-container {
  border: var(--cp-elev-dark) !important;
  background: #000 !important;
  background-color: #000 !important;
}

html body #message-input-container .self-end {
  overflow: visible !important;
  margin-right: 0.25rem !important;
  padding-right: 0.25rem !important;
}

html body #message-input-container button[id^="model-selector-"][id$="-button"] {
  min-height: var(--cp-control-height) !important;
  height: var(--cp-control-height) !important;
  outline: none !important;
}

html body #message-input-container button[id^="model-selector-"][id$="-button"]:focus-visible {
  box-shadow: var(--cp-focus) !important;
  border-radius: var(--cp-radius-nav) !important;
}

html body #message-input-container button[id^="model-selector-"][id$="-button"] > div {
  min-height: var(--cp-control-height) !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: var(--cp-type-ui) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--cp-secondary) !important;
}

html.dark body #message-input-container button[id^="model-selector-"][id$="-button"] > div {
  color: #a1a1aa !important;
}

html body #message-input-container button[id^="model-selector-"][id$="-button"] svg {
  width: var(--cp-icon-dense) !important;
  height: var(--cp-icon-dense) !important;
  margin-left: 0.125rem !important;
  stroke-width: var(--cp-stroke) !important;
  opacity: 0.55;
}

html body .user-message .flex.justify-end > .rounded-3xl {
  width: fit-content !important;
  max-width: min(90%, 36rem) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: var(--cp-elev) !important;
  padding: 0.625rem 0.875rem !important;
  background: #f4f4f5 !important;
}

html.dark body .user-message .flex.justify-end > .rounded-3xl {
  border: var(--cp-elev-dark) !important;
  background: #18181b !important;
}

html body .user-message .flex.justify-end > .rounded-3xl .markdown-prose {
  width: auto !important;
  max-width: 100%;
}

/* Sidebar nav: 36px wells, 16px glyphs (composer matches --cp-control-height).
   Do not force the expanded wordmark host (`a.size-8.5` + .cp-sidebar-wordmark) to 36px. */
#sidebar button.size-8,
#sidebar a.size-8:not(:has(.cp-sidebar-wordmark)),
#sidebar .size-8\.5:not(:has(.cp-sidebar-wordmark)),
#sidebar .size-\[calc\(30px\*var\(--app-text-scale\,1\)\)\],
#sidebar .flex.size-\[1\.875rem\] {
  width: var(--cp-hit-nav) !important;
  height: var(--cp-hit-nav) !important;
  min-width: var(--cp-hit-nav) !important;
  min-height: var(--cp-hit-nav) !important;
}

#sidebar svg.size-4,
#sidebar svg.size-3\.5,
#sidebar .size-4 svg {
  width: var(--cp-icon) !important;
  height: var(--cp-icon) !important;
  stroke-width: var(--cp-stroke) !important;
}

#sidebar button:focus-visible,
#sidebar a:focus-visible {
  outline: none !important;
  box-shadow: var(--cp-focus) !important;
  border-radius: var(--cp-radius-nav);
}

@media (prefers-reduced-motion: reduce) {
  .cp-auth-tabs button,
  .cp-auth-code button,
  .cp-auth-links button,
  .cp-auth-text,
  .cp-auth-eye,
  .cp-auth-primary {
    transition: none !important;
  }
  .cp-auth-primary:active {
    transform: none !important;
  }
}

/*
 * Error.svelte — fat gray pill under the assistant name.
 * Native: #response-content-container > div.my-1.5.flex.w-full.items-start.gap-2.rounded-2xl.bg-black/[0.03]
 * Overlay marks it .cp-inline-error and restyles as a quiet caption.
 */
html body #response-content-container > div.flex.w-full.items-start.gap-2.rounded-2xl.bg-black\/\[0\.03\],
html body #response-content-container > .cp-inline-error,
html body [id^="message-"] .cp-inline-error {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0.125rem 0 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cp-tertiary) !important;
  font-size: var(--cp-type-caption) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  pointer-events: none;
}

html.dark body #response-content-container > div.flex.w-full.items-start.gap-2.rounded-2xl.bg-black\/\[0\.03\],
html.dark body #response-content-container > .cp-inline-error,
html.dark body [id^="message-"] .cp-inline-error {
  background: transparent !important;
  color: #a1a1aa !important;
}

html body #response-content-container > div.flex.w-full.items-start.gap-2.rounded-2xl.bg-black\/\[0\.03\] > svg,
html body .cp-inline-error > svg {
  display: none !important;
}

html body #response-content-container > div.flex.w-full.items-start.gap-2.rounded-2xl.bg-black\/\[0\.03\] > div,
html body .cp-inline-error > div {
  display: inline !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Call overlay: 3001 CuriousAiOrb only. Keep hits on mic/cam/close. */
html body .cp-call-persona-host {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body .cp-call-persona-host > button {
  position: relative !important;
  z-index: 2;
  pointer-events: auto !important;
  max-width: 11rem !important;
  max-height: 11rem !important;
}

html body .cp-call-persona-host > button > div.rounded-full,
html body .cp-call-persona-host > button > svg {
  opacity: 0 !important;
  pointer-events: none !important;
}

html body div.max-w-lg.w-full.h-full.flex.flex-col.justify-between > div.flex.items-center.justify-center.gap-4,
html body div.max-w-lg.w-full.h-full.flex.flex-col.justify-between > button {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

#cp-call-persona.curious-ai-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none !important;
  cursor: default;
  user-select: none;
}

#cp-call-persona .curious-ai-orb__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
}

#cp-call-persona .curious-ai-orb__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#cp-call-persona .curious-ai-orb__eyes {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 11%;
  height: 15%;
  margin-left: -5.5%;
  margin-top: -7.5%;
  pointer-events: none;
}

#cp-call-persona .curious-ai-orb__eye {
  width: 32%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  transform-origin: center;
}

#cp-call-persona .curious-ai-orb__eye > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: inherit;
  animation: cp-orb-blink 4.2s ease-in-out infinite;
}

@keyframes cp-orb-blink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }
  92% {
    transform: scaleY(0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cp-call-persona .curious-ai-orb__eye > span {
    animation: none !important;
  }
}

/* Workspace back: 36px icon only. Label is tooltip — never wrap 工/作/台 in the header.
   Edge inset comes from --cp-chrome-edge-inset on the sticky row (symmetric with Controls).
   Host height locked so mobile --cp-hit-touch cannot leave #cp-wb-mode taller than peers. */
html body .cp-workspace-back {
  align-self: center;
  margin: 0;
  box-sizing: border-box;
  width: var(--cp-control-height, 36px);
  min-width: var(--cp-control-height, 36px);
  max-width: var(--cp-control-height, 36px);
  height: var(--cp-control-height, 36px);
  min-height: var(--cp-control-height, 36px);
  max-height: var(--cp-control-height, 36px);
  overflow: visible;
  flex-shrink: 0;
}
html body .cp-workspace-back__btn {
  overflow: visible;
}
html body .cp-workspace-back__label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 40;
  padding: 6px 10px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
html body .cp-workspace-back__btn:hover .cp-workspace-back__label,
html body .cp-workspace-back__btn:focus-visible .cp-workspace-back__label {
  opacity: 1;
}

/* Workspace picker — same full-page, centered column as #cp-auth. */
#cp-workspace-choice {
  position: fixed;
  inset: 0;
  z-index: 9999;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px 16px 48px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--cp-font);
}
#cp-workspace-choice[open] {
  display: grid !important;
  place-items: center;
}
#cp-workspace-choice::backdrop {
  background: var(--cp-bg);
}
html.dark #cp-workspace-choice,
.dark #cp-workspace-choice {
  background: var(--cp-bg);
  color: var(--cp-ink);
}
html.dark #cp-workspace-choice::backdrop,
.dark #cp-workspace-choice::backdrop {
  background: var(--cp-bg);
}
.cp-choice-card {
  width: min(100% - 8px, 336px);
  padding: 0 0 24px;
}
#cp-workspace-choice .cp-auth-logo {
  display: block;
  width: min(172px, 52vw);
  height: 39px;
  margin: 0 auto 72px;
  object-fit: contain;
}
#cp-workspace-choice h1 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#cp-workspace-choice .cp-choice-sub {
  margin: 0 0 28px;
  text-align: center;
  color: var(--cp-secondary);
  font-size: var(--cp-type-caption);
  font-weight: 400;
  line-height: 1.4;
}
html.dark #cp-workspace-choice .cp-choice-sub {
  color: var(--cp-secondary);
}
#cp-workspace-choice .cp-choices {
  display: grid;
  gap: 10px;
}
#cp-workspace-choice a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: var(--cp-hit);
  padding: 14px 20px;
  border: 1px solid var(--cp-hairline);
  border-radius: 22px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  outline: none;
  touch-action: manipulation;
}
#cp-workspace-choice a[aria-current="page"] {
  border: 1px solid var(--cp-hairline);
  background: var(--cp-hover);
  box-shadow: none;
}
#cp-workspace-choice a[aria-current="page"] strong {
  font-weight: 600;
}
#cp-workspace-choice a:not([aria-current="page"]) strong {
  font-weight: 500;
}
#cp-workspace-choice a:hover {
  background: var(--cp-hover);
}
#cp-workspace-choice a:active {
  background: var(--cp-hover-strong);
}
#cp-workspace-choice a:focus {
  outline: none;
  box-shadow: none;
}
#cp-workspace-choice a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
#cp-workspace-choice:focus,
#cp-workspace-choice:focus-visible {
  outline: none;
}
#cp-workspace-choice strong {
  font-size: var(--cp-type-ui);
  font-weight: 600;
  line-height: 1.3;
}
#cp-workspace-choice a span {
  font-size: var(--cp-type-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cp-secondary);
}
html.dark #cp-workspace-choice a,
html.dark #cp-workspace-choice a[aria-current="page"] {
  border: 1px solid var(--cp-hairline);
  box-shadow: none;
}
html.dark #cp-workspace-choice a span {
  color: var(--cp-secondary);
}

/* Last-word composer density: send/voice match 36px chrome (Tailwind padding can win earlier). */
html body #message-input-container button.bg-black.rounded-full {
  width: var(--cp-control-height) !important;
  height: var(--cp-control-height) !important;
  min-width: var(--cp-control-height) !important;
  min-height: var(--cp-control-height) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Settings is Constrained app chrome (max 80rem). Phone: don't force 80dvh empty pane. */
@media (max-width: 767px) {
  html body .modal:has(#settings-tabs-container) > div {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 2rem) !important;
  }
}