/*
 * Faithful HTML replica of the Agent Monitor menu bar panel (Sources/AgentMonitor/Panel).
 * 1 CSS px = 1 pt, so on a Retina screen the replica renders at the same physical size as the app.
 * Metrics are copied from the SwiftUI views; colors are the macOS 26 system colors.
 */

.am {
  --am-orange: #ff8d28;
  --am-green: #34c759;
  --am-blue: #0088ff;
  --am-gray: #8e8e93;
  --am-label: rgba(0, 0, 0, 0.85);
  --am-secondary: rgba(0, 0, 0, 0.5);
  --am-tertiary: rgba(0, 0, 0, 0.26);
  --am-fill-q: rgba(0, 0, 0, 0.05);
  --am-window-bg: rgba(250, 251, 253, 0.84);
  --am-window-border: rgba(0, 0, 0, 0.13);
  --am-window-hi: rgba(255, 255, 255, 0.85);
  --am-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 251, 253, 0.78));
  --am-glass-border: rgba(0, 0, 0, 0.09);
  --am-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --am-glass-hi: rgba(255, 255, 255, 0.95);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--am-label);
  letter-spacing: 0;
  line-height: 1.2;
  text-spacing-trim: space-all;
  text-align: left;
  user-select: none;
}

.am.dark,
.dark .am:not(.light) {
  --am-orange: #ffb44f;
  --am-green: #56e483;
  --am-blue: #36bdff;
  --am-gray: #98989d;
  --am-label: rgba(255, 255, 255, 0.92);
  --am-secondary: rgba(255, 255, 255, 0.55);
  --am-tertiary: rgba(255, 255, 255, 0.25);
  --am-fill-q: rgba(255, 255, 255, 0.075);
  --am-window-bg: rgba(52, 52, 54, 0.86);
  --am-window-border: rgba(0, 0, 0, 0.6);
  --am-window-hi: rgba(255, 255, 255, 0.2);
  --am-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.1));
  --am-glass-border: rgba(255, 255, 255, 0.12);
  --am-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
  --am-glass-hi: rgba(255, 255, 255, 0.18);
}

/* AppKit draws U+00B7 with the wider CJK glyph */
.am-mid {
  margin: 0 1.5px;
}

/* ---------- window ---------- */

.am-window {
  position: relative;
  width: 384px;
  box-sizing: border-box;
  border-radius: 18px;
  background: var(--am-window-bg);
  -webkit-backdrop-filter: blur(36px) saturate(1.8);
  backdrop-filter: blur(36px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px var(--am-window-border),
    inset 0 0 0 0.5px var(--am-window-hi),
    0 10px 30px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.am-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

/* ---------- glass controls ---------- */

.am-glass {
  position: relative;
  background: var(--am-glass-bg);
  box-shadow:
    0 0 0 0.5px var(--am-glass-border),
    inset 0 0.5px 0 var(--am-glass-hi),
    var(--am-glass-shadow);
}

/* ---------- header ---------- */

.am-header {
  display: flex;
  align-items: center;
  padding: 4px 6px 2px;
}

.am-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.am-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

.am-subtitle {
  font-size: 10px;
  line-height: 13px;
  color: var(--am-secondary);
}

.am-header-buttons {
  display: flex;
  gap: 8px;
}

.am-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--am-label);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.am-circle svg {
  width: 15px;
  height: 15px;
  display: block;
}

.am-circle.is-paused {
  color: var(--am-orange);
}

.am-circle.is-pressed {
  transform: scale(1.12);
}

/* ---------- filter bar ---------- */

.am-filters {
  display: flex;
  gap: 6px;
  padding: 0 2px 2px;
}

.am-cap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border-radius: 999px;
  color: var(--am-secondary);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
  --tint: var(--am-gray);
}

.am-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tint);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.am-cap.is-selected::after {
  opacity: 0.18;
}

.am-cap.is-selected {
  color: var(--am-label);
  font-weight: 600;
}

.am-cap.is-pressed {
  transform: scale(1.08);
}

.am-cap .am-dot {
  background: var(--tint);
}

.am-cap-count {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tint);
}

.am-cap-title {
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
}

.am-cap.is-disabled {
  color: var(--am-tertiary);
}

.am-cap.is-disabled .am-dot {
  background: var(--am-tertiary);
}

.am-cap.is-disabled .am-cap-count {
  color: var(--am-tertiary);
}

.t-waiting { --tint: var(--am-orange); }
.t-completed { --tint: var(--am-green); }
.t-running { --tint: var(--am-blue); }
.t-idle { --tint: var(--am-gray); }

.am-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--tint);
}

