/* ─────────────────────────────────────────────────────────────────
 * AgencyAI chat widget — docs.agencyg.de
 * A FiveM-themed, highly-animated, cleanly-crafted chat assistant.
 * All animations are GPU-accelerated (transform/opacity/filter) and
 * respect prefers-reduced-motion.
 * ──────────────────────────────────────────────────────────────── */

:root {
  --ai-gold:          #c9a227;
  --ai-gold-bright:   #e5c24a;
  --ai-gold-deep:     #7e6215;
  --ai-gold-dark:     #a07d1c;
  --ai-bg-0:          #07050a;
  --ai-bg-1:          #0b0905;
  --ai-bg-2:          #120f08;
  --ai-bg-3:          #1a1309;
  --ai-text:          #f5f0e0;
  --ai-text-muted:    #b7aa8a;
  --ai-text-dim:      #7c6f54;
  --ai-border:        rgba(201, 162, 39, 0.22);
  --ai-border-strong: rgba(201, 162, 39, 0.45);
  --ai-user-bg:       rgba(201, 162, 39, 0.10);
  --ai-bot-bg:        rgba(255, 255, 255, 0.025);
  --ai-shadow:        0 28px 80px -20px rgba(201, 162, 39, 0.35),
                      0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

/* ─────────────────────────────────────────────────────────────────
 * Launcher pill — floats, breathes, shimmers, emits orbiting sparks
 * ────────────────────────────────────────────────────────────── */

.aai-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  height: 58px;
  padding: 0 22px 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--ai-bg-2), var(--ai-bg-0)) padding-box,
    conic-gradient(from 0deg,
      var(--ai-gold-bright),
      var(--ai-gold),
      var(--ai-gold-deep),
      var(--ai-gold),
      var(--ai-gold-bright)) border-box;
  color: var(--ai-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  isolation: isolate;              /* clip children's ::before blends locally */
  box-shadow: var(--ai-shadow);
  transition: transform 0.35s cubic-bezier(.2,1.2,.3,1), box-shadow 0.4s;
  animation: aaiFloat 5.4s ease-in-out infinite,
             aaiBorderSpin 8s linear infinite;
  will-change: transform, box-shadow, background-position;
}

/* Glossy sheen that sweeps across the pill every 4 s */
.aai-launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 220, 130, 0.22) 48%,
    rgba(255, 220, 130, 0.35) 50%,
    rgba(255, 220, 130, 0.22) 52%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
  animation: aaiSheen 4.6s ease-in-out infinite;
}

/* Gold halo that pulses */
.aai-launcher::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(closest-side,
    rgba(201, 162, 39, 0.35),
    rgba(201, 162, 39, 0));
  filter: blur(12px);
  opacity: 0.7;
  animation: aaiHalo 3.5s ease-in-out infinite;
}

.aai-launcher-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%,
      #1f180c 0%,
      #0d0a04 70%,
      #050402 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1.5px rgba(201, 162, 39, 0.65),
    0 0 0 3px rgba(255, 215, 100, 0.1),
    0 6px 18px rgba(201, 162, 39, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  animation: aaiAvatarWobble 4.2s ease-in-out infinite;
  overflow: visible;
}
.aai-launcher-dot svg { width: 20px; height: 20px; }
.aai-brand-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}

