/* ============================================================
   v6 OS module: BABI (2024–now) — orb, chat, /commands, flash
   ============================================================ */
#os-danai {
  position: absolute; inset: 0; display: none;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--a-acc, #5ee8d8) 7%, transparent), transparent 70%),
    var(--a-bg, #08090c);
  color: var(--a-ink, #e6ebee);
  font-family: var(--sans);
}
#os-danai.on { display: block; }

.ai-wrap {
  height: 100%; max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px, 3vh, 30px) 16px 12px;
}

/* orb */
.ai-orb {
  width: clamp(44px, 8vh, 64px); height: clamp(44px, 8vh, 64px); flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eafffb, var(--a-acc, #5ee8d8) 42%, #0d5a52 100%);
  box-shadow: 0 0 44px color-mix(in srgb, var(--a-acc, #5ee8d8) 45%, transparent);
  animation: orb-breathe 4s ease-in-out infinite;
}
.ai-orb.think { animation: orb-think .9s ease-in-out infinite; }
@keyframes orb-breathe { 50% { transform: scale(1.05); box-shadow: 0 0 60px color-mix(in srgb, var(--a-acc) 60%, transparent); } }
@keyframes orb-think { 50% { transform: scale(.93); filter: brightness(1.25); } }

.ai-id { text-align: center; margin: 10px 0 6px; }
.ai-id b { display: block; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.ai-id span { font-family: var(--mono); font-size: 10px; color: var(--a-dim, #a3abb5); letter-spacing: .08em; }

/* messages */
.ai-msgs { flex: 1; min-height: 0; width: 100%; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 9px; }
.ai-m {
  max-width: 86%; font-size: 14px; line-height: 1.6;
  padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: break-word;
}
.ai-m.bot { align-self: flex-start; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .08); border-bottom-left-radius: 5px; }
.ai-m.ai-photo { padding: 7px; max-width: 230px; }
.ai-photo img { display: block; width: 100%; border-radius: 12px; }
.ai-photo span { display: block; font: 10.5px/1.5 var(--mono); color: var(--a-dim); padding: 7px 3px 1px; }
.ai-m.me { align-self: flex-end; background: color-mix(in srgb, var(--a-acc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--a-acc) 30%, transparent); border-bottom-right-radius: 5px; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.ai-links a {
  color: var(--a-acc); text-decoration: none; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--a-acc) 40%, transparent);
  padding: 8px 14px; border-radius: 99px; min-height: 36px; display: inline-flex; align-items: center;
}
.ai-links a:hover { background: color-mix(in srgb, var(--a-acc) 12%, transparent); }

/* chips */
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; padding: 4px 0 10px; max-width: 100%; }
.ai-chips button {
  font-size: 12px; color: #c4cbd3;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px;
  padding: 8px 14px; min-height: 36px;
  transition: color .2s, border-color .2s;
}
.ai-chips button:hover { color: var(--a-ink); border-color: var(--a-acc); }

/* input row + /commands */
.ai-inwrap { position: relative; width: 100%; }
.ai-inrow {
  display: flex; gap: 8px; width: 100%; align-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  padding: 5px 5px 5px 6px;
}
.ai-inrow:focus-within { border-color: var(--a-acc); }
.ai-slash {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .22); color: var(--a-dim);
  font: 600 16px var(--mono);
  display: grid; place-items: center;
}
.ai-slash:hover { color: var(--a-acc); border-color: var(--a-acc); }
.ai-inrow input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--a-ink); font: inherit; font-size: 14px; padding: 8px 4px;
}
.ai-inrow button[type="submit"] {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--a-acc); color: #06211e; font-size: 16px; font-weight: 700;
}
.ai-cmds {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  background: #101318; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .5);
  max-height: 240px; overflow-y: auto; padding: 6px;
}
.ai-cmd {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 9px; min-height: 40px;
}
.ai-cmd b { font-family: var(--mono); font-size: 12.5px; color: var(--a-acc); }
.ai-cmd span { font-size: 11.5px; color: var(--a-dim); }
.ai-cmd.sel, .ai-cmd:hover { background: color-mix(in srgb, var(--a-acc) 13%, transparent); }
.ai-cmd-empty { padding: 12px; font-size: 12px; color: var(--a-dim); }

.ai-foot { font-family: var(--mono); font-size: 8.5px; color: #8f97a1; letter-spacing: .06em; padding: 8px 0 2px; text-align: center; }
.ai-foot a { color: #b3bbc5; text-decoration: underline; text-underline-offset: 2px; }
.ai-foot a:hover { color: var(--a-acc); }
.ai-foot.ai-legal { padding-bottom: 0; }

/* the men-in-black flash */
.ai-flash { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.ai-flash i {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 48%, #fff, rgba(255, 255, 255, .92) 22%, transparent 62%);
  opacity: 0;
}
.ai-flash b {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #fff; opacity: 0;
  box-shadow: 0 0 40px #fff, inset 0 0 24px rgba(255, 255, 255, .8);
}
.ai-flash.go i { animation: mib-burst .8s ease-out forwards; }
.ai-flash.go b { animation: mib-ring .8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes mib-burst { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mib-ring { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(16); } }

@media (max-height: 560px) {
  .ai-orb { display: none; }
  .ai-id { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-orb.think, .ai-flash.go i, .ai-flash.go b { animation: none; }
}


/* ============================================================
   v7 additions — live activity ticker
   ============================================================ */
.ai-activity {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font: 11px var(--mono); color: var(--a-dim);
  margin: 2px 0 4px; min-height: 18px;
}
.ai-activity i {
  width: 7px; height: 7px; border-radius: 50%; background: #7fb069; flex: none;
  animation: ai-live 2s ease-in-out infinite;
}
@keyframes ai-live { 50% { opacity: .35; box-shadow: 0 0 0 4px color-mix(in srgb, #7fb069 18%, transparent); } }
.ai-activity span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(560px, 84vw); }
.ai-activity span.in { animation: ai-act-in .5s ease; }
@keyframes ai-act-in { from { opacity: 0; transform: translateY(4px); } }