@keyframes pulse-opacity {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* StatusBar */
.bar {
  height: var(--status-height);
  min-height: var(--status-height);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--font-sm);
  gap: 8px;
}

.section {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
  overflow: visible;
}

.githubStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.info {
  color: var(--fg-secondary);
  flex: 1 1 0;
  min-width: 60px;
  overflow: hidden;
  transition: color 600ms ease-out;
}

.infoPulse {
  color: var(--accent);
  transition: color 600ms ease-out;
}


/* Pendulum ticker for overflowing notifications */
.infoTicker {
  display: inline-block;
  white-space: nowrap;
}

.infoTickerActive {
  animation: pendulum var(--ticker-duration, 6s) ease-in-out infinite;
}

@keyframes pendulum {
  0%, 8% {
    transform: translateX(0);
  }
  45%, 55% {
    transform: translateX(calc(var(--overflow-px, 0) * -1px));
  }
  92%, 100% {
    transform: translateX(0);
  }
}

.cwd {
  color: var(--fg-secondary);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 10 auto;
}

.cwd:hover {
  color: var(--fg-secondary);
  background: var(--bg-tertiary);
}

.cwdRoot {
  opacity: 0.5;
}

.cwdSub {
  color: var(--fg-primary);
}

.agentBadge {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.agentUsage {
  color: var(--fg-secondary);
}

.agentUsageWarning {
  color: #dcdcaa;
}

.agentUsageCritical {
  color: var(--error);
  animation: pulse-opacity 2s ease-in-out infinite;
}

.agentRateLimited {
  color: #f44747;
  animation: pulse-opacity 2s ease-in-out infinite;
}

.toggleBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

.tickerMessage {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 60px;
}

.tickerClickable {
  cursor: pointer;
}

.tickerClickable:hover {
  color: var(--fg-secondary);
  background: var(--bg-tertiary);
}

.tickerWarning {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.tickerIcon {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  vertical-align: middle;
}

.tickerIcon svg {
  width: 12px;
  height: 12px;
}

.tickerLabel {
  color: var(--fg-secondary);
  font-weight: 600;
}

.tickerSep {
  color: var(--fg-muted);
}

.tickerText {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickerAttention {
  color: #dcdcaa;
}

.tickerBadge {
  margin-left: 6px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--fg-secondary);
  font-size: var(--font-2xs);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.tickerBadge:hover {
  background: var(--bg-highlight);
  color: var(--fg-secondary);
}

/* Ticker popover (right-click) */
.tickerOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.tickerPopover {
  position: fixed;
  bottom: calc(var(--status-height) + 8px);
  right: 12px;
  width: 340px;
  max-height: 300px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-bottom-anchor);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tickerPopoverHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.tickerPopoverClose {
  background: none;
  border: none;
  color: var(--fg-secondary);
  font-size: var(--font-lg);
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.tickerPopoverClose:hover {
  background: var(--bg-highlight);
  color: var(--fg-primary);
}

.tickerPopoverList {
  overflow-y: auto;
  padding: 4px;
}

.tickerPopoverRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--fg-muted);
}

.tickerPopoverRowClickable {
  cursor: pointer;
}

.tickerPopoverRowClickable:hover {
  background: var(--bg-highlight);
  color: var(--fg-primary);
}

.tickerPopoverRowUrgent {
  color: #ffd700;
}

.tickerPopoverLabel {
  font-weight: 600;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.tickerPopoverText {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tickerPopoverUrgentBadge {
  font-size: var(--font-2xs);
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  flex-shrink: 0;
}

.tickerPopoverEmpty {
  padding: 12px;
  text-align: center;
  color: var(--fg-muted);
  font-size: var(--font-sm);
}

/* Info balloon (click on truncated status info) */
.infoBalloonOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.infoBalloon {
  position: fixed;
  bottom: calc(var(--status-height) + 8px);
  left: 12px;
  max-width: 480px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-bottom-anchor);
  color: var(--fg-secondary);
  font-size: var(--font-sm);
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 1001;
}

.updateBadge {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 15%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.updateBadge:hover {
  background: rgba(78, 201, 176, 0.3);
}

.downloading {
  cursor: default;
  animation: pulse-opacity 2s ease-in-out infinite;
}

.toggleBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  overflow: visible;
}

.toggleBtn:focus-visible {
  outline: none;
}

.toggleBtn:hover {
  background: var(--bg-highlight);
  border-color: var(--accent);
  color: var(--fg-primary);
}

.micIcon {
  vertical-align: middle;
}

.micRecording {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
  animation: mic-pulse 1s ease-in-out infinite;
}

.micLoading {
  animation: mic-loading-pulse 0.8s ease-in-out infinite;
  cursor: wait !important;
  color: var(--warning, #e5c07b) !important;
}

.micProcessing {
  opacity: 0.6;
  cursor: wait !important;
}

@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes mic-loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .micRecording,
  .micLoading {
    animation: none;
  }
}