/* 4 orbiting sparks around the avatar — continuous */
.aai-launcher-dot::before,
.aai-launcher-dot::after,
.aai-launcher::before ~ .aai-launcher-dot,
.aai-launcher-dot > .spark {
  pointer-events: none;
}
.aai-launcher-dot::before,
.aai-launcher-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--ai-gold-bright) 40%, transparent 85%);
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  box-shadow: 0 0 10px rgba(255, 220, 120, 0.9);
  transform-origin: center;
}
.aai-launcher-dot::before {
  animation: aaiOrbit1 3.1s linear infinite;
}
.aai-launcher-dot::after {
  animation: aaiOrbit2 3.7s linear infinite reverse;
  background: radial-gradient(circle, #fff 0%, var(--ai-gold) 45%, transparent 80%);
}

.aai-launcher-label {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
  padding-right: 4px;
}
.aai-launcher-label-main {
  background: linear-gradient(90deg,
    var(--ai-gold) 0%,
    var(--ai-gold-bright) 45%,
    #fff5d1 55%,
    var(--ai-gold-bright) 65%,
    var(--ai-gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  animation: aaiTextShimmer 3.8s linear infinite;
}
.aai-launcher-label-sub {
  color: var(--ai-text-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.aai-launcher:hover {
  transform: translateY(-4px) scale(1.04);
  animation-play-state: paused, running;
}
.aai-launcher:hover::after {
  opacity: 1;
  inset: -8px;
}
.aai-launcher:active {
  transform: translateY(-1px) scale(0.98);
}

.aai-launcher.is-open {
  animation: none;
  padding: 0;
  width: 58px;
  justify-content: center;
  transform: rotate(-8deg) scale(0.94);
}
.aai-launcher.is-open::before,
.aai-launcher.is-open::after { opacity: 0.3; }
.aai-launcher.is-open .aai-launcher-label { display: none; }

@keyframes aaiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes aaiBorderSpin {
  to { background-position: 0 0, 100% 0; }
}
@keyframes aaiSheen {
  0%, 30%  { background-position: 150% 0; }
  55%      { background-position: -150% 0; }
  100%     { background-position: -150% 0; }
}
@keyframes aaiHalo {
  0%, 100% { opacity: 0.55; inset: -4px; }
  50%      { opacity: 0.9;  inset: -10px; }
}
@keyframes aaiAvatarWobble {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes aaiOrbit1 {
  0%   { transform: rotate(0deg)   translateX(22px) rotate(0deg); opacity: 0.9; }
  50%  { opacity: 1; }
  100% { transform: rotate(360deg) translateX(22px) rotate(-360deg); opacity: 0.9; }
}
@keyframes aaiOrbit2 {
  0%   { transform: rotate(0deg)   translateX(18px) rotate(0deg); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); opacity: 0.6; }
}
@keyframes aaiTextShimmer {
  to { background-position: 200% 0; }
}

/* ─────────────────────────────────────────────────────────────────
 * Hint tooltip — first-visit nudge
 * ────────────────────────────────────────────────────────────── */
.aai-launcher-hint {
  position: fixed;
  right: 200px;
  bottom: 34px;
  z-index: 9997;
  background: linear-gradient(135deg, var(--ai-bg-3), var(--ai-bg-1));
  border: 1px solid var(--ai-border);
  color: var(--ai-text);
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Space Grotesk", "Inter", sans-serif;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.4s cubic-bezier(.2,1,.3,1), transform 0.4s cubic-bezier(.2,1,.3,1);
}
.aai-launcher-hint.show {
  opacity: 1;
  transform: translateX(0);
  animation: aaiHintWiggle 0.8s ease-out 0.4s 2;
}
.aai-launcher-hint::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: var(--ai-bg-3);
}
@keyframes aaiHintWiggle {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

/* ─────────────────────────────────────────────────────────────────
 * Panel
 * ────────────────────────────────────────────────────────────── */
.aai-panel {
  position: fixed;
  right: 22px;
  bottom: 100px;
  z-index: 9999;
  width: 420px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 140px);
  /* Always flex so close-animation plays; visibility + pointer-events are
     what actually gate interaction. */
  display: flex;
  visibility: hidden;
  pointer-events: none;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--ai-bg-1) 0%, var(--ai-bg-2) 100%) padding-box,
    conic-gradient(from 0deg,
      var(--ai-gold-bright),
      var(--ai-gold),
      var(--ai-gold-deep),
      var(--ai-gold),
      var(--ai-gold-bright)) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: var(--ai-shadow);
  overflow: hidden;
  opacity: 0;
  /* Origin is bottom-right, close animation collapses toward the launcher */
  transform-origin: calc(100% - 30px) calc(100% + 60px);
  transform: translate(40px, 60px) scale(0.25) rotate(-8deg);
  filter: blur(6px) brightness(0.7);
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--ai-text);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  perspective: 800px;
  animation: aaiBorderSpin 12s linear infinite;
  /* CLOSE timings — same easing + duration as OPEN, just played in reverse.
     The panel pops back into the launcher with the same spring feel it came
     out with, so opening and closing feel like one reversible gesture. */
  transition:
    opacity   0.32s cubic-bezier(0.4, 0, 0.2, 1)        0s,
    transform 0.50s cubic-bezier(0.68, -0.4, 0.32, 1.2) 0s,
    filter    0.32s ease-in                              0s,
    visibility 0s linear 0.50s;
}
.aai-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
  filter: blur(0) brightness(1);
  /* OPEN timings — snappy pop with gentle overshoot */
  transition:
    opacity   0.28s cubic-bezier(0.16, 1, 0.3, 1)       0s,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1)   0s,
    filter    0.32s ease-out                             0s,
    visibility 0s linear 0s;
}

/* Close animation = open animation reversed. No flash overlay, no launcher
   halo — just the panel popping back into the launcher with the same spring
   easing so the motion feels reversible. The exit shape/offset matches the
   default (.aai-panel) state which sits at translate(40px,60px) scale(0.25). */

