/* ====================================================================
   Companion Theme — inspired by Cloude companion UI template
   Clean, polished, app-like. No hand-drawn effects.
   ==================================================================== */

/* --- Root overrides --- */
html.companion { background: #F5F3EE !important; }
body.companion {
  background: #F5F3EE !important;
  --bg: #F5F3EE;
  --bg-side: #EDEAE4;
  --bg-pill: #E6E1D8;
  --text: #1A1815;
  --text-mute: #9A958B;
  --border: #EDE9E0;
  --accent: #1A1815;
  --radius: 20px;
}
html.companion.sidebar-open,
body.companion.sidebar-open { background: #EDEAE4 !important; }
body.companion::before { background: #F5F3EE !important; }
body.companion.sidebar-open::before { background: #EDEAE4 !important; }
html.companion.codex-chrome:not(.sidebar-open),
body.companion.codex-chrome:not(.sidebar-open) { background: #F5F3EE !important; }
body.companion.codex-chrome:not(.sidebar-open)::before { background: #F5F3EE !important; }

/* remove paper texture overlay */
body.companion::after { display: none !important; }

/* remove sketch SVG filter from ALL svgs */
body.companion svg { filter: none !important; }

/* remove all the wobbly double-border ::after pseudo-elements */
body.companion .ic-btn::after,
body.companion .cd-actions-pill::after,
body.companion .cl-search::after,
body.companion .cl-chip::after,
body.companion .cl-card::after,
body.companion .ch-input-bar::after,
body.companion .ch-archive-card::after,
body.companion .st-card::after,
body.companion .ch-code::after,
body.companion .ch-file-card.inline::after,
body.companion .ch-tool-group::after,
body.companion .ch-thinking-strip::after,
body.companion .ch-compact-card::after,
body.companion .ch-pg-stat::after { display: none !important; }

/* --- Sidebar --- */
body.companion .sidebar {
  background: #EDEAE4;
  border-right: 1px solid #E0DCD3;
}
body.companion .sb-brand {
  font-family: 'Newsreader', Georgia, 'Noto Serif SC', serif;
  font-weight: 500;
  font-size: 1.55rem;
  color: #1A1815;
  letter-spacing: -0.01em;
}
body.companion .sb-brand::after { display: none; }
body.companion .sb-toggle {
  border-radius: 50%;
  background: transparent;
}
body.companion .sb-toggle:hover { background: rgba(26,24,21,0.05); }

body.companion .sb-item {
  border-radius: 14px;
  font-weight: 450;
}
body.companion .sb-item:hover { background: rgba(26,24,21,0.04); }
body.companion .sb-item.active { background: rgba(26,24,21,0.07); }
body.companion .sb-item:active {
  background: rgba(26,24,21,0.06);
  box-shadow: none;
}

/* --- Icon buttons (clean circles) --- */
body.companion .ic-btn {
  background: #FFF;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(43,38,30,0.05), 0 2px 6px rgba(43,38,30,0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.companion .ic-btn:hover {
  background: #FAFAF8;
  box-shadow: 0 0 0 1px rgba(43,38,30,0.06), 0 2px 8px rgba(43,38,30,0.07);
}
body.companion .ic-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 1px rgba(43,38,30,0.08);
}

body.companion .ic-btn.primary {
  background: #1A1815;
  color: #F5F3EE;
  box-shadow: 0 2px 8px rgba(26,24,21,0.15);
}
body.companion .ic-btn.primary:hover { background: #2B2620; }

body.companion .cl-head .ic-btn.primary {
  background: #1A1815;
  color: #F5F3EE;
  box-shadow: 0 2px 8px rgba(26,24,21,0.12);
}
body.companion .cl-head .ic-btn.primary:hover { background: #2B2620; }

/* --- Headers --- */
body.companion .cl-head {
  background: rgba(245,243,238,0.92);
  border-bottom: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.companion .cl-title {
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
body.companion .cd-head {
  background: rgba(245,243,238,0.88);
  border-bottom: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.companion .cd-title {
  font-family: 'Newsreader', Georgia, 'Noto Serif SC', serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.companion .cd-sub { color: #9A958B; }

/* --- Search bars --- */
body.companion .cl-search {
  margin: 0 14px 10px;
  padding: 0 14px;
  min-height: 40px;
  gap: 9px;
  border: 1px solid #E7E3DA;
  border-radius: 20px;
  background: #FBFAF7;
  box-shadow: none;
}
body.companion .cl-search-input { padding: 9px 0; font-size: 0.88rem; }
body.companion .cl-sr-chip,
body.companion .cl-resource-row,
body.companion .cl-sr-item,
body.companion .ch-unified-input,
body.companion .ch-detail-search-row input,
body.companion .cl-archive-search {
  background: #FBFAF7;
  border: 1px solid #E7E3DA;
  border-radius: 16px;
  box-shadow: none;
}

/* --- Filter chips --- */
body.companion .cl-chip {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.03);
  font-size: 0.8rem;
}
body.companion .cl-chip.active {
  background: #ECEAE4;
  border-color: #DDD8CE;
}
body.companion .cl-chip:active {
  background: rgba(26,24,21,0.06);
  box-shadow: none;
}

/* --- Code list cards --- */
body.companion .cl-card {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.035), 0 10px 30px -10px rgba(43,38,30,0.07);
}
body.companion .cl-card:hover { background: #FDFCFA; }
body.companion .cl-card .av {
  background: #F2EFE8;
  border: 1px solid #E7E3DA;
  border-radius: 12px;
  color: #9A958B;
  box-shadow: none;
}
body.companion .cl-card .av.cc {
  background: #F2EFE8;
  border-color: #E7E3DA;
  color: #6B665E;
}
body.companion .cl-card .av.codex {
  background: #F2EFE8;
  border-color: #E7E3DA;
  color: #6B665E;
}
body.companion .cl-card .av.shell {
  background: #F2EFE8;
  border-color: #E7E3DA;
  color: #6B665E;
}
body.companion .cl-card .name { font-weight: 600; }
body.companion .cl-card .summary { color: #9A958B; }

/* --- Chat list rows --- */
body.companion .ch-row .ch-item {
  background: transparent;
  border-bottom: 1px solid rgba(237,233,224,0.8);
}
body.companion .ch-row .ch-item:hover { background: rgba(245,243,238,0.5); }
body.companion .ch-row .ch-item:active { background: rgba(26,24,21,0.03); box-shadow: none; }
body.companion .ch-avatar {
  background: #F2EFE8;
  border: 1px solid #E7E3DA;
  color: #9A958B;
  box-shadow: none;
}
body.companion .ch-avatar.cc {
  background: #F2EFE8;
  border-color: #E7E3DA;
  color: #6B665E;
}
body.companion .ch-name { font-weight: 500; letter-spacing: -0.01em; }
body.companion .ch-preview { color: #9A958B; }
body.companion .ch-time { color: #B8B3A8; }

/* --- Chat bubbles --- */
body.companion .ch-bubble.user {
  background: #ECEAE4;
  border: none;
  border-radius: 22px 22px 6px 22px;
  box-shadow: none;
  color: #1A1815;
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: -0.008em;
}
body.companion .ch-bubble.assistant {
  color: #1A1815;
  line-height: 1.7;
  letter-spacing: -0.008em;
}
body.companion .ch-msg-actions { color: #9A958B; }

/* --- Scroll fades on message area --- */
body.companion .ch-msgs-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: linear-gradient(#F5F3EE, rgba(245,243,238,0));
  z-index: 5;
  pointer-events: none;
}
body.companion .ch-msgs-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(rgba(245,243,238,0), #F5F3EE);
  z-index: 5;
  pointer-events: none;
}

/* --- Chat input bar (Cloude-style) --- */
body.companion .ch-input-bar,
body.companion #chatsView[data-sub="detail"] .ch-input-bar {
  margin: 6px 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 14px 16px 10px;
  background: #FBFAF7;
  border: 1px solid #E7E3DA;
  border-radius: 26px;
  box-shadow: 0 1px 3px rgba(43,38,30,0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.companion #chatsView[data-sub="detail"] .ch-input {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  padding: 4px 4px;
  color: #2B2620;
}
body.companion #chatsView[data-sub="detail"] .ch-input::placeholder {
  color: #B8B3A8;
}
body.companion #chatsView[data-sub="detail"] .ch-input-btn {
  background: #F2EFE8;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: #6B665E;
  width: 34px;
  height: 34px;
}
body.companion #chatsView[data-sub="detail"] .ch-input-btn:hover {
  background: #EAE6DD;
}
body.companion #chatsView[data-sub="detail"] .ch-input-btn svg {
  stroke-width: 1.8;
  width: 18px;
  height: 18px;
}

/* Layout: [pill-group] ...spacer... [send] */
body.companion #chatsView[data-sub="detail"] .ch-send-mode,
body.companion #chatsView[data-sub="detail"] .ch-send-mode.direct {
  display: none !important;
}

/* Input actions row */
body.companion #chatsView[data-sub="detail"] .ch-input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pill group: [+ Opus 4.6 (1M)] as one capsule */
body.companion #chatsView[data-sub="detail"] .ch-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #ECEAE4;
  border-radius: 9999px;
  padding: 4px 14px 4px 4px;
  flex-shrink: 0;
}

/* + button inside pill: transparent, no circle bg */
body.companion #chatsView[data-sub="detail"] .ch-pill-plus {
  background: transparent !important;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B665E;
  box-shadow: none;
  flex-shrink: 0;
}
body.companion #chatsView[data-sub="detail"] .ch-pill-plus:hover {
  background: #E3E0D8 !important;
}
body.companion #chatsView[data-sub="detail"] .ch-pill-plus svg {
  stroke-width: 2;
  width: 16px;
  height: 16px;
}

/* Model label inside pill: no bg, just text */
body.companion #chatsView[data-sub="detail"] .ch-model-pill {
  padding: 0;
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #6B665E;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
}
body.companion #chatsView[data-sub="detail"] .ch-model-pill:hover {
  background: transparent !important;
}
body.companion #chatsView[data-sub="detail"] .ch-model-pill svg {
  display: none;
}

/* Spacer fills middle */
body.companion #chatsView[data-sub="detail"] .ch-input-spacer {
  flex: 1 1 auto;
}

/* Send button — dark circle */
body.companion #chatsView[data-sub="detail"] .ch-send {
  background: #1A1815;
  color: #F5F3EE;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(26,24,21,0.12);
}
body.companion #chatsView[data-sub="detail"] .ch-send:hover {
  background: #2B2620;
}
body.companion #chatsView[data-sub="detail"] .ch-send:disabled {
  background: #DDD8CE;
  color: #B8B3A8;
  box-shadow: none;
  cursor: not-allowed;
}
body.companion #chatsView[data-sub="detail"] .ch-send svg {
  width: 17px; height: 17px;
}

