/* =========================
   RAM Chatbot — compact CSS
   ========================= */

/* Base container */
#ram-ai-chatbot-container{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  font-family:"acumin-pro",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Chatbox */
#ram-ai-chatbox{
  width:380px; height:520px; background:#fff; border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
#ram-ai-chatbox.hidden{ display:none; }

/* Header */
.ram-ai-header{
  display:flex; align-items:center; padding:12px 16px; color:#fff;
  background:linear-gradient(135deg,#003366 0%,#0055A4 100%);
}
.ram-ai-header span,
.ram-ai-header .ram-logo{ display:none !important; }

#ram-ai-close{
  margin-left:auto; background:transparent; border:0; color:#fff;
  font-size:1.2rem; cursor:pointer;
}
#ram-ai-close:hover{ opacity:.85; }

/* Centered support bar (Donate + Email) */
.ram-ai-header .ram-supportbar{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px;
}

/* Support pills — base + hover (no underline; red outline on hover) */
.ram-ai-header .ram-supportbar .ram-support-pill,
.ram-ai-header .ram-supportbar .ram-donate-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:4px;
  border:2px solid rgba(255,255,255,.75);
  background:transparent !important; color:#fff;
  font-weight:700; font-size:13px; line-height:1.2;
  text-decoration:none !important;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.ram-ai-header .ram-supportbar .ram-support-pill:hover,
.ram-ai-header .ram-supportbar .ram-donate-pill:hover,
.ram-ai-header .ram-supportbar .ram-support-pill:focus-visible,
.ram-ai-header .ram-supportbar .ram-donate-pill:focus-visible{
  border-color:#e21d3d; box-shadow:0 0 0 2px rgba(226,29,61,.25);
  transform:translateY(-1px);
}

/* Kill any header-scoped disclaimer (we moved it below input) */
.ram-ai-header .ram-support-note{ display:none !important; }

/* Messages list */
#ram-ai-chatbox-messages{
  flex:1; padding:var(--supportbar-h,12px) 16px 10px !important;
  background:#F7F9FC; overflow-y:auto; display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}

/* Bubbles */
.ram-msg-user,.ram-msg-ai{ animation:ram-pop .18s ease both; }
@keyframes ram-pop{ from{ transform:translateY(2px); opacity:0; } to{ transform:none; opacity:1; } }

.ram-msg-user,
.ram-msg-ai{
  padding:8px 12px; max-width:85%; line-height:1.45;
}
.ram-msg-user{
  align-self:flex-end; background:#0055A4; color:#fff;
  border-radius:16px 16px 0 16px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.ram-msg-ai{
  align-self:flex-start; background:#fff; color:#111;
  border-radius:16px 16px 16px 0; border:1px solid #eef2f8; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ram-msg-ai a{ color:#0055A4; text-decoration:underline; }
.ram-msg-user time,
.ram-msg-ai time{ display:block; font-size:.72rem; margin-top:6px; }
.ram-msg-user time{ color:#8aa9c9; text-align:right; }
.ram-msg-ai   time{ color:#98a2b3; text-align:left; }

/* Home card + chips */
.ram-home{ padding:10px 12px; background:#fff; border-radius:12px; border:1px solid #eef2f8; box-shadow:0 1px 6px rgba(0,0,0,.05); }
.ram-home-head{ font-size:14px; line-height:1.3; font-weight:600; margin-bottom:12px; }
.ram-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.ram-chip{ background:#111; color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border:0; border-radius:999px; cursor:pointer; }
.ram-chip:hover{ opacity:.9; }
.ram-chip:focus-visible{ outline:2px solid #9aa9c6; outline-offset:2px; }

/* Input row */
#ram-ai-chatbox-form{
  display:flex; align-items:center; gap:10px; padding:12px; background:#fff; border-top:1px solid #e8eef6;
}
#ram-ai-input{
  flex:1; padding:10px 12px; border:1px solid #dde6f1; border-radius:999px; font-size:14px; background:#f5f7fb;
}
#ram-ai-input:focus{
  outline:none; border-color:#b9cee6; background:#fff; box-shadow:0 0 0 3px rgba(0,85,164,.12);
}
#ram-ai-submit{
  width:46px; height:46px; min-width:46px; border-radius:999px; background:#0055A4; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:0; line-height:0;
}
#ram-ai-submit::before{
  content:""; width:10px; height:10px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg); margin-left:2px;
}
#ram-ai-submit:hover{ background:#003e7a; }

/* Disclaimer under input */
#ram-ai-chatbox > .ram-support-note{
  padding:10px 14px 12px; background:#F8FAFC; border-top:1px solid #e8eef6;
  color:#475569; font-size:9px; line-height:1.35; text-align:center;
}

/* Scrollbar (optional) */
#ram-ai-chatbox-messages::-webkit-scrollbar{ width:10px; }
#ram-ai-chatbox-messages::-webkit-scrollbar-thumb{ background:#d6deea; border-radius:8px; }

/* Mobile */
@media (max-width:420px){
  #ram-ai-chatbox{ width:92vw; height:70vh; }
}

/* Floating toggle button */
#ram-ai-toggle.ram-ai-chat-toggle{
  position:fixed; right:20px; bottom:20px; width:64px; height:64px; border-radius:50%; border:0;
  background:#000 url("https://www.ramusa.org/wp-content/uploads/chat-art-toggle.svg") no-repeat center / 54px 54px;
  box-shadow:0 4px 12px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, transform .2s; z-index:10000;
}
#ram-ai-toggle.ram-ai-chat-toggle:hover{ background-color:#222; transform:translateY(-2px); }
#ram-ai-toggle.ram-ai-chat-toggle img{ display:none !important; }

/* Role chips */
.ram-role-inline .ram-role-chip{
  background:#111; color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border:0; border-radius:999px; cursor:pointer;
}
.ram-role-inline .ram-role-chip:hover{ opacity:.9; }
/* Mobile: raise the floating toggle so it clears other popups */
@media (max-width: 480px){
  #ram-ai-toggle.ram-ai-chat-toggle{
    /* 20px original + 120px lift (+ iOS safe-area if present) */
    bottom: calc(20px + 120px + env(safe-area-inset-bottom, 0px));
  }
}
/* Support buttons: side-by-side by default, stack on mobile */
.ram-ai-header .ram-supportbar,
.ram-ai-header .ram-supportbar .ram-support-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;   /* desktop/tablet: horizontal */
  gap:14px;             /* space between Donate & Support */
}

/* Ensure anchors don't fight the layout */
.ram-ai-header .ram-supportbar a{ display:flex; }

/* Mobile: stack vertically (optionally make them full-width) */
@media (max-width:480px){
  .ram-ai-header .ram-supportbar,
  .ram-ai-header .ram-supportbar .ram-support-inner{
    flex-direction:column;  /* stack */
    gap:10px;               /* vertical spacing */
  }
  /* Optional: uncomment for full-width pills on mobile
  .ram-ai-header .ram-supportbar a{
    width:100%;
    justify-content:center;
  }
  */
}