/* Animated ambient glow behind the panel */
.aai-panel::after {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(201, 162, 39, 0.22), transparent 60%),
    radial-gradient(500px 300px at 90% 100%, rgba(229, 194, 74, 0.18), transparent 55%);
  filter: blur(30px);
  pointer-events: none;
  animation: aaiGlowPan 10s ease-in-out infinite alternate;
}
@keyframes aaiGlowPan {
  from { transform: translate(-6px, -6px); }
  to   { transform: translate(10px, 10px); }
}

/* Header */
.aai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ai-border);
  background: linear-gradient(
    180deg,
    rgba(201, 162, 39, 0.08) 0%,
    rgba(201, 162, 39, 0) 100%
  );
  position: relative;
}

.aai-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #1f180c 0%, #0d0a04 70%, #050402 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-gold-bright);
  font-weight: 800;
  font-size: 13.5px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1.5px rgba(201, 162, 39, 0.55),
    0 0 0 3px rgba(201, 162, 39, 0.12),
    0 4px 14px rgba(201, 162, 39, 0.3);
  overflow: visible;
}
.aai-avatar .aai-brand-img {
  animation: aaiAvatarWobble 5.5s ease-in-out infinite;
}
.aai-avatar::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(201, 162, 39, 0.3);
  animation: aaiRingSpin 14s linear infinite;
}
@keyframes aaiRingSpin { to { transform: rotate(360deg); } }

.aai-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aai-title-main {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ai-text);
  background: linear-gradient(90deg, var(--ai-text) 0%, var(--ai-gold-bright) 50%, var(--ai-text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aaiTextShimmer 5.5s linear infinite;
}
.aai-title-sub {
  font-size: 11px;
  color: var(--ai-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.aai-dot-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: aaiOnlinePulse 2s ease-in-out infinite;
}
@keyframes aaiOnlinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.aai-header-actions { display: flex; gap: 4px; }
.aai-icon-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ai-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.aai-icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ai-text);
  transform: rotate(6deg) scale(1.08);
}

/* Messages area */
.aai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  position: relative;
}
.aai-messages::-webkit-scrollbar { width: 6px; }
.aai-messages::-webkit-scrollbar-track { background: transparent; }
.aai-messages::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.25); border-radius: 3px; }

.aai-msg {
  max-width: 85%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  animation: aaiMsgIn 0.45s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes aaiMsgIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.aai-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(201,162,39,0.08));
  border: 1px solid var(--ai-border);
  color: var(--ai-text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px -4px rgba(201, 162, 39, 0.15);
}
.aai-msg-bot {
  align-self: flex-start;
  background: var(--ai-bot-bg);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ai-text);
  border-bottom-left-radius: 4px;
  position: relative;
}
.aai-msg-bot::before {
  content: "";
  position: absolute;
  left: -5px; bottom: -1px;
  width: 10px; height: 10px;
  background: var(--ai-bot-bg);
  border-left: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transform: rotate(-45deg);
  border-bottom-left-radius: 2px;
}
.aai-msg-bot p { margin: 0 0 8px 0; }
.aai-msg-bot p:last-child { margin-bottom: 0; }
.aai-msg-bot strong { color: var(--ai-gold-bright); font-weight: 700; }
.aai-msg-bot em { color: var(--ai-text-muted); font-style: italic; }
.aai-msg-bot a {
  color: var(--ai-gold-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
  transition: opacity 0.15s;
}
.aai-msg-bot a:hover { opacity: 0.82; }
.aai-msg-bot code {
  background: rgba(201,162,39,0.1);
  border: 1px solid var(--ai-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--ai-text);
}
.aai-msg-bot pre {
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--ai-border);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  margin: 8px 0;
}
.aai-msg-bot pre code { background: transparent; border: 0; padding: 0; }
.aai-msg-bot ul, .aai-msg-bot ol { padding-left: 20px; margin: 6px 0; }
.aai-msg-bot li { margin: 3px 0; }

/* Typing indicator while streaming */
.aai-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 0;
}
.aai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ai-gold-bright), var(--ai-gold-dark));
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
  animation: aaiTyping 1.1s infinite ease-in-out;
}
.aai-typing span:nth-child(2) { animation-delay: 0.15s; }
.aai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aaiTyping {
  0%, 60%, 100% { transform: translateY(0) scale(1);   opacity: 0.55; }
  30%           { transform: translateY(-5px) scale(1.15); opacity: 1; }
}

