/* ZIBADIS AI OS · Global response indicator v0.8.4
   Uniform processing bar for all app response states. */

.z-response-indicator{
  position:fixed;
  z-index:2147482100;
  top:64px;
  left:74px;
  right:18px;
  display:flex;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(-18px) scale(.985);
  transition:opacity .22s ease, transform .22s ease;
}

.z-response-indicator.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}

.z-response-indicator.is-done .zri-card{
  border-color:rgba(47,132,88,.36);
}

.z-response-indicator.is-error .zri-card{
  border-color:rgba(170,59,47,.36);
}

.zri-card{
  position:relative;
  width:min(720px, calc(100vw - 120px));
  min-height:46px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  row-gap:9px;
  column-gap:12px;
  padding:10px 14px 11px 12px;
  overflow:hidden;
  color:rgba(24,24,21,.88);
  background:linear-gradient(180deg, rgba(250,248,241,.96), rgba(242,238,226,.92));
  border:1px solid rgba(37,35,29,.14);
  box-shadow:0 16px 45px rgba(24,20,12,.10), 0 2px 10px rgba(24,20,12,.06);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}

.zri-left{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.zri-hourglass{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  border:1px solid rgba(26,26,22,.16);
  background:rgba(255,255,255,.48);
  color:rgba(35,31,24,.86);
  animation:zri-hourglass 1.35s ease-in-out infinite;
}

.z-response-indicator.is-done .zri-hourglass{animation:none;}
.z-response-indicator.is-error .zri-hourglass{animation:none;}

.zri-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.zri-title-row{
  display:flex;
  align-items:baseline;
  gap:5px;
  min-width:0;
}

.zri-title{
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(31,30,26,.88);
}

.zri-dots{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-width:20px;
}

.zri-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  display:block;
  background:rgba(31,30,26,.58);
  animation:zri-dot 1s ease-in-out infinite;
}

.zri-dots i:nth-child(2){animation-delay:.14s;}
.zri-dots i:nth-child(3){animation-delay:.28s;}

.zri-subtitle{
  font-size:11px;
  letter-spacing:.035em;
  color:rgba(68,65,55,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zri-time{
  min-width:66px;
  text-align:right;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(34,32,27,.72);
}

.zri-fullbar-track{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  height:5px;
  border-radius:3px;
  overflow:hidden;
  background:rgba(29,28,24,.08);
}

.zri-fullbar-fill{
  display:block;
  width:var(--zri-progress, 0%);
  height:100%;
  background:linear-gradient(90deg, rgba(44,129,139,.78), rgba(198,154,65,.82));
  box-shadow:0 0 16px rgba(44,129,139,.18);
  transition:width .18s ease;
}

.zri-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  background:linear-gradient(110deg, transparent 0%, transparent 34%, rgba(255,255,255,.44) 48%, transparent 62%, transparent 100%);
  transform:translateX(-120%);
  animation:zri-sheen 2.4s ease-in-out infinite;
}

.z-response-indicator.is-done .zri-fullbar-fill{
  background:linear-gradient(90deg, rgba(47,132,88,.78), rgba(198,154,65,.76));
}

.z-response-indicator.is-error .zri-fullbar-fill{
  background:linear-gradient(90deg, rgba(170,59,47,.78), rgba(198,154,65,.64));
}

@keyframes zri-hourglass{
  0%, 42%{transform:rotate(0deg);}
  58%, 100%{transform:rotate(180deg);}
}

@keyframes zri-dot{
  0%, 80%, 100%{transform:translateY(0); opacity:.34;}
  36%{transform:translateY(-3px); opacity:1;}
}

@keyframes zri-sheen{
  0%{transform:translateX(-120%);}
  44%, 100%{transform:translateX(120%);}
}

.zri-time-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:66px;
}

.zri-percent{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(44,129,139,.85);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.z-response-indicator.is-done .zri-percent{color:rgba(47,132,88,.85);}
.z-response-indicator.is-error .zri-percent{color:rgba(170,59,47,.85);}

@media (max-width: 760px){
  .z-response-indicator{
    top:58px;
    left:10px;
    right:10px;
  }
  .zri-card{
    width:100%;
    grid-template-columns:auto 1fr auto;
  }
  .zri-subtitle{max-width:58vw;}
}

/* Intentionally does not honor prefers-reduced-motion: this indicator is the
   user's only cue that a response is in flight, so it must always animate
   (explicit product decision, 2026-07-18). */