/* Agent Chat V4 — quiet charcoal workspace + softly colored skill library. */
:root {
  --agent-v4-bg: var(--sv-color-canvas-raised);
  --agent-v4-side: var(--sv-color-surface-subtle);
  --agent-v4-raised: var(--sv-color-surface-elevated);
  --agent-v4-raised-2: var(--sv-color-surface-strong);
  --agent-v4-line: var(--sv-color-border-soft);
  --agent-v4-text: var(--sv-color-text);
  --agent-v4-muted: var(--sv-color-text-muted);
  --agent-v4-accent: var(--sv-color-brand);
}

html[data-app-rail="agent"] body {
  color: var(--agent-v4-text);
  background: var(--sv-color-canvas);
}

html[data-app-rail="agent"] .agent-shell {
  grid-template-columns: 264px minmax(0, 1fr) 320px;
  gap: 0;
  padding: 0;
  background: var(--agent-v4-bg);
}

html[data-app-rail="agent"] .agent-sessions,
html[data-app-rail="agent"] .agent-main {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-app-rail="agent"] .agent-sessions {
  border-right: 1px solid var(--agent-v4-line);
  background: var(--agent-v4-side);
}

html[data-app-rail="agent"] .agent-main {
  background: var(--agent-v4-bg);
}

html[data-app-rail="agent"] .agent-sidebar {
  gap: 0;
  border-left: 1px solid var(--agent-v4-line);
  background: var(--agent-v4-side);
}

html[data-app-rail="agent"] .agent-sessions-head,
html[data-app-rail="agent"] .agent-top {
  border-bottom-color: var(--agent-v4-line);
}

html[data-app-rail="agent"] .agent-sessions-head {
  padding: 19px 16px 14px;
}

html[data-app-rail="agent"] .agent-sessions-head h2 {
  font-size: .95rem;
  letter-spacing: -.02em;
}

html[data-app-rail="agent"] .agent-sessions-new {
  border-radius: 7px;
  color: var(--sv-color-on-brand);
  background: var(--agent-v4-accent);
}

html[data-app-rail="agent"] .agent-sessions-new:hover {
  color: var(--sv-color-on-brand);
  background: var(--sv-color-brand);
}

html[data-app-rail="agent"] .agent-sessions-list {
  gap: 2px;
  padding: 8px 10px;
  scrollbar-width: none;
}

html[data-app-rail="agent"] .agent-sessions-list::-webkit-scrollbar { display: none; }

html[data-app-rail="agent"] .agent-session-item {
  border: 0;
  border-radius: 8px;
}

