:root {
  --cw-ink: #0a0a0a;
  --cw-bg: #f7f8fa;
  --cw-bg-2: #eef0f3;
  --cw-accent: #165DFF;
  --cw-accent-soft: #e8f0ff;
  --cw-muted: #6b7280;
  --color-bg-1: var(--cw-bg) !important;
  --color-bg-2: var(--cw-bg-2) !important;
  --color-bg-3: #e5e8ec !important;
  --color-bg-4: #d9dde3 !important;
  --color-text-1: var(--cw-ink) !important;
  --color-text-2: #2a2e35 !important;
  --color-text-3: var(--cw-muted) !important;
  --color-border: #d4d8de !important;
  --color-primary-light-1: var(--cw-accent-soft) !important;
  --color-primary-light-2: #c4d7ff !important;
  --color-primary-light-3: #94b6ff !important;
  --color-primary-light-4: #5c8aff !important;
  --color-primary-6: var(--cw-accent) !important;
  --color-primary-7: #0E42D2 !important;
}

html, body, button, input, textarea, select, .arco-typography {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

body, #root, main, .arco-layout, .arco-layout-content {
  background: var(--cw-bg) !important;
  color: var(--cw-ink) !important;
}

h1, h2, h3, h4, h5, h6, .arco-page-header-title {
  font-family: "Instrument Sans", Inter, sans-serif !important;
  letter-spacing: -0.035em;
}

