/* Mok Afri — approved forest glass, 24 October 2026.
 * Presentation only. No layout, event, transport or settings changes.
 * Loaded by standalone Canvas; editors and terminals retain their palettes.
 */
body[data-agent-server-ui] [data-agent-server-ui][data-color-theme] {
  --oh-color-base: #071710;
  --oh-color-base-secondary: #102b20;
  --oh-color-content: #f1f6f1;
  --oh-color-content-2: #f6faf6;
  --oh-color-tertiary-light: #c3d5c9;
  --oh-background: #071710;
  --oh-foreground: #f1f6f1;
  --oh-surface: #153629;
  --oh-surface-raised: #214633;
  --oh-surface-deep: #0b2017;
  --oh-overlay: #102b20;
  --oh-overlay-foreground: #f1f6f1;
  --oh-text-secondary: #c3d5c9;
  --oh-text-tertiary: #d5e3d9;
  --oh-text-dim: #b5ccbd;
  --oh-text-subtle: #adc6b6;
  --oh-muted: #bdcfc3;
  --oh-border: #648c75;
  --oh-border-input: #91bca2;
  --oh-border-subtle: #5a816c;
  --oh-focus: #b7f2cf;
  --oh-interactive-hover: #376e4e;
  --oh-interactive-hover-low: #204b35;
  --oh-interactive-active: #315e44;
  --oh-interactive-selected: #3f7856;
  --oh-scrollbar: #4f7e65;
  --oh-scrollbar-hover: #94c5a6;
  --mok-glass-fill: rgba(22, 63, 43, 0.46);
  --mok-glass-line: rgba(200, 237, 209, 0.62);
  --mok-glass-shadow:
    inset 0 1px 1px rgba(239, 255, 236, 0.5),
    inset 0 -1px 1px rgba(191, 235, 193, 0.25), 0 5px 22px rgba(0, 8, 4, 0.16);
}

body[data-agent-server-ui] [data-testid="root-layout"] {
  background:
    linear-gradient(rgba(0, 7, 4, 0.25), rgba(0, 7, 4, 0.25)),
    url("./mok-afri-forest.jpg") center center / cover no-repeat;
  color: #f1f6f1;
}

body[data-agent-server-ui] [data-testid="root-layout"] > aside,
body[data-agent-server-ui] [data-testid="sidebar-mobile-drawer"] {
  background: linear-gradient(
    130deg,
    rgba(20, 54, 34, 0.3),
    rgba(6, 26, 17, 0.54)
  );
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border-color: rgba(182, 223, 181, 0.4);
  box-shadow: 4px 0 24px rgba(0, 10, 5, 0.08);
}

body[data-agent-server-ui]
  :is(
    [data-testid="sidebar-onboarding-checklist"],
    [data-testid="command-menu-trigger"],
    [data-testid="home-launcher-mode-toggle"],
    [data-testid="home-mok-voice-start"],
    [data-testid="mok-voice-toggle"],
    [data-testid="mok-voice-panel"],
    [data-testid="home-composer-actions"] button,
    [data-testid="home-composer-actions"] a,
    [data-testid^="recommended-automation-rail-card-"],
    [data-testid^="recommended-automation-card-"],
    .bg-surface.rounded-\[15px\]:has([data-testid="chat-input"])
  ) {
  background:
    linear-gradient(
      125deg,
      rgba(184, 229, 190, 0.08),
      transparent 45%,
      rgba(178, 218, 174, 0.04)
    ),
    var(--mok-glass-fill);
  border-color: var(--mok-glass-line);
  box-shadow:
    var(--mok-glass-shadow),
    inset 0 0 0 1px var(--mok-glass-line);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  color: #f1f6f1;
}

body[data-agent-server-ui] [data-testid="sidebar-conversations-link"] {
  background: linear-gradient(
    120deg,
    rgba(93, 166, 111, 0.6),
    rgba(30, 88, 57, 0.4)
  );
  box-shadow:
    inset 0 1px 5px rgba(226, 255, 218, 0.5),
    inset 0 -1px 2px rgba(193, 238, 181, 0.17),
    inset 0 0 0 1px rgba(208, 247, 207, 0.7),
    0 2px 10px rgba(0, 8, 3, 0.15);
  border-radius: 8px;
  color: #fff;
}

body[data-agent-server-ui]
  [data-testid="home-launcher-mode-toggle"]
  [aria-checked="true"]
  > span.absolute {
  background: linear-gradient(
    135deg,
    rgba(104, 180, 134, 0.4),
    rgba(34, 94, 59, 0.4)
  );
  box-shadow:
    inset 0 1px 0 rgba(225, 255, 233, 0.66),
    inset 0 -1px 2px rgba(191, 233, 203, 0.33),
    inset 0 0 0 1px rgba(182, 227, 193, 0.54);
}

body[data-agent-server-ui]
  .bg-surface.rounded-\[15px\]:has([data-testid="chat-input"]) {
  box-shadow:
    inset 0 1px 2px rgba(236, 255, 229, 0.66),
    inset 0 -1px 2px rgba(225, 244, 213, 0.33),
    inset 0 0 0 1px rgba(199, 230, 194, 0.56),
    0 9px 28px rgba(0, 0, 0, 0.55);
}

