/* HeadOffice channel-test chat — mirrors agent-manager-portal ChannelsTestBlock */

:root {
  --surface-0: #0a0a0a;
  --surface-1: #1a1a1a;
  --surface-2: #2d2d2d;
  --surface-3: #353536;
  --text-primary: #eaecf4;
  --text-strong: #ffffff;
  --text-muted: #a0a2a6;
  --divider: rgba(255, 255, 255, 0.12);
  --input-border: #353536;
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --brand-green: #2ddd00;
  --agent-banner-color: #160d25;
  --agent-banner-fg: var(--text-primary);
  --agent-banner-fg-muted: var(--text-muted);

  /* Chainlit shadcn — align dark chat panel with portal ChannelsTestBlock */
  --background: 0 0% 10.2%;
  --foreground: 228 24% 96%;
  --card: 0 0% 10.2%;
  --card-foreground: 228 24% 96%;
  --muted: 0 0% 20.5%;
  --muted-foreground: 220 2% 65%;
  --accent: 0 0% 17.6%;
  --accent-foreground: 228 24% 96%;
  --border: 0 0% 100% / 0.12;
  --input: 0 0% 20.5%;
  --primary: 102 100% 43%;
  --primary-foreground: 0 0% 8%;
  --ring: 102 100% 43%;
  --radius: 1rem;
}

html.dark {
  --background: 0 0% 10.2%;
  --foreground: 228 24% 96%;
  --card: 0 0% 10.2%;
  --card-foreground: 228 24% 96%;
  --muted: 0 0% 20.5%;
  --muted-foreground: 220 2% 65%;
  --accent: 0 0% 17.6%;
  --accent-foreground: 228 24% 96%;
  --border: 0 0% 100% / 0.12;
  --input: 0 0% 20.5%;
  --primary: 102 100% 43%;
  --ring: 102 100% 43%;
}

/* Light — mirrors ChannelsTestBlock inline overrides + portal :root.light */
html.ho-chat-light {
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;
  --text-primary: #18181b;
  --text-strong: #000000;
  --text-muted: #52525b;
  --divider: #e4e4e7;
  --input-border: #cccccc;
  --overlay-soft: rgba(0, 0, 0, 0.04);
  --background: 0 0% 100%;
  --foreground: 240 6% 10%;
  --card: 0 0% 100%;
  --card-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --primary: 102 100% 43%;
  --ring: 102 100% 43%;
}

html.ho-chat-light #root,
html.ho-chat-light .group\/sidebar-wrapper,
html.ho-chat-light body,
html.ho-chat-light #ho-chat-shell,
html.ho-chat-light #ho-chat-shell > .flex.flex-col.h-full.w-full,
html.ho-chat-light #ho-chat-toolbar,
html.ho-chat-light #ho-chat-shell .flex.flex-col.flex-grow.overflow-y-auto,
html.ho-chat-light #ho-chat-shell .relative.flex.flex-col.flex-grow,
html.ho-chat-light #ho-chat-shell .flex.w-full.h-full,
html.ho-chat-light #ho-chat-shell #welcome-screen,
html.ho-chat-light #ho-chat-shell .flex.flex-col.mx-auto {
  background-color: var(--surface-1) !important;
  color: var(--text-primary);
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--surface-1) !important;
  color: var(--text-primary);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#root > div,
.group\/sidebar-wrapper {
  height: 100% !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Hide default Chainlit chrome */
#header,
#readme-button,
#theme-toggle,
#welcome-screen img[alt="logo"],
#welcome-screen .MuiAvatar-root,
footer,
a[href*="chainlit"] {
  display: none !important;
}

/* HeadOffice shell — full-width column with top header (PublicChatShell parity) */
#ho-chat-shell.ho-shell-active,
#ho-chat-shell.h-screen.w-screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: var(--surface-1) !important;
}

#ho-chat-sidebar {
  display: none !important;
}

#ho-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  background: var(--agent-banner-color, #160d25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
}

