/* Desktop-client visual parity for Automations, Skills and Sites. */
body[data-title-key="chat.title"] {
  --qw-panel-border: color-mix(in srgb, var(--qw-text) 13%, transparent);
  --qw-panel-divider: color-mix(in srgb, var(--qw-text) 9%, transparent);
  --qw-panel-shadow: 0 1px 4px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --qw-panel-selection: color-mix(in srgb, var(--qw-accent) 6%, var(--qw-surface));
}

body[data-title-key="chat.title"] :is(.tasks-pane, .skills-pane, .sites-pane) > .feature-pane__head {
  min-height: 52px;
  padding-inline: 18px;
  border-bottom-color: var(--qw-panel-divider);
}

body[data-title-key="chat.title"] :is(.tasks-pane, .skills-pane, .sites-pane) > .feature-pane__head h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.012em;
}

body[data-title-key="chat.title"] :is(.tasks-pane, .skills-pane) .quiet-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-color: var(--qw-panel-border);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Keep primary CTAs solid black in light theme (skills "Use in chat", etc.). */
body[data-title-key="chat.title"] :is(.tasks-pane, .skills-pane) .quiet-btn--primary {
  border-color: #1a1c1f;
  background: #1a1c1f;
  color: #fff;
  box-shadow: none;
}

body[data-title-key="chat.title"] :is(.tasks-pane, .skills-pane) button.quiet-btn--primary:hover:not(:disabled) {
  border-color: #2f3238;
  background: #2f3238;
  color: #fff;
}

/* Automations */
body[data-title-key="chat.title"] .tasks-list-pane--split {
  background: var(--qw-sidebar);
  border-right-color: var(--qw-panel-divider);
}

body[data-title-key="chat.title"] .tasks-list-pane { padding: 20px 22px 28px; }
body[data-title-key="chat.title"] .tasks-detail { padding: 30px 36px 0; }
body[data-title-key="chat.title"] .tasks-detail--empty { max-width: 780px; padding-bottom: 40px; }

body[data-title-key="chat.title"] .tasks-detail__heading {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body[data-title-key="chat.title"] .tasks-detail__hint,
body[data-title-key="chat.title"] .tasks-template-card__desc {
  color: var(--qw-text-secondary);
  line-height: 1.5;
}

body[data-title-key="chat.title"] .tasks-template-grid { gap: 14px; margin-top: 20px; }

body[data-title-key="chat.title"] .tasks-template-card {
  min-height: 132px;
  padding: 16px;
  border-color: var(--qw-panel-border);
  border-radius: 13px;
  box-shadow: var(--qw-panel-shadow);
  transition: background-color 120ms ease, transform 120ms ease;
}

body[data-title-key="chat.title"] .tasks-template-card:hover {
  border-color: var(--qw-panel-border);
  background: var(--qw-hover);
  transform: translateY(-1px);
}

body[data-title-key="chat.title"] .tasks-template-card__foot {
  margin-top: auto;
  color: var(--qw-text-tertiary);
}

body[data-title-key="chat.title"] .tasks-template-card--blank {
  border-style: solid;
  gap: 8px;
  background: color-mix(in srgb, var(--qw-sidebar) 55%, var(--qw-surface));
}

body[data-title-key="chat.title"] .tasks-template-card__blank-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  border: 1px solid var(--qw-panel-divider);
  border-radius: 9px;
  background: var(--qw-surface);
  color: var(--qw-text-secondary);
  font-size: 17px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body[data-title-key="chat.title"] .tasks-empty {
  border-style: solid;
  border-color: var(--qw-panel-border);
  background: var(--qw-surface);
  box-shadow: var(--qw-panel-shadow);
}

body[data-title-key="chat.title"] .tasks-empty__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 1px solid var(--qw-panel-border);
  border-radius: 13px;
  background: var(--qw-sidebar);
  color: var(--qw-text-secondary);
  font-size: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body[data-title-key="chat.title"] :is(.tasks-cron-list, .tasks-run-row, .tasks-detail-run) {
  border-color: var(--qw-panel-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

body[data-title-key="chat.title"] .tasks-cron-row--active {
  background: var(--qw-panel-selection);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--qw-accent) 72%, transparent);
}

/* Skills */
body[data-title-key="chat.title"] .skills-pane--split #skills-list-view {
  background: var(--qw-sidebar);
  border-right-color: var(--qw-panel-divider);
}