html[data-app-rail="agent"] .agent-session-item.active {
  border: 0;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

html[data-app-rail="agent"] .agent-sidebar-section + .agent-sidebar-section {
  border-top-color: var(--agent-v4-line);
}

html[data-app-rail="agent"] .agent-butler-group {
  border: 0;
  border-radius: 8px;
  background: transparent;
}

html[data-app-rail="agent"] .agent-butler-group.is-active {
  border: 0;
  background: rgba(255, 255, 255, .04);
}

html[data-app-rail="agent"] .agent-top {
  padding: 24px 20px 17px;
}

html[data-app-rail="agent"] .agent-top h1 {
  font-size: 1.32rem;
  font-weight: 760;
  letter-spacing: -.035em;
}

html[data-app-rail="agent"] .agent-top-sub {
  color: var(--agent-v4-muted);
}

html[data-app-rail="agent"] .agent-top-tools select,
html[data-app-rail="agent"] .agent-icon-btn {
  border-color: transparent;
  border-radius: 8px;
  background: var(--agent-v4-raised);
}

html[data-app-rail="agent"] .agent-mode-switch {
  border-color: transparent;
  background: var(--agent-v4-raised);
}

html[data-app-rail="agent"] .agent-mode-switch span.active,
html[data-app-rail="agent"] .agent-mode-switch a:hover {
  color: var(--sv-color-on-brand);
  background: var(--agent-v4-accent);
}

html[data-app-rail="agent"] .agent-compose-wrap {
  background: var(--agent-v4-bg);
}

html[data-app-rail="agent"] .agent-compose-box {
  border-color: var(--agent-v4-line) !important;
  border-radius: 12px;
  background: var(--sv-color-surface);
}

html[data-app-rail="agent"] .agent-compose-box:focus-within {
  border-color: var(--sv-color-border-strong) !important;
}

html[data-app-rail="agent"] .agent-quick-chip {
  border-color: transparent;
  background: rgba(255, 255, 255, .045);
}

html[data-app-rail="agent"] .agent-quick-chip:hover {
  border-color: transparent;
  color: var(--agent-v4-text);
  background: rgba(var(--sv-brand-rgb), .08);
}

html[data-app-rail="agent"] .agent-send-btn {
  color: var(--sv-color-on-brand) !important;
  background: var(--agent-v4-accent) !important;
  box-shadow: none !important;
}

html[data-app-rail="agent"] .agent-side-card,
html[data-app-rail="agent"] .agent-side-card.is-skill-lit {
  margin: 0;
  padding: 16px 14px 17px;
  border: 0 !important;
  border-bottom: 1px solid var(--agent-v4-line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

html[data-app-rail="agent"] .agent-side-head h2 {
  color: var(--sv-color-text);
  font-size: .72rem;
  font-weight: 650;
}

html[data-app-rail="agent"] .agent-side-card.is-skill-lit .agent-side-head h2,
html[data-app-rail="agent"] .agent-side-head button:hover {
  color: var(--agent-v4-accent);
}

html[data-app-rail="agent"] .agent-skill-icon {
  border: 0;
  border-radius: 10px;
  background: var(--agent-v4-raised-2);
}

html[data-app-rail="agent"] .agent-side-card.is-skill-lit .agent-skill-icon {
  border: 0;
  color: var(--agent-v4-accent);
  background: rgba(var(--sv-brand-rgb), .08);
}

html[data-app-rail="agent"] .agent-side-item,
html[data-app-rail="agent"] .agent-rec-item {
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
}

html[data-app-rail="agent"] .agent-rec-item:hover {
  border: 0;
  background: rgba(var(--sv-brand-rgb), .055);
}

html[data-app-rail="agent"] .agent-rec-add {
  border: 0;
  color: var(--sv-color-text-muted);
  background: rgba(255, 255, 255, .06);
}

/* Skill picker: color identifies domains; lime identifies selection. */
html[data-app-rail="agent"] .agent-skill-pick-dialog {
  width: min(1060px, calc(100vw - 36px));
  max-height: min(88dvh, 820px);
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: var(--agent-v4-text);
  background: var(--sv-color-surface);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .74);
}

html[data-app-rail="agent"] .agent-skill-pick-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(8px);
}

html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-dialog-head {
  align-items: center;
  padding: 23px 24px 17px;
  border-bottom: 0;
}

html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-dialog-head h2 {
  color: var(--agent-v4-text);
  font-size: 1.28rem;
  font-weight: 760;
  letter-spacing: -.035em;
}

html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-dialog-head p {
  color: var(--agent-v4-muted);
  font-size: .76rem;
}

html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--sv-color-text);
  background: var(--agent-v4-raised-2);
}

html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-close:hover {
  color: var(--sv-color-text);
  background: var(--sv-color-surface-hover);
}

html[data-app-rail="agent"] .agent-skill-pick-toolbar {
  gap: 16px;
  padding: 4px 24px 10px;
  border-bottom: 0;
  background: var(--sv-color-surface);
}

html[data-app-rail="agent"] .agent-skill-pick-search input {
  height: 42px;
  padding-inline: 14px;
  border: 0;
  border-radius: 8px;
  color: var(--agent-v4-text);
  background: var(--agent-v4-raised-2);
  box-shadow: inset 0 0 0 1px transparent;
}