code, pre, kbd, .monaco-editor, [class*="token"], [class*="status"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

.arco-btn-primary, .arco-switch-checked {
  background-color: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
}

.arco-btn-primary:hover { background-color: #0E42D2 !important; }

.arco-card, .arco-modal, .arco-drawer, .arco-dropdown, .arco-trigger-popup,
.arco-select-popup, .arco-menu {
  background-color: var(--cw-bg) !important;
  border-color: #d4d8de !important;
  box-shadow: none !important;
}

.arco-card, .arco-input-wrapper, .arco-textarea-wrapper, .arco-select-view {
  border-radius: 4px !important;
}

.arco-menu-item-selected, .arco-menu-item:hover, .arco-dropdown-option-active,
.arco-dropdown-option:hover {
  background-color: var(--cw-accent-soft) !important;
  color: var(--cw-accent) !important;
}

.arco-layout-sider {
  background-color: var(--cw-ink) !important;
  color: var(--cw-bg) !important;
}

/* Sidebar sits on dark ink in BOTH light and dark app modes, so its items must
   always use light text. Item labels set explicit colors via UnoCSS utilities
   (.text-t-primary -> var(--text-primary), etc.); in light mode those tokens
   resolve to near-black and the text vanishes on the dark ink. Redefine the
   text tokens within the sider scope so every child resolves to paper tones. */
.arco-layout-sider,
.arco-layout-sider * {
  --text-primary: var(--cw-bg) !important;
  --text-secondary: rgba(245, 247, 250, 0.72) !important;
  --text-disabled: rgba(245, 247, 250, 0.4) !important;
  --color-text-1: var(--cw-bg) !important;
  --color-text-2: rgba(245, 247, 250, 0.72) !important;
  --color-text-3: rgba(245, 247, 250, 0.55) !important;
  --bg-6: rgba(245, 247, 250, 0.55) !important; /* text-t-tertiary = section titles */
}

.arco-layout-sider .arco-menu {
  background-color: transparent !important;
  color: var(--cw-bg) !important;
}

.arco-layout-sider .arco-menu-item-selected {
  background-color: var(--cw-accent) !important;
  color: #fff !important;
}

.cw-brand-mark {
  background: #165DFF url("./pwa/icon-192.png") center / cover no-repeat !important;
  color: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.cw-brand-mark > * { opacity: 0 !important; }

.cw-brand-title { color: var(--cw-ink) !important; }

.cw-auth-card {
  position: relative !important;
  border: 1px solid #d4d8de !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(10, 10, 10, .09) !important;
}

.cw-auth-card .cw-auth-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

.cw-auth-card input { font-size: 15px !important; }
.cw-auth-card .arco-input-wrapper { border-color: #d4d8de !important; }
.cw-auth-card .arco-input-wrapper:hover,
.cw-auth-card .arco-input-wrapper-focus,
.cw-auth-card .arco-input-wrapper:focus-within,
.cw-auth-card .arco-input-wrapper.arco-input-focus {
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 2px var(--cw-accent-soft) !important;
}

.cw-auth-card h1,
.cw-auth-card h2,
.cw-auth-card h3,
.cw-auth-card .cw-brand-title,
.cw-auth-card .cw-brand-title * {
  color: var(--cw-ink) !important;
  -webkit-text-fill-color: var(--cw-ink) !important;
}

.cw-auth-card input:focus,
.cw-auth-card textarea:focus {
  outline: none !important;
  border-color: var(--cw-accent) !important;
  box-shadow: none !important;
}

.cw-auth-card button[type="submit"] {
  min-height: 42px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

.cw-agent-switcher {
  background: #111 !important;
  border: 1px solid #343434 !important;
  border-radius: 999px !important;
  padding: 5px !important;
  box-shadow: none !important;
}

.cw-agent-switcher button,
.cw-agent-switcher [role="tab"] {
  border-radius: 999px !important;
  color: #f7f8fa !important;
  background: transparent !important;
}

.cw-agent-switcher button *,
.cw-agent-switcher [role="tab"] * {
  color: #f7f8fa !important;
}

.cw-agent-switcher button:hover,
.cw-agent-switcher [role="tab"]:hover {
  background: #262626 !important;
}

.cw-agent-switcher [aria-selected="true"],
.cw-agent-switcher .active {
  background: var(--cw-accent) !important;
  color: #fff !important;
}

.cw-agent-switcher [aria-selected="true"] *,
.cw-agent-switcher .active * {
  color: #fff !important;
}

.cw-composer {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid #cfd4da !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 45px rgba(10,10,10,.06) !important;
  backdrop-filter: blur(12px);
}

.cw-theme-toggle {
  position: fixed;
  z-index: 9999;
  top: 54px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  background: #f7f8fa;
  color: #0a0a0a;
  font-size: 19px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}




.cw-theme-toggle:hover { background: #165DFF; color: #fff; transform: translateY(-1px); }

body[arco-theme="dark"] .cw-theme-toggle {
  background: #0a0a0a;
  color: #f7f8fa;
  border-color: #f7f8fa;
}

.cw-auth-card .cw-theme-toggle {
  position: absolute;
  top: 28px;
  right: auto;
  left: 28px;
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.cw-auth-card .cw-brand-title {
  color: var(--cw-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
}

a, .arco-link { color: var(--cw-accent); }
::selection { background: var(--cw-accent); color: #fff; }

body[arco-theme="dark"] {
  --color-bg-1: #0a0a0a !important;
  --color-bg-2: #141414 !important;
  --color-bg-3: #1a1a1a !important;
  --color-bg-4: #252525 !important;
  --color-text-1: #f7f8fa !important;
  --color-text-2: #eef0f3 !important;
  --color-text-3: #9aa1ab !important;
  --color-border: #363a41 !important;
}

body[arco-theme="dark"] body, body[arco-theme="dark"] #root,
body[arco-theme="dark"] main, body[arco-theme="dark"] .arco-layout,
body[arco-theme="dark"] .arco-layout-content, body[arco-theme="dark"] .arco-card,
body[arco-theme="dark"] .arco-modal, body[arco-theme="dark"] .arco-drawer,
body[arco-theme="dark"] .arco-dropdown, body[arco-theme="dark"] .arco-trigger-popup,
body[arco-theme="dark"] .arco-select-popup, body[arco-theme="dark"] .arco-menu {
  background-color: #0a0a0a !important;
  color: #f7f8fa !important;
  border-color: #363a41 !important;
}

body[arco-theme="dark"] .cw-auth-card h1,
body[arco-theme="dark"] .cw-auth-card h2,
body[arco-theme="dark"] .cw-auth-card h3,
body[arco-theme="dark"] .cw-auth-card .cw-brand-title,
body[arco-theme="dark"] .cw-auth-card .cw-brand-title * {
  color: #f7f8fa !important;
  -webkit-text-fill-color: #f7f8fa !important;
}

@media (max-width: 768px) {
  .arco-modal { border-radius: 0 !important; }
  .cw-theme-toggle { top: 64px; right: 12px; }
}


/* ============================================================
   Dark-mode polish  (added 2026-09-11)
   - hover safety (no light-pink on dark)
   - dark inputs/composer/cards
   - smooth scrolling + dark scrollbars
   ============================================================ */

/* smooth scrolling everywhere + no scroll-chaining jank */
html { scroll-behavior: smooth; }
.arco-layout-content, .arco-scrollbar,
[class*="scroll"], [class*="message-list"], [class*="messageList"] {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
* { scrollbar-width: thin; }

/* ---------- DARK THEME ---------- */
body[arco-theme="dark"] {
  --color-fill-1: #161616 !important;
  --color-fill-2: #1e1e1e !important;
  --color-fill-3: #262626 !important;
  --color-fill-4: #2f2f2f !important;
  --color-primary-light-1: #141f3a !important;
  --color-primary-light-2: #1a2a4d !important;
  --color-primary-light-3: #22386a !important;
  --color-primary-light-4: #2f4a8a !important;
  scrollbar-color: #3a3a3a #0a0a0a;
}

/* dark scrollbars (webkit) */
body[arco-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[arco-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a0a; }
body[arco-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333; border-radius: 8px; border: 2px solid #0a0a0a;
}
body[arco-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
body[arco-theme="dark"] ::-webkit-scrollbar-corner { background: #0a0a0a; }

/* hover safety: kill the light-pink hover on dark, use dark-red tint */
body[arco-theme="dark"] .arco-menu-item:hover,
body[arco-theme="dark"] .arco-menu-item-selected,
body[arco-theme="dark"] .arco-dropdown-option:hover,
body[arco-theme="dark"] .arco-dropdown-option-active,
body[arco-theme="dark"] .arco-select-option:hover,
body[arco-theme="dark"] .arco-select-option-active {
  background-color: #141f3a !important;
  color: #6ea8ff !important;
}

/* generic row / tab hover must not flash light */
body[arco-theme="dark"] .arco-list-item:hover,
body[arco-theme="dark"] .arco-tabs-tab:hover,
body[arco-theme="dark"] .arco-table-tr:hover .arco-table-td,
body[arco-theme="dark"] .arco-cascader-option:hover,
body[arco-theme="dark"] .arco-tree-node:hover {
  background-color: #1a1a1a !important;
}

/* secondary / text / icon buttons hover stay dark */
body[arco-theme="dark"] .arco-btn-secondary:hover,
body[arco-theme="dark"] .arco-btn-text:hover,
body[arco-theme="dark"] .arco-btn-default:hover {
  background-color: #1e1e1e !important;
  color: #f7f8fa !important;
  border-color: #4a4a4a !important;
}

/* inputs / textarea / select backgrounds (were paper/white in dark) */
body[arco-theme="dark"] .arco-input,
body[arco-theme="dark"] .arco-input-inner,
body[arco-theme="dark"] .arco-input-wrapper,
body[arco-theme="dark"] .arco-textarea,
body[arco-theme="dark"] .arco-textarea-wrapper,
body[arco-theme="dark"] .arco-select-view {
  background-color: #141414 !important;
  border-color: #363a41 !important;
  color: #f7f8fa !important;
}
body[arco-theme="dark"] .arco-input::placeholder,
body[arco-theme="dark"] textarea::placeholder,
body[arco-theme="dark"] .arco-input-inner::placeholder { color: #6b7076 !important; }
body[arco-theme="dark"] .arco-input-wrapper:hover,
body[arco-theme="dark"] .arco-textarea-wrapper:hover,
body[arco-theme="dark"] .arco-select-view:hover { border-color: #4a4a4a !important; }
body[arco-theme="dark"] .arco-input-wrapper:focus-within,
body[arco-theme="dark"] .arco-input-wrapper.arco-input-focus {
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 2px rgba(22,93,255,.35) !important;
}

/* composer was hardcoded translucent-white -> dark glass */
body[arco-theme="dark"] .cw-composer {
  background: rgba(20,20,20,.72) !important;
  border-color: #343434 !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.4) !important;
}

/* auth card in dark */
body[arco-theme="dark"] .cw-auth-card {
  background-color: #0f0f0f !important;
  border-color: #2a2a2a !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
}
body[arco-theme="dark"] .cw-auth-card .arco-input-wrapper { border-color: #343434 !important; }

/* links / brand text readable on dark */
body[arco-theme="dark"] a,
body[arco-theme="dark"] .arco-link { color: #6ea8ff !important; }
body[arco-theme="dark"] .cw-brand-title,
body[arco-theme="dark"] .cw-brand-title * { color: #f7f8fa !important; }

/* tooltips / popovers solid dark (avoid see-through light) */
body[arco-theme="dark"] .arco-tooltip-content,
body[arco-theme="dark"] .arco-popover-content,
body[arco-theme="dark"] .arco-notification,
body[arco-theme="dark"] .arco-message {
  background-color: #1a1a1a !important;
  color: #f7f8fa !important;
  border: 1px solid #343434 !important;
}

body[arco-theme="dark"]{background:#0a0a0a!important;color:#f7f8fa!important}