/* Synco / Esshi desktop language
 * Figma bCHe4gA6f539qLboc1hjm0: 5:359 (foundations), 5:525 (composition).
 * Additive skin for OpenClaw 2026.10.8. Existing components own all behavior.
 * The dark palette follows Figma; the light-mode preference remains usable.
 */
@font-face {
  font-family: "Synco Source Sans 3";
  src: url("./source-sans-3.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Synco IBM Plex Mono";
  src: url("./ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html:root[data-synco-theme] {
  --font-body: "Synco Source Sans 3", "Source Sans 3", sans-serif !important;
  --font-display: var(--font-body) !important;
  --font-chat: var(--font-body) !important;
  --mono: "Synco IBM Plex Mono", "IBM Plex Mono", monospace !important;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius: 6px;
  --openclaw-corner-radius-scale: 1;
  --chat-composer-corner-shape: round;
  --sidebar-nav-row-height: 36px;
  --control-ui-text-xs: calc(12px * var(--control-ui-text-scale));
  --control-ui-text-sm: calc(13px * var(--control-ui-text-scale));
  --duration-fast: 100ms;
  --duration-normal: 160ms;
  --duration-slow: 220ms;
  --ease-spring: cubic-bezier(.2, 0, 0, 1);
  --app-background-image: none !important;
  --shadow-glow: none;
  --focus-glow: var(--focus-ring) !important;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring) !important;
  --wa-color-brand-on-loud: var(--primary-foreground);
  --wa-color-brand-on-normal: var(--text);
  --wa-color-brand-on-quiet: var(--text);
}

html:root[data-synco-theme]:not([data-theme-mode="light"]) {
  --bg: #080808;
  --bg-content: #080808;
  --bg-accent: #101010;
  --bg-elevated: #101010;
  --bg-hover: #1a1a1a;
  --bg-muted: #101010;
  --card: #000;
  --card-foreground: #e8e8e8;
  --card-highlight: transparent;
  --popover: #101010;
  --popover-foreground: #e8e8e8;
  --panel: #000;
  --panel-strong: #101010;
  --panel-hover: #1a1a1a;
  --chrome: #000;
  --chrome-strong: #000;
  --text: #e8e8e8;
  --text-strong: #e8e8e8;
  --chat-text: #e8e8e8;
  --muted: #a3a3a3;
  --muted-strong: #a3a3a3;
  --muted-foreground: #a3a3a3;
  --border: #282828;
  --border-strong: #383838;
  --border-hover: #707070;
  --input: #707070;
  --ring: #a3a3a3 !important;
  --accent: #fff !important;
  --accent-hover: #e8e8e8 !important;
  --accent-muted: #a3a3a3 !important;
  --accent-subtle: #ffffff0d !important;
  --accent-glow: transparent !important;
  --accent-foreground: #000 !important;
  --primary: #fff !important;
  --primary-hover: #e8e8e8 !important;
  --primary-foreground: #000 !important;
  --secondary: #101010;
  --secondary-foreground: #e8e8e8;
  --accent-2: #a3a3a3;
  --accent-2-muted: #a3a3a3;
  --accent-2-subtle: #ffffff0a;
  --link: #e8e8e8;
  --link-hover: #fff;
  --selection-bg: #383838;
  --selection-fg: #fff;
  --danger: #e58b8b;
  --danger-muted: #e58b8bbf;
  --danger-subtle: #e58b8b14;
  --destructive: #e58b8b;
  --destructive-hover: #efa4a4;
  --destructive-foreground: #000;
  --focus: #ffffff14 !important;
  --grid-line: #ffffff08;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px #00000059;
  --shadow-lg: 0 8px 24px #00000059;
  --overlay-border: #383838;
  --overlay-shadow: 0 8px 24px #00000059;
  background: var(--bg);
}

/* Keep the application-wide skin neutral in the existing light mode too. */
html:root[data-synco-theme][data-theme-mode="light"] {
  --bg: #f5f5f5;
  --bg-content: #f5f5f5;
  --bg-accent: #fff;
  --bg-elevated: #fff;
  --bg-hover: #e8e8e8;
  --bg-muted: #ededed;
  --card: #fff;
  --card-foreground: #171717;
  --popover: #fff;
  --popover-foreground: #171717;
  --panel: #fff;
  --panel-strong: #ededed;
  --panel-hover: #e8e8e8;
  --chrome: #fff;
  --chrome-strong: #fff;
  --text: #262626;
  --text-strong: #171717;
  --chat-text: #262626;
  --muted: #626262;
  --muted-strong: #525252;
  --muted-foreground: #626262;
  --border: #ddd;
  --border-strong: #c4c4c4;
  --border-hover: #707070;
  --input: #707070;
  --ring: #525252 !important;
  --accent: #171717 !important;
  --accent-hover: #383838 !important;
  --accent-muted: #525252 !important;
  --accent-subtle: #0000000d !important;
  --accent-glow: transparent !important;
  --accent-foreground: #fff !important;
  --primary: #171717 !important;
  --primary-hover: #383838 !important;
  --primary-foreground: #fff !important;
  --secondary: #ededed;
  --secondary-foreground: #262626;
  --accent-2: #626262;
  --accent-2-muted: #626262;
  --accent-2-subtle: #0000000a;
  --link: #262626;
  --link-hover: #000;
  --selection-bg: #ddd;
  --selection-fg: #000;
  --focus: #00000014 !important;
  --grid-line: #00000008;
  --overlay-border: #c4c4c4;
  background: var(--bg);
}

/* Shared components cover Chat, Automations, agents and all settings pages.
 * Specific selectors override the upstream fixed superellipse geometry.
 */
html[data-synco-theme] :is(.agent-tool-card, .chat-tool-card__preview, .chat-thread,
  .chat-bubble, .chat-pr, .nav-item, .sidebar-recent-session, .settings-sidebar__item,
  .agent-select__trigger, .settings-input, .settings-select) {
  border-radius: 6px;
  corner-shape: round;
}
html[data-synco-theme] .field :is(input, textarea, select) {
  border-radius: 4px;
  corner-shape: round;
}
html[data-synco-theme] .settings-group {
  border-color: var(--border-strong);
  border-radius: 6px;
  background: var(--card);
}
html[data-synco-theme] .agent-scope-control .agent-select__trigger {
  border-radius: 4px;
  min-height: 36px;
  background: var(--panel);
}
html[data-synco-theme] .cron-table__head {
  padding-block: 12px;
  background: var(--bg-elevated);
  font: 400 12px/16px var(--mono);
  text-transform: none;
  letter-spacing: 0;
}
html[data-synco-theme] .cron-table__row { padding-block: 12px; }
html[data-synco-theme] .cron-table__name { font: 500 14px/20px var(--font-body); }
html[data-synco-theme] .cron-table__cell { font-size: 13px; line-height: 20px; }
html[data-synco-theme] .cron-table__footer {
  padding-block: 12px;
  font: 400 12px/16px var(--mono);
}
html[data-synco-theme] .cron-search-box input {
  min-height: 36px;
  border-radius: 4px;
  border-color: var(--border-hover);
  background: var(--panel);
}
html[data-synco-theme] .cron-table__cell-value {
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-synco-theme] .cron-detail-title { font-weight: 500; }

/* Shell: quiet chrome, clear selection, no wallpaper or ornamental glow. */
html[data-synco-theme] .shell { background-image: none; }
html[data-synco-theme] .sidebar { --sidebar-bg: var(--panel); }
html[data-synco-theme] .sidebar-brand { padding-bottom: 16px; }
html[data-synco-theme] .nav-item { font-weight: 500; letter-spacing: 0; }
html[data-synco-theme] .nav-item:is(.active, .nav-item--active) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-strong);
  box-shadow: none;
}
html[data-synco-theme] .btn {
  border-radius: 4px;
  letter-spacing: 0;
  box-shadow: none;
}
html[data-synco-theme] .btn.primary { box-shadow: none; }
html[data-synco-theme] .btn:not(.primary):not(.danger):not(.ghost) {
  border-color: var(--border-hover);
}