.ho-chat-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.ho-chat-header-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-3);
}

.ho-chat-header-avatar .ho-agent-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ho-chat-header-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--agent-banner-fg, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ho-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

#ho-chat-toolbar {
  display: none !important;
}

/* Native Chainlit column — do NOT reparent composer/scroller in JS */
#ho-chat-shell.ho-shell-active > .flex.flex-col.h-full.w-full {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
}

#ho-chat-shell.ho-shell-active .flex.flex-row.flex-grow {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#ho-chat-shell.ho-shell-active .flex.w-full.h-full.flex-col.relative {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Native Chainlit scroller — collapsed; messages render in #ho-chat-messages overlay */
#ho-chat-shell.ho-shell-active .flex.flex-col.flex-grow.overflow-y-auto,
#ho-chat-shell.ho-shell-active .relative.flex.flex-col.flex-grow.overflow-y-auto {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

#ho-chat-shell.ho-shell-active .flex.flex-col.mx-auto.w-full {
  min-height: 0 !important;
  flex-grow: 0 !important;
  padding: 0 !important;
}

#ho-chat-shell.ho-shell-active .flex.flex-col.mx-auto.w-full.p-4,
#ho-chat-shell.ho-shell-active .flex.flex-col.mx-auto.w-full.p-4.pt-0 {
  max-width: 77ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Composer — floating card like ChannelsTestBlock (px-4 pb-5 pt-2, max-w 77ch) */
#ho-chat-shell.ho-shell-active #message-composer {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 1.25rem !important;
  top: auto !important;
  width: min(77ch, calc(100% - 2rem)) !important;
  max-width: 77ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.5rem 1rem !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  z-index: 100 !important;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

#ho-chat-shell.ho-shell-active #message-composer:focus-within {
  border-color: color-mix(in srgb, var(--brand-green) 30%, var(--divider)) !important;
}

#ho-chat-shell.ho-shell-active #message-composer.ho-composer-busy {
  opacity: 0.6 !important;
  border-color: var(--divider) !important;
}

#ho-chat-shell.ho-shell-active #message-composer.ho-composer-busy:focus-within {
  border-color: var(--divider) !important;
}

#ho-chat-shell.ho-shell-active #message-composer.rounded-3xl,
#ho-chat-shell.ho-shell-active #message-composer.bg-accent {
  border-radius: 1rem !important;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
}

#ho-chat-shell.ho-shell-active #message-composer.min-h-24 {
  min-height: 0 !important;
}

#ho-chat-shell.ho-embedded {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 460px;
  border: 1px solid var(--divider);
  border-radius: 1rem;
  overflow: hidden;
}

/* Persisted history (client hydration from /api/runtime/chat-history) */
.ho-persisted-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: min(77ch, calc(100% - 2rem));
  margin: 0 auto 0.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

#ho-chat-shell.ho-shell-active .flex.flex-col.flex-grow.overflow-y-auto,
#ho-chat-shell.ho-shell-active .relative.flex.flex-col.flex-grow.overflow-y-auto {
  scroll-behavior: auto;
  overflow-anchor: none;
}

.ho-history-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ho-history-user {
  align-items: flex-end;
}

.ho-history-assistant {
  align-items: flex-start;
}

.ho-history-author {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.5px;
  margin-bottom: 0.375rem;
}

.ho-history-content {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.24px;
  white-space: pre-line;
  word-break: break-word;
}

.ho-history-user .ho-history-author {
  text-align: right;
}

.ho-history-user .ho-history-content {
  display: inline-block;
  width: auto;
  max-width: min(85%, 42rem);
  margin-left: auto;
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: 1rem;
  padding: 0.625rem 1rem;
}

.ho-history-assistant .ho-history-author {
  margin-bottom: 0.375rem;
}

.ho-history-assistant .ho-history-content {
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  border-radius: 0;
}

