/* =========================================================
   ZAR AI v2 — EMPTY / START STATE
   Owns only the truly-empty conversation home and its normal-path
   starter prompt buttons.
========================================================= */

.zar-v2-empty {
  width: min(100%, 980px);
  height: 100%;
  min-height: 280px;
  margin-inline: auto;
  padding: clamp(28px, 6vh, 72px) clamp(18px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zar-v2-space-4);
  color: var(--zar-v2-text-muted);
  text-align: center;
}

.zar-v2-empty--grouped .zar-v2-logo { width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); }
.zar-v2-empty h3 { color: var(--zar-v2-text-primary); font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.15; }
.zar-v2-empty p { max-width: 52ch; font-size: clamp(var(--zar-v2-font-size-sm), 1.2vw, var(--zar-v2-font-size-base)); }

.zar-v2-starters {
  width: min(100%, 380px);
  margin-top: var(--zar-v2-space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zar-v2-space-2);
}

.zar-v2-starter {
  min-height: 38px;
  padding: var(--zar-v2-space-2) var(--zar-v2-space-3);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--zar-v2-border-subtle);
  border-radius: var(--zar-v2-radius-pill);
  background: var(--zar-v2-bg-surface);
  color: var(--zar-v2-text-secondary);
  font-size: var(--zar-v2-font-size-xs);
  font-weight: var(--zar-v2-font-weight-medium);
  text-align: left;
  transition: border-color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard), color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard), background var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}

.zar-v2-starter:hover,
.zar-v2-starter:focus-visible {
  border-color: var(--zar-v2-border-strong);
  background: var(--zar-v2-accent-softer);
  color: var(--zar-v2-text-primary);
}

.zar-v2-starters--grouped {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zar-v2-space-4);
  text-align: left;
}

.zar-v2-starter-group { min-width: 0; display: flex; flex-direction: column; gap: var(--zar-v2-space-2); }
.zar-v2-starter-group__label { color: var(--zar-v2-text-muted); font-size: var(--zar-v2-font-size-xs); font-weight: var(--zar-v2-font-weight-bold); letter-spacing: .06em; text-transform: uppercase; }
.zar-v2-starters--grouped .zar-v2-starter { width: 100%; min-width: 0; overflow-wrap: anywhere; }

.zar-v2-compact .zar-v2-empty { min-height: 220px; padding: var(--zar-v2-space-5) var(--zar-v2-space-3); gap: var(--zar-v2-space-3); }
.zar-v2-compact .zar-v2-empty h3 { font-size: var(--zar-v2-font-size-md); }

@media (max-width: 860px) {
  .zar-v2-starters--grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .zar-v2-empty { width: 100%; min-width: 0; padding-inline: var(--zar-v2-space-3); }
  .zar-v2-starters--grouped { max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: var(--zar-v2-space-4); }
  .zar-v2-starter { min-height: 44px; white-space: normal; }
}