/* Manus IA | light chat, sidebar and computer surfaces | 2026-11-13 r24
 * CSS-only addition. Keep the known-good Vue JavaScript and dark theme intact.
 * Browser/VNC pixels reflect the remote machine and are not recolored here.
 */
html:not(.dark) .chat-page-shell {
  --manus-composer-surface: #ffffff;
  --manus-composer-text: #0f172a;
  --manus-composer-muted: #475569;
  --manus-composer-border: #cbd5e1;
}

/* Task composer. The existing Vue component hardcodes bg-[#242424]. */
html:not(.dark) .chat-page-shell div.flex.flex-col:has(> div.px-1 > textarea.chat-input-textarea):not(.home-composer) {
  background: var(--manus-composer-surface) !important;
  color: var(--manus-composer-text);
  border: 1px solid var(--manus-composer-border) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
html:not(.dark) .chat-page-shell textarea.chat-input-textarea {
  color: var(--manus-composer-text) !important;
  background: transparent !important;
  caret-color: #1d4ed8;
}
html:not(.dark) .chat-page-shell textarea.chat-input-textarea::placeholder {
  color: #64748b !important;
  opacity: 1;
}
html:not(.dark) .chat-page-shell .composer-toolbar {
  color: var(--manus-composer-text);
}
html:not(.dark) .chat-page-shell .composer-toolbar button:not(.home-send):not([aria-label="Parar execução"]) {
  color: #334155;
  border-color: #cbd5e1;
}
html:not(.dark) .chat-page-shell .composer-toolbar button:not(.home-send):not([aria-label="Parar execução"]):hover {
  background: #f1f5f9;
  color: #0f172a;
}
html:not(.dark) .chat-page-shell .home-send:disabled {
  background: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none;
}

/* The quick-action and skills menus use their own hardcoded dark palette. */
html:not(.dark) .chat-page-shell [class*="bg-[#282828]"] {
  background: #ffffff !important;
  color: #172438;
  border-color: #cbd5e1 !important;
}
html:not(.dark) .chat-page-shell [class*="bg-[#222]"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html:not(.dark) .chat-page-shell .quick-action,
html:not(.dark) .chat-page-shell .quick-skill {
  color: #334155;
}
html:not(.dark) .chat-page-shell .quick-action:is(:hover,.quick-action-active),
html:not(.dark) .chat-page-shell .quick-skill:hover {
  color: #0f172a;
  background: #eaf0f8;
}
html:not(.dark) .chat-page-shell .quick-skill [class*="text-white"] {
  color: #0f172a !important;
}
html:not(.dark) .chat-page-shell .quick-skill [class*="text-[#9d9d9d]"],
html:not(.dark) .chat-page-shell [class*="bg-[#282828]"] > p {
  color: #475569 !important;
}
html:not(.dark) .chat-page-shell [class*="bg-[#282828]"] :is(input,button):focus-visible,
html:not(.dark) .chat-page-shell textarea.chat-input-textarea:focus-visible {
  outline-color: #2563eb;
}

/* Left navigation has local dark-only CSS variables, overriding :root. */
html:not(.dark) .manus-sidebar {
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --icon-secondary: #334155;
  --icon-tertiary: #64748b;
  --fill-tsp-gray-main: rgba(15,23,42,.075);
  --background-nav: #f8fafc;
  --border-main: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  border-right-color: #cbd5e1;
}
html:not(.dark) .manus-sidebar .manus-sidebar-surface {
  background: #f8fafc;
  color: #0f172a;
}
html:not(.dark) .manus-sidebar .manus-sidebar-header img[alt="Manus AI"] {
  filter: brightness(0);
  opacity: .87;
}
html:not(.dark) .manus-sidebar .manus-sidebar-item:hover,
html:not(.dark) .manus-sidebar .task-history-heading-action:is(:hover,:focus-visible) {
  background: #e9f0f8;
  color: #0f172a;
}
html:not(.dark) .manus-sidebar .manus-sidebar-tasks {
  border-top-color: #cbd5e1;
}
html:not(.dark) .manus-sidebar :is(button,a):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* MCP computer monitor: frame, activities and textual terminal. */
html:not(.dark) .manus-live-computer,
html:not(.dark) .manus-live-computer .work-surface,
html:not(.dark) .manus-live-computer .work-activity {
  background: #ffffff;
  color: #172438;
}
html:not(.dark) .manus-live-computer :is(.computer-header,.work-summary,.activity-event,footer) {
  border-color: #cbd5e1;
}
html:not(.dark) .manus-live-computer :is(.browser-surface,.computer-view) {
  background: #eaf0f7;
}
html:not(.dark) .manus-live-computer .work-terminal,
html:not(.dark) .manus-live-computer .tool-preview {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #d1dbe7;
}
html:not(.dark) .manus-live-computer .tool-preview {
  margin-top: 9px;
  border-radius: 8px;
}
html:not(.dark) .manus-live-computer .minimize {
  background: #ffffff;
  color: #172438;
  border-color: #cbd5e1;
}
html:not(.dark) .manus-live-computer .minimize:hover {
  background: #eff6ff;
}
html:not(.dark) .manus-live-computer :is(.heading p,.count,.latest small,.surface-icon,.event-state,.event-line time,.empty-tools,footer) {
  color: #475569;
}

/* Legacy ShellToolView: terminal root and its output lines. */
html:not(.dark) .tool-panel-surface > div:has(> div[dir="ltr"] > [role="tabpanel"]) {
  background: #f8fafc !important;
  color: #0f172a;
}
html:not(.dark) .tool-panel-surface [role="tabpanel"] {
  background: #f8fafc;
  color: #0f172a !important;
}
html:not(.dark) .tool-panel-surface .shell-prompt {
  color: #166534;
}

/* Image-generation terminal has its own independent hardcoded palette. */
html:not(.dark) .image-terminal {
  --terminal-muted: #475569;
  background: #f8fafc;
  color: #172438;
}
html:not(.dark) .image-terminal .console-header {
  background: #f1f5f9;
  border-bottom-color: #cbd5e1;
}
html:not(.dark) .image-terminal .meta-lines {
  background: #ffffff;
  border-bottom-color: #cbd5e1;
}
html:not(.dark) .image-terminal :is(.console-name,.meta-value,.metric strong,.log-description,.detail-row strong) {
  color: #0f172a;
}
html:not(.dark) .image-terminal :is(.console-separator,.meta-label,.log-heading,.log-counter,.stamp,.metric-label,.detail-row,.telemetry-disclaimer,.log-empty) {
  color: #475569;
}
html:not(.dark) .image-terminal :is(.console-function,.log-level,.log-level.level-info,.log-attribute) {
  color: #1d4ed8;
}
html:not(.dark) .image-terminal .console-state {
  color: #854d0e;
  background: #fef3c7;
}
html:not(.dark) .image-terminal .console-state.state-done {
  color: #166534;
  background: #dcfce7;
}
html:not(.dark) .image-terminal .console-state.state-error {
  color: #991b1b;
  background: #fee2e2;
}
html:not(.dark) .image-terminal .log-level.level-wait,
html:not(.dark) .image-terminal .detail-warning {
  color: #92400e;
}
html:not(.dark) .image-terminal .log-level.level-success {
  color: #166534;
}
html:not(.dark) .image-terminal .log-level.level-error {
  color: #b91c1c;
}
html:not(.dark) .image-terminal .live-line {
  color: #92400e;
}
html:not(.dark) .image-terminal .console-footer {
  border-top-color: #cbd5e1;
}
html:not(.dark) .image-terminal .output-result {
  background: #ecfdf5;
  border-color: #86efac;
}
html:not(.dark) .image-terminal :is(.result-label,.result-path,.result-size) {
  color: #166534;
}

/* Touch targets and wrapping without changing application logic. */
@media (max-width: 640px) {
  .chat-page-shell .composer-toolbar button {
    min-width: 38px;
    min-height: 38px;
  }
  .chat-page-shell .composer-toolbar .home-send {
    min-width: 40px;
    min-height: 40px;
  }
  .manus-sidebar {
    max-width: min(300px, 90vw);
  }
  .manus-live-computer .work-terminal,
  .manus-live-computer .tool-preview {
    max-width: 100%;
    font-size: 12px;
    overflow-x: auto;
  }
}