/* Blinking caret at end of currently streaming message */
.aai-msg-bot.is-streaming::after {
  content: "▎";
  color: var(--ai-gold-bright);
  margin-left: 2px;
  animation: aaiCaret 0.8s infinite;
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}
@keyframes aaiCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Suggestion chips */
.aai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 18px 6px;
}
.aai-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ai-border);
  background: rgba(201, 162, 39, 0.05);
  color: var(--ai-text-muted);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s cubic-bezier(.2,1.3,.3,1),
    box-shadow 0.2s;
  animation: aaiChipIn 0.4s cubic-bezier(.2,1.2,.3,1) both;
}
.aai-suggestions .aai-chip:nth-child(1) { animation-delay: 0.1s; }
.aai-suggestions .aai-chip:nth-child(2) { animation-delay: 0.15s; }
.aai-suggestions .aai-chip:nth-child(3) { animation-delay: 0.2s; }
.aai-suggestions .aai-chip:nth-child(4) { animation-delay: 0.25s; }
@keyframes aaiChipIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.aai-chip:hover {
  background: rgba(201, 162, 39, 0.18);
  color: var(--ai-gold-bright);
  border-color: var(--ai-gold);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px -6px rgba(201, 162, 39, 0.4);
}
.aai-chip:active { transform: translateY(0) scale(0.98); }

/* Input area */
.aai-input-wrap {
  padding: 12px;
  border-top: 1px solid var(--ai-border);
  background: rgba(0, 0, 0, 0.28);
  position: relative;
}
.aai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ai-border);
  border-radius: 14px;
  padding: 6px 6px 6px 12px;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.aai-input-row:focus-within {
  border-color: var(--ai-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}
.aai-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--ai-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  max-height: 120px;
  padding: 6px 0;
}
.aai-input::placeholder { color: var(--ai-text-dim); }
.aai-send {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--ai-gold-bright), var(--ai-gold-dark));
  color: #1a1309;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.18s cubic-bezier(.2,1.2,.3,1), box-shadow 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(201, 162, 39, 0.45);
}
.aai-send:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 8px 20px -6px rgba(201, 162, 39, 0.6);
}
.aai-send:active:not(:disabled) { transform: scale(0.92) rotate(0); }
.aai-send:disabled {
  background: rgba(201, 162, 39, 0.18);
  color: var(--ai-text-dim);
  cursor: not-allowed;
  box-shadow: none;
}

.aai-footer-hint {
  text-align: center;
  font-size: 10.5px;
  color: var(--ai-text-dim);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.aai-footer-hint a {
  color: var(--ai-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--ai-text-dim);
  transition: color 0.15s;
}
.aai-footer-hint a:hover { color: var(--ai-gold-bright); border-bottom-color: var(--ai-gold); }

/* Usage counter — sits below the footer hint, tiny, dev-vibes */
.aai-usage-counter {
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ai-text-dim);
  margin-top: 6px;
  transition: color 0.2s;
}
.aai-usage-counter.is-low {
  color: #ffbd2e;
}
.aai-usage-counter.is-locked {
  color: #ff6b5f;
  font-weight: 600;
}

/* "Daily limit reached" message bubble — a special bot message with a gold
   accent on the left edge so it reads as a UI notice, not a normal reply. */
.aai-msg.aai-msg-limit {
  align-self: stretch;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(201,162,39,0.12), rgba(201,162,39,0.04));
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-left: 3px solid var(--ai-gold);
  border-radius: 12px;
}
.aai-msg-limit strong { color: var(--ai-gold-bright); }

/* Disabled input state when daily limit is reached */
.aai-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.aai-input:disabled::placeholder {
  color: rgba(255, 107, 95, 0.7);
  font-style: italic;
}

/* Mobile */
@media (max-width: 640px) {
  .aai-panel {
    right: 0; bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .aai-launcher {
    right: 16px; bottom: 16px;
    height: 54px;
    padding: 0 18px 0 10px;
  }
  .aai-launcher-label-main { font-size: 13.5px; }
  .aai-launcher-hint { display: none; }
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .aai-launcher,
  .aai-launcher::before,
  .aai-launcher::after,
  .aai-launcher-dot,
  .aai-launcher-dot::before,
  .aai-launcher-dot::after,
  .aai-launcher-label-main,
  .aai-panel,
  .aai-panel::after,
  .aai-title-main,
  .aai-avatar::after,
  .aai-msg,
  .aai-typing span,
  .aai-msg-bot.is-streaming::after,
  .aai-chip {
    animation: none !important;
    transition: none !important;
  }
  .aai-panel.is-open { transform: none; }
}