/* Global activity state (see activity_indicator.js): <html data-app-state> */

/* Indeterminate bar at the top of the window while working or starting */
#app-activity-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100001;
  overflow: hidden;
  display: none;
  pointer-events: none;
}
#app-activity-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: #fd971f;
  animation: app-activity-slide 1.1s ease-in-out infinite;
}
@keyframes app-activity-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}
html[data-app-state='working'] #app-activity-bar,
html[data-app-state='starting'] #app-activity-bar {
  display: block;
}

/* Status pill, bottom-left (error toasts sit bottom-right) */
#app-activity-pill {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99997;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 12px;
  background: #1a1a1a;
  border: 1px solid #a6e22e;
  color: #a6e22e;
  pointer-events: none;
}
html[data-app-state='working'] #app-activity-pill {
  border-color: #fd971f;
  color: #fd971f;
  animation: pulse 1.5s ease-in-out infinite;
}
html[data-app-state='starting'] #app-activity-pill {
  display: none;
}

/* Blocking overlay until startup is done */
#app-startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.75);
  cursor: progress;
}
html[data-app-state='starting'] #app-startup-overlay {
  display: flex;
}
.app-startup-box {
  text-align: center;
  color: #e5e5e5;
}
.app-startup-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.app-startup-text {
  font-size: 16px;
  color: #fd971f;
  animation: pulse 1.5s ease-in-out infinite;
}