html[data-app-rail="agent"] .agent-skill-pick-search input:focus {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

html[data-app-rail="agent"] .agent-skill-pick-toolbar .agent-case-status {
  color: var(--sv-color-text-faint);
  font-size: .72rem;
}

html[data-app-rail="agent"] .agent-skill-pick-types {
  gap: 7px;
  padding: 5px 24px 15px;
  border-bottom: 1px solid var(--agent-v4-line);
  background: var(--sv-color-surface);
}

html[data-app-rail="agent"] .agent-skill-pick-type {
  height: 29px;
  padding-inline: 11px;
  border: 0;
  border-radius: 7px;
  color: var(--sv-color-text-muted);
  background: transparent;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

html[data-app-rail="agent"] .agent-skill-pick-type:hover {
  color: var(--agent-v4-text);
  background: rgba(255, 255, 255, .05);
}

html[data-app-rail="agent"] .agent-skill-pick-type:active { transform: scale(.98); }

html[data-app-rail="agent"] .agent-skill-pick-type.active {
  color: var(--sv-color-on-brand);
  background: var(--agent-v4-accent);
}

html[data-app-rail="agent"] .agent-skill-pick-type.active span { color: rgba(17, 21, 0, .55); }

html[data-app-rail="agent"] .agent-skill-pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  max-height: min(61dvh, 620px);
  padding: 18px 24px 24px;
  background: var(--sv-color-canvas-raised);
  scrollbar-color: var(--sv-color-text-faint) transparent;
}

html[data-app-rail="agent"] .agent-skill-pick-card {
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 13px;
  background: var(--agent-v4-raised);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}

html[data-app-rail="agent"] .agent-skill-pick-card:hover {
  border: 0;
  background: var(--agent-v4-raised);
  box-shadow: 0 15px 34px rgba(0, 0, 0, .38);
  transform: translateY(-3px);
}

html[data-app-rail="agent"] .agent-skill-pick-card:active { transform: translateY(-1px) scale(.99); }

html[data-app-rail="agent"] .agent-skill-pick-card.is-active {
  border: 0;
  background: var(--sv-color-surface-elevated);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 14px 30px rgba(0, 0, 0, .36);
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover {
  flex-basis: 58%;
  border: 0;
  background: #d9e6c4;
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-document { background: #d8d1e7; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-cloud { background: #c9dde6; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-post { background: #ead3c9; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-video { background: #eadcae; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-workflow { background: #cddfd7; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-inbox { background: #d8e5c9; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-voice { background: #e7cfc4; }
html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-generic { background: #d7dfcf; }

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover.has-image { background: var(--sv-color-surface-elevated); }

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-label {
  color: rgba(20, 25, 21, .56);
  font-size: .56rem;
  font-weight: 700;
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover.has-image .skill-cover-label {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--sv-color-text);
  background: rgba(6, 9, 7, .54);
  backdrop-filter: blur(5px);
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-emoji {
  color: #1a1a1a;
  filter: grayscale(.25) saturate(.7);
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-art { opacity: 1; }

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-art :is(.art-sheet, .art-tray, .art-cloud, .art-frame, .art-post, .art-block, .art-line, .art-node) {
  background: var(--sv-color-surface-elevated);
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-art .art-tray {
  background: rgba(26, 26, 26, .7);
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-art .art-wave {
  box-shadow: 0 -7px 0 -4px #1a1a1a, 0 0 0 1px #1a1a1a, 0 7px 0 -4px #1a1a1a;
}

html[data-app-rail="agent"] .agent-skill-pick-card .skill-cover-art .art-node:nth-child(5) {
  background: #a9d000;
}

html[data-app-rail="agent"] .agent-skill-pick-card-body {
  min-height: 78px;
  gap: 3px;
  padding: 10px 11px 11px;
  background: var(--agent-v4-raised);
}

html[data-app-rail="agent"] .agent-skill-pick-card-body strong {
  color: var(--sv-color-text);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.4;
}

html[data-app-rail="agent"] .agent-skill-pick-card-body small {
  color: var(--sv-color-text-faint);
  font-size: .56rem;
}

html[data-app-rail="agent"] .agent-skill-pick-card-meta {
  gap: 8px;
  margin-top: 5px;
}

html[data-app-rail="agent"] .agent-skill-pick-card-meta span {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--sv-color-text-muted);
  background: transparent;
  font-size: .53rem;
}

html[data-app-rail="agent"] .agent-skill-pick-card-meta span + span::before {
  content: "·";
  position: absolute;
  left: -6px;
  color: var(--sv-color-text-faint);
}

html[data-app-rail="agent"] :is(.agent-skill-pick-card, .agent-skill-pick-type, .agent-case-close):focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  html[data-app-rail="agent"] .agent-shell { grid-template-columns: 238px minmax(0, 1fr) 284px; }
}

@media (max-width: 900px) {
  html[data-app-rail="agent"] .agent-shell { grid-template-columns: 220px minmax(0, 1fr); }
  html[data-app-rail="agent"] .agent-sidebar { grid-column: 1 / -1; border-top: 1px solid var(--agent-v4-line); border-left: 0; }
}

@media (max-width: 660px) {
  html[data-app-rail="agent"] .agent-shell { grid-template-columns: 1fr; }
  html[data-app-rail="agent"] .agent-sessions { border-right: 0; border-bottom: 1px solid var(--agent-v4-line); }
  html[data-app-rail="agent"] .agent-skill-pick-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  html[data-app-rail="agent"] .agent-skill-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
  html[data-app-rail="agent"] .agent-skill-pick-dialog .agent-case-dialog-head,
  html[data-app-rail="agent"] .agent-skill-pick-toolbar,
  html[data-app-rail="agent"] .agent-skill-pick-types { padding-inline: 16px; }
}

/* Light-mode semantic adapter. */
/* Light: side rails slightly quieter than the thread; raised cards use elevated surfaces. */
html[data-theme="light"] {
  --agent-v4-side: var(--sv-color-canvas-raised);
  --agent-v4-raised: var(--sv-color-surface-elevated);
  --agent-v4-raised-2: var(--sv-color-surface-subtle);
}
html[data-theme="light"] .agent-send { color: var(--sv-color-on-brand); }