/* --- Codex / actions pill --- */
body.companion .cd-actions-pill {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(237,233,224,0.8);
  border-radius: 26px;
  box-shadow: 0 1px 4px rgba(43,38,30,0.06);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.companion .cd-actions-pill .cd-pill-btn { color: #1A1815; }
body.companion .cd-actions-pill .cd-pill-btn:hover { background: rgba(26,24,21,0.05); }

body.companion #chatsView[data-sub="detail"] .cd-actions-pill {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(237,233,224,0.8);
  border-radius: 26px;
  box-shadow: 0 1px 4px rgba(43,38,30,0.06);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.companion #chatsView[data-sub="detail"] .cd-actions-pill .cd-pill-btn {
  color: #1A1815;
  background: transparent;
}
body.companion #chatsView[data-sub="detail"] .cd-actions-pill .cd-pill-btn:hover {
  background: rgba(26,24,21,0.05);
}
body.companion #chatsView[data-sub="detail"] .ch-new-plus { display: none; }
body.companion #chatsView[data-sub="detail"] .ch-new-compose { display: block; }

/* --- Scroll-to-bottom --- */
body.companion .ch-scroll-bottom {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(237,233,224,0.6);
  box-shadow: 0 4px 14px rgba(43,38,30,0.1);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* --- Usage pill --- */
body.companion .ch-usage-pill {
  background: rgba(242,239,232,0.85);
  border: 1px solid #E7E3DA;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(43,38,30,0.05);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* --- Session dividers --- */
body.companion .ch-session-divider-pill {
  background: rgba(242,239,232,0.7);
  border: 1px solid rgba(237,233,224,0.8);
  border-radius: 999px;
}

/* --- Code blocks --- */
body.companion .ch-code {
  background: #FEFDFB;
  border: 1px solid #EDE9E0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.03);
}
body.companion .ch-code-head {
  border-bottom-color: #EDE9E0;
  background: rgba(242,239,232,0.4);
}

/* --- File cards --- */
body.companion .ch-file-card.inline {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.035);
}

/* --- Tool/Thinking groups --- */
body.companion .ch-process-group {
  color: #6B665E;
}
body.companion .ch-pg-head {
  padding: 6px 0;
  border-bottom: 1px solid #EDE9E0;
}
body.companion .ch-pg-title {
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6B665E;
}
body.companion .ch-pg-word {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #9A958B;
}
body.companion .ch-pg-stat {
  padding: 4px 10px;
  background: #F2EFE8;
  border: 1px solid #E7E3DA;
  border-radius: 999px;
  box-shadow: none;
  color: #6B665E;
}
body.companion .ch-pg-body {
  margin-top: 8px;
  padding: 8px 0 0 16px;
  border-left: 1px solid #EDE9E0;
}

body.companion .ch-tool-group {
  background: rgba(242,239,232,0.35);
  border: 1px solid #EDE9E0;
  border-radius: 14px;
}
body.companion .ch-thinking-strip {
  background: rgba(242,239,232,0.35);
  border: 1px solid #EDE9E0;
  border-radius: 14px;
}

/* --- Dropdowns & menus --- */
body.companion .cd-menu {
  background: rgba(255,255,255,0.95);
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(43,38,30,0.12), 0 2px 6px rgba(43,38,30,0.04);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
body.companion .cd-menu-sep { background: #EDE9E0; }

body.companion .cd-model-picker {
  background: rgba(255,255,255,0.95);
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(43,38,30,0.12);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
body.companion .cd-model-sep { background: #EDE9E0; }

body.companion .as-group {
  background: rgba(255,255,255,0.95);
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(43,38,30,0.12);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
body.companion .as-sep { background: #EDE9E0; }

/* --- Settings --- */
body.companion .st-card {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.035);
}
body.companion .st-group-title {
  font-style: normal;
  letter-spacing: 0.04em;
}
body.companion .st-row-icon {
  background: #F2EFE8;
  color: #6B665E;
  border-radius: 11px;
}
body.companion .st-choice.active .st-choice-check {
  background: #1A1815;
  border-color: #1A1815;
}
body.companion .st-choice + .st-choice { border-top-color: #EDE9E0; }

/* --- Archive --- */
body.companion .ch-archive-card {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.035);
  backdrop-filter: none;
}
body.companion .ch-archive-icon {
  background: #F2EFE8;
  border: 1px solid #E7E3DA;
  color: #9A958B;
}

/* --- Codex bg --- */
body.companion #chatsView[data-agent-kind="codex"] .ch-detail,
body.companion #chatsView[data-agent-kind="codex"] .ch-msgs-wrap,
body.companion #chatsView[data-agent-kind="codex"] .ch-msgs { background: #F5F3EE; }

body.companion #chatsView[data-agent-kind="codex"][data-sub="detail"] .cd-head {
  background: rgba(245,243,238,0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.companion #chatsView[data-agent-kind="codex"][data-sub="detail"] .cd-head::after {
  background: linear-gradient(to bottom, rgba(245,243,238,0.5), rgba(245,243,238,0));
}

/* --- Compact cards --- */
body.companion .ch-compact-card {
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43,38,30,0.035), 0 10px 30px -10px rgba(43,38,30,0.07);
}

/* --- ch-disclaimer hide --- */
body.companion .ch-disclaimer { display: none !important; }

/* === DARK MODE overrides for companion === */
html[data-appearance="dark"] body.companion {
  --bg: #1A1815;
  --bg-side: #141210;
  --bg-pill: #252220;
  --text: #E8E4DC;
  --text-mute: #7A756C;
  --border: #2E2A26;
  --accent: #E8E4DC;
}
html[data-appearance="dark"] html.companion,
html[data-appearance="dark"] body.companion {
  background: #1A1815 !important;
}
html[data-appearance="dark"] body.companion::before {
  background: #1A1815 !important;
}
html[data-appearance="dark"] body.companion .sidebar {
  background: #141210;
  border-right-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .sb-brand { color: #E8E4DC; }
html[data-appearance="dark"] body.companion .ic-btn {
  background: #252220;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  color: #E8E4DC;
}
html[data-appearance="dark"] body.companion .ic-btn:hover {
  background: #2E2A26;
}
html[data-appearance="dark"] body.companion .ic-btn.primary {
  background: #E8E4DC;
  color: #1A1815;
}
html[data-appearance="dark"] body.companion .cl-head,
html[data-appearance="dark"] body.companion .cd-head {
  background: rgba(26,24,21,0.92);
}
html[data-appearance="dark"] body.companion .cl-card,
html[data-appearance="dark"] body.companion .st-card,
html[data-appearance="dark"] body.companion .ch-compact-card,
html[data-appearance="dark"] body.companion .ch-archive-card {
  background: #201D1A;
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .ch-bubble.user {
  background: #2E2A26;
  color: #E8E4DC;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-input-bar {
  background: #201D1A;
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-input {
  color: #E8E4DC;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-input::placeholder {
  color: #5A554C;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-pill-group {
  background: #2E2A26;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-pill-plus {
  color: #9A958B;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-input-btn {
  background: #2E2A26;
  color: #9A958B;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-send {
  background: #E8E4DC;
  color: #1A1815;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-send:disabled {
  background: #2E2A26;
  color: #5A554C;
}
html[data-appearance="dark"] body.companion #chatsView[data-sub="detail"] .ch-model-pill {
  background: transparent !important;
  color: #9A958B;
}
html[data-appearance="dark"] body.companion .ch-msgs-wrap::before {
  background: linear-gradient(#1A1815, rgba(26,24,21,0));
}
html[data-appearance="dark"] body.companion .ch-msgs-wrap::after {
  background: linear-gradient(rgba(26,24,21,0), #1A1815);
}
html[data-appearance="dark"] body.companion .ch-code {
  background: #201D1A;
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .ch-tool-group,
html[data-appearance="dark"] body.companion .ch-thinking-strip {
  background: rgba(46,42,38,0.35);
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .cl-chip {
  background: #201D1A;
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .cl-chip.active {
  background: #2E2A26;
}
html[data-appearance="dark"] body.companion .ch-scroll-bottom {
  background: rgba(32,29,26,0.92);
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion .as-group,
html[data-appearance="dark"] body.companion .cd-menu,
html[data-appearance="dark"] body.companion .cd-model-picker {
  background: rgba(32,29,26,0.96);
  border-color: #2E2A26;
}
html[data-appearance="dark"] body.companion #chatsView[data-agent-kind="codex"] .ch-detail,
html[data-appearance="dark"] body.companion #chatsView[data-agent-kind="codex"] .ch-msgs-wrap,
html[data-appearance="dark"] body.companion #chatsView[data-agent-kind="codex"] .ch-msgs {
  background: #1A1815;
}



/* ============ Book view (replaces Code list) ============ */
body.companion .book-clawd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 8px;
}
body.companion .book-clawd img {
  width: 100px;
  height: 100px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 8px rgba(107,102,94,.12));
}
body.companion .book-clawd-mood {
  font-size: 12px;
  color: #9A958B;
  margin-top: 4px;
  min-height: 18px;
}

/* Bookshelf */
body.companion .book-shelf {
  padding: 0 16px 16px;
}
body.companion .book-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.companion .book-shelf-label {
  font-weight: 600;
  font-size: 15px;
  color: #3D3A36;
}
body.companion .book-upload-btn {
  font-size: 13px;
  color: #8B7E6E;
  cursor: pointer;
  padding: 4px 12px;
  background: #ECEAE4;
  border-radius: 14px;
  transition: background .15s;
}
body.companion .book-upload-btn:hover {
  background: #E2DFD8;
}
body.companion .book-shelf-drop {
  border: 2px dashed #DDD8CE;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
  color: #8B7E6E;
  font-size: 13px;
  transition: background .15s, border-color .15s;
}
body.companion .book-shelf-drop:hover {
  background: #F9F7F2;
}
body.companion .book-shelf-drop.dragover {
  background: #F0EDE6;
  border-color: #8B7E6E;
}
body.companion .book-shelf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shelf row */
body.companion .bk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF;
  border: 1px solid #EDE9E0;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.companion .bk-row:hover { background: #FDFCFA; }
body.companion .bk-row.active {
  border-color: #C4A98A;
  background: #FAF6F0;
}
body.companion .bk-row .bk-cover {
  width: 42px;
  height: 54px;
  background: linear-gradient(135deg, #C4A98A, #8B7E6E);
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  line-height: 1.2;
  flex: 0 0 auto;
}
body.companion .bk-row .bk-meta {
  flex: 1;
  min-width: 0;
}
body.companion .bk-row .bk-title {
  font-weight: 600;
  color: #3D3A36;
  font-size: 14px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.companion .bk-row .bk-sub {
  font-size: 12px;
  color: #9A958B;
}
body.companion .bk-row .bk-del {
  background: none;
  border: 0;
  color: #ccc;
  cursor: pointer;
  padding: 6px;
  font-size: 16px;
}
body.companion .bk-row .bk-del:hover { color: #C4A98A; }

/* TOC */
body.companion .book-toc {
  padding: 0 16px;
}
body.companion .bk-toc-info {
  margin-bottom: 14px;
  color: #9A958B;
  font-size: 13px;
}
body.companion .bk-toc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid #EDE9E0;
  cursor: pointer;
  font-size: 14px;
  color: #3D3A36;
}
body.companion .bk-toc-row.read { color: #9A958B; }
body.companion .bk-toc-row.current {
  background: #FAF6F0;
  color: #8B7E6E;
  font-weight: 600;
  border-radius: 6px;
  padding-left: 12px;
}
body.companion .bk-toc-row .ix {
  min-width: 32px;
  color: #bbb;
  font-size: 12px;
}

/* Chapter reader */
body.companion .book-chapter {
  padding: 0 16px 100px;
}
body.companion .bk-ch-title {
  font-size: 20px;
  font-weight: 600;
  color: #3D3A36;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EDE9E0;
}
body.companion .bk-para {
  position: relative;
  font-size: 17px;
  line-height: 1.9;
  color: #4A4640;
  margin-bottom: 14px;
  padding: 6px 8px;
  border-radius: 6px;
}
body.companion .bk-sent {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background .1s;
}
body.companion .bk-sent:hover { background: #F5F0E8; }
body.companion .bk-sent.selected {
  background: #EDE5D8;
  outline: 1px solid #C4A98A;
  color: #3D3A36;
}
body.companion .bk-sent.has-dm {
  background: linear-gradient(transparent 60%, #F5EDD8 60%);
}
body.companion .bk-para .bk-dm-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #DDD8CE;
}
body.companion .bk-dm {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12.5px;
  margin: 5px 0;
  color: #6B665E;
  line-height: 1.5;
}
body.companion .bk-dm .bk-dm-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #ECEAE4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #6B665E;
}
body.companion .bk-dm .bk-dm-av.bao {
  background: #C4A98A;
  color: #fff;
}
body.companion .bk-dm .bk-dm-av.me {
  background: #D4BFA8;
  color: #fff;
}
body.companion .bk-dm .bk-dm-bub {
  background: #FAF6F0;
  border-radius: 10px;
  padding: 5px 10px;
  max-width: calc(100% - 30px);
  word-break: break-word;
}
body.companion .bk-dm.bao .bk-dm-bub {
  background: #F5EDD8;
}
body.companion .bk-dm .bk-dm-del {
  opacity: 0;
  background: none;
  border: 0;
  color: #ccc;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  flex: 0 0 auto;
  align-self: center;
}
body.companion .bk-dm:hover .bk-dm-del { opacity: 1; }
body.companion .bk-dm .bk-dm-del:hover { color: #C4A98A; }

/* Chapter nav */
body.companion .bk-ch-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid #EDE9E0;
}
body.companion .bk-ch-nav button {
  flex: 1;
  background: #FFF;
  border: 1px solid #EDE9E0;
  color: #6B665E;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
body.companion .bk-ch-nav button:active { background: #FDFCFA; }
body.companion .bk-ch-nav button:disabled { opacity: .4; cursor: not-allowed; }

/* Footer (danmaku input) */
body.companion .book-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  border-top: 1px solid #EDE9E0;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: 8px;
  align-items: center;
  z-index: 5;
}
body.companion .book-foot.on { display: flex; }
body.companion .book-foot input {
  flex: 1;
  border: 1px solid #DDD8CE;
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 15px;
  outline: none;
  background: #FFF;
  color: #3D3A36;
}
body.companion .book-foot input:focus { border-color: #C4A98A; }
body.companion .book-foot button {
  background: #C4A98A;
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
}
body.companion .book-foot .book-foot-hint {
  padding: 6px 12px;
  font-size: 11px;
  color: #9A958B;
  background: #F5F3EE;
  border-radius: 14px;
  cursor: pointer;
}

/* Empty tip */
body.companion .bk-empty {
  padding: 60px 20px;
  text-align: center;
  color: #9A958B;
  font-size: 13px;
}

/* Dark mode */
html[data-appearance="dark"] body.companion .book-shelf-label { color: #D4CFC6; }
html[data-appearance="dark"] body.companion .book-upload-btn { background: #2E2A26; color: #A09889; }
html[data-appearance="dark"] body.companion .book-shelf-drop { border-color: #3A3632; color: #A09889; }
html[data-appearance="dark"] body.companion .book-shelf-drop.dragover { background: #2E2A26; border-color: #6B665E; }
html[data-appearance="dark"] body.companion .bk-row { background: #1E1B18; border-color: #2E2A26; }
html[data-appearance="dark"] body.companion .bk-row:hover { background: #252220; }
html[data-appearance="dark"] body.companion .bk-row.active { border-color: #8B7E6E; background: #2A2520; }
html[data-appearance="dark"] body.companion .bk-row .bk-title { color: #D4CFC6; }
html[data-appearance="dark"] body.companion .bk-row .bk-sub { color: #7A7570; }
html[data-appearance="dark"] body.companion .bk-toc-row { color: #D4CFC6; border-color: #2E2A26; }
html[data-appearance="dark"] body.companion .bk-toc-row.current { background: #2A2520; color: #C4A98A; }
html[data-appearance="dark"] body.companion .bk-ch-title { color: #D4CFC6; border-color: #2E2A26; }
html[data-appearance="dark"] body.companion .bk-para { color: #C4BFB6; }
html[data-appearance="dark"] body.companion .bk-sent:hover { background: #2A2520; }
html[data-appearance="dark"] body.companion .bk-sent.selected { background: #3A3530; outline-color: #8B7E6E; }
html[data-appearance="dark"] body.companion .bk-dm .bk-dm-bub { background: #2A2520; }
html[data-appearance="dark"] body.companion .bk-ch-nav button { background: #1E1B18; border-color: #2E2A26; color: #A09889; }
html[data-appearance="dark"] body.companion .book-foot { background: #1E1B18; border-color: #2E2A26; }
html[data-appearance="dark"] body.companion .book-foot input { background: #2A2520; border-color: #3A3632; color: #D4CFC6; }

/* Book view scroll containers */
body.companion #bookToc {
  overflow-y: auto;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
body.companion #bookChapter {
  overflow-y: auto;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}
body.companion #codeView[data-sub="list"] .code-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 2026-07-03 书架九宫格 + 阅读页配色统一 + 页脚 clawd ── */
body.companion .book-shelf-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
body.companion .bk-card { position: relative; cursor: pointer; }
body.companion .bk-card .bk-cover { width: 100%; aspect-ratio: 3/4; background: linear-gradient(135deg, #C4A98A, #8B7E6E); border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 1.5; padding: 10px; box-sizing: border-box; word-break: break-all; overflow: hidden; box-shadow: 0 2px 6px rgba(107,102,94,.18); }
body.companion .bk-card.active .bk-cover { outline: 2px solid #C4A98A; outline-offset: 2px; }
body.companion .bk-card .bk-title { font-size: 12.5px; color: var(--text, #3D3A36); margin-top: 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.companion .bk-card .bk-sub { font-size: 11px; color: #9A958B; margin-top: 2px; }
body.companion .bk-card .bk-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(40,36,30,.42); color: #fff; font-size: 10px; line-height: 20px; text-align: center; cursor: pointer; padding: 0; }
body.companion .book-shelf-drop { display: none; }
body.companion .book-shelf.dragover { outline: 2px dashed #8B7E6E; outline-offset: -6px; border-radius: 14px; background: #F0EDE6; }
body.companion .book-foot { background: var(--bg); border-top-color: rgba(0,0,0,0.05); }
body.companion .book-foot-clawd { position: absolute; right: 14px; bottom: 100%; width: 64px; height: 64px; image-rendering: pixelated; cursor: pointer; margin-bottom: -6px; filter: drop-shadow(0 2px 6px rgba(107,102,94,.15)); z-index: 6; }
/* 2026-07-03: 她要极简书架 — 顶部吉祥物和标题字撤掉 (元素保留, JS 还引用) */
body.companion .book-clawd { display: none !important; }

body.companion .book-trans-btn {
  border: 1px solid #D8CFC0; background: #FBF7F0; color: #7A7468;
  border-radius: 14px; padding: 5px 12px; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
body.companion .book-trans-btn:active { background: #EFE7DA; }
html[data-appearance="dark"] body.companion .book-trans-btn {
  border-color: #3A352F; background: #26221E; color: #A8A296;
}

body.companion .bk-sent.bk-anno { border-bottom: 2px solid #E8A5B5; padding-bottom: 1px; }
html[data-appearance="dark"] body.companion .bk-sent.bk-anno { border-bottom-color: #7A4A56; }
body.companion .bk-dm.bk-anno-row .bk-dm-bub { background: #FBEFF2; border-color: #F0D4DC; }
html[data-appearance="dark"] body.companion .bk-dm.bk-anno-row .bk-dm-bub { background: #2E2226; border-color: #4A343C; }