/* =========================
   Sizing + Theme Variables
   ========================= */
:root{
  --fab-height: 40px;
  --fab-px: 12px;
  --fab-gap: 6px;
  --fab-font: 700 13px/1 "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;

  /* Fallback gradient for FAB (used only if --ui-1/--ui-2 aren't defined by global theme) */
  --fab-bg1: #6f3cf0;
  --fab-bg2: #8a5bff;

  --fab-text: #ffffff;
  --fab-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Optional per-button themes (kept as overrides if you ever want to force a color) */
.ai-fab.theme-purple { --fab-bg1:#6f3cf0; --fab-bg2:#8a5bff; }
.ai-fab.theme-green  { --fab-bg1:#059669; --fab-bg2:#34d399; }
.ai-fab.theme-blue   { --fab-bg1:#2563eb; --fab-bg2:#60a5fa; }
.ai-fab.theme-pink   { --fab-bg1:#db2777; --fab-bg2:#f472b6; }

/* Sizes */
.ai-fab.size-xs { --fab-height: 34px; --fab-px: 10px; --fab-gap: 6px; --fab-font: 700 12px/1 "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; }
.ai-fab.size-sm { --fab-height: 40px; --fab-px: 12px; --fab-gap: 6px; --fab-font: 700 13px/1 "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; }
.ai-fab.size-md { --fab-height: 46px; --fab-px: 14px; --fab-gap: 8px;  --fab-font: 700 14px/1 "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; }

/* =========================
   Floating Action Button
   ========================= */
#ai-fab.ai-fab{
  /* Kill global button rules that make it full width */
  all: unset;

  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 9999;

  display: inline-flex !important;
  align-items: center;
  gap: var(--fab-gap);

  height: var(--fab-height);
  padding: 0 var(--fab-px);
  border-radius: 9999px;

  /* THEME-AWARE: prefer global --ui-1/--ui-2, else fall back to local --fab-bg1/--fab-bg2 */
  background: linear-gradient(135deg, var(--ui-1, var(--fab-bg1)), var(--ui-2, var(--fab-bg2)));
  color: var(--fab-text);
  box-shadow: var(--fab-shadow);
  cursor: pointer;

  /* ensure not full-width */
  width: auto !important;
  max-width: none !important;
  min-width: 44px;

  font: var(--fab-font);
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
}
#ai-fab.ai-fab, #ai-fab.ai-fab * { box-sizing: border-box; }

#ai-fab.ai-fab:hover{ transform: translateY(-1px); }
#ai-fab.ai-fab:active{ transform: translateY(0); }
#ai-fab.ai-fab:focus-visible{ outline: 3px solid rgba(255,255,255,.65); outline-offset: 2px; }

/* Icon / Photo */
#ai-fab .ai-fab__icon{
  display: inline-block;
  width: 18px; height: 18px;
  flex: 0 0 auto;
}
#ai-fab .ai-fab__avatar{
  width: 20px; height: 20px; aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}

/* Mobile tweak */
@media (max-width: 480px){
  #ai-fab.ai-fab{ padding: 0 10px; height: 34px; }
  /* optional: hide label on phones */
  /* #ai-fab.ai-fab span{ display:none; } */
}

/* =========================
   Modal
   ========================= */
.ai-modal[aria-hidden="true"]{ display:none; }
.ai-modal{ position: fixed; inset: 0; z-index: 9998; }
.ai-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.35); }

/* Keep dialog styling as-is; change only if you want it theme-aware too */
.ai-modal__dialog{
  position:absolute; right: 18px; bottom: calc(72px + env(safe-area-inset-bottom));
  width: min(420px, 94vw); height: min(70vh, 82vh);
  background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--fab-shadow);
  display:flex; flex-direction: column;
}
.ai-modal__close{
  position:absolute; right:8px; top:6px; z-index:2;
  border:0; background: rgba(0,0,0,.06); width:32px; height:32px; border-radius: 999px;
  font-size:20px; line-height:32px; cursor:pointer;
}
.ai-modal iframe{ width:100%; height:100%; border:0; display:block; }

@media (max-width: 640px){
  .ai-modal__dialog{
    right:0; left:0; margin:0 auto; width:100vw; height:88vh; bottom:0;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
}