/* Taabi TMS — UAE · build assistant.
 *
 * A round button pinned to the bottom-right corner. At rest it sits quietly;
 * on hover the glyph turns, the halo pulses outward and the disc lifts. Clicking
 * opens the panel. The spinner honours prefers-reduced-motion.
 */

#aiWrap {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;                 /* above the app, below modals (overlay uses 1000+) */
  font-family: var(--font);
}

/* ------------------------------------------------------------- the button --- */
#aiFab {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
#aiFab .disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-600) 55%, #0d2b52 100%);
  box-shadow: 0 8px 22px rgba(13, 43, 82, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .28s cubic-bezier(.2, .8, .25, 1), box-shadow .28s ease;
}
#aiFab svg { width: 27px; height: 27px; display: block; }
#aiFab .spark,
#aiFab .ring,
#aiFab .ring2 { transform-origin: 12px 12px; }

/* halo that swells out on hover */
#aiFab .glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-tint) 0%, rgba(0, 0, 0, 0) 68%);
  opacity: 0;
  transform: scale(1);
  transition: opacity .3s ease;
  pointer-events: none;
}

#aiFab:hover .disc,
#aiFab:focus-visible .disc {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(13, 43, 82, .42), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#aiFab:hover .glow,
#aiFab:focus-visible .glow {
  opacity: 1;
  animation: ai-halo 2.2s ease-out infinite;
}
/* the hover animation: the whole glyph turns, the arcs chase each other */
#aiFab:hover svg,
#aiFab:focus-visible svg { animation: ai-turn 2.4s linear infinite; }
#aiFab:hover .spark,
#aiFab:focus-visible .spark { animation: ai-twinkle 1.4s ease-in-out infinite; }
#aiFab:hover .ring,
#aiFab:focus-visible .ring { animation: ai-turn 1.6s linear infinite reverse; }
#aiFab:hover .ring2,
#aiFab:focus-visible .ring2 { animation: ai-turn 2.6s linear infinite; }

#aiFab:active .disc { transform: translateY(-1px) scale(1.02); }
#aiFab.open .disc { background: linear-gradient(140deg, var(--primary-600), #0d2b52); }
#aiFab.open svg { animation: ai-turn 5s linear infinite; }

@keyframes ai-turn {
  to { transform: rotate(360deg); }
}
@keyframes ai-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .55; transform: scale(.82) rotate(28deg); }
}
@keyframes ai-halo {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* -------------------------------------------------------------- the panel --- */
#aiPanel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: min(430px, calc(100vw - 40px));
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13, 43, 82, .26);
  overflow: hidden;
  animation: ai-rise .22s cubic-bezier(.2, .8, .25, 1);
}
#aiPanel[hidden] { display: none; }
@keyframes ai-rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

#aiPanel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
#aiPanel header .t { font-weight: 700; font-size: 13.5px; color: var(--ink); }
#aiPanel header .t::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  vertical-align: middle;
}
#aiClose {
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
#aiClose:hover { color: var(--ink); background: var(--border); }

#aiLog {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 120px;
}
.msg {
  max-width: 92%;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.msg.ai { align-self: flex-start; background: var(--panel); color: var(--ink-2); border: 1px solid var(--border); border-bottom-left-radius: 3px; }

.files { display: flex; flex-wrap: wrap; gap: 5px; align-self: flex-start; margin: -3px 0 4px; }
.files .f {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
}
.files .f.new { border-color: var(--good); color: var(--good); }
.files .f.bad { border-color: var(--bad); color: var(--bad); }

.composer { border-top: 1px solid var(--border); padding: 11px 12px; background: var(--card); }
#aiInput {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 48px;
  max-height: 160px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
#aiInput:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); background: var(--card); }
.composer .row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.composer .hint { flex: 1; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.composer .ask,
.composer .undo {
  padding: 8px 15px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.composer .ask { color: #fff; background: var(--primary); border: 1px solid var(--primary); }
.composer .ask:hover:not(:disabled) { background: var(--primary-600); border-color: var(--primary-600); }
.composer .ask:disabled { opacity: .6; cursor: default; }
.composer .undo { color: var(--ink-2); background: transparent; border: 1px solid var(--border); }
.composer .undo:hover { border-color: var(--primary); color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  #aiFab:hover svg, #aiFab:focus-visible svg,
  #aiFab:hover .spark, #aiFab:focus-visible .spark,
  #aiFab:hover .ring, #aiFab:focus-visible .ring,
  #aiFab:hover .ring2, #aiFab:focus-visible .ring2,
  #aiFab.open svg, #aiFab:hover .glow, #aiFab:focus-visible .glow { animation: none; }
  #aiPanel { animation: none; }
}

/* while signing in there is no workspace, so no assistant */
.loginmode #aiWrap { display: none !important; }

@media (max-width: 640px) {
  #aiWrap { right: 16px; bottom: 16px; }
  #aiPanel { bottom: 64px; }
}

/* ===== agent run console ===== */
#aiCtx {
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--ink-3, #6b7280);
  background: var(--surface-2, #f8fafc);
  border-bottom: 1px solid var(--border);
}
.run {
  margin: 0 14px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
}
.runhead {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  font-size: 11.5px; font-weight: 600;
  color: #cbd5e1;
  background: #111c33;
  border-bottom: 1px solid #1e293b;
}
.runhead .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex: none;
  animation: aiPulse 1.3s ease-in-out infinite;
}
.run.bad .runhead .dot { background: #ef4444; animation: none; }
#aiRunCount { margin-left: auto; color: #94a3b8; font-weight: 500; }
#aiRunOut {
  margin: 0; padding: 9px 11px;
  max-height: 190px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5;
  color: #a7f3d0;
  white-space: pre-wrap; word-break: break-word;
}
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ===== deploy bar ===== */
.deploybar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 10px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 10px;
}
.deploybar .done { font-size: 12.5px; font-weight: 600; color: #166534; }
.deploybar .deploy {
  margin-left: auto;
  padding: 8px 15px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: #fff; background: var(--primary); border: 1px solid var(--primary);
  border-radius: 8px; cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.deploybar .deploy:hover:not(:disabled) { background: var(--primary-600); border-color: var(--primary-600); }
.deploybar .deploy:disabled { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .runhead .dot { animation: none; }
}