/* Hide Chainlit step timing / action chrome in customer shell (assistant actions only) */
#ho-chat-shell.ho-shell-active [data-step-type="assistant_message"] .text-xs.text-muted-foreground,
#ho-chat-shell.ho-shell-active [data-step-type="assistant_message"] .duration,
#ho-chat-shell.ho-shell-active [data-step-type="assistant_message"] button {
  display: none !important;
}

/* Native Chainlit user/assistant steps duplicate ho-persisted-history — hide them.
   Our hydrated history panel is the single source of truth for the customer shell. */
#ho-chat-shell.ho-shell-active [data-step-type="user_message"],
#ho-chat-shell.ho-shell-active [data-step-type="assistant_message"] {
  display: none !important;
}

.ho-history-pending {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* Typing indicator — animated dots, stable layout while awaiting the reply */
.ho-typing-row {
  align-items: flex-start;
  width: 100%;
}

.ho-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0;
  height: 18px;
}

.ho-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--text-muted);
  opacity: 0.4;
  animation: ho-typing-bounce 1.2s infinite ease-in-out;
}

.ho-typing-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.ho-typing-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes ho-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
}

/* Full-viewport HeadOffice chat frame */
#ho-chat-shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-1);
}

#ho-chat-shell.ho-embedded {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 460px;
  border: 1px solid var(--divider);
  border-radius: 1rem;
  overflow: hidden;
}

#ho-chat-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  min-height: 460px;
}

/* Legacy sidebar styles — kept for boot safety, hidden in layout */
#ho-chat-sidebar {
  display: none !important;
  width: 0;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--divider);
  background: var(--agent-banner-color, #160d25);
}

@media (min-width: 640px) {
  #ho-chat-sidebar {
    display: none !important;
  }
}

#ho-chat-sidebar .ho-office-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  object-position: center;
}

#ho-chat-sidebar .ho-agent-avatar-wrap {
  width: 80%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--surface-3);
}

html.ho-chat-booting .h-screen.w-screen:not(.ho-shell-active) {
  opacity: 1;
}

html.ho-chat-booting #ho-chat-sidebar {
  opacity: 0.6;
}

#ho-chat-sidebar .ho-agent-avatar-wrap img,
#ho-chat-sidebar .ho-agent-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ho-chat-sidebar .ho-agent-name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--agent-banner-fg, var(--text-primary));
}

#ho-chat-sidebar .ho-agent-role {
  margin: 0.25rem 0 0;
  font-size: 11px;
  text-align: center;
  color: var(--agent-banner-fg-muted, var(--text-muted));
}

/* Main chat column (legacy wrapper — avoid creating in JS) */
#ho-chat-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--surface-1);
}

#ho-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  background: var(--surface-1);
}

/* Uniform canvas inside message scroller */
#ho-chat-shell.ho-shell-active .relative.flex.flex-col.flex-grow,
#ho-chat-shell.ho-shell-active .flex.w-full.h-full,
#ho-chat-shell.ho-shell-active #welcome-screen,
#ho-chat-shell.ho-shell-active .flex.flex-col.mx-auto {
  background: var(--surface-1) !important;
}

#ho-chat-shell.ho-shell-active .relative.flex.flex-col.flex-grow,
#ho-chat-shell.ho-shell-active .flex.w-full.h-full {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 1 auto !important;
}

/* Hide welcome branding once history exists — keep #message-composer visible */
#ho-chat-shell.ho-shell-active .flex.flex-col.flex-grow.overflow-y-auto:has([data-step-type="user_message"]) #welcome-screen .logo,
#ho-chat-shell.ho-shell-active .flex.flex-col.flex-grow.overflow-y-auto:has([data-step-type="assistant_message"]) #welcome-screen .logo,
.ho-persisted-history:not(:empty) ~ #welcome-screen .logo,
.flex.flex-col.flex-grow.overflow-y-auto:has(.ho-persisted-history:not(:empty)) #welcome-screen .logo {
  display: none !important;
}