body[data-title-key="chat.title"] .skills-pane--split #skills-list-view .feature-pane__body { padding: 20px 22px 28px; }
body[data-title-key="chat.title"] .skills-pane--split #skills-detail-view .feature-pane__body { padding: 28px 32px 40px; }

/* The full-width skills browse follows Desktop PageScaffold exactly: 24px side
   gutters, 16px top inset and no extra card around the entire canvas. */
body[data-title-key="chat.title"]
  .skills-pane--split:is(.skills-pane--browse-full, .skills-pane--market-browse)
  #skills-list-view
  .feature-pane__body {
  padding: 16px 24px 48px;
}

body[data-title-key="chat.title"]
  :is(.skills-pane--browse-full, .skills-pane--market-browse)
  #skills-list:not(:empty) {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-title-key="chat.title"]
  :is(.skills-pane--browse-full, .skills-pane--market-browse)
  .skills-search-row
  .quiet-search {
  height: 38px;
}

body[data-title-key="chat.title"] .quiet-search {
  height: 40px;
  border-color: var(--qw-panel-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-title-key="chat.title"] .quiet-search:focus-within {
  border-color: var(--qw-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qw-accent) 12%, transparent);
}

body[data-title-key="chat.title"] .quiet-chip { border-color: var(--qw-panel-divider); }
body[data-title-key="chat.title"] .quiet-chip.is-active { border-color: transparent; background: var(--qw-selected); }

body[data-title-key="chat.title"] #skills-list:not(:empty) {
  overflow: hidden;
  border: 1px solid var(--qw-panel-border);
  border-radius: 13px;
  background: var(--qw-surface);
  box-shadow: var(--qw-panel-shadow);
}

body[data-title-key="chat.title"] #skills-list > .skill-row,
body[data-title-key="chat.title"] #skills-list > .skill-row-wrap > .skill-row {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--qw-panel-divider);
  background: transparent;
}

body[data-title-key="chat.title"] #skills-list > .skill-row:first-child,
body[data-title-key="chat.title"] #skills-list > .skill-row-wrap:first-child > .skill-row { border-top: 0; }

body[data-title-key="chat.title"] :is(.skill-row__avatar, .skills-detail__avatar) {
  border: 1px solid var(--qw-panel-divider);
  background: var(--qw-sidebar);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-title-key="chat.title"] .skill-row__badge {
  border: 1px solid var(--qw-panel-divider);
  border-radius: 5px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--qw-text) 3%, transparent);
  color: var(--qw-text-tertiary);
}

body[data-title-key="chat.title"] .skill-row__badge--platform {
  border-color: color-mix(in srgb, var(--qw-accent) 22%, transparent);
  background: color-mix(in srgb, var(--qw-accent) 6%, transparent);
}

body[data-title-key="chat.title"] .skill-row.is-selected {
  border-color: var(--qw-panel-divider);
  background: var(--qw-panel-selection);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--qw-accent) 72%, transparent);
}

body[data-title-key="chat.title"] .skills-detail { border-color: var(--qw-panel-border); box-shadow: var(--qw-panel-shadow); }
body[data-title-key="chat.title"] :is(.skills-detail__preview, .skills-detail__files) { border: 1px solid var(--qw-panel-divider); }

/* Sites */
body[data-title-key="chat.title"] .sites-split {
  grid-template-columns: var(--sites-rail-width, 344px) 1px minmax(0, 1fr);
  background: var(--qw-canvas);
}

body[data-title-key="chat.title"] .sites-rail {
  gap: 7px;
  padding: 16px 14px 20px;
  background: var(--qw-sidebar);
}

body[data-title-key="chat.title"] .sites-splitter { width: 1px; border: 0; background: var(--qw-panel-divider); }
body[data-title-key="chat.title"] .sites-splitter::after { inset: 0 -3px; }
body[data-title-key="chat.title"] .sites-rail-item { padding: 9px 10px; border-radius: 10px; }

body[data-title-key="chat.title"] :is(.sites-rail-item--active, .sites-rail-card--active) {
  background: var(--qw-panel-selection);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--qw-accent) 72%, transparent);
}