body[data-agent-server-ui]
  .bg-surface.rounded-\[15px\]:has([data-testid="chat-input"]):focus-within {
  box-shadow:
    inset 0 1px 2px rgba(236, 255, 229, 0.8),
    inset 0 0 0 1px rgba(199, 230, 194, 0.75),
    0 0 0 2px rgba(165, 232, 189, 0.16),
    0 12px 35px rgba(0, 0, 0, 0.5);
}

body[data-agent-server-ui] [data-testid="home-chat-launcher"] h1 {
  color: #f1f6f1;
  text-shadow: 0 2px 18px rgba(0, 24, 12, 0.34);
}
body[data-agent-server-ui] [data-testid="home-chat-launcher"] p {
  color: #cbd6ce;
}
body[data-agent-server-ui] [data-testid="chat-input"] {
  color: #f1f6f1;
  caret-color: #c8f2d8;
}
body[data-agent-server-ui] [data-testid="chat-input"]:empty::before {
  color: #d5e3d9;
}
body[data-agent-server-ui] [data-testid="chat-interface"] {
  background-color: rgba(4, 16, 11, 0.83);
}

body[data-agent-server-ui]
  :is(
    [data-testid="sidebar-conversations-link"],
    [data-testid="home-mok-voice-start"],
    [data-testid="mok-voice-toggle"],
    [data-testid="home-composer-actions"] button,
    [data-testid^="recommended-automation-rail-card-"],
    .bg-surface.rounded-\[15px\]:has([data-testid="chat-input"])
  ) {
  transition:
    background-color 180ms ease-out,
    box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}

@media (hover: hover) {
  body[data-agent-server-ui]
    :is(
      [data-testid="sidebar-conversations-link"],
      [data-testid="home-mok-voice-start"],
      [data-testid="mok-voice-toggle"],
      [data-testid="home-composer-actions"] button,
      [data-testid^="recommended-automation-rail-card-"]
    ):not(:disabled):hover {
    background-color: rgba(79, 129, 92, 0.5);
    box-shadow:
      inset 0 1px 3px rgba(244, 255, 243, 0.55),
      inset 0 0 0 1px rgba(218, 255, 221, 0.65),
      0 6px 22px rgba(0, 8, 4, 0.2);
  }
}

body[data-agent-server-ui]
  :is(button, a, input, [contenteditable="true"]):focus-visible {
  outline-color: #b7f2cf;
}
body[data-agent-server-ui] [data-testid="root-layout"] ::selection {
  background: #4d7f60;
  color: #fff;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  body[data-agent-server-ui] [data-agent-server-ui][data-color-theme] {
    --mok-glass-fill: #153629;
  }
  body[data-agent-server-ui] [data-testid="root-layout"] > aside {
    background: #102b20;
  }
}
@media (max-width: 767px) {
  body[data-agent-server-ui] [data-testid="sidebar-mobile-drawer"] {
    background-color: rgba(6, 26, 17, 0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-agent-server-ui]
    :is(
      [data-testid="sidebar-conversations-link"],
      [data-testid="home-mok-voice-start"],
      [data-testid="mok-voice-toggle"],
      [data-testid="home-composer-actions"] button,
      [data-testid^="recommended-automation-rail-card-"],
      .bg-surface.rounded-\[15px\]:has([data-testid="chat-input"])
    ) {
    transition: none;
  }
}

body[data-agent-server-ui] [data-testid="submit-button"]:not(:disabled) {
  background: linear-gradient(
    145deg,
    rgba(168, 224, 185, 0.85),
    rgba(55, 116, 80, 0.6)
  );
  box-shadow:
    inset 0 1px 3px rgba(239, 255, 236, 0.65),
    0 3px 10px rgba(0, 8, 4, 0.2);
  border-color: rgba(208, 247, 207, 0.8);
}

/* MOK-001: the active conversation uses the same forest workspace as New Chat. */
body[data-agent-server-ui]
  [data-testid="mok-conversation-workspace"]
  [data-testid="conversation-chat-panel"],
body[data-agent-server-ui]
  [data-testid="mok-conversation-workspace"]
  [data-testid="chat-interface"] {
  background: transparent;
}
body[data-agent-server-ui]
  [data-testid="mok-conversation-workspace"]
  [data-testid="chat-scroll-container"] {
  background: rgba(4, 16, 11, 0.58);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body[data-agent-server-ui] [data-testid="mok-workspace-header"] h1 {
  font-size: clamp(1.2rem, 2.3vw, 2rem);
  color: #f1f6f1;
}
body[data-agent-server-ui]
  [data-testid="mok-workspace-header"]
  [data-testid="home-header-subtitle"] {
  display: none;
}
@media (max-height: 650px) {
  body[data-agent-server-ui] [data-testid="mok-workspace-header"] h1 {
    display: none;
  }
}