.ai12z-container-root {
  width: 100%;
  box-sizing: border-box;
}

.state-message {
  padding: 12px;
  border-radius: 8px;
  background: #f4f7fb;
  color: #1f2937;
  font-size: 14px;
}

.state-message.error {
  background: #fdecec;
  color: #991b1b;
}

/* Spinner skeleton */
.widget-spinner {
  width: 100%;
  border-radius: 6px;
}

.widget-spinner-pulse {
  display: flex;
  animation: widget-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  gap: 16px;
}

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

.widget-spinner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.widget-spinner-bar {
  height: 16px;
  border-radius: 4px;
  background: #e5e7eb;
}

.widget-spinner-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget-spinner-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.widget-spinner-col-wide,
.widget-spinner-col-narrow {
  height: 16px;
  border-radius: 4px;
  background: #e5e7eb;
}
