/* ============================================================
   Markaz Chat — brand motion kit
   Standalone, additive, namespaced with `bk-`. Safe to load
   alongside frontend/src/styles.css (no selector collisions).
   See public/brand/README.md for integration notes.
   ============================================================ */

:root {
  --bk-indigo: #4f46e5;
  --bk-indigo-deep: #1e1b4b;
  --bk-night: #0c1234;
  --bk-sky: #38bdf8;
  --bk-violet: #7c3aed;
  --bk-teal: #2dd4bf;
  --bk-blue: #60a5fa;
  --bk-lilac: #a78bfa;
  --bk-gold: #fbbf24;
  --bk-gold-soft: #fde68a;
  --bk-ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --bk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bk-dur: 0.22s;
}

/* ---- Logo entrance (apply to a wrapper around the logo img/svg) ---- */
.bk-logo-in {
  animation: bk-up 0.5s ease-out both;
}
.bk-logo-in--late {
  animation-delay: 0.15s;
}

/* ---- Idle float (wrap the sidebar/login logo for a calm live feel) ---- */
.bk-float {
  animation: bk-float 6s ease-in-out infinite;
}

/* ---- Orbit loader (CSS-only fallback; prefer /brand/loader.svg) ----
   Markup: <span class="bk-loader" role="status" aria-label="Loading"></span> */
.bk-loader {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}
.bk-loader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff7d6, #fcd34d 45%, #d97706);
}
.bk-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--bk-teal);
  border-right-color: var(--bk-blue);
  border-bottom-color: var(--bk-lilac);
  animation: bk-spin 1.1s linear infinite;
}

/* ---- Typing indicator ("bot is thinking") ----
   Markup:
   <span class="bk-typing" role="status" aria-label="Bot is typing">
     <i></i><i></i><i></i>
   </span> */
.bk-typing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 16px 16px 16px 5px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.18);
}
.bk-typing i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: bk-dot 1.2s ease-in-out infinite;
}
.bk-typing i:nth-child(1) { background: var(--bk-teal); }
.bk-typing i:nth-child(2) { background: var(--bk-blue); animation-delay: 0.18s; }
.bk-typing i:nth-child(3) { background: var(--bk-lilac); animation-delay: 0.36s; }
.bk-typing--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
}

/* ---- Interactive lift (cards, chips, connector tiles) ---- */
.bk-lift {
  transition: transform var(--bk-dur) var(--bk-ease-spring), box-shadow var(--bk-dur) var(--bk-ease), border-color var(--bk-dur) var(--bk-ease);
}
.bk-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px -6px rgba(79, 70, 229, 0.35);
}
.bk-lift:active {
  transform: translateY(-1px) scale(0.97);
}

/* ---- Gold pulse (notification dots, "AI is on" states) ---- */
.bk-pulse {
  animation: bk-breathe 2.2s ease-in-out infinite;
}

/* ---- Panel/tab entrance (matches admin .automation-panel timing) ---- */
.bk-panel-in {
  animation: bk-panel 0.24s var(--bk-ease) both;
}

@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes bk-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes bk-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes bk-panel {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-logo-in,
  .bk-float,
  .bk-loader::after,
  .bk-typing i,
  .bk-pulse,
  .bk-panel-in {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .bk-lift,
  .bk-lift:hover,
  .bk-lift:active {
    transition: none;
    transform: none;
  }
}