/* History overlay rendered at shell level (outside Chainlit's React tree) so a
   React reconciliation crash on message turns can never detach our messages.
   Offsets are published by applyLayoutMetrics() in JS. */
#ho-chat-shell.ho-shell-active #ho-chat-messages {
  position: fixed;
  top: var(--ho-msg-top, 52px);
  left: 0;
  right: 0;
  bottom: var(--ho-composer-h, 120px);
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: auto;
  flex: none;
  min-height: 0;
  padding: 1.5rem 0 0.5rem;
  background: var(--surface-1) !important;
  z-index: 5;
}

#ho-chat-shell.ho-shell-active #ho-chat-messages .ho-persisted-history {
  width: 100%;
  max-width: min(77ch, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 1rem 1rem;
  gap: 1rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  #ho-chat-shell.ho-shell-active #ho-chat-messages .ho-persisted-history {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Chainlit fades/hides #welcome-screen once messages exist — keep the host visible
   so opacity on the parent never makes #message-composer disappear on send. */
#ho-chat-shell.ho-shell-active #welcome-screen {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#ho-chat-shell.ho-shell-active #welcome-screen.opacity-0,
#ho-chat-shell.ho-shell-active #welcome-screen[class*="opacity-0"] {
  opacity: 1 !important;
}

#ho-chat-shell.ho-shell-active #welcome-screen .logo {
  display: none !important;
}

#ho-chat-shell.ho-shell-active #welcome-screen #message-composer {
  pointer-events: auto !important;
}

#ho-chat-shell.ho-shell-active .step {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ho-theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 34px;
  height: 18px;
  padding: 0 3px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ho-theme-toggle.is-dark {
  justify-content: flex-start;
  background: var(--surface-3);
}

.ho-theme-toggle.is-light {
  justify-content: flex-end;
  background: var(--brand-green);
}

.ho-theme-toggle .ho-theme-knob {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.25);
}

#ho-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  background: var(--surface-1) !important;
}

#ho-chat-messages .ho-messages-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 77ch;
  margin: 0 auto;
  min-height: min-content;
}

#ho-chat-messages .flex.flex-col.flex-grow.overflow-y-auto {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Uniform canvas — no Chainlit accent/card tint in the message column */
#ho-chat-messages .relative.flex.flex-col.flex-grow,
#ho-chat-messages .flex.w-full.h-full,
#ho-chat-messages #welcome-screen,
#ho-chat-messages .flex.flex-col.mx-auto {
  background: var(--surface-1) !important;
}

#ho-chat-messages .relative.flex.flex-col.flex-grow,
#ho-chat-messages .flex.w-full.h-full {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 1 auto !important;
}

/* Hide welcome branding in legacy ho-chat-messages wrapper */
#ho-chat-messages:has([data-step-type="user_message"]) #welcome-screen .logo,
#ho-chat-messages:has([data-step-type="assistant_message"]) #welcome-screen .logo,
.ho-persisted-history:not(:empty) ~ #welcome-screen .logo,
.flex.flex-col.flex-grow.overflow-y-auto:has(.ho-persisted-history:not(:empty)) #welcome-screen .logo {
  display: none !important;
}

#ho-chat-composer-slot {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 77ch;
  margin: 0 auto;
  padding: 0.5rem 1rem 1.25rem;
  background: var(--surface-1);
}

/* Chainlit message list inside our scroller */
#ho-chat-messages .flex.flex-col.mx-auto {
  max-width: 100% !important;
  padding: 0 !important;
}