/* ---------- session list ---------- */

.am-list-clip {
  position: relative;
  overflow: hidden;
}

.am-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 1px;
}

.am-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 0;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--am-secondary);
}

.am-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.am-row.s-running {
  align-items: center;
  padding: 7px 8px;
}

.am-row.is-hover,
.am-idle-head.is-hover {
  background: var(--am-fill-q);
}

.am-icon {
  width: 30px;
  height: 30px;
  flex: none;
  position: relative;
}

.am-icon img {
  position: absolute;
  inset: -2px;
  width: 34px;
  height: 34px;
  display: block;
}

.am-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.am-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.am-row-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-idle .am-row-title {
  color: var(--am-secondary);
}

.am-time {
  flex: none;
  font-size: 11px;
  line-height: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--am-secondary);
}

.s-waiting .am-time {
  color: var(--am-orange);
  font-weight: 500;
}

.s-running .am-time {
  color: var(--am-blue);
}

.am-sub {
  font-size: 11px;
  line-height: 14px;
  color: var(--am-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-ask {
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--am-fill-q);
}

.am-ask-label {
  flex: none;
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 600;
  color: var(--am-orange);
}

.am-ask-detail {
  min-width: 0;
  font-size: 11.5px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-ask-detail.is-cmd {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.am-ask-detail .caret {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 1px;
  vertical-align: -2px;
  background: currentColor;
  animation: am-caret 1s steps(1) infinite;
}

@keyframes am-caret {
  50% { opacity: 0; }
}

.am-done,
.am-run {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}

.am-done svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--am-green);
}

.am-done span {
  font-size: 11.5px;
  line-height: 14px;
  color: var(--am-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-run span:last-child {
  font-size: 11px;
  line-height: 14px;
  color: var(--am-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PulsingDotView: PhaseAnimator toggling a ring between 1x/0.6 and 2.6x/0, 1.8s easeOut each way */
.am-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  flex: none;
}

.am-pulse::before,
.am-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.am-pulse::after {
  background: var(--am-blue);
}

.am-pulse::before {
  box-shadow: 0 0 0 1.5px var(--am-blue);
  animation: am-pulse 1.8s ease-out infinite alternate;
}

@keyframes am-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}

.am-idle-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--am-secondary);
  transition: background 0.15s ease;
}

.am-idle-head .am-dot {
  background: var(--am-gray);
}

.am-idle-head span:not(.am-dot) {
  flex: 1;
}

.am-idle-head svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}

.am-idle-head.is-open svg {
  transform: rotate(90deg);
}

/* ---------- bottom glass button ---------- */

.am-bottom {
  display: flex;
  justify-content: center;
  margin-top: -6px;
  padding: 4px 0 2px;
}

.am-bottom.is-leaving .am-big,
.am-bottom.is-entering .am-big {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(6px);
}

.am-big {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--am-label);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.am-big svg {
  width: 13px;
  height: 13px;
}

.am-big.is-pressed {
  transform: scale(1.06);
}

/* ---------- transitions used by the FLIP renderer ---------- */

.am-ghost {
  position: absolute;
  margin: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.am-enter {
  animation: am-enter 0.3s ease both;
}

@keyframes am-enter {
  from { opacity: 0; }
}

/* ---------- empty state ---------- */

.am-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  color: var(--am-secondary);
  font-size: 11px;
}

.am-empty b {
  font-size: 13px;
  color: var(--am-label);
}

/* ======================================================================
 * Menu bar status item (MenuBarIconRenderer) and notification banner
 * ====================================================================== */

.mb-item {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  color: currentColor;
  transition: background 0.15s ease;
}

.mb-item.is-active {
  background: rgba(255, 255, 255, 0.28);
}

.light-desk .mb-item.is-active {
  background: rgba(0, 0, 0, 0.12);
}

.mb-item svg {
  display: block;
  overflow: visible;
}

.mb-badge-pop {
  animation: mb-pop 0.45s cubic-bezier(0.34, 1.7, 0.64, 1);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes mb-pop {
  from { transform: scale(0.2); opacity: 0; }
}

.nt {
  width: 344px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 12px;
  border-radius: 22px;
  background: rgba(250, 251, 253, 0.78);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    inset 0 0.5px 0 0.5px rgba(255, 255, 255, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.14);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
}

.dark .nt {
  background: rgba(46, 46, 48, 0.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.5),
    inset 0 0.5px 0 0.5px rgba(255, 255, 255, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
}

.nt-app {
  width: 38px;
  height: 38px;
  flex: none;
}

.nt-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 16px;
}

.nt-text b {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nt-text div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nt-att {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 7px;
}