/* Replace generated agent faces/emoji with the exported Synco symbol.
 * The existing image/fallback state still controls visibility, so uploaded
 * photos and pending-image behavior remain intact. Names retain identity.
 * Figma 151:373, original 32 x 32 SVG; scale proportionally in avatar slots.
 */
html[data-synco-theme] .identity-avatar--agent.is-fallback {
  background: transparent;
  border-radius: 0;
}
html[data-synco-theme] .sidebar-agent-menu__agent-avatar:has(.identity-avatar--agent.is-fallback) {
  --agent-avatar-background: transparent;
  border-radius: 4px;
}
html[data-synco-theme] .identity-avatar--agent > .identity-avatar__fallback {
  position: relative;
  background: transparent;
}
html[data-synco-theme] .identity-avatar--agent > .identity-avatar__fallback > * {
  visibility: hidden;
}
html[data-synco-theme] .identity-avatar--agent > .identity-avatar__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./synco-mark.svg") center / contain no-repeat;
  pointer-events: none;
}
html[data-synco-theme] .identity-avatar--agent > .identity-avatar__hat { display: none; }
html[data-synco-theme][data-theme-mode="light"] .identity-avatar--agent > .identity-avatar__fallback::after {
  filter: brightness(0);
}

/* Systems: 4px spacing rhythm, 16px panel padding, 24px section separation. */
html[data-synco-theme] .systems-workspace { background: var(--bg); }
html[data-synco-theme] .systems-toolbar {
  gap: 8px;
  padding: 16px 24px;
  background: var(--panel);
}
html[data-synco-theme] .systems-heading h1 {
  font: 500 20px/28px var(--font-body);
  letter-spacing: 0;
}
html[data-synco-theme] .systems-heading > span {
  font-size: 12px;
  line-height: 16px;
}
html[data-synco-theme] .systems-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
html[data-synco-theme] .systems-icon-button[aria-pressed="true"] {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-strong);
}
html[data-synco-theme] .systems-icon-button svg { width: 20px; height: 20px; }
html[data-synco-theme] .systems-metrics { padding: 16px 24px 12px; }
html[data-synco-theme] .systems-vitals {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}
html[data-synco-theme] .systems-vital {
  min-height: 116px;
  padding: 16px 16px 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--muted);
}
/* Give every card the same header/value/chart tracks within its grid row.
 * A long mount path can grow the shared header without displacing one value.
 * Capacity always gets its own line, including CPU and memory cards.
 */
