/* awe-concierge.css — themeable styles for the AWE Concierge widget.
   Every color is a CSS var with a sensible fallback, so it inherits a host site's theme.
   Override any of these on :root (or on .ac) to match your brand:
     --ac-bg --ac-panel --ac-ink --ac-mut --ac-accent --ac-accent-ink --ac-line --ac-radius --ac-shadow */
.ac, #conciergePage, #askPage {
  --ac-bg: var(--panel, #fff);
  --ac-panel: var(--card, #f4f5f7);
  --ac-ink: var(--ink, #16181d);
  --ac-mut: var(--mut, #6b7280);
  --ac-accent: var(--accent, #2563eb);
  --ac-accent-ink: var(--accent-ink, #fff);
  --ac-line: var(--line, rgba(0,0,0,.12));
  --ac-radius: 14px;
  --ac-shadow: 0 24px 60px -24px rgba(0,0,0,.45);
  color: var(--ac-ink);
  font-family: inherit;
  box-sizing: border-box;
}
.ac *, #conciergePage *, #askPage * { box-sizing: border-box; }

/* inline / full-page mount */
#conciergePage, #askPage { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; border: 1px solid var(--ac-line); border-radius: var(--ac-radius); overflow: hidden; background: var(--ac-bg); min-height: 420px; }

/* drawer */
.ac-drawer { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; width: min(400px, calc(100vw - 24px)); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--ac-bg); border: 1px solid var(--ac-line); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.ac-drawer.ac-open { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ac-drawer { transition: none; } }

/* header */
.ac-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ac-line); color: var(--ac-accent); }
.ac-h .ac-hd { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ac-h b { color: var(--ac-ink); font-size: 1rem; }
.ac-h small { color: var(--ac-mut); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.ac-x { margin-left: auto; background: none; border: 0; color: var(--ac-mut); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ac-x:hover { color: var(--ac-ink); }

/* log */
.ac-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ac-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .95rem; line-height: 1.5; }
.ac-msg p { margin: 0 0 .5em; } .ac-msg p:last-child { margin-bottom: 0; }
.ac-msg ul { margin: .3em 0; padding-left: 1.1em; } .ac-msg li { margin: .2em 0; }
.ac-msg a { color: var(--ac-accent); }
.ac-u { align-self: flex-end; background: var(--ac-accent); color: var(--ac-accent-ink); border-bottom-right-radius: 4px; }
.ac-u a { color: var(--ac-accent-ink); }
.ac-a { align-self: flex-start; background: var(--ac-panel); color: var(--ac-ink); border-bottom-left-radius: 4px; }
.ac-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ac-src a { font-size: .78rem; padding: 4px 9px; border: 1px solid var(--ac-line); border-radius: 999px; color: var(--ac-accent); text-decoration: none; }
.ac-src a:hover { border-color: var(--ac-accent); }
.ac-typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--ac-mut); animation: ac-b 1s infinite; }
.ac-typing i:nth-child(2) { animation-delay: .15s; } .ac-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ac-b { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* chips */
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 4px; }
.ac-chip { background: transparent; border: 1px solid var(--ac-line); color: var(--ac-ink); border-radius: 999px; padding: 6px 12px; font-size: .8rem; cursor: pointer; font-family: inherit; }
.ac-chip:hover { border-color: var(--ac-accent); color: var(--ac-accent); }

/* form */
.ac-f { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ac-line); }
.ac-f input { flex: 1; min-width: 0; background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: 10px; padding: 11px 13px; color: var(--ac-ink); font: inherit; }
.ac-f input:focus { outline: 2px solid var(--ac-accent); border-color: var(--ac-accent); }
.ac-f button { background: var(--ac-accent); color: var(--ac-accent-ink); border: 0; border-radius: 10px; padding: 0 18px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ac-f button:hover { filter: brightness(1.06); }
.ac-note { margin: 0; padding: 0 14px 12px; color: var(--ac-mut); font-size: .68rem; line-height: 1.4; }

/* default floating launcher styling if the host uses .ac-launch */
.ac-launch { position: fixed; right: 16px; bottom: 16px; z-index: 2147482000; background: var(--accent, #2563eb); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.ac-launch:hover { filter: brightness(1.06); }