#ho-chat-messages .step {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* User bubble — override Chainlit bg-accent / rounded-3xl */
[data-step-type="user_message"] .bg-accent {
  margin-left: auto !important;
  max-width: 85% !important;
  border-radius: 1rem !important;
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

[data-step-type="user_message"] .message-content,
[data-step-type="user_message"] .flex.flex-col.w-full.gap-1 {
  margin-left: auto;
  width: fit-content;
  max-width: 85%;
  background: transparent !important;
}

[data-step-type="user_message"] .message-content p,
[data-step-type="user_message"] .message-content .markdown-body,
[data-step-type="user_message"] .message-content,
[data-step-type="user_message"] .leading-7 {
  margin: 0;
  padding: 0.625rem 1rem;
  border-radius: 0;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: 0.75rem;
  letter-spacing: 0.24px;
  line-height: 1.5;
  white-space: pre-line;
}

[data-step-type="user_message"] button {
  display: none !important;
}

/* Assistant — no bubble, text on canvas (like portal preview) */
.ai-message > span:first-child,
.ai-message .rounded-full.h-5,
.ai-message [data-state="closed"] {
  display: none !important;
}

.ai-message {
  gap: 0 !important;
  background: transparent !important;
}

[data-step-type="assistant_message"]::before {
  content: attr(data-ho-author);
  display: block;
  margin-bottom: 0.375rem;
  font-size: 10px;
  letter-spacing: -0.5px;
  color: var(--text-muted);
}

[data-step-type="assistant_message"] .ai-message,
[data-step-type="assistant_message"] .message-content,
[data-step-type="assistant_message"] .prose {
  background: transparent !important;
  box-shadow: none !important;
}

[data-step-type="assistant_message"] .prose,
[data-step-type="assistant_message"] .message-content p,
[data-step-type="assistant_message"] .message-content .markdown-body,
[data-step-type="assistant_message"] .message-content,
[data-step-type="assistant_message"] .leading-7,
[data-step-type="assistant_message"] .prose p {
  font-size: 0.75rem;
  letter-spacing: 0.24px;
  line-height: 1.5;
  white-space: pre-line;
  max-width: none;
  margin-top: 0 !important;
  color: var(--text-primary) !important;
}

[data-step-type="assistant_message"] .message-content strong,
[data-step-type="assistant_message"] .font-bold {
  color: var(--text-primary) !important;
}

[data-step-type="assistant_message"] code,
#ho-chat-messages code.bg-muted {
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border-radius: 0.25rem;
}

/* Composer — ChannelsTestBlock inner controls */
#message-composer {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 1rem !important;
  padding: 0.5rem 1rem !important;
  box-shadow: none !important;
}

#message-composer .relative.w-full {
  height: 30px !important;
  min-height: 30px !important;
}

.ho-composer-icon-btn,
#upload-button,
#ho-mic-button {
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.ho-composer-icon-btn:hover,
#upload-button:hover,
#ho-mic-button:hover {
  background: var(--surface-3) !important;
}

.ho-composer-icon-btn svg,
#upload-button svg,
#ho-mic-button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: var(--text-muted) !important;
}

#message-composer svg {
  color: var(--text-muted) !important;
}

#message-composer:focus-within {
  border-color: color-mix(in srgb, var(--brand-green) 30%, var(--divider)) !important;
}

#chat-input,
#edit-chat-input {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  line-height: 30px !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  resize: none !important;
}

#chat-input::placeholder,
#edit-chat-input::placeholder {
  color: var(--text-muted) !important;
}

#message-composer .placeholder\:text-base::placeholder {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

#chat-submit {
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: var(--brand-green) !important;
  color: var(--text-primary) !important;
}

#chat-submit:disabled {
  background: var(--surface-3) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

#chat-submit:disabled svg {
  color: var(--text-muted) !important;
}

#chat-submit:not(:disabled) svg {
  color: var(--text-primary) !important;
}

#chat-submit svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

#chat-submit:not(:disabled):hover {
  background: #35f008 !important;
}

#upload-button,
label[for="upload-button-input"] {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 9999px !important;
}

#upload-button:hover {
  background: var(--surface-3) !important;
}

/* Hide Chainlit left sidebar wrapper spacing when collapsed */
.group\/sidebar-wrapper {
  min-height: 0 !important;
}

.h-screen.w-screen {
  height: 100% !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--surface-3);
  border-radius: 9999px;
}