html[data-synco-theme] .systems-vital .sparkline-tile__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 4px;
  min-height: 60px;
}
@supports (grid-template-rows: subgrid) {
  html[data-synco-theme] .systems-vital {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 4px;
  }
}
html[data-synco-theme] .systems-vital .sparkline-tile__label {
  color: var(--text);
  font: 500 13px/20px var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
html[data-synco-theme] .systems-vital .sparkline-tile__value {
  margin: 4px 0;
  font: 400 24px/32px var(--mono);
  font-variant-numeric: tabular-nums;
}
html[data-synco-theme] .systems-vital .sparkline-tile__sub {
  font: 400 12px/16px var(--mono);
}
html[data-synco-theme] .systems-vital .sparkline-tile__chart { margin: 12px -16px 0; }
html[data-synco-theme] .systems-vital .sparkline-tile__chart polyline { filter: none; }
html[data-synco-theme] .systems-vital .sparkline-tile__dot--now {
  box-shadow: none;
  animation: none;
}
html[data-synco-theme] .systems-metrics-caption {
  margin-top: 8px;
  font: 400 12px/16px var(--mono);
}
html[data-synco-theme] .systems-backups {
  padding: 16px 24px;
  min-width: 0;
  background: var(--bg);
  font-size: 13px;
  line-height: 20px;
  overflow-x: hidden;
}
html[data-synco-theme] .systems-backups h2,
html[data-synco-theme] .systems-details h2 { font: 500 16px/24px var(--font-body); }
html[data-synco-theme] .systems-backups h3,
html[data-synco-theme] .systems-details h3 { font: 500 13px/20px var(--font-body); }
html[data-synco-theme] .systems-backups > h2 { margin: 0 0 12px; }
html[data-synco-theme] .systems-backups__targets {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 12px;
}
html[data-synco-theme] .systems-backup {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html[data-synco-theme] .systems-backup__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
html[data-synco-theme] .systems-backup__heading strong {
  min-width: 0;
  font: 400 12px/20px var(--mono);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-synco-theme] .systems-backup__state {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elevated);
  font: 500 12px/16px var(--font-body);
  white-space: normal;
  max-width: 120px;
  overflow-wrap: anywhere;
}
html[data-synco-theme] .systems-backup[data-status="failed"] {
  border-color: var(--danger);
}
html[data-synco-theme] .systems-backup__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  font-size: 12px;
  line-height: 20px;
}
html[data-synco-theme] .systems-backup__meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-synco-theme] .systems-backup__destination {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font: 400 12px/20px var(--mono);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-synco-theme] .systems-backup__error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--danger-subtle);
  overflow-wrap: anywhere;
}
html[data-synco-theme] .systems-storage-location {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
html[data-synco-theme] .systems-storage-location > div { min-width: 0; }
html[data-synco-theme] .systems-storage-location .systems-backup__destination {
  border: 0;
  padding-top: 4px;
}
html[data-synco-theme] .systems-backups__check,
html[data-synco-theme] .systems-text-button {
  min-height: 36px;
  border-radius: 4px;
  border-color: var(--border-hover);
  padding: 7px 12px;
  font: 500 13px/20px var(--font-body);
}
html[data-synco-theme] .systems-body { margin: 16px 24px 24px; gap: 16px; }
html[data-synco-theme] .systems-desktop {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
}
html[data-synco-theme] .systems-state { padding: 24px; }
html[data-synco-theme] .systems-state h2 { font: 500 20px/28px var(--font-body); }
html[data-synco-theme] .systems-state p { font-size: 14px; line-height: 20px; }
html[data-synco-theme] .systems-details {
  flex-basis: 280px;
  width: 280px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
}
html[data-synco-theme] .systems-details dl { gap: 4px; font-size: 13px; line-height: 20px; }
html[data-synco-theme] .systems-details dd { font-family: var(--mono); font-size: 12px; }
html[data-synco-theme] .systems-details .systems-metrics { padding: 0; }
html[data-synco-theme] .systems-detail-hint,
html[data-synco-theme] .systems-session-link { font-size: 12px; line-height: 16px; }
html[data-synco-theme] .systems-capabilities { gap: 8px; }
html[data-synco-theme] .systems-capabilities span { font-size: 11px; padding: 4px 8px; }
html[data-synco-theme] .systems-callout { padding: 12px 24px; font-size: 13px; }
html[data-synco-theme] .systems-filter { min-height: 36px; margin-bottom: 12px; }
html[data-synco-theme] .systems-filter input { font-size: 13px; }
html[data-synco-theme] .systems-group h3 { margin-bottom: 8px; font-size: 12px; }
html[data-synco-theme] .systems-machine { min-height: 36px; border-radius: 4px; }
html[data-synco-theme] .systems-machine[aria-pressed="true"] {
  --systems-row-bg: var(--bg-hover);
  box-shadow: inset 2px 0 var(--muted);
}
html[data-synco-theme] .systems-machine__meta { font: 400 12px/16px var(--mono); }
html[data-synco-theme] .systems-mobile-picker {
  min-height: 36px;
  border-radius: 4px;
  border-color: var(--border-hover);
  font-size: 14px;
}

@media (hover: hover) {
  html[data-synco-theme] :is(.systems-icon-button, .systems-text-button, .systems-backups__check):hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
  }
}
@media (max-width: 1100px) {
  html[data-synco-theme] .systems-toolbar,
  html[data-synco-theme] .systems-metrics,
  html[data-synco-theme] .systems-backups { padding-inline: 16px; }
  html[data-synco-theme] .systems-body { margin: 12px 16px 16px; }
  html[data-synco-theme] .systems-details { flex-basis: 240px; width: 240px; }
  html[data-synco-theme] .systems-vital .sparkline-tile__value { font-size: 20px; line-height: 28px; }
}
@media (max-width: 768px) {
  html[data-synco-theme] .systems-toolbar { padding: 12px; }
  html[data-synco-theme] .systems-metrics,
  html[data-synco-theme] .systems-backups { padding: 12px; }
  html[data-synco-theme] .systems-body { margin: 8px 12px 12px; }
  html[data-synco-theme] .systems-details { width: min(300px, 95%); }
  html[data-synco-theme] .systems-vitals { gap: 8px; }
  html[data-synco-theme] .systems-vital { padding: 12px 12px 0; min-height: 100px; }
  html[data-synco-theme] .systems-vital .sparkline-tile__chart { margin-inline: -12px; }
  html[data-synco-theme] .systems-vital .sparkline-tile__value { font-size: 16px; line-height: 24px; }
  html[data-synco-theme] .systems-vital .sparkline-tile__sub { font-size: 11px; }
}
@media (max-height: 700px) and (min-width: 769px) {
  html[data-synco-theme] .systems-toolbar { padding-block: 8px; }
  html[data-synco-theme] .systems-metrics { padding-block: 8px; }
  html[data-synco-theme] .systems-vital { min-height: 88px; padding-top: 8px; }
  html[data-synco-theme] .systems-body { margin-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root[data-synco-theme] {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}