/* ServiceChannel AI freezer block — brand-sampled palette
   navy #061C4C (primary), cyan #00BFF0 (accent), ice #EAF1FA (panel) */
:root {
  --sc-navy: #061C4C;
  --sc-navy-2: #0c2a6e;
  --sc-cyan: #00BFF0;
  --sc-ice: #EAF1FA;
  --sc-ink: #11203b;
  --sc-muted: #6b7794;
  --sc-line: #dce4f1;
  --sc-ok: #1ea672;
  --sc-warn: #e2533b;
  --sc-radius: 10px;
  --sc-font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; background: #f3f6fc; }

.sc-block {
  font-family: var(--sc-font);
  color: var(--sc-ink);
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 14px;
  overflow: hidden;
  max-width: 1040px;
  margin: 24px auto;
  box-shadow: 0 18px 50px rgba(6, 28, 76, .12);
}
/* embedded inside the /ai/ site: flush, no outer margin/shadow */
.sc-block--embed { margin: 0; border: none; border-radius: 0; box-shadow: none; max-width: none; }

/* ---- top bar ---- */
.sc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sc-navy); color: #fff; padding: 14px 22px;
}
.sc-brand { display: flex; align-items: center; gap: 8px; }
.sc-logo { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.sc-ai-badge {
  background: var(--sc-cyan); color: var(--sc-navy); font-weight: 800;
  font-size: 12px; padding: 2px 7px; border-radius: 5px;
}
.sc-context { font-size: 13px; color: #b9c6e4; }
.sc-context strong { color: #fff; }

/* ---- layout ---- */
.sc-layout { display: grid; grid-template-columns: 1fr 300px; min-height: 460px; }
.sc-block--embed .sc-layout { grid-template-columns: 1fr; min-height: 420px; }
.sc-stage { padding: 26px 28px; }
@media (max-width: 820px) { .sc-layout { grid-template-columns: 1fr; } .sc-agent { border-left: none; border-top: 1px solid var(--sc-line); } }

/* ---- step header ---- */
.sc-step-rail { display: flex; gap: 6px; margin-bottom: 20px; }
.sc-step-pip { flex: 1; height: 4px; border-radius: 3px; background: var(--sc-line); }
.sc-step-pip.done { background: var(--sc-cyan); }
.sc-step-pip.active { background: var(--sc-navy); }

.sc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-cyan); }
.sc-h { font-size: 23px; font-weight: 700; margin: 4px 0 6px; letter-spacing: -.01em; }
.sc-lede { color: var(--sc-muted); font-size: 14.5px; margin: 0 0 18px; max-width: 56ch; }

/* ---- cards ---- */
.sc-card { border: 1px solid var(--sc-line); border-radius: var(--sc-radius); padding: 16px 18px; background: #fff; }
.sc-card + .sc-card { margin-top: 12px; }

/* alert tile */
.sc-alert {
  border: 1px solid #f4c9bf; background: #fff6f3; border-left: 4px solid var(--sc-warn);
  display: flex; gap: 14px; align-items: flex-start;
}
.sc-alert .sc-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--sc-warn); margin-top: 4px;
  box-shadow: 0 0 0 0 rgba(226,83,59,.5); animation: sc-pulse 1.8s infinite;
}
@keyframes sc-pulse { 0%{box-shadow:0 0 0 0 rgba(226,83,59,.5)} 70%{box-shadow:0 0 0 10px rgba(226,83,59,0)} 100%{box-shadow:0 0 0 0 rgba(226,83,59,0)} }
.sc-alert h4 { margin: 0 0 3px; font-size: 15.5px; }
.sc-alert p { margin: 0; font-size: 13.5px; color: var(--sc-muted); }
.sc-alert .sc-meta { margin-top: 8px; font-size: 12.5px; color: var(--sc-warn); font-weight: 600; }

