/* 白色主题 + 隐藏导航元素 + 白色对话气泡 */

/* ===== 1. 隐藏导航元素 ===== */

/* 隐藏顶部导航外壳 */
.topnav-shell {
  display: none !important;
}

/* 隐藏左侧：main/Kimi/Default/medium 那一整行 */
.chat-controls__session-row,
.chat-controls__agent,
.chat-controls__model,
.chat-controls__thinking-select,
.agent-chat__toolbar-left {
  display: none !important;
}

/* 隐藏右侧所有小按钮（图标按钮），但保留搜索和新建会话 */
.chat-controls .btn--sm,
.chat-controls .btn--icon,
.chat-controls button:not(.search-btn):not([class*="search"]):not([title="New session"]):not([aria-label="New session"]),
.agent-chat__toolbar-right .btn:not([class*="search"]):not(.search-btn):not([title="New session"]):not([aria-label="New session"]),
.agent-chat__toolbar-right button:not([class*="search"]):not(.search-btn):not([title="New session"]):not([aria-label="New session"]) {
  display: none !important;
}

/* 强制保留搜索输入框 */
.chat-controls .search-field,
.chat-controls .search-input,
.chat-controls input[type="search"],
.agent-chat__toolbar-right [class*="search"],
.agent-chat__toolbar-right .search {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 隐藏分隔线 */
.chat-controls__separator {
  display: none !important;
}

/* 隐藏移动端下拉 */
.chat-controls-mobile-toggle {
  display: none !important;
}

/* 隐藏面包屑导航（OpenClaw > main > 聊天）和汉堡菜单按钮 */
.topbar__breadcrumb,
.breadcrumb,
.breadcrumb-nav,
.topbar__nav-toggle,
.nav-toggle,
button[title="Toggle navigation"],
button[aria-label="Toggle navigation"],
.hamburger-menu,
.menu-toggle {
  display: none !important;
}

/* 如果面包屑在 header 区域，也把整个 header 隐藏 */
.chat-header,
.content-header,
.topbar,
.page-header {
  display: none !important;
}

/* ===== 2. 白色主题变量 ===== */

:root {
  --accent: #334155;
  --accent-hover: #1e293b;
  --accent-subtle: rgba(51, 65, 85, 0.15);
  --accent-glow: rgba(51, 65, 85, 0.3);
  --accent-2: #64748b;
  --accent-2-subtle: rgba(100, 116, 139, 0.15);
  --ring: #334155;
  
  --bg: #ffffff;
  --bg-muted: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-accent: #f1f5f9;
  --panel: #f8fafc;
  --panel-strong: #f1f5f9;
  --card: #f8fafc;
  --card-highlight: #e2e8f0;
  --secondary: #e2e8f0;
  
  --fg: #0f172a;
  --text: #1e293b;
  --text-strong: #0f172a;
  --muted: #64748b;
  --chat-text: #1e293b;
  
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --input: #f1f5f9;
  
  --ok: #22c55e;
  --ok-subtle: rgba(34, 197, 94, 0.15);
  --warn: #f59e0b;
  --warn-subtle: rgba(245, 158, 11, 0.15);
  --danger: #334155;
  --danger-subtle: rgba(51, 65, 85, 0.15);
  --info: #334155;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 2px rgba(51, 65, 85, 0.3);
}

/* 浅色模式 - 与默认一致 */
:root[data-theme-mode=light] {
  --bg: #ffffff;
  --bg-muted: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-accent: #f1f5f9;
  --panel: #f8fafc;
  --panel-strong: #f1f5f9;
  --card: #f8fafc;
  --card-highlight: #f1f5f9;
  --secondary: #e2e8f0;
  
  --fg: #0f172a;
  --text: #1e293b;
  --text-strong: #0f172a;
  --muted: #64748b;
  --chat-text: #1e293b;
  
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --input: #f1f5f9;
}

/* ===== 3. 白色对话气泡 ===== */

/* 用户消息气泡 - 白色 */
.chat-line.user .chat-bubble,
.chat-line[data-role="user"] .chat-bubble,
.message.user .message-bubble,
.message[data-role="user"] .message-bubble,
.chat-message.user .chat-message-bubble,
.chat-message[data-role="user"] .chat-message-bubble,
.user-message,
.message--user,
.bubble--user,
.chat-bubble.user,
[role="user"] .chat-bubble,
.chat-line--user .chat-bubble {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 用户消息内的文字 */
.chat-line.user .chat-bubble *,
.message.user .message-bubble *,
.user-message *,
.message--user * {
  color: #1e293b !important;
}

/* 用户消息链接 */
.chat-line.user .chat-bubble a,
.message.user .message-bubble a,
.user-message a {
  color: #334155 !important;
  text-decoration: underline !important;
}

/* AI 消息气泡 - 白色 */
.chat-line.assistant .chat-bubble,
.message.assistant .message-bubble,
.chat-message.assistant .chat-message-bubble,
.assistant-message,
.message--assistant {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

/* AI 消息背景透明 */
.chat-line.assistant,
.message.assistant,
.chat-message.assistant {
  background: transparent !important;
}

/* 头像背景 - 白色 */
.agent-avatar,
.avatar,
.user-avatar,
.chat-avatar,
.message-avatar,
.profile-avatar,
[ class*="avatar" ] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* 按钮主色 - 深灰色 */
.btn.primary {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

.btn.primary:hover {
  background: #1e293b !important;
}

/* 链接 */
a, a:link, a:visited {
  color: #334155 !important;
}

a:hover {
  color: #1e293b !important;
}

/* 输入框 */
input, textarea, select {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #334155 !important;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.15) !important;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===== 4. Tool Output 面板白色主题 ===== */

/* Tool output 折叠面板头部 */
.chat-bubble--tool-shell,
.tool-output-header,
.tool-output-toggle,
.ov-expandable-toggle,
.chat-tool-header {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* Tool output 图标（闪电） */
.chat-bubble--tool-shell svg,
.tool-output-header svg,
.tool-output-icon svg,
.nav-item__icon svg {
  stroke: #334155 !important;
  color: #334155 !important;
}

/* Tool output 内容区域 */
.tool-output-content,
.chat-tool-content,
.ov-event-log-list,
.ov-log-tail-content {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* Tool output 标签 */
.tool-output-label,
.tool-output-title,
.chat-bubble--tool-shell .label {
  color: #334155 !important;
  font-weight: 600;
}

/* Tool output 代码块 */
.tool-output pre,
.chat-tool-content pre,
.ov-log-tail-content pre {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

/* Tool output 徽章/计数 */
.ov-count-badge,
.tool-output-badge {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Tool output 卡片 */
.chat-tool-card,
.chat-tool-card__output {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ===== 5. 全局白色覆盖 ===== */

/* 所有可能带颜色的按钮和标签 */
.btn,
.pill,
.badge,
.tag,
.label,
.chip,
.indicator,
.dot {
  color: var(--text) !important;
}

/* 所有红色/橙色/黄色/绿色系元素强制改深灰色 */
[style*="color: red"],
[style*="color: #ef4444"],
[style*="color: #dc2626"],
[style*="color: #b91c1c"],
[style*="background: red"],
[style*="background: #ef4444"],
[style*="background-color: red"],
[style*="background-color: #ef4444"] {
  color: #334155 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
}

/* 所有边框颜色 */
[style*="border-color: red"],
[style*="border-color: #ef4444"] {
  border-color: #e2e8f0 !important;
}

/* SVG 图标颜色 */
svg[style*="stroke: red"],
svg[style*="fill: red"],
svg[stroke="red"],
svg[fill="red"] {
  stroke: #334155 !important;
  fill: #334155 !important;
}

/* 选中/高亮 */
::selection {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* 焦点环 */
:focus-visible {
  outline-color: #334155 !important;
  box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.3) !important;
}

/* 所有强调色文字 */
strong,
b,
.bold,
.highlight,
.accent {
  color: #334155 !important;
}

/* 所有激活/开启状态 */
.active,
.selected,
.checked,
.on,
.enabled,
[aria-pressed="true"],
[aria-selected="true"] {
  background: #334155 !important;
  background-color: #334155 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

/* 进度条 */
progress,
.progress-bar,
.progress {
  accent-color: #334155 !important;
  background: #f1f5f9 !important;
}

progress::-webkit-progress-value,
.progress-bar::-webkit-progress-value {
  background: #334155 !important;
  background-color: #334155 !important;
}

/* 滑块 */
input[type="range"] {
  accent-color: #334155 !important;
}

input[type="range"]::-webkit-slider-thumb {
  background: #334155 !important;
}

/* 复选框/单选框 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #334155 !important;
}

/* 下拉框选中项 */
select option:checked,
select option:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* 表格选中行 */
tr.selected,
tr:hover {
  background: #f1f5f9 !important;
}

/* 标签页/导航激活态 */
.tab.active,
.nav-item.active,
.nav-link.active {
  background: #334155 !important;
  color: #ffffff !important;
  border-bottom-color: #334155 !important;
}

/* 通知/提示 */
.toast,
.notification,
.alert {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

/* 计数器/角标 */
.counter,
.count,
.badge-count {
  background: #334155 !important;
  color: #ffffff !important;
}

/* 加载动画 */
.spinner,
.loader,
.loading {
  border-top-color: #334155 !important;
  color: #334155 !important;
}

/* 代码高亮关键字 */
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag {
  color: #334155 !important;
}

/* 全局覆盖：任何带颜色的元素 */
*:not(img):not(video):not(canvas) {
  --red: #334155;
  --error: #334155;
  --danger: #334155;
  --warning: #64748b;
  --success: #334155;
  --info: #334155;
  --primary: #334155;
  --secondary: #64748b;
  --highlight: #f1f5f9;
}

/* 确保所有文字在深色背景上可见 */
[background*="334155"],
[style*="background: #334155"],
[style*="background-color: #334155"] {
  color: #ffffff !important;
}

[background*="334155"] *,
[style*="background: #334155"] *,
[style*="background-color: #334155"] * {
  color: #ffffff !important;
}

/* 所有 chat-bubble fade-in 消息气泡背景白色 */
.chat-bubble.fade-in,
.chat-bubble.fade-in.user,
.chat-bubble.fade-in.assistant {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* 用户消息气泡内的文字保持深色 */
.chat-bubble.fade-in.user *,
.chat-bubble.fade-in.assistant * {
  color: #1e293b !important;
}

/* chat-tools-inline 背景白色 */
.chat-tools-inline,
.chat-tools-inline * {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* chat-tool-msg-summary 背景透明 + 无边框 */
.chat-tool-msg-summary,
.chat-tool-msg-summary .chat-tool-msg-summary__content,
.chat-tool-msg-summary .chat-tool-msg-summary__body,
.chat-tool-msg-summary .ov-expandable__content {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* chat-tool-msg-summary 内的文字 */
.chat-tool-msg-summary * {
  color: var(--text) !important;
  background: transparent !important;
}

/* 保留 chat-tool-msg-summary 的头部样式 */
.chat-tool-msg-summary .chat-tool-msg-summary__header,
.chat-tool-msg-summary .summary-header,
.chat-tool-msg-summary .ov-expandable__header {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%) !important;
  color: #e2e8f0 !important;
}

/* ===== 6. 隐藏 sidebar（完全禁止出现） ===== */
.sidebar,
.sidebar-panel,
.sidebar-container,
.sidebar-wrapper,
.sidebar-content,
.sidebar-markdown,
.sidebar-markdown-shell,
.sidebar-markdown-reader,
[class="sidebar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  z-index: -9999 !important;
  overflow: hidden !important;
}

/* ===== 7. chat-tool-msg-collapse--manual 背景改成白色 ===== */
.chat-tool-msg-collapse,
.chat-tool-msg-collapse--manual,
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__content,
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__body,
.chat-tool-msg-collapse--manual .ov-expandable__content,
.chat-tool-msg-collapse--manual .tool-msg-content,
.chat-tool-msg-collapse--manual .collapsible-content,
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__panel,
.chat-tool-msg-collapse--manual .ov-panel,
.chat-tool-msg-collapse--manual .expandable-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* collapse 面板内的所有文字变深色 */
.chat-tool-msg-collapse--manual * {
  color: #1e293b !important;
}

/* 但是保留 collapse 面板的头部样式（蓝色/深色） */
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__header,
.chat-tool-msg-collapse--manual .ov-expandable__header,
.chat-tool-msg-collapse--manual .collapsible-header,
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__toggle {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%) !important;
  color: #e2e8f0 !important;
}

/* collapse 头部内的图标用蓝色 */
.chat-tool-msg-collapse--manual .chat-tool-msg-collapse__header svg,
.chat-tool-msg-collapse--manual .ov-expandable__header svg,
.chat-tool-msg-collapse--manual .collapsible-header svg {
  stroke: #3b82f6 !important;
  fill: #3b82f6 !important;
}

/* ===== 8. Fix white-screen after exiting maximize ===== */
/* Disable backdrop-filter which causes white-screen glitches on resize */
.agent-chat__input,
.md-preview-dialog::backdrop,
.dreams-diary__preview-backdrop,
[backdrop-filter],
[style*="backdrop-filter"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Force stable compositing layer for shell to prevent layout collapse */
.shell,
.shell--chat,
openclaw-app {
  transform: translateZ(0);
  will-change: auto;
}

/* Ensure body background is always defined */
body {
  background: var(--bg, #ffffff) !important;
}