/* Shared agent-panel header — standalone copy for portals that do NOT load
   portal-shell.css (today: automations). CW #597464.

   portal-shell.css is the source of truth for .cinti-avatar-header; this file
   repeats ONLY the header rules, every one scoped under .cinti-adopted-header,
   so it cannot restyle anything else on the page. (Loading all of
   portal-shell.css there would not be safe: it redefines the --cinti-* tokens
   at :root and makes every table header sticky.) Keep the values in step with
   portal-shell.css "Canonical avatar header" + "Shared header on adopted". */
.cinti-adopted-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--panel-border, rgba(255, 255, 255, .08));
}
.cinti-adopted-header .cinti-avatar-orb {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 40% 40%, rgba(var(--accent-rgb, 38, 189, 214), .6), rgba(var(--accent-rgb, 38, 189, 214), .15) 55%, transparent 70%);
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 38, 189, 214), .3);
}
.cinti-adopted-header .cinti-hdr-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cinti-adopted-header .cinti-avatar-name,
.cinti-adopted-header .cinti-avatar-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cinti-adopted-header .cinti-avatar-name { font-size: 13px; font-weight: 600; color: var(--accent-text, var(--accent, #26bdd6)); }
.cinti-adopted-header .cinti-avatar-status { font-size: 9px; color: var(--dim, #8a93a6); }
.cinti-adopted-header .avatar-hdr-cluster { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.cinti-adopted-header .avatar-hdr-btn {
  background: none; border: none; color: var(--dim, #8a93a6); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; box-sizing: border-box; transition: color .2s;
}
.cinti-adopted-header .avatar-hdr-btn:hover { color: var(--accent, #26bdd6); }
.cinti-adopted-header .cinti-hdr-pill {
  background: rgba(var(--accent-rgb, 38, 189, 214), .12);
  border: 1px solid rgba(var(--accent-rgb, 38, 189, 214), .32);
  color: var(--accent-text, var(--accent, #26bdd6));
  font: 600 10px/1 Inter, system-ui, sans-serif;
  padding: 5px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; margin-right: 2px;
}
.cinti-adopted-header .cinti-hdr-pill:hover { background: rgba(var(--accent-rgb, 38, 189, 214), .2); }
.cinti-adopted-header .avatar-hdr-btn:focus-visible,
.cinti-adopted-header .cinti-hdr-pill:focus-visible { outline: 2px solid var(--accent, #26bdd6); outline-offset: 1px; }
html[data-theme="light"] .cinti-adopted-header .cinti-avatar-status,
html[data-theme="light"] .cinti-adopted-header .avatar-hdr-btn { color: var(--dim-text, #4a5263); }
html[data-theme="light"] .cinti-adopted-header .avatar-hdr-btn:hover { color: var(--accent-text, #0b5f6e); }
html[data-theme="light"] .cinti-adopted-header .cinti-hdr-pill { color: var(--accent-text, #0b5f6e); border-color: rgba(11, 95, 110, .4); background: rgba(11, 95, 110, .08); }