/* key-value rows */
.sc-kv { display: grid; grid-template-columns: 132px 1fr; gap: 6px 12px; font-size: 14px; }
.sc-kv dt { color: var(--sc-muted); }
.sc-kv dd { margin: 0; font-weight: 600; }
.sc-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.sc-tag.high { background: #fde7e3; color: var(--sc-warn); }
.sc-tag.ai { background: var(--sc-ice); color: var(--sc-navy-2); }

/* provider list */
.sc-provider { display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sc-provider:hover { border-color: var(--sc-cyan); }
.sc-provider.sel { border-color: var(--sc-navy); box-shadow: 0 0 0 2px var(--sc-navy) inset; }
.sc-score { font-weight: 800; font-size: 18px; color: var(--sc-navy); width: 46px; text-align: center; }
.sc-provider .sc-pmeta { flex: 1; }
.sc-provider .sc-pname { font-weight: 700; font-size: 14.5px; }
.sc-provider .sc-psub { font-size: 12.5px; color: var(--sc-muted); }
.sc-rec { font-size: 11px; font-weight: 800; color: var(--sc-ok); }

/* schedule windows */
.sc-windows { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-window { border: 1px solid var(--sc-line); border-radius: 8px; padding: 10px 14px; cursor: pointer; font-size: 13.5px; }
.sc-window:hover { border-color: var(--sc-cyan); }
.sc-window.sel { background: var(--sc-navy); color: #fff; border-color: var(--sc-navy); }

/* impact stats */
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sc-stat { background: var(--sc-ice); border-radius: var(--sc-radius); padding: 16px; text-align: center; }
.sc-stat .sc-num { font-size: 26px; font-weight: 800; color: var(--sc-navy); }
.sc-stat .sc-lbl { font-size: 12px; color: var(--sc-muted); margin-top: 2px; }

/* confirmation */
.sc-confirm { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--sc-ok); background: #f1fbf6; border-color: #c6ecd8; }
.sc-check { width: 26px; height: 26px; border-radius: 50%; background: var(--sc-ok); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }

/* buttons */
.sc-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sc-btn {
  font: inherit; font-weight: 700; font-size: 14px; border-radius: 4px; padding: 11px 18px;
  cursor: pointer; border: 1px solid var(--sc-navy); background: var(--sc-navy); color: #fff;
  transition: filter .15s, transform .05s;
}
.sc-btn:hover { filter: brightness(1.12); }
.sc-btn:active { transform: translateY(1px); }
.sc-btn.ghost { background: #fff; color: var(--sc-navy); }
.sc-btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-hint { font-size: 12.5px; color: var(--sc-muted); }

/* ---- agent panel (standalone block/ only) ---- */
.sc-agent { background: #f7f9fd; border-left: 1px solid var(--sc-line); padding: 16px 16px 18px; font-size: 13px; }
.sc-agent-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sc-navy); }
.sc-agent-proto { background: var(--sc-navy); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; letter-spacing: .04em; }
.sc-dot { width: 9px; height: 9px; border-radius: 50%; background: #c2ccde; flex: none; }
.sc-dot.live { background: var(--sc-ok); box-shadow: 0 0 0 3px rgba(30,166,114,.18); }
.sc-agent-status { font-size: 12px; color: var(--sc-muted); margin: 8px 0 14px; }
.sc-agent-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); margin: 12px 0 6px; }
.sc-tool-list { list-style: none; margin: 0; padding: 0; }
.sc-tool-list li { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; padding: 4px 8px; border-radius: 5px; background: #fff; border: 1px solid var(--sc-line); margin-bottom: 4px; color: var(--sc-navy-2); }
.sc-call-log { list-style: none; margin: 0; padding: 0; max-height: 168px; overflow: auto; }
.sc-call-log li { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; padding: 6px 8px; border-radius: 5px; margin-bottom: 4px; background: #fff; border: 1px solid var(--sc-line); }
.sc-call-log li.agent { border-left: 3px solid var(--sc-cyan); }
.sc-call-log li.ui { border-left: 3px solid var(--sc-line); }
.sc-call-log .sc-cl-name { font-weight: 700; color: var(--sc-navy); }
.sc-call-log .sc-cl-src { float: right; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-muted); }
.sc-call-log .sc-cl-args { color: var(--sc-muted); word-break: break-all; }
.sc-muted { color: var(--sc-muted); }