body[data-title-key="chat.title"] :is(.sites-rail-item__icon, .sites-rail-card__thumb) {
  border: 1px solid var(--qw-panel-divider);
  background: var(--qw-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-title-key="chat.title"] .sites-rail-item__icon--accent {
  border-color: color-mix(in srgb, var(--qw-accent) 18%, transparent);
  background: color-mix(in srgb, var(--qw-accent) 6%, var(--qw-surface));
}

body[data-title-key="chat.title"] .sites-rail-tabs {
  padding: 3px;
  border: 1px solid var(--qw-panel-divider);
  background: color-mix(in srgb, var(--qw-text) 3%, transparent);
}

body[data-title-key="chat.title"] .sites-rail-tab--active {
  color: var(--qw-text);
  background: var(--qw-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

body[data-title-key="chat.title"] .sites-center { padding: clamp(32px, 5vw, 68px); }
body[data-title-key="chat.title"] .sites-create { width: min(100%, 780px); }
body[data-title-key="chat.title"] .sites-create__hero { margin-bottom: 26px; }

body[data-title-key="chat.title"] .sites-create__hero-icon {
  border-color: var(--qw-panel-border);
  background: var(--qw-sidebar);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

body[data-title-key="chat.title"] .sites-title--lg { font-size: 32px; letter-spacing: -0.025em; }

body[data-title-key="chat.title"] .sites-create__hero > .muted {
  max-width: 640px;
  margin: 10px auto 0;
  color: var(--qw-text-secondary);
  line-height: 1.55;
}

body[data-title-key="chat.title"] :is(.sites-create__box, .sites-card, .sites-preview) {
  border-color: var(--qw-panel-border);
  box-shadow: var(--qw-panel-shadow);
}

body[data-title-key="chat.title"] .sites-create__box {
  border-radius: 15px;
  background: color-mix(in srgb, var(--qw-sidebar) 58%, var(--qw-surface));
  padding: 16px;
}

body[data-title-key="chat.title"] .sites-textarea {
  border-color: var(--qw-panel-border);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.025);
}

body[data-title-key="chat.title"] .sites-textarea:focus {
  border-color: var(--qw-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qw-accent) 12%, transparent);
}

body[data-title-key="chat.title"] .sites-template-chip { border-color: var(--qw-panel-divider); color: var(--qw-text-secondary); }
body[data-title-key="chat.title"] .sites-template-chip:hover { border-color: var(--qw-panel-border); background: var(--qw-hover); color: var(--qw-text); }

body[data-title-key="chat.title"] .site-status-badge {
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--qw-panel-divider);
  border-radius: 5px;
  background: color-mix(in srgb, var(--qw-text) 3%, transparent);
  font-weight: 500;
}

body[data-title-key="chat.title"] .site-status-badge::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

body[data-title-key="chat.title"] .site-status-badge--published { border-color: color-mix(in srgb, #16a34a 24%, transparent); background: color-mix(in srgb, #16a34a 6%, transparent); color: color-mix(in srgb, #16a34a 72%, var(--qw-text)); }
body[data-title-key="chat.title"] .site-status-badge--saved { border-color: color-mix(in srgb, var(--qw-accent) 22%, transparent); background: color-mix(in srgb, var(--qw-accent) 5%, transparent); color: color-mix(in srgb, var(--qw-accent) 68%, var(--qw-text)); }
body[data-title-key="chat.title"] .site-status-badge--paused { border-color: color-mix(in srgb, #d97706 24%, transparent); background: color-mix(in srgb, #d97706 6%, transparent); color: color-mix(in srgb, #d97706 72%, var(--qw-text)); }
body[data-title-key="chat.title"] :is(.site-status-badge--removed, .site-status-badge--deleted) { border-color: color-mix(in srgb, #dc2626 22%, transparent); background: color-mix(in srgb, #dc2626 5%, transparent); color: color-mix(in srgb, #dc2626 68%, var(--qw-text)); }

@media (max-width: 900px) {
  body[data-title-key="chat.title"] .tasks-detail,
  body[data-title-key="chat.title"] .skills-pane--split #skills-detail-view .feature-pane__body { padding: 22